/* Created: 12:10 26-Aug-2026 */
/* Updated: 13:04 31-Aug-2026 — roadmap rail + numbered badges flipped for RTL; they
   were still pinned left and pushed /ar/admission/ 30px past the viewport at 390. */
/* Updated: 07:19 08-Oct-2026 — BL-280: no-JS marquee fallback slides right in RTL (--marquee-shift:33.3333%) */
/*
   BAYTI — RTL overrides for /ar/. Loaded ONLY on Arabic pages, after every other
   stylesheet, so the LTR build is untouched by it.

   Scope note, because it is easy to over-build this: `dir="rtl"` on <html> already
   flips flexbox, grid, text alignment, list markers and logical properties on its own.
   This file therefore overrides ONLY the physical left/right declarations that were
   measured in the LTR sheets (grep, 26-Aug: 17 files, 106 physical declarations) and
   that actually mirror. Anything not listed here was checked and needs no flip.

   Do not add speculative rules. Screenshot the page, find what is wrong, fix that.
*/

/* --- page gutter: symmetric, so it needs no flip, but state it explicitly ---------- */
[dir="rtl"] .page-pad{padding-left:var(--pad-page);padding-right:var(--pad-page)}

/* --- prose: list indent and quote rule move to the right --------------------------- */
[dir="rtl"] .post-prose ul,
[dir="rtl"] .post-prose ol,
[dir="rtl"] .prose-block ul,
[dir="rtl"] .prose-block ol{padding-left:0;padding-right:24px;margin-left:0;margin-right:0}

[dir="rtl"] .cr-quote{padding-left:0;padding-right:26px;
  border-left:0;border-right:3px solid var(--teal)}

/* --- tables and odd text-aligns ---------------------------------------------------- */
[dir="rtl"] .post-prose th,
[dir="rtl"] .post-prose td{text-align:right}
[dir="rtl"] .lt-call-aside{text-align:right}
[dir="rtl"] .tm-card-btn{text-align:right}

/* --- bulleted lists that fake their marker with padding + ::before ------------------ */
[dir="rtl"] .pc-facts li,
[dir="rtl"] .pt-list li{padding-left:0;padding-right:34px}
[dir="rtl"] .pt-list li{padding-right:20px}
[dir="rtl"] .pc-facts li::before,
[dir="rtl"] .pt-list li::before{left:auto;right:0}

/* --- the roadmap rail lives on the left in LTR ------------------------------------- */
/* Only the WRAP's padding was flipped here. The rail itself (.road-spine/.road-fill at
   left:23px) and the numbered badges (.road-marker at left:-64px) kept their physical
   offsets, so in RTL the padding opened a gutter on the right while the rail and every
   badge stayed pinned to the left — the badges landing at x:-30 and pushing the document
   30px wider than the viewport. /ar/admission/ is the first and only Arabic page to use
   this component, which is why it surfaced on 31-Aug and not in Phase 0's sweep.
   The breakpoint was 900px here and 639px in service.css: between those widths RTL used
   the 46px gutter while the badges were still sized for 64px. Both now read 639px. */
[dir="rtl"] .roadmap-wrap{padding-left:0;padding-right:64px}
[dir="rtl"] .road-spine,
[dir="rtl"] .road-fill{left:auto;right:23px}
[dir="rtl"] .road-marker{left:auto;right:-64px}
@media (max-width:639px){
  [dir="rtl"] .roadmap-wrap{padding-left:0;padding-right:46px}
  [dir="rtl"] .road-spine,
  [dir="rtl"] .road-fill{left:auto;right:17px}
  [dir="rtl"] .road-marker{left:auto;right:-46px}
}

/* --- trust strip dividers ---------------------------------------------------------- */
[dir="rtl"] .pt-trust li{border-right:0;border-left:1px solid var(--border-faint)}
[dir="rtl"] .pt-trust li:last-child{border-left:0}

