/* افتهمت؟ — direction & font fixes for English (LTR) and Kurdish Sorani (RTL).
 * Link AFTER index.html's last <style> (e.g. right before </head>) — rules use :where(html[dir=ltr]) so they add
 * no specificity and win only by source order over the identical original selectors.
 * Arabic (default) is untouched: every rule is scoped to html[dir=ltr] or html.lang-ckb.
 */

/* ───────── Kurdish font: Thmanyah lacks some Sorani letters (ڕ ڵ ۆ ێ ە ڤ) → Noto Sans Arabic carries them ───────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;700;900&display=swap');
html.lang-ckb{--ui:"Noto Sans Arabic","Thmanyah Sans",system-ui,sans-serif;--disp:"Noto Sans Arabic","Thmanyah Serif Display",serif;--text:"Noto Sans Arabic","Thmanyah Serif Text",serif}
html.lang-ckb body,html.lang-ckb input,html.lang-ckb select,html.lang-ckb textarea,html.lang-ckb button{font-family:var(--ui)}
html.lang-ckb #pfGrade,html.lang-ckb #pfSystem,html.lang-ckb .cm-sel,html.lang-ckb .dob-row select.input{font-family:var(--ui)}
/* Noto is taller than Thmanyah: keep one-line labels from clipping */
html.lang-ckb .capsule a span,html.lang-ckb .chip{line-height:1.35}

/* ───────── English: Latin text in Thmanyah Sans is fine; tighten headings that were tuned for Arabic ───────── */
html.lang-en .ab-title,html.lang-en .sheet h3{letter-spacing:-.01em}
html.lang-en .capsule a{font-size:10px}
html.lang-en .capsule a span{white-space:nowrap}

/* ───────── LTR mirroring (English) ───────── */
/* chevrons / back arrows drawn for RTL (lucide paths) → flip in place */
:where(html[dir=ltr]) path[d="m9 6 6 6-6 6"],
:where(html[dir=ltr]) path[d="m10 6 6 6-6 6"],
:where(html[dir=ltr]) path[d="m15 18-6-6 6-6"]{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}

/* signup back-button label («راجع …») — translations run longer; never let it run under the centered title */
html.lang-en .appbar.ab-sg .ab-btn .ab-lbl,html.lang-ckb .appbar.ab-sg .ab-btn .ab-lbl{max-width:88px;white-space:nowrap}

/* appbar back label slides in from the start side */
@keyframes abLblLtr{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
:where(html[dir=ltr]) .appbar.ab-sg .ab-btn .ab-lbl{animation-name:abLblLtr}

/* floating / absolutely positioned bits that sit on the logical start/end side */
:where(html[dir=ltr]) .rolefabwrap{left:auto;right:14px}
:where(html[dir=ltr]) .close-x{left:auto;right:14px}
:where(html[dir=ltr]) .nt-bell-home{left:auto;right:16px}
/* المصغّر بالإنجليزي: المايك جنب الجرس من الجهة المعاكسة (مرآة العربي) */
html[dir=ltr] .home-fixed .hfixed.shrunk .micbtn{left:auto;right:62px}
:where(html[dir=ltr]) .tp-opt .oc-chk{left:auto;right:8px}
:where(html[dir=ltr]) .pr-opt .oc-chk{left:auto;right:6px}
:where(html[dir=ltr]) .ta-gps{right:auto;left:12px}
:where(html[dir=ltr]) .me-cam{left:auto;right:2px}
:where(html[dir=ltr]) .ntp-it.unread::after{left:auto;right:12px}
:where(html[dir=ltr]) .tc2-ok{left:auto;right:-4px}
:where(html[dir=ltr]) img.tc2-ok{left:auto;right:-6px}
:where(html[dir=ltr]) .vf-track li:not(:last-child)::after{right:auto;left:13px}

/* toggle switch knob: off = start, on = end */
:where(html[dir=ltr]) .tg i{right:auto;left:3px}
:where(html[dir=ltr]) .tg.on i{right:auto;left:21px}

/* progress / timers that grow or shrink along the inline axis */
:where(html[dir=ltr]) .ws-dots button i{transform-origin:left}
:where(html[dir=ltr]) .al-timer i{transform-origin:right}
:where(html[dir=ltr]) .stp-bar{direction:ltr}
:where(html[dir=ltr]) .stp-seg i::before{transform-origin:left}
:where(html[dir=ltr]) .iv-bar i{background:linear-gradient(90deg,#FFD98A,#fff)}

/* cards with an illustration on the end side + white fade from the start side */
:where(html[dir=ltr]) .cur-picker .sys-hero{left:auto;right:0}
:where(html[dir=ltr]) .cur-picker .sys>summary::before{background:linear-gradient(to right,#fff 0,#fff 48%,rgba(255,255,255,.55) 68%,rgba(255,255,255,0) 86%)}
:where(html[dir=ltr]) .sp-card img{left:auto;right:0}
:where(html[dir=ltr]) .sp-card::before{background:linear-gradient(to right,#fff 0,#fff 48%,rgba(255,255,255,.55) 68%,rgba(255,255,255,0) 88%)}
:where(html[dir=ltr]) .sr2-chips{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}

/* home ad carousel: bind/index scroll it with negative scrollLeft (RTL math) → keep the track RTL, content LTR.
   The ad art leaves its empty side on the right, so the text block stays there too. */
:where(html[dir=ltr]) .home-fixed .adrow{direction:rtl}
:where(html[dir=ltr]) .home-fixed .adrow>*{direction:ltr}
:where(html[dir=ltr]) .adtxt{text-align:left}

/* day / month / year pickers read left→right */
:where(html[dir=ltr]) .dob-row{direction:ltr}
:where(html[dir=ltr]) .dob-row select.input{padding:13px 30px 13px 12px;text-align:left;background-position:right 11px center}

/* text-align:right in the Arabic CSS means "start" → left in English */
:where(html[dir=ltr]) .th-bannertext,
:where(html[dir=ltr]) .loc-ok-geo,
:where(html[dir=ltr]) .aiconv,
:where(html[dir=ltr]) .ta-h,
:where(html[dir=ltr]) .al-need,
:where(html[dir=ltr]) .sp-card,
:where(html[dir=ltr]) .ir-list,
:where(html[dir=ltr]) .me-note,
:where(html[dir=ltr]) .pe-f,
:where(html[dir=ltr]) .ph-err,
:where(html[dir=ltr]) .nw-hero,
:where(html[dir=ltr]) .nw-item,
:where(html[dir=ltr]) .lg-opt,
:where(html[dir=ltr]) .dp-sec,
:where(html[dir=ltr]) .iv-num,
:where(html[dir=ltr]) .iv-mini,
:where(html[dir=ltr]) .sr2-list .tc2,
:where(html[dir=ltr]) .tcard.tc2,
:where(html[dir=ltr]) .otp-to .ot-tx b,
:where(html[dir=ltr]) #pfGrade,
:where(html[dir=ltr]) #pfSystem,
:where(html[dir=ltr]) .cm-sheet,
:where(html[dir=ltr]) .cm-lbl,
:where(html[dir=ltr]) .cm-sel{text-align:left}
/* …and text-align:left (numbers/values at the end side) → right */
:where(html[dir=ltr]) .dlrow .dlt,
:where(html[dir=ltr]) .gprice,
:where(html[dir=ltr]) .mani .mrow .v,
:where(html[dir=ltr]) .pi-row b,
:where(html[dir=ltr]) .vf-ro b{text-align:right}
/* .dash-t is re-declared centered later in the original CSS — keep it centered */
:where(html[dir=ltr]) .dash-t{text-align:center}
