/* =============================================================
   ilmbee, the Arabic homepage (/ar/): right to left
   Loaded after styles.css, home.css and library.css, on ar/index.html only.
   Most of the layout mirrors itself through dir="rtl" (grids, flex rows,
   logical properties). This file covers what doesn't: Arabic type, the
   rules written with a physical left or right, arrows that point the way
   the page reads, and a few parts that stay left to right on purpose
   because they are English books: the hero book, the bookcase, the page
   turn, the sample line being read aloud.
   ============================================================= */

/* ───────── Type ─────────
   Baloo Bhaijaan 2 is Baloo's Arabic sibling and carries Baloo's own Latin,
   so headings keep the brand voice in both scripts. Body text: Quicksand
   for the Latin (English titles, prices, digits) and IBM Plex Sans Arabic
   for the Arabic. Until the web fonts arrive, the system's Arabic face
   stands in. Digits are Western throughout. */
[dir="rtl"]{
  --font-display:"Baloo Bhaijaan 2","Baloo 2","Baloo 2 fallback","Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  --font-ui:"Quicksand","IBM Plex Sans Arabic","Segoe UI","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif;
}
/* Arabic is joined script: spacing letters apart breaks the words, and
   capitals don't exist. Taller line boxes leave room for the dots and marks. */
[dir="rtl"] *{letter-spacing:0!important;text-transform:none!important}
[dir="rtl"] body{line-height:1.8}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.3}
[dir="rtl"] .hero__title{line-height:1.22}
[dir="rtl"] .section-title,[dir="rtl"] .library__title,[dir="rtl"] .final__title{line-height:1.28}
[dir="rtl"] .section-lead,[dir="rtl"] .hero__lead{line-height:1.85}
[dir="rtl"] .ln{padding-bottom:.2em;margin-bottom:-.2em}
[dir="rtl"] .eyebrow,[dir="rtl"] .badge{text-transform:none;font-size:.8125rem}
/* the brand stays as written: mark, then ilmbee.com */
[dir="rtl"] .logo{direction:ltr}

/* ───────── Header ───────── */
@media (max-width:1199px){
  [dir="rtl"] .burger{margin-left:0;margin-right:-10px}
  [dir="rtl"] .site-header__actions{margin-left:0;margin-right:auto}
}

/* ───────── Arrows point the way the page reads (play and media icons don't turn) ───────── */
[dir="rtl"] .btn__icon{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .btn__icon{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .ts__rbar svg{transform:scaleX(-1)}

/* ───────── Hero: the light sits behind the book, now on the left ───────── */
[dir="rtl"] .hero__glow{right:auto;left:-14%}

/* ───────── The problem: the road starts on the right ─────────
   The road and the bee's flight path are mirrored as drawings; the covers
   and words are placed from the right instead of the left, so nothing is
   written backwards. roadWalk() still works in the drawing's own units. */
[dir="rtl"] .road__svg,[dir="rtl"] .road__fly{transform:scaleX(-1)}
[dir="rtl"] .road__stop{left:auto;right:var(--x)}
[dir="rtl"] .road__stop--l .road__txt{left:auto;right:calc(8cqw + 14px);text-align:right;justify-items:start}
[dir="rtl"] .road__stop--r .road__txt{right:auto;left:calc(8cqw + 14px);text-align:left;justify-items:end}
[dir="rtl"] .feed__notes li{text-align:start}
[dir="rtl"] .feed__notes--l li::before{right:auto;left:-6px}
[dir="rtl"] .feed__notes--r li::before{left:auto;right:-6px}
[dir="rtl"] .feed__auto i::after{right:auto;left:2px}
[dir="rtl"] .feed__thumb b{right:auto;left:6px}

/* ───────── How it works: the app's screens, in Arabic ───────── */
[dir="rtl"] .tour__step{text-align:right}
[dir="rtl"] .tour__bar{transform-origin:right}
[dir="rtl"] .ts__chip{margin-left:0;margin-right:auto}
[dir="rtl"] .ts__next{text-align:right}
[dir="rtl"] .ts__won i{right:auto;left:-12px}
[dir="rtl"] .ts__player{padding:8px 8px 8px 14px}
[dir="rtl"] .ts small{font-size:10.5px}

/* ───────── Ages ───────── */
[dir="rtl"] .age__n::before{content:"الأعمار"}
[dir="rtl"] .ages__family{padding:16px 20px 16px 16px}

/* ───────── Authenticity: the English line, and what it says ───────── */
[dir="rtl"] .prov__sentence{text-align:right}
.prov__gloss{margin-top:6px;font-size:.9375rem;font-weight:600;color:var(--navy-300)}
[dir="rtl"] .prov__ar{font-size:clamp(1.6rem,1.3rem + 1vw,2rem)}

/* ───────── Comparison ───────── */
[dir="rtl"] .ctable tbody th{text-align:right;padding-left:14px;padding-right:24px}
@media (max-width:700px){
  [dir="rtl"] .ctable tbody th{padding:0 4px 6px}
}

/* ───────── Pricing: "$19" reads as written, "once" after it ───────── */
.plan__num{display:inline-flex;align-items:baseline;gap:3px}
[dir="rtl"] .plan__per{margin-left:0;margin-right:8px}

/* ───────── Gift ───────── */
[dir="rtl"] .gift__more{margin:2px 4px 0 0}

/* ───────── FAQ: the plus sits at the far edge ───────── */
[dir="rtl"] .qa summary::after{margin-left:0;margin-right:auto}
[dir="rtl"] .qa__body{padding:0 0 26px 46px}
@media (max-width:900px){
  [dir="rtl"] .qa__body{padding-left:0}
}

/* ───────── The book preview (library.js) ─────────
   The book and its page arrows stay left to right like the book itself;
   the close button and the words around it follow the page. */
[dir="rtl"] .pv__stage{direction:ltr}
[dir="rtl"] .pv__count{direction:rtl}
[dir="rtl"] .pv__close{right:auto;left:14px}
[dir="rtl"] .pv__title{padding-right:0;padding-left:30px}
[dir="rtl"] .pv__nb{text-align:right}
[dir="rtl"] .pv__nb--next{text-align:left}

/* ───────── Footer ───────── */
.footer__note{margin-top:10px;font-size:var(--fs-xs);color:rgba(255,255,255,.45)}

/* ───────── The bookcase: its shelves stay left to right, its words don't ───────── */
[dir="rtl"] .chip__n{margin-left:0;margin-right:7px}
[dir="rtl"] .case__hint,[dir="rtl"] .bay__plate{direction:rtl}
/* "100 · Saying Something During Prayer": an English title is cut at its end, not its start */
[dir="rtl"] .pv__nb span{direction:ltr}