/* ---------- RTL / bilingual support ----------
   Centralised here rather than woven into every existing stylesheet, per the
   localization task's "minimize the diff" rule — every rule in this file is
   scoped under `[dir="rtl"]` (set on <html> by js/state/i18n.js) and touches
   nothing when the app is in English/LTR.

   Loaded last (see index.html) so these overrides win the cascade without
   needing `!important`.

   ---- Design decision: only the bottom nav and the hero slides stay physically LTR ----
   Everything else mirrors for RTL, including the horizontal rails, the
   Explore swipe pager, and every tab bar — per explicit product direction.
   Where a widget computes drag/scroll position in raw pixels (the Explore
   pager's touch-delta math, the tab bar's `centerButton()`, the carousel row
   arrows, the segmented-control thumbs), the JS itself was updated to derive
   the RTL-correct sign/formula rather than being sidestepped with a
   `direction: ltr` pin — see the comments in `explore.js`, `tabBar.js`,
   `carousel.js`, `displayMode.js`, and `search.js` for the per-widget math.
   The two exceptions are the bottom navigation (task rule — Home/Search/
   Explore/Profile must never reorder) and the hero carousel (its slide
   content and autoplay direction are excluded per product direction, same as
   the bottom nav). See LOCALIZATION_IMPLEMENTATION.md for the full write-up. */

[dir='rtl'] {
  --font-body: 'Vazirmatn', Tahoma, 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Persian/Arabic script is cursive — any nonzero tracking breaks glyph
   joining (see the pre-existing `.cal-day-name[lang='fa']` rule this
   generalises). `:is()` keeps this a single low-effort rule that still wins
   the cascade over the plain single-class selectors it corrects, since
   `[dir="rtl"] :is(...)` is more specific than `.foo` alone — no `!important`
   needed. Harmless on the (untranslated) Latin content it also touches, like
   English movie titles or "4K"/"HEVC" badges. */
[dir='rtl'] :is(h1, h2, h3, h4, button, a, span, p, li, label, div, input) {
  letter-spacing: normal;
}

/* ---------- Bottom navigation — explicitly exempt from mirroring ----------
   Task requirement: Home/Search/Explore/Profile must keep their exact visual
   order and position in both languages. A plain `display:flex` row would
   otherwise reverse under `dir="rtl"` (flex "row" follows inline direction) —
   pinning it to `ltr` keeps the physical order identical to English. */
[dir='rtl'] .bottom-nav,
[dir='rtl'] .bottom-nav-inner {
  direction: ltr;
}

/* ---------- Hero carousel — explicitly exempt from mirroring ----------
   Product direction: the hero slides' text/content and autoplay direction
   stay as-is in Persian, same exception as the bottom nav. `explore.js`'s
   pager, the tab bars, and the carousel rows are deliberately *not* here
   anymore — they mirror for real; see the file header and each widget's own
   JS for the RTL-aware math this now depends on. */
[dir='rtl'] .hero-track {
  direction: ltr;
}

/* ---------- Directional icons ----------
   "Back" is a text-direction concept (it points toward where the user came
   from, i.e. the reading-forward direction), so it mirrors. The profile
   menu's chevron ("navigate into this row") and the carousel row arrows are
   the same concept — the row arrows' icons are swapped in JS (`carousel.js`)
   rather than here, since which icon means "prev" vs "next" also flips.
   Accordion/disclosure chevrons are deliberately left alone — they indicate
   "rotates to expand," not a reading direction, per the task's "do not
   mirror every icon, verify each case" guidance. */
[dir='rtl'] .dt-back svg,
[dir='rtl'] .search-back svg,
[dir='rtl'] .settings-back svg,
[dir='rtl'] .profile-row-chevron svg {
  transform: scaleX(-1);
}

/* ---------- Carousel row arrows ----------
   `.row-arrow.prev`/`.next` dock to `inset-inline-start`/`-end` (see
   components.css), which already puts prev on the physical right and next on
   the physical left under RTL. Their edge-fade gradients are physical
   (`linear-gradient(90deg|270deg, ...)`, solid-at-the-docked-edge fading
   into the row), so they need to swap to match — prev now needs the fade
   `.next` used in LTR, and vice versa. `carousel.js` swaps each button's
   chevron icon and scroll direction/aria-label the same way, in JS, since
   those aren't expressible in CSS. */
[dir='rtl'] .row-arrow.prev {
  background: linear-gradient(270deg, var(--color-bg) 20%, transparent);
}
[dir='rtl'] .row-arrow.next {
  background: linear-gradient(90deg, var(--color-bg) 20%, transparent);
}

/* ---------- Detail / actor / collection push-in direction ----------
   A pushed screen reads as moving "forward" — forward is toward the left in
   RTL reading order, so the subtle entry offset flips to match. */
[dir='rtl'] .detail-layer {
  transform: translate3d(-2rem, 0, 0);
}
[dir='rtl'] .detail-layer.is-open {
  transform: translate3d(0, 0, 0);
}

/* ---------- Downloads side sheet — docks to the trailing edge ----------
   Logical `inset-inline-end`/`border-inline-start` (see downloads.css) already
   move the panel itself to the left in RTL; the slide-in transform is a
   physical translate, so it needs its own RTL-specific direction to travel
   off/on-screen from the same edge it now docks to. */
[dir='rtl'] .dl-panel {
  transform: translate3d(-100%, 0, 0);
  box-shadow: 24px 0 64px rgba(0, 0, 0, 0.55);
}
[dir='rtl'] .dl-layer.is-open .dl-panel {
  transform: translate3d(0, 0, 0);
}

/* ---------- Fa/RTL title lines that must stay put ----------
   `.hero-fa-title` and `.card-fa-title` are already hardcoded left/right for
   layout reasons documented in components.css (the hero subtitle must stay
   flush with the backdrop's scrimmed side; the card title's Persian line is
   always right-aligned regardless of app language) — both sit inside
   containers pinned to LTR above, so no override is needed or wanted here.
   Left as a documented no-op so a future reader doesn't "fix" it. */