/*
 * 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 ─────────────────────────────────────────────────────────── */
.rps-heading {
  margin: 0 0 14px;
  font-size: 1.15rem;
  font-weight: var(--rh-fw-strong);
  line-height: 1.4;
  color: var(--wp--preset--color--foreground, #1c1c1c);
}

/* ── 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;
}

/* ── Pinned hero slide (e.g. a look photo) ───────────────────────────
   Sticky to the inline-start edge (visual RIGHT in RTL) so it stays put
   while the product cards scroll UNDER it. Same slot width as a card
   (inherits the .rps-track > * flex-basis) and flex-stretch makes it the
   same height as the tallest card → "هم‌ارتفاع باقی کارت‌ها". */
.rps-pin-item {
  position: sticky;
  inset-inline-start: 0;
  z-index: 3;
  scroll-snap-align: none;
}
.rps-pin {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--rps-radius);
  overflow: hidden;
  background: var(--wp--preset--color--surface, #f5f6f7);
  /* Drop shadow on the trailing edge (LEFT in this RTL shop) so the cards
     sliding past genuinely look tucked beneath the pinned photo. */
  box-shadow: -8px 0 18px rgba(0, 0, 0, 0.12);
}
.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 pinned hero slide (z-index:3). The prev arrow sits at the
     inline-start edge (visual RIGHT in RTL) — exactly where a look/set pin is
     sticky — so a lower z-index hid it behind the photo and the user couldn't
     scroll back to the right. */
  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%;
  aspect-ratio: 1 / 1;
  border-radius: var(--rps-radius);
  background: var(--wp--preset--color--primary-soft, #eaf4fb);
  text-decoration: none;
  color: var(--wp--preset--color--primary, #1976d2);
  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 {
  background: #d3e9f7;
}
.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, #1976d2);
  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; }
}