/* =============================================================
   Automania — Arabic / RTL overrides
   Loaded ONLY on Arabic (/ar/…) pages, AFTER the shared sheets,
   alongside bootstrap.rtl.min.css. The shared sheets already carry
   the dir-scoped [dir="rtl"] layout rules (mobile drawer, form
   controls, phone input); this sheet adds what the English-derived
   port dropped: the Arabic font stack and RTL glyph mirroring.
   Source of truth: HTML/ar/css. Ported by CANADA HITECH.
   ============================================================= */

/* Arabic typography — Cairo (with Noto Sans Arabic fallback). The shared
   global.css defines --font-* with the Latin stack (Inter); override the
   tokens here so every component that reads them switches to Arabic. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-primary: 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-display: 'Cairo', 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-kufi:    'Cairo', 'Noto Sans Arabic', sans-serif;
}

/* RTL DIRECTIONAL ICON FIXES — horizontal chevrons on the hero + scroller
   arrows are glyphs that do NOT auto-flip with dir="rtl" (only their POSITION
   flips via logical properties). Mirror the glyph so it points in the
   direction of travel for RTL reading order. */
[dir="rtl"] .hero__arrow i,
[dir="rtl"] .scroller__arrow i { transform: scaleX(-1); }