/* ═══════════════════════════════════════════════════════════════
   Alta Web — checkout.css
   Styles for: Cart, Checkout (Address/Payment/Review), Confirmation
═══════════════════════════════════════════════════════════════ */

/* ── ══════════════════════════════════════════════════════
   CART PAGE
══════════════════════════════════════════════════════ ── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: flex-start;
  padding-top: 24px;
  padding-bottom: 60px;
}

.cart-panel-title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cart-panel-count { font-size: 13px; color: var(--subtle); font-weight: 400; }

/* Cart items table */
.cart-table { width: 100%; }
.cart-table-head {
  display: grid;
  /* columns + gap must stay in sync with .cart-item or the labels drift */
  grid-template-columns: 1fr 120px 120px 80px;
  gap: 12px;
  align-items: center;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--subtle);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.cart-item {
  display: grid;
  grid-template-columns: 1fr 120px 120px 80px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 12px;
}
.cart-item-info { display: flex; gap: 16px; align-items: flex-start; }
.cart-select-all {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.cart-select { cursor: pointer; align-self: center; }
.cart-item.unselected .cart-item-img,
.cart-item.unselected .cart-item-name,
.cart-item.unselected .cart-item-meta,
.cart-item.unselected .cart-item-price-col,
.cart-item.unselected .cart-total-price { opacity: 0.45; }
.cart-item-img {
  width: 80px;
  height: 90px;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  flex-shrink: 0;
  overflow: hidden;
}
.cart-item-img-bg { width: 100%; height: 100%; }
.cart-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 4px;
  line-height: 1.35;
}
.cart-item-meta { font-size: 12px; color: var(--subtle); margin-bottom: 10px; }
.cart-item-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cart-item-action {
  font-size: 12px;
  color: var(--subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
.cart-item-action:hover { color: var(--primary-text); }
.cart-item-action:hover svg path { stroke: var(--blue); }

.cart-item-price-col { text-align: center; }
.cart-unit-price { font-size: 13.5px; color: var(--mid); }
.cart-total-price {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  text-align: center;
}
.cart-remove-col {
  display: flex;
  justify-content: center;
}
.cart-remove-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--faint);
  transition: all 0.15s;
}
.cart-remove-btn:hover { background: var(--error-lt); color: var(--error); }

/* Coupon row */
.coupon-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
/* The last cart item already draws a bottom border — don't double it up */
.cart-item + .coupon-row,
.cart-items + .coupon-row {
  border-top: none;
  margin-top: 0;
}
.coupon-input-wrap {
  display: flex;
  flex: 1;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s;
}
.coupon-input-wrap:focus-within { border-color: var(--primary-text); }
.coupon-icon {
  padding: 0 12px;
  color: var(--subtle);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.coupon-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 13.5px;
  color: var(--dark);
  padding: 11px 0;
  background: none;
  font-family: var(--font-head);
  letter-spacing: 1px;
}
.coupon-applied { color: var(--success); font-size: 12px; font-weight: 600; padding: 0 12px; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Order summary panel */
.order-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.order-summary-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
}
.order-summary-body { padding: 16px 20px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--mid);
}
.summary-row:first-child { padding-top: 0; }
.summary-row strong { color: var(--dark); }
.summary-row.total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
}
.summary-row.saving { color: var(--success); font-weight: 600; }
.order-summary-foot { padding: 0 20px 20px; }
.checkout-btn {
  width: 100%;
  height: 52px;
  background: var(--primary-grad);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: filter 0.15s;
  margin-bottom: 12px;
}
.checkout-btn:hover { filter: brightness(0.90); }
.checkout-btn.disabled,
.checkout-btn.disabled:hover {
  background: var(--border);
  color: var(--faint);
  cursor: not-allowed;
}
.checkout-btn.disabled svg path,
.checkout-btn.disabled svg rect { stroke: var(--faint); }
.checkout-btn.disabled svg circle { fill: var(--faint); }
.checkout-hint {
  font-size: 12px;
  color: var(--error);
  text-align: center;
  margin-top: 8px;
}
.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--subtle);
}

/* ── ══════════════════════════════════════════════════════
   CHECKOUT STEPPER
══════════════════════════════════════════════════════ ── */
.checkout-page-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: flex-start;
  padding-top: 28px;
  padding-bottom: 60px;
}

