/*
 * RahkarTheme (PrestaShop) — STANDARD product slider (.rps).
 *
 * Slider-level styling only. The cards themselves come from the shared
 * product-card.css (.rpc-card*), so a slider is visually identical to the
 * product archive grid — same card, just laid out as a horizontal scroll-snap
 * rail with prev/next arrows.
 *
 * This file owns:
 *   • the track (flex row + CSS scroll-snap, scrollbar hidden)
 *   • the per-card column width derived from --rps-cols / --rps-mob
 *   • the prev/next arrow buttons (logical positioning → RTL-correct)
 *   • the optional heading and the trailing "مشاهده همه" card
 *
 * Item width formula (matches the archive card rhythm):
 *   flex-basis = (100% - gap × (N - 1)) / N
 * Mobile default N = 2.5 → 2 full cards + a half-peek = a built-in "scroll me"
 * affordance for touch users.
 *
 * Tokens come from tokens.css (--wp--preset--color--*, set in Phase 1.2).
 */

.rps {
  --rps-cols: 5;
  --rps-mob: 2.5;
  --rps-gap: 12px;
  --rps-edge: 0px;
  --rps-radius: var(--rpc-radius, 12px);
  margin-block: 0;
}

/* ── Heading row ──────────────────────────────────────────────────────
   A flex toolbar rather than a bare <h2>: an ordinary rail only ever puts the
   title in it, while the campaign shell (.rps--deals) also parks the countdown
   and the prev/next arrows here. The title takes the auto margin so whatever
   else lands in the row is pushed to the inline-end (visual left in RTL). */
.rps-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 14px;
}
.rps-heading {
  margin: 0;
  margin-inline-end: auto;
  font-size: 1.15rem;
  font-weight: var(--rh-fw-strong);
  line-height: 1.4;
  color: var(--wp--preset--color--foreground, #1c1c1c);
}

/* The title as a link: looks like the plain title, only reacts on hover. */
.rps-heading__link {
  color: inherit;
  text-decoration: none;
}
.rps-heading__link:hover,
.rps-heading__link:focus-visible {
  color: var(--wp--preset--color--primary, inherit);
  text-decoration: none;
}

/* ── Frame: positioning context for the arrows ───────────────────────── */
.rps-frame {
  position: relative;
}

/* ── Track: horizontal flex rail with scroll-snap ────────────────────── */
.rps-track {
  display: flex;
  gap: var(--rps-gap);
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline-start: var(--rps-edge);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rps-track::-webkit-scrollbar { display: none; }

/* Direct children get the column width — both .rpc-card items and the
   trailing .rps-view-all-item. min-width:0 lets long titles ellipsize. */
.rps-track > * {
  flex: 0 0 calc((100% - var(--rps-gap) * (var(--rps-cols) - 1)) / var(--rps-cols));
  min-width: 0;
  scroll-snap-align: start;
  margin: 0;
}

/* ── Leading hero slide (e.g. a look photo) ──────────────────────────
   The FIRST slide of the rail, and nothing more: it scrolls away with the
   cards like any other slide. It used to be `position: sticky` so the cards
   slid under it, but a sticky slide sits in its own stacking context above
   the rail — the second card visibly disappeared beneath it — and on a phone
   it ate a third of the viewport permanently. Plain flow is both correct and
   the better touch experience (سفارش: «کارت اول ثابت نباشه و با اسکرول افقی
   اونم اسکرول بشه»).

   No rules of its own beyond the frame: it inherits the card slot width from
   `.rps-track > *` (including its scroll-snap-align) and flex-stretch makes it
   the same height as the tallest card → "هم‌ارتفاع باقی کارت‌ها". */
.rps-pin {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--rps-radius);
  overflow: hidden;
  background: var(--wp--preset--color--surface, #f5f6f7);
}
.rps-pin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Arrow buttons ───────────────────────────────────────────────────
   Pinned to the inline edges of the frame, overlaying the rail. In RTL the
   inset-inline-* values flip automatically; the chevron glyph direction is
   baked in the markup (RTL-correct). */
.rps-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--wp--preset--color--foreground, #1c1c1c);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  /* Above the rail contents — the arrows overlay the cards they scroll. */
  z-index: 4;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.rps-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}
.rps-arrow:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
  outline-offset: 2px;
}
.rps-arrow:active {
  transform: translateY(-50%) scale(0.95);
}
/* Disabled (set by rh-slider.js at the rail extremes). */
.rps-arrow[aria-disabled="true"] {
  opacity: 0;
  pointer-events: none;
}