/* --- small inline marks ------------------------------------------------------------ */
[dir="rtl"] .rev-rating .rev-tick{margin-left:0;margin-right:6px}
[dir="rtl"] .drop-caret{border-right:0;border-left:1.5px solid currentColor}

/* --- the marquee scrolls the other way, or it reads backwards ---------------------- */
[dir="rtl"] .marquee-group{padding-right:0;padding-left:64px}
/* BL-280: the RTL track hangs off to the LEFT, so it must slide RIGHT. main.js sets the
   exact +px shift; this is only the no-JS fallback (LTR's is -33.3333% in sections-a.css). */
[dir="rtl"] .marquee-track{--marquee-shift:33.3333%}
@media (max-width:700px){
  [dir="rtl"] .marquee-group{padding-right:0;padding-left:40px}
}

/* --- Arabic needs a little more line-height than the Latin stack ------------------- */
[dir="rtl"] body{line-height:1.85}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.45}

/* --- numerals and Latin fragments inside Arabic prose stay LTR --------------------- */
[dir="rtl"] .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* Updated: 17:44 26-Aug-2026 — ARABIC TYPOGRAPHY. This is the "spacing and the font"
   Sumit raised on 26-Aug, root-caused rather than nudged:

     · the site sets Inter for body and IBM Plex Mono for labels. NEITHER has Arabic
       glyphs, so every Arabic character was silently falling back to Arial.
     · headings carry NEGATIVE tracking (.h0 -1.5px … .h5 -.5px). Tightening is right for
       Latin display type and actively damaging for Arabic, which is cursive — the letters
       are meant to join, and negative tracking pulls them into each other.
     · .label-1/.label-2 add letter-spacing:1px AND text-transform:uppercase. Positive
       tracking BREAKS the joins outright (measured on "استكشف هذه الخدمة" in the slider,
       which rendered with visible gaps mid-word), and uppercase means nothing in Arabic.

   Measured on /ar/ before this block: h1 computed to
   font-family "Inter, Arial, sans-serif", letter-spacing -1.5px. */

/* An Arabic-capable stack FIRST, then the Latin faces for any Latin that shares the run.
   These are system faces — no webfont is shipped yet; picking one is Sumit's call and is
   logged as an open question, because it changes both the look and the bytes. */
[dir="rtl"], [dir="rtl"] body{
  font-family:"SF Arabic","Geeza Pro","Noto Sans Arabic","Segoe UI",Tahoma,
              Inter,Arial,sans-serif}

/* never tighten Arabic — reset every heading level to normal tracking */
[dir="rtl"] .h0,[dir="rtl"] .h1,[dir="rtl"] .h2,[dir="rtl"] .h3,
[dir="rtl"] .h4,[dir="rtl"] .h5,[dir="rtl"] .h6,
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6{
  letter-spacing:normal}

/* labels: drop the mono face, the tracking and the uppercase — all three are Latin-only
   devices. Size and weight are kept so the visual hierarchy is unchanged. */
[dir="rtl"] .label-1,[dir="rtl"] .label-2{
  font-family:"SF Arabic","Geeza Pro","Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  letter-spacing:normal;text-transform:none}

/* …but the STEP NUMBERS stay monospaced: they are digits, and the mono face is exactly
   what keeps a column of them aligned. Only their labels were ever the problem. */
[dir="rtl"] .how-num,[dir="rtl"] .cg-step-num,[dir="rtl"] .doc-step-num,
[dir="rtl"] .iv-step-num,[dir="rtl"] .nr-step-num,[dir="rtl"] .why-num,
[dir="rtl"] .road-num{font-family:'IBM Plex Mono',monospace}

/* Latin runs inside Arabic are already isolated with <bdi dir="ltr"> — give them the
   Latin face back so a brand name or a phone number does not render in the Arabic font */
[dir="rtl"] bdi[dir="ltr"]{font-family:Inter,Arial,sans-serif}