.checkout-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.ck-step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ck-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--subtle);
  flex-shrink: 0;
  transition: all 0.2s;
}
.ck-node.active { border-color: var(--blue); background: var(--blue); color: var(--on-primary); }
.ck-node.done { border-color: var(--success); background: var(--success); color: white; }
.ck-step-info {}
.ck-step-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--subtle);
  transition: color 0.2s;
}
.ck-step-label.active { color: var(--primary-text); }
.ck-step-label.done { color: var(--success); }
.ck-step-sub { font-size: 11px; color: var(--faint); }
.ck-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 12px;
  transition: background 0.2s;
}
.ck-line.done { background: var(--success); }

/* Checkout form section headers */
.ck-section-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 16px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ck-section-title:first-child { margin-top: 0; }
.ck-section-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-lt);
  color: var(--primary-text);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Address card selection */
.address-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.address-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.address-card.selected { border-color: var(--primary-text); background: var(--blue-lt); }
.address-card-type {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--subtle);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.address-card.selected .address-card-type { color: var(--primary-text); }
.address-card-default {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--blue-lt);
  color: var(--primary-text);
}
.address-card-name { font-size: 13.5px; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
.address-card-text { font-size: 12.5px; color: var(--mid); line-height: 1.55; }
.address-card-phone { font-size: 12px; color: var(--subtle); margin-top: 6px; }
.address-card-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11.5px;
  color: var(--primary-text);
  font-weight: 600;
  cursor: pointer;
}
.address-select-dot {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.address-card.selected .address-select-dot {
  border-color: var(--blue);
  background: var(--blue);
}
.add-address-card {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-text);
  transition: all 0.15s;
  min-height: 110px;
}
.add-address-card:hover { border-color: var(--primary-text); background: var(--blue-lt); }

/* Delivery options */
.delivery-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.delivery-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.delivery-option.selected { border-color: var(--primary-text); background: var(--blue-lt); }
.delivery-option-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.delivery-option.selected .delivery-option-icon { background: rgba(47,107,85,0.2); }
.delivery-option-info { flex: 1; }
.delivery-option-name { font-size: 13.5px; font-weight: 700; color: var(--dark); }
.delivery-option-date { font-size: 12px; color: var(--subtle); margin-top: 2px; }
.delivery-option-price {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}
.delivery-option-price.free { color: var(--success); }

/* Payment methods */
.payment-methods { display: flex; flex-direction: column; gap: 12px; }
.payment-method {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}
.payment-method.selected { border-color: var(--primary-text); }
.payment-method-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.payment-method-icon {
  width: 38px;
  height: 26px;
  border-radius: 5px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.payment-method-name { font-size: 13.5px; font-weight: 600; color: var(--dark); flex: 1; }
.payment-method-body {
  padding: 16px 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.payment-method-body.hidden { display: none; }

/* Card fields grid */
.card-form { display: flex; flex-direction: column; gap: 14px; }
.card-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-number-input {
  letter-spacing: 3px;
  font-family: var(--font-head);
  font-size: 15px;
}
.save-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}
.save-card-label { font-size: 13px; color: var(--dark); }

/* ── Order Review (Step 3) ─────────────────────────────────── */
.review-items-list { margin-bottom: 24px; }
.review-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.review-item:last-child { border-bottom: none; }
.review-item-img {
  width: 60px;
  height: 68px;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  flex-shrink: 0;
}
.review-item-img-bg { width: 100%; height: 100%; }
.review-item-name { font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 3px; }
.review-item-meta { font-size: 12px; color: var(--subtle); }
.review-item-price {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  margin-left: auto;
  flex-shrink: 0;
}

.ck-summary-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
}
.ck-summary-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ck-summary-section-title { font-size: 13px; font-weight: 700; color: var(--dark); }
.ck-summary-section-edit { font-size: 12px; color: var(--primary-text); font-weight: 600; cursor: pointer; }
.ck-summary-text { font-size: 13px; color: var(--mid); line-height: 1.55; }

/* ── ══════════════════════════════════════════════════════
   ORDER CONFIRMATION
══════════════════════════════════════════════════════ ── */
.confirmation-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 32px;
  max-width: 680px;
  margin: 0 auto;
}
.confirm-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 0 0 16px var(--success-lt);
}
.confirm-title {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 10px;
}
.confirm-subtitle { font-size: 15px; color: var(--subtle); margin-bottom: 32px; line-height: 1.6; }

.confirm-order-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  text-align: left;
  margin-bottom: 24px;
}
.confirm-order-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.confirm-order-row:last-child { border-bottom: none; }
.confirm-order-lbl { color: var(--subtle); }
.confirm-order-val { font-weight: 700; color: var(--dark); }

.confirm-thumbs {
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
}
.confirm-thumb {
  width: 58px;
  height: 66px;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.confirm-thumb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--subtle);
  background: var(--surface);
}

