/* ══════════════════════════════════════════════════════════════════
   Product Detail polish — Cycle 6 Commit 2 (storefront)
   Breadcrumbs, SKU display, stock indicator, share button.
   ══════════════════════════════════════════════════════════════════ */

/* Breadcrumb container — Bootstrap's default <nav.breadcrumb> works
   but the muted spacing feels heavy above the product card. Tighten
   the vertical rhythm and lighten the divider colour. */
.wasla-product-breadcrumb .breadcrumb {
  font-size: 0.875rem;
  background: transparent;
  padding: 0;
}

.wasla-product-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-muted, #6c757d);
  opacity: 0.6;
}

.wasla-product-breadcrumb .breadcrumb-item a {
  color: var(--text-muted, #6c757d);
  text-decoration: none;
}

.wasla-product-breadcrumb .breadcrumb-item a:hover {
  /* Cycle 20 Lane D: --brand-primary fallback re-toned to v2 navy
     #1D3A5E (was legacy #1F4FD8). */
  color: var(--brand-primary, #1D3A5E);
  text-decoration: underline;
}

.wasla-product-breadcrumb .breadcrumb-item.active {
  color: var(--text-body, inherit);
  font-weight: 500;
}

/* Cycle 23 Lane A: --text-muted is undefined upstream so the hardcoded
   #6c757d fallback renders on dark — too dark against the dark canvas
   for both the breadcrumb separator and the inactive crumb links. Lift
   to the dark muted tone. */
[data-bs-theme="dark"] .wasla-product-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
[data-bs-theme="dark"] .wasla-product-breadcrumb .breadcrumb-item a {
  color: #9ca3af;
}

/* SKU label — small line under product name. Render LTR even on
   AR pages because SKU codes are technical strings (digits +
   ASCII) that the bidi algorithm scrambles otherwise (same fix
   pattern as the help drawer's <code> blocks). */
.wasla-product-sku {
  letter-spacing: 0.02em;
}

.wasla-product-sku span {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--text-body, inherit);
  margin-inline-start: 0.25em;
}

/* Stock pill — three mutually-exclusive states. Colors derived
   from Bootstrap semantic palette but with explicit contrast tuning
   so the pill reads cleanly against both light AND glass card
   backgrounds. */
.wasla-stock-badge {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.35em 0.75em;
  border-radius: 999px;
}

/* Cycle 25 Lane A: stock-pill palette migrated from Tailwind hues to
   v2 functional tokens (success / warning / danger). Dark-mode lifts
   to the v2 dark counterparts (#3DBE8B / #E8A24A / #EB5757). */
.wasla-stock-in {
  background: rgba(31, 157, 107, 0.12);   /* v2 success #1F9D6B @ 12% */
  color: #15784f;                          /* darker v2 success ink */
  border: 1px solid rgba(31, 157, 107, 0.25);
}

.wasla-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-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-stock-in {
  background: rgba(61, 190, 139, 0.18); /* v2 success dark #3DBE8B */
  color: #3DBE8B;
  border-color: rgba(61, 190, 139, 0.3);
}

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

/* Share button — slightly less visual weight than primary/wishlist
   so it doesn't compete for attention. The icon + label combination
   is also small enough to feel like a tertiary action. */
.wasla-product-share-btn {
  font-weight: 500;
}

.wasla-product-share-btn .wasla-product-share-label {
  display: inline-block;
  min-width: 4em;  /* prevents button-width jitter when label flips to "Link copied" */
}

/* ──────────────────────────────────────────────────────────────────
   Quantity stepper — Cycle 6 Commit 3.
   Three-piece group: [-] [number-input] [+]. The input remains a
   real <input type=number> so HTML5 form validation, browser
   autofill, and password managers stay friendly; the buttons just
   step its value with bounds-clamping.
   ────────────────────────────────────────────────────────────────── */
.wasla-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.wasla-qty-btn {
  width: 44px;       /* WCAG 2.5.5 minimum tap target on mobile */
  min-height: 44px;
  border: 0;
  background: transparent;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-body, #1f2937);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cycle 20 Lane D: stepper hover/active tints + focus ring re-toned to
   v2 navy #1D3A5E (rgb 29,58,94) — were legacy #1F4FD8 / rgba(31,79,216,…). */
.wasla-qty-btn:hover { background: rgba(29, 58, 94, 0.06); }
.wasla-qty-btn:active { background: rgba(29, 58, 94, 0.12); }
.wasla-qty-btn:focus-visible {
  outline: 2px solid var(--brand-primary, #1D3A5E);
  outline-offset: -2px;
}

.wasla-qty-input {
  width: 64px;
  border: 0;
  border-inline: 1px solid var(--border-color, #dee2e6);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  appearance: textfield;
  -moz-appearance: textfield;
  background: transparent;
  color: var(--text-body, #1f2937);
}
/* Hide the native spin-buttons (Chromium / WebKit) — our +/- replaces them. */
.wasla-qty-input::-webkit-outer-spin-button,
.wasla-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wasla-qty-input:focus {
  outline: none;
  /* Cycle 20 Lane D: focus tint re-toned to v2 navy #1D3A5E
     (rgb 29,58,94) — was rgba(31,79,216,…). */
  background: rgba(29, 58, 94, 0.04);
}

[data-bs-theme="dark"] .wasla-qty-stepper {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}
[data-bs-theme="dark"] .wasla-qty-input {
  border-inline-color: rgba(255, 255, 255, 0.16);
  color: #e5e7eb;
}
[data-bs-theme="dark"] .wasla-qty-btn { color: #e5e7eb; }
[data-bs-theme="dark"] .wasla-qty-btn:hover { background: rgba(255, 255, 255, 0.06); }

/* ──────────────────────────────────────────────────────────────────
   Mobile sticky add-to-cart bar.
   Hidden on desktop entirely (≥992px). On mobile/tablet, fixed at
   the bottom of the viewport, slides up when the inline cart button
   leaves the viewport. The slide-up is GPU-accelerated transform
   so it doesn't reflow.
   ────────────────────────────────────────────────────────────────── */
.wasla-product-sticky-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;            /* logical: works in RTL automatically */
  background: var(--wasla-surface);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: 0.75rem 1rem;
  /* Add safe-area inset on iOS 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-product-sticky-bar.is-visible {
  transform: translateY(0);
}

.wasla-sticky-price {
  font-weight: 600;
  font-size: 1.125rem;
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--text-body, #1f2937);
}

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

@media (min-width: 992px) {
  /* Desktop: the inline CTA is always visible in the right column,
     so a sticky bar would be redundant + visually noisy. */
  .wasla-product-sticky-bar { display: none !important; }
}

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

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

/* Reduced motion — skip the slide animation, just toggle visibility. */
@media (prefers-reduced-motion: reduce) {
  .wasla-product-sticky-bar { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────
   Reviews block — Cycle 6 Commit 4.
   Rating-distribution histogram + verified-purchase badge + sort
   dropdown + show-more toggle.
   ────────────────────────────────────────────────────────────────── */

/* Histogram: 5 rows, label / bar / count. CSS Grid keeps the bars
   visually aligned regardless of label width. */
.wasla-rating-histogram {
  display: grid;
  gap: 0.375rem;
}

.wasla-rating-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}

.wasla-rating-stars {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #6c757d);
  white-space: nowrap;
}

.wasla-rating-bar {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.wasla-rating-bar-fill {
  height: 100%;
  border-radius: 999px;
  /* Cycle 20 Lane D: --brand-primary fallback re-toned to v2 navy
     #1D3A5E (was legacy #1F4FD8). Every histogram row carries a
     per-rating --N modifier below, so this base fill is the safety net. */
  background: var(--brand-primary, #1D3A5E);
  transition: width 0.4s ease-out;
}

/* Per-rating colour: 5★ success, 4★ lifted-success, 3★ blue (neutral),
   2★ warning, 1★ danger — distribution shape is readable at a glance.
   Cycle 25 Lane A migrated the 5/4/2/1 from Tailwind status to v2
   functional tokens; 3★ stays at v2 electric-blue #0557E7 (per Cycle
   20 Lane D, already v2). */
.wasla-rating-bar-fill--5 { background: var(--wasla-success, #1F9D6B); }
.wasla-rating-bar-fill--4 { background: #3DBE8B; } /* lifted v2 success — differentiates 4★ from 5★ */
.wasla-rating-bar-fill--3 { background: var(--wasla-blue, #0557E7); }
.wasla-rating-bar-fill--2 { background: var(--wasla-warning, #E0922A); }
.wasla-rating-bar-fill--1 { background: var(--wasla-danger, #DA3B3B); }

.wasla-rating-count {
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: end;
}

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

/* Verified-purchase badge — small green pill with check icon. The
   data this surfaces (Wave-N delivered-order constraint) is one of
   the strongest trust signals on the page; styled to be noticeable
   without being loud. */
/* Cycle 25 Lane A: verified-badge migrated to v2 success-soft fill +
   v2 success ink + success-tinted border. Dark-mode lifts to v2
   success dark #3DBE8B. */
.wasla-verified-badge {
  background: var(--wasla-success-soft, #E4F5EE);
  color: var(--wasla-success, #1F9D6B);
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.2em 0.55em;
  border-radius: 999px;
  border: 1px solid rgba(31, 157, 107, 0.25); /* v2 success @ 25% */
  display: inline-flex;
  align-items: center;
}

[data-bs-theme="dark"] .wasla-verified-badge {
  background: var(--wasla-success-soft, #11331F);
  color: #3DBE8B; /* v2 success dark */
  border-color: rgba(61, 190, 139, 0.3);
}

/* Sort form — keep the label/select pair on a single line on
   anything wider than a phone; on narrow screens the existing
   flex-wrap will stack them naturally. */
.wasla-rating-sort .form-select-sm { min-width: 8rem; }

/* Show-all-reviews toggle — items past index 5 are hidden by default.
   Adding `.is-expanded` to the parent <ul> reveals them. */
.wasla-review-hidden { display: none; }
.wasla-reviews-list.is-expanded .wasla-review-hidden { display: list-item; }

/* Smooth fade-in when "Show all" is clicked, but only if the user
   hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .wasla-reviews-list.is-expanded .wasla-review-hidden {
    animation: wasla-review-fade-in 0.2s ease-out;
  }
  @keyframes wasla-review-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}