/* ══════════════════════════════════════════════════════════════════
   Cart polish — Cycle 6 Cart Commit 2 (storefront)
   Class extractions from inline-style soup + mobile sticky checkout bar
   + remove-undo flow.
   ══════════════════════════════════════════════════════════════════ */

/* ── 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 "Your cart" title reads 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-cart-page-title {
  color: var(--wasla-ink, #1D3A5E);
}

/* ── Item rows ────────────────────────────────────────────────────── */

.wasla-cart-item-thumb {
  /* Holds the 84×84 image (or placeholder). flex: 0 0 auto stops it
     from squishing when the name column wraps to multiple lines. */
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}

.wasla-cart-item-img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--wasla-line, #E4E7EC);
}

.wasla-cart-item-thumb-placeholder {
  /* Bootstrap's bg-light + border + rounded already applied via classes. */
  width: 84px;
  height: 84px;
}

.wasla-cart-item-info {
  /* min-width prevents the column from collapsing to nothing on
     narrow viewports when the name wraps. */
  min-width: 200px;
}

.wasla-cart-item-total {
  min-width: 90px;
}

.wasla-cart-stepper-group {
  width: 130px;
}

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

.wasla-cart-summary {
  /* Sticky on lg+ where the 2-column layout means the summary lives
     alongside the items list. On smaller viewports the layout stacks
     and `position: sticky` would have no effect anyway, but we scope
     to lg+ to be explicit (and so nobody assumes the property does
     anything on mobile). */
  position: static;
}

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

.wasla-cart-summary-label {
  /* The ORDER SUMMARY mini-heading. Letter-spacing for the all-caps
     small-caps feel. */
  letter-spacing: 0.04em;
}