.confirm-actions { display: flex; gap: 12px; width: 100%; }
.confirm-actions .btn { flex: 1; height: 48px; font-size: 14px; }

/* ── Address add / edit form ──────────────────────────────
   One panel serves both jobs — it opens under the cards with the
   fields blank for a new address, or filled in from the card whose
   Edit was clicked. Keeping it inline rather than in a modal means
   the cards stay visible while you type, which is the whole point
   when the thing you are editing is one of them. */
.addr-form {
  border: 1.5px solid var(--primary-text);
  border-radius: var(--radius-md);
  background: var(--white);
  margin-bottom: 16px;
  overflow: hidden;
}
.addr-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}
.addr-form-close {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--subtle);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.addr-form-close:hover { background: var(--input-bg); color: var(--dark); }

.addr-form-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.addr-form-grid .span-2 { grid-column: 1 / -1; }

.addr-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.addr-form-actions { display: flex; align-items: center; gap: 10px; }
.addr-form-msg { font-size: 12px; color: var(--error); }
.addr-form-msg.ok { color: var(--success); }

/* The cards and options are divs standing in for radios, so the
   focus ring has to be drawn on them by hand. */
.address-card:focus-visible,
.add-address-card:focus-visible,
.delivery-option:focus-visible,
.address-card-edit:focus-visible,
.addr-form-close:focus-visible,
.form-check:focus-visible {
  outline: 2px solid var(--warn);
  outline-offset: 2px;
}

/* Something has to be the default, so the box can't be cleared from
   the address that currently is one — it dims rather than pretending
   to be clickable. */
.addr-form-foot .form-check.is-locked {
  cursor: default;
  opacity: 0.6;
}

/* ── ══════════════════════════════════════════════════════
   RESPONSIVE — CART & CHECKOUT

   Same two breakpoints as common.css: 1024px folds the order summary
   under the content it flanks, 640px stops the cart pretending to be
   a table.
══════════════════════════════════════════════════════ ── */

/*
  "Ship to" beside "Delivery" on the review step. This was an inline
  `display:flex` on the element, which no media query could override —
  hence the class.
*/
.ck-ship-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.ck-ship-row > * { min-width: 0; }

@media (max-width: 1024px) {
  /* The summary sits beside the cart on desktop. Under it here, but
     before the footer, so "what am I paying" is the last thing read
     before the checkout button. */
  .cart-layout,
  .checkout-page-layout { grid-template-columns: 1fr; gap: 22px; }
  /* Grid items default to `min-width: auto` and will not shrink below
     their content, so the track has to be told twice. */
  .cart-layout > *,
  .checkout-page-layout > * { min-width: 0; }
  .address-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /*
    A four-column row (item / unit price / subtotal / actions) cannot
    survive 390px, so the row stops being a table row and becomes a
    card: picture on the left, everything else stacked beside it.

    The head row goes with it — column labels over a single column of
    cards would be captioning nothing.
  */
  .cart-table-head { display: none; }

  .cart-item {
    grid-template-columns: 84px 1fr;
    grid-template-areas:
      "img  info"
      "img  price"
      "act  act";
    gap: 12px 14px;
    padding: 16px 0;
  }
  .cart-item-info { grid-area: info; }
  .cart-item-price-col {
    grid-area: price;
    /* Left, not centre: in a card it reads as part of the item's own
       block rather than a column heading of its own. */
    text-align: left;
  }
  .cart-item-actions {
    grid-area: act;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cart-item-img { grid-area: img; width: 84px; height: 84px; }

  /* Two columns of address text do not fit at 390px — "Standard
     Delivery" alone wrapped onto three lines. Stack them. */
  .ck-ship-row { flex-direction: column; gap: 16px; }

  /*
    A payment row is radio / icon / name / note / badge on one flex
    line. At 390px the name and the note fight over what is left after
    the two fixed items, and "Card, mobile banking or net banking"
    collapses into a five-line ribbon 49px wide.

    On a phone the row becomes a grid instead: the radio and the icon
    hold their own column and span the full height, while the name,
    note and badge stack in the third column and each get the whole
    remaining width.
  */
  .payment-method-head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
  }
  .payment-method-head > .payment-radio,
  .payment-method-head > .payment-method-icon { grid-row: 1 / -1; }
  .payment-method-name,
  .payment-method-note,
  .payment-method-badge { grid-column: 3; }
  .payment-method-badge:empty { display: none; }

  .card-form-row { grid-template-columns: 1fr; }
}