/* RTL layer for Arabic and Persian pages — loaded AFTER fitrine.css.
   Two jobs: (1) flip the physical left/right rules fitrine.css relies on,
   (2) swap in Arabic-script fonts and kill letter-spacing (spacing breaks
   cursive joining in Arabic script). Latin fragments (FITRINE®, prices)
   fall back to each font's own Latin set. */

/* --- fonts: override the design tokens wholesale per language ------------ */
html[lang="ar"] {
  --font-display: 'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Instrument Sans', sans-serif;
  --font-mono: 'IBM Plex Sans Arabic', 'IBM Plex Mono', monospace;
}
html[lang="fa"] {
  --font-display: 'Vazirmatn', 'Space Grotesk', sans-serif;
  --font-body: 'Vazirmatn', 'Instrument Sans', sans-serif;
  --font-mono: 'Vazirmatn', 'IBM Plex Mono', monospace;
}
[dir="rtl"], [dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] .f-italic { font-style: normal; } /* Arabic script has no italics */

/* --- flipped physical sides ---------------------------------------------- */
[dir="rtl"] .f-logo { border-right: none; border-left: var(--rule); }
/* .f-lang uses logical properties — no flip needed */
[dir="rtl"] .f-marquee-cell { border-right: none; border-left: var(--rule); }
[dir="rtl"] .f-footer > div:not(:last-child),
[dir="rtl"] .f-footer > nav:not(:last-child) { border-right: none; border-left: var(--rule); }
[dir="rtl"] .f-stat:not(:last-child) { border-right: none; border-left: var(--rule); }

@media (max-width: 900px) {
  [dir="rtl"] .f-stat { border-left: none !important; }
  [dir="rtl"] .f-stats .f-stat:nth-child(odd) { border-right: none !important; border-left: var(--rule) !important; }
  [dir="rtl"] .f-footer > div, [dir="rtl"] .f-footer > nav { border-left: none !important; }
  [dir="rtl"] .f-footer > div:nth-child(odd), [dir="rtl"] .f-footer > nav:nth-child(odd) { border-right: none !important; border-left: var(--rule) !important; }
}

/* --- decorative strips stay LTR (continuous loop animations) ------------- */
[dir="rtl"] .f-ticker, [dir="rtl"] .f-marquee { direction: ltr; }

/* Off-screen-left elements: in RTL documents the LEFT side is the
   scrollable overflow side, so left:-9999px creates a huge sideways
   scroll. Park them off the right edge instead (clipped side in RTL). */
[dir="rtl"] .f-skip { left: auto; right: -9999px; }
[dir="rtl"] .f-skip:focus { right: 0; }
/* Belt and suspenders for any remaining leftward overflow. */
html[dir="rtl"], html[dir="rtl"] body { overflow-x: clip; }