.rps-arrow--prev { inset-inline-start: 4px; }
.rps-arrow--next { inset-inline-end: 4px; }

/* ── Trailing "مشاهده همه" card — same slot width as a product ────────── */
.rps-view-all-item .rps-view-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  /* Same shape as a product card's media so the rail stays even. */
  aspect-ratio: var(--rh-product-ratio, 0.8);
  border-radius: var(--rps-radius);
  background: var(--wp--preset--color--primary-soft, #fdebe7);
  text-decoration: none;
  color: var(--wp--preset--color--primary, #cb6686);
  font-weight: var(--rh-fw-strong);
  transition: background 150ms ease;
  height: 100%;
}
.rps-view-all-item .rps-view-all:hover,
.rps-view-all-item .rps-view-all:focus-visible {
  /* Was a hardcoded blue (#d3e9f7) left over from before the shop's tokens
     went pink — a deeper tint of the SAME soft pink instead, not a fixed
     literal, so it stays correct if the palette changes again. */
  background: color-mix(in srgb, var(--wp--preset--color--primary, #cb6686) 18%, var(--wp--preset--color--primary-soft, #fdebe7));
}
.rps-view-all__circle {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--wp--preset--color--primary, #cb6686);
  border: 1.5px solid currentColor;
}
.rps-view-all__label { font-size: 0.9em; }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 782px) {
  .rps-track { gap: 8px; }
  .rps-track > * {
    flex: 0 0 calc((100% - 8px * (var(--rps-mob) - 1)) / var(--rps-mob));
  }
  .rps-arrow { width: 36px; height: 36px; }
  .rps-arrow--prev { inset-inline-start: 2px; }
  .rps-arrow--next { inset-inline-end: 2px; }
  .rps-view-all__circle { width: 44px; height: 44px; }
  .rps-view-all__circle svg { width: 22px; height: 22px; }
}

/* Very narrow screens: arrows compete with cards → hide, rely on swipe. */
@media (max-width: 419px) {
  .rps-arrow { display: none; }
}

/* Reduce motion: cancel smooth scroll, keep functionality. */
@media (prefers-reduced-motion: reduce) {
  .rps-track { scroll-behavior: auto; }
}

/* ═══════════ CAMPAIGN SHELL — «اسلایدر تخفیف‌ها» (.rps--deals) ═══════════
   The homepage deals band. It is the SAME rail and the SAME cards as every
   other slider; only the shell around them changes, so nothing here can drift
   away from the rest of the site:

     • the heading row becomes a real toolbar — title (inline-start) · «زمان
       باقی‌مانده» + the countdown chip · the prev/next arrows (inline-end);
     • the arrows are printed INSIDE that row by product-slider.tpl, so they
       stop overlaying the cards and become ordinary buttons;
     • the trailing «مشاهده همه» card can become the admin's campaign image.

   The clock itself is filled in by assets/js/rh-countdown.js — the homepage
   HTML is page-cached, so the remaining time only exists in the browser. Until
   the script hydrates the widget the digits are held invisible (the box still
   reserves their width, so there is no layout shift when they appear). */

.rps--deals .rps-head {
  gap: 10px 14px;
}

/* Arrows in the heading row: static buttons, not the floating overlay pair. */
.rps-head__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.rps--deals .rps-head__nav .rps-arrow {
  position: static;
  top: auto;
  transform: none;
  width: 38px;
  height: 38px;
  border-radius: var(--wp--custom--radius--md, 0.5rem);
  border: 1px solid var(--wp--preset--color--border, #e2e4e9);
  background: var(--wp--preset--color--base, #fff);
  box-shadow: none;
}
.rps--deals .rps-head__nav .rps-arrow:hover {
  transform: none;
  background: var(--wp--preset--color--surface, #f7f7f8);
}
.rps--deals .rps-head__nav .rps-arrow:active {
  transform: none;
}
/* A rail end must not punch a hole in the toolbar, so the disabled arrow fades
   instead of vanishing (the overlay arrows still disappear as before). */
.rps--deals .rps-head__nav .rps-arrow[aria-disabled="true"] {
  opacity: 0.32;
}

/* «مشاهده همه» as a toolbar control. The trailing card at the far end of the
   rail is a long swipe away on a phone — and when a campaign image takes that
   slot there is no plain link left at all — so the campaign shell always offers
   one here, on desktop and mobile alike. Sized to match the arrow buttons so
   the three sit on one baseline. */
.rps-head__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--text-muted, #5b6271);
  font-size: var(--wp--preset--font-size--sm, 0.875rem);
  text-decoration: none;
  white-space: nowrap;
}
.rps-head__all svg {
  flex: none;
  opacity: 0.8;
  transition: transform 0.15s ease;
}
.rps-head__all:hover,
.rps-head__all:focus-visible {
  color: var(--wp--preset--color--text, #1a1d23);
  text-decoration: none;
}
.rps-head__all:hover svg,
.rps-head__all:focus-visible svg {
  transform: translateX(-3px);
}

/* ── Countdown ─────────────────────────────────────────────────────────── */
.rps-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.rps-countdown__label {
  font-size: var(--wp--preset--font-size--sm, 0.875rem);
  color: var(--wp--preset--color--text-muted, #5b6271);
  white-space: nowrap;
}
.rps-countdown__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Digits are a clock, not prose: read them left-to-right in both directions. */
  direction: ltr;
  padding: 6px 12px;
  border-radius: var(--wp--custom--radius--md, 0.5rem);
  background: var(--rh-deals-clock-bg, #16181d);
  color: var(--rh-deals-clock-fg, #ffcc33);
}
.rps-countdown__icon {
  stroke-width: var(--rh-icon-stroke, 1.5);
  flex: none;
}
.rps-countdown__time {
  font-weight: var(--rh-fw-strong);
  font-size: 1rem;
  line-height: 1.2;
  /* Fixed-width digits + a reserved box: the clock ticks without the toolbar
     twitching, and the placeholder holds the same width before hydration. */
  font-variant-numeric: tabular-nums;
  min-width: 7.5ch;
  text-align: center;
}
.rps-countdown:not([data-rh-countdown-ready]) .rps-countdown__time {
  visibility: hidden;
}

/* ── Trailing campaign image (in place of the plain «مشاهده همه» card) ─── */
.rps-view-all--image {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: var(--rps-radius);
  background: var(--wp--preset--color--surface, #f7f7f8);
}
.rps-view-all--image:hover,
.rps-view-all--image:focus-visible {
  background: var(--wp--preset--color--surface, #f7f7f8);
}
.rps-view-all__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rps-view-all--image .rps-view-all__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 26px 12px 12px;
  color: #fff;
  font-size: var(--wp--preset--font-size--sm, 0.875rem);
  /* Readability floor under the label whatever the uploaded artwork is. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

/* ── Mobile campaign toolbar ───────────────────────────────────────────
   On a phone the arrows are dead weight (the rail is swiped, and the theme
   already hides overlay arrows on narrow screens) — and wrapped onto their own
   line they left the toolbar looking broken. So the phone toolbar is exactly
   three things on ONE row: the title, the clock chip, «مشاهده همه». The
   «زمان باقی‌مانده:» label goes too — the stopwatch icon already says it — and
   the title takes whatever width is left, ellipsised rather than wrapping. */
@media (max-width: 782px) {
  .rps--deals .rps-head {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .rps--deals .rps-head__nav { display: none; }
  .rps--deals .rps-countdown__label { display: none; }
  .rps--deals .rps-heading {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.02rem;
  }
  .rps-countdown__pill { padding: 5px 10px; }
  .rps-countdown__time { font-size: 0.9rem; min-width: 7ch; }
  .rps-head__all {
    font-size: var(--wp--preset--font-size--xs, 0.75rem);
  }
}