/* ══════════════════════════════════════════════════════════════════
   Checkout polish — Cycle 6 Checkout Commit 1+ (storefront)
   Class extractions for the 3-step funnel + summary partial.
   Subsequent commits in this section extend this file (stepper visual
   polish in Commit 2; mobile sticky CTA in Commit 4).
   ══════════════════════════════════════════════════════════════════ */

/* ── Page heading (Cycle 20 Lane D) ──────────────────────────────────
   v2 §3: page H1 is navy on light surfaces. The storefront body text
   is near-black zinc, so the checkout step titles ("Shipping address",
   "Shipping method", "Payment method") read as flat dark text. Re-tone
   to the navy ink token (token-flip driven — navy in light, off-white
   in dark, no override needed). Neutral chrome. */
.wasla-checkout-page-title {
  color: var(--wasla-ink, #1D3A5E);
}

/* ── Order summary card ───────────────────────────────────────────── */

.wasla-checkout-summary {
  /* Sticky on lg+ where the layout is two-column. On smaller viewports
     the layout stacks and `position: sticky` would be a no-op anyway,
     but we scope explicitly so nobody assumes the property does
     anything on mobile (matches Cart's pattern from Commit 2). */
  position: static;
}

@media (min-width: 992px) {
  .wasla-checkout-summary {
    position: sticky;
    top: 90px;
  }
}

.wasla-checkout-summary-thumb,
.wasla-checkout-summary-thumb-placeholder {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}

.wasla-checkout-summary-thumb {
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--wasla-line, #E4E7EC);
}

.wasla-checkout-summary-name-wrap {
  /* `min-width: 0` lets the truncated child shrink below its content
     width inside a flex container — without it the truncate is a no-op. */
  min-width: 0;
}

[data-bs-theme="dark"] .wasla-checkout-summary-thumb {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── Coupon section (payment step) ────────────────────────────────── */

.wasla-checkout-coupon-label {
  letter-spacing: 0.04em;
}

.wasla-checkout-coupon-input {
  max-width: 260px;
}

/* ── Method / provider radio cards ────────────────────────────────── */

/* Used on shipping-method and payment-provider lists. The whole row
   is the click target; the radio input inside is more of a visual
   indicator at this point (HTML-level the radio is still authoritative). */
.wasla-checkout-method-card {
  cursor: pointer;
}

.wasla-checkout-provider-icon {
  height: 24px;
}

/* ── Place-order button — total appended (Commit 1 conversion lever) ── */

/* The "— TOTAL" suffix on the place-order button needs the action verb
   to stay readable when the total is long (e.g. "Place order — 1,250.00 SAR"
   wraps on narrow phones). On <576px viewports we hide the suffix and
   let the sticky-bar (Commit 4) carry the total instead. */
@media (max-width: 575.98px) {
  .wasla-checkout-place-order-total {
    display: none;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Step indicator (Checkout Commit 2)
   Three states per pill:
     .is-done     — green check + green-tinted bg
     .is-current  — brand-blue solid bg (active step) + aria-current="step"
     .is-upcoming — neutral grey, numbered marker
   Connector line between pills (CSS pseudo-element on each item except
   the last) makes the "1 → 2 → 3" flow visible. The line uses logical
   properties so it mirrors correctly under RTL.
   ────────────────────────────────────────────────────────────────── */

.wasla-checkout-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.wasla-checkout-stepper-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  position: relative;
  font-size: 0.9375rem;
  /* Allow connector line to overflow visually outside the pill. */
  overflow: visible;
}

/* Connector line between pills — drawn from each item's end edge to
   the next. Hidden on the last item. Uses inset-inline-end so RTL
   mirrors automatically. */
.wasla-checkout-stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: -0.625rem;
  top: 50%;
  width: 0.625rem;
  height: 2px;
  background: rgba(0, 0, 0, 0.15);
  transform: translateY(-50%);
  pointer-events: none;
}

.wasla-checkout-stepper-marker {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.wasla-checkout-stepper-label {
  /* Fill remaining space in the pill so longer step names wrap nicely. */
  flex: 1 1 auto;
  min-width: 0;
}

/* Done state — Cycle 25 Lane A migrated done-state greens from
   Tailwind hues to v2 success / success-soft tokens. */
.wasla-checkout-stepper-item.is-done {
  background: var(--wasla-success-soft, #E4F5EE);
  color: var(--wasla-success, #1F9D6B);
}

.wasla-checkout-stepper-item.is-done .wasla-checkout-stepper-marker {
  background: var(--wasla-success, #1F9D6B);
  color: #fff;
}

.wasla-checkout-stepper-item.is-done:not(:last-child)::after {
  background: var(--wasla-success, #1F9D6B);
}

/* Current state — the fill is the merchant's --brand-primary; the
   #1D3A5E fallback (Cycle 20 Lane D, was legacy #1F4FD8) is the v2
   platform-default navy for un-branded storefronts. */
.wasla-checkout-stepper-item.is-current {
  background: var(--brand-primary, #1D3A5E);
  color: #fff;
}

.wasla-checkout-stepper-item.is-current .wasla-checkout-stepper-marker {
  background: #fff;
  color: var(--brand-primary, #1D3A5E);
}

/* Upcoming state */
.wasla-checkout-stepper-item.is-upcoming {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-muted, #6c757d);
}

.wasla-checkout-stepper-item.is-upcoming .wasla-checkout-stepper-marker {
  background: rgba(0, 0, 0, 0.12);
  color: var(--text-muted, #6c757d);
}

[data-bs-theme="dark"] .wasla-checkout-stepper-item.is-done {
  background: var(--wasla-success-soft, #11331F); /* v2 success-soft dark */
  color: #3DBE8B; /* v2 success dark */
}
[data-bs-theme="dark"] .wasla-checkout-stepper-item.is-upcoming {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme="dark"] .wasla-checkout-stepper-item.is-upcoming .wasla-checkout-stepper-marker {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
[data-bs-theme="dark"] .wasla-checkout-stepper-item:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.2);
}

/* On narrow viewports the connector line would visually break when
   pills wrap to a new row; hide them so wrapped pills stand alone
   cleanly. We use the flex-basis collapse threshold (~480px) below
   which the layout naturally stacks. */
@media (max-width: 575.98px) {
  .wasla-checkout-stepper-item:not(:last-child)::after {
    display: none;
  }
  .wasla-checkout-stepper-item {
    flex-basis: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Mobile sticky CTA bar (Checkout Commit 4)
   Same pattern as Cart Commit 2 / Product Detail Commit 3:
   fixed-bottom on <992px, slides up via transform when JS reveals
   it, hidden entirely on lg+ (where the inline summary card is
   always visible). iOS safe-area inset for the home-indicator.
   ────────────────────────────────────────────────────────────────── */

.wasla-checkout-sticky-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  background: var(--wasla-surface);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
  will-change: transform;
}

.wasla-checkout-sticky-bar.is-visible {
  transform: translateY(0);
}

.wasla-checkout-sticky-total {
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.wasla-checkout-sticky-total-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted, #6c757d);
  line-height: 1;
}

.wasla-checkout-sticky-total-value {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-body, #1f2937);
  margin-top: 2px;
}

.wasla-checkout-sticky-cta {
  flex: 0 0 auto;
  min-width: 160px;
  min-height: 44px;
}

@media (min-width: 992px) {
  .wasla-checkout-sticky-bar { display: none !important; }
}

[data-bs-theme="dark"] .wasla-checkout-sticky-bar {
  background: var(--wasla-surface);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .wasla-checkout-sticky-total-value { color: #e5e7eb; }

/* Cycle 23 Lane A: --text-muted is undefined upstream; on dark the
   hardcoded #6c757d fallback is hard to read against the dark sticky-bar
   surface. Lift the label to the dark muted tone. */
[data-bs-theme="dark"] .wasla-checkout-sticky-total-label { color: #9ca3af; }

@media (prefers-reduced-motion: reduce) {
  .wasla-checkout-sticky-bar { transition: none; }
}