[data-bs-theme="dark"] .wasla-cart-item-img {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── Remove-undo flow ─────────────────────────────────────────────── */

/* When `is-removing` is on the row, the normal content fades and the
   "Removed — Undo?" pane takes over. Pure CSS-toggle so the JS only
   needs to flip a class. The 0.2s opacity transition gives a soft
   "this is going away" cue rather than a jarring instant swap. */
.wasla-cart-item-content {
  transition: opacity 0.2s ease-out;
}

.wasla-cart-item.is-removing .wasla-cart-item-content {
  opacity: 0;
  pointer-events: none;
  /* Collapse height so the row visually compacts to just the
     "Removed" toast. Animating max-height would be smoother but
     content height is unknown; opacity + height: 0 with overflow
     hidden is the simpler robust choice. */
  position: absolute;
  /* Take the row out of layout so the toast pane doesn't stack
     beneath it. The wasla-cart-item is positioned relative below. */
  visibility: hidden;
  height: 0;
}

.wasla-cart-item {
  position: relative;
  /* min-height so the row keeps a footprint while the JS swap is
     in flight; matches the natural row height roughly. */
  min-height: 60px;
}

.wasla-cart-item-removed {
  /* Hidden by default; JS removes the `hidden` attribute when the
     remove flow starts. Aligned to fill the row so the Undo button
     is reachable wherever the original Remove was. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(220, 38, 38, 0.04);
  border-radius: 8px;
  font-size: 0.9375rem;
}

.wasla-cart-item-removed[hidden] {
  /* Bootstrap doesn't always honour the `hidden` attribute when
     `display: flex` is set; force it. */
  display: none;
}

.wasla-cart-item-removed-text {
  color: var(--text-muted, #6c757d);
}

[data-bs-theme="dark"] .wasla-cart-item-removed {
  background: rgba(252, 165, 165, 0.06);
}

/* ── Mobile sticky checkout bar ───────────────────────────────────── */

/* Same pattern as the Product Detail mobile sticky bar (Commit 3 of
   that section). Hidden on lg+ where the inline summary card is
   always visible in the right column. */
.wasla-cart-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;
  /* iOS safe-area inset so the bar clears the home-indicator. */
  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-cart-sticky-bar.is-visible {
  transform: translateY(0);
}

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

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

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

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

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

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

[data-bs-theme="dark"] .wasla-cart-sticky-total-value { color: #e5e7eb; }

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

/* ── Stock badges (Cart Commit 3) ─────────────────────────────────── */

/* Same colour palette as Product Detail's stock-pill (Commit 2 of that
   section) for cross-page consistency: amber for low stock, red for
   out-of-stock. In_stock + unknown render no badge — the absence is
   the signal. */
.wasla-cart-stock-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3em 0.65em;
  border-radius: 999px;
}

/* Cycle 25 Lane A: stock-pill palette migrated from Tailwind hues to
   v2 functional tokens (warning / danger). Matches product-detail.css
   stock pills for cross-page consistency. */
.wasla-cart-stock-low {
  background: rgba(224, 146, 42, 0.12); /* v2 warning #E0922A @ 12% */
  color: #a06d18; /* darker v2 warning ink */
  border: 1px solid rgba(224, 146, 42, 0.25);
}

.wasla-cart-stock-out {
  background: rgba(218, 59, 59, 0.12); /* v2 danger #DA3B3B @ 12% */
  color: #a82c2c; /* darker v2 danger ink */
  border: 1px solid rgba(218, 59, 59, 0.25);
}

[data-bs-theme="dark"] .wasla-cart-stock-low {
  background: rgba(232, 162, 74, 0.18); /* v2 warning dark #E8A24A */
  color: #E8A24A;
  border-color: rgba(232, 162, 74, 0.3);
}

[data-bs-theme="dark"] .wasla-cart-stock-out {
  background: rgba(235, 87, 87, 0.18); /* v2 danger dark #EB5757 */
  color: #EB5757;
  border-color: rgba(235, 87, 87, 0.3);
}

/* ── Free-shipping progress hint (Cart Commit 3) ──────────────────── */

.wasla-cart-free-shipping {
  font-size: 0.8125rem;
}

.wasla-cart-free-shipping-text {
  margin-bottom: 0.375rem;
  color: var(--text-body, #1f2937);
}

.wasla-cart-free-shipping-bar {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.wasla-cart-free-shipping-bar-fill {
  height: 100%;
  border-radius: 999px;
  /* Cycle 20 Lane D: brand-blue start re-toned to v2 electric-blue
     #0557E7 (was legacy #1F4FD8). The #16a34a green end is the
     "qualified" success destination — a Tailwind status hue, untouched. */
  background: linear-gradient(90deg, #0557E7 0%, #16a34a 100%);
  transition: width 0.4s ease-out;
}

/* Cycle 25 Lane A: qualified text migrated to v2 success token; dark
   lifts to v2 success dark #3DBE8B. */
.wasla-cart-free-shipping-qualified {
  color: var(--wasla-success, #1F9D6B);
  font-weight: 500;
}

[data-bs-theme="dark"] .wasla-cart-free-shipping-bar {
  background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .wasla-cart-free-shipping-qualified {
  color: #3DBE8B; /* v2 success dark */
}

/* Cycle 22: free-shipping helper text uses --text-body with a near-black
   #1f2937 fallback; the token is never defined upstream so dark renders
   the hardcoded fallback. Override to the dark off-white. */
[data-bs-theme="dark"] .wasla-cart-free-shipping-text {
  color: #e5e7eb;
}

/* Cycle 23 Lane A: --text-muted is undefined upstream so the hardcoded
   #6c757d fallback renders on dark — too dark against the dark canvas.
   Lift the remove-undo flow text and the mobile sticky-bar label to the
   dark muted tone. */
[data-bs-theme="dark"] .wasla-cart-item-removed-text { color: #9ca3af; }
[data-bs-theme="dark"] .wasla-cart-sticky-total-label { color: #9ca3af; }

@media (prefers-reduced-motion: reduce) {
  .wasla-cart-free-shipping-bar-fill { transition: none; }
}

/* ── Auto-save quantity stepper (Cart Commit 4) ───────────────────── */

/* When JS attaches `is-auto-save` to the stepper form, the Update
   button becomes redundant — +/- clicks debounce-submit the form
   automatically. We hide the button via CSS so the layout stays
   clean. Without JS the class is never added and the button remains
   visible, preserving the legacy click-to-submit fallback. */
[data-cart-stepper].is-auto-save .wasla-cart-update-btn {
  display: none;
}