/* Checkout: shipping form, review, and confirmation. Field/fieldset/choice
   styling is inherited from 12_account_shell.css / 13_account_forms.css —
   this file covers what's unique to checkout. */

.checkout-shipping-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-gray-4);
    border-radius: var(--radius-2);
  }

  label {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
  }
}

.checkout-shipping-price { font-weight: 700; }

.checkout-shipping-note {
  margin-top: var(--space-2);
  color: var(--color-gray-20);
  font-size: var(--font-size-2);
  line-height: var(--line-height-body);
}

.checkout-review-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.checkout-review-section {
  padding-bottom: var(--space-5);

  &:last-child { padding-bottom: 0; border-bottom: 0; }

  h2 { margin: 0 0 var(--space-2); font-size: var(--font-size-5); font-weight: 700; }

  address { font-style: normal; line-height: var(--line-height-body-loose); }
}

/* Bag lines on the left, order totals in a narrow column on the right, so the
   review panel stays short instead of stacking the two full-width. */
.checkout-review-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  align-items: start;
  gap: var(--space-6);

  .checkout-review-totals {
    padding: var(--space-4);
    border: 1px solid var(--color-gray-4);
    border-radius: var(--radius-2);
  }
}

.checkout-review-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);

  h2 { margin: 0; }

  + .checkout-review-columns { margin-top: var(--space-4); }
}

/* One labelled block within a review column — "Ship To", "Shipping Method". */
.checkout-review-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  h3 {
    margin: 0;
    color: var(--color-gray-20);
    font-size: var(--font-size-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  address { font-style: normal; line-height: var(--line-height-body-loose); }

  p { margin: 0; }
}

.checkout-review-contact { line-height: var(--line-height-body-loose); }

.checkout-review-shipping-method { margin-top: var(--space-2); color: var(--color-gray-20); }

.checkout-review-totals {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.checkout-review-totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.checkout-review-total {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gray-4);
  font-size: var(--font-size-5);
  font-weight: 700;
}

/* Accepted-card logos above the card number. The brand detected from the
   number stays lit while the rest dim (see checkout_payment_controller.js). */
.payment-cards {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    transition: opacity var(--transition-fast);
    &.is-dim { opacity: 0.2; }
  }

  img { display: block; width: 48px; height: 31px; }
}

/* Expiration month + year sharing one label. */
.field-inline {
  display: flex;
  gap: var(--space-3);

  > * { flex: 1; min-width: 0; }
}

.checkout-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-7);
  text-align: center;
}

.checkout-confirmation-note {
  max-width: 40ch;
  color: var(--color-gray-20);
  line-height: var(--line-height-body);
}

.checkout-confirmation-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin: 0;

  dt {
    margin-bottom: var(--space-1);
    color: var(--color-gray-20);
    font-size: var(--font-size-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  dd { margin: 0; font-weight: 700; }
}

/* The shipping and payment/billing columns are already narrow, so their fields
   keep the full width of their own column instead of halving the way
   13_account_forms halves a single full-width form's fields at this size. */
@media (max-width: 52rem) {
  .checkout-payment-columns .field[class*="span-"],
  .checkout-shipping-columns .field[class*="span-"] { grid-column: span 12; }
  .checkout-review-columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

@media (max-width: 34rem) {
  .checkout-shipping-options label { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .checkout-review-heading { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}