/* =========================================================================
   ITHAR DIGITAL — Arabic + right-to-left layer
   Loaded on every page. Everything here is inert until html[lang="ar"] /
   html[dir="rtl"], so English and French pages are untouched.
   ========================================================================= */

/* ---------------------------------------------------------- typography
   The Latin brand fonts carry no Arabic glyphs, and the brand's negative
   letter-spacing breaks Arabic outright: tracking pulls apart the letters of
   a cursive script and breaks the joins between them. */
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .btn, html[lang="ar"] .eyebrow, html[lang="ar"] .link-arrow,
html[lang="ar"] label, html[lang="ar"] .field input, html[lang="ar"] .field select,
html[lang="ar"] .field textarea, html[lang="ar"] summary, html[lang="ar"] .sec-title,
html[lang="ar"] .plan, html[lang="ar"] .tab, html[lang="ar"] .nav__links a{
  font-family:"Tajawal","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;
}
html[lang="ar"] *{letter-spacing:0 !important}

/* A monospace font has no Arabic, and its fallback renders Arabic letters
   unjoined ("د ف ع ة"). So in Arabic the mono token points at Tajawal, and
   true monospace is restored only where the content is code or binary. */
html[lang="ar"]{--font-mono:"Tajawal","Segoe UI",Tahoma,sans-serif}
html[lang="ar"] :is(.codewin,.terminal,.step__cmd,.card__file,.card__bin,.sec-num,.btn__bin,
  .plan__bin,.footer__bin,.work__bar,.browser__bar,.mock__slots,.caret,.ticker,.step__bit,
  .why__bin,.g__n,.ba__head b,.contact__points li > span[aria-hidden="true"],.pack__tag){
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{line-height:1.4; font-weight:800}
html[lang="ar"] body{font-size:17.5px; line-height:1.85}
html[lang="ar"] .eyebrow, html[lang="ar"] .toc h2, html[lang="ar"] .footer__col h4{text-transform:none}

/* Page is waiting for its Arabic dictionary: hide it for at most a few
   seconds rather than flash English and then swap. i18n.js lifts it. */
html.i18n-wait body{visibility:hidden}

/* Things that must stay Latin and left-to-right inside an Arabic page:
   the brand, code, binary labels, URLs, prices. */
.brand, .sec-num, .codewin, .terminal, .ticker, .step__cmd, .card__bin, .card__file,
.btn__bin, .pack__tag, .work__bar, .browser__bar, .work__built li, .footer__bin,
.mock__slots{direction:ltr; unicode-bidi:isolate}
/* (.plan__price, .page-meta and .footer__tag are deliberately NOT forced LTR: they mix
   Arabic words with numbers — "ابتداءً من $22,000" — and forcing LTR put
   "from" after the number for an Arabic reader.) */
html[lang="ar"] .brand__text{font-family:"Space Grotesk",system-ui,sans-serif}
html[dir="rtl"] .codewin{text-align:left}

/* ---------------------------------------------------------- language toggle */
.lang{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; background:#fff; flex:none}
.lang__btn{
  border:0; background:transparent; cursor:pointer; border-radius:var(--r-pill);
  padding:6px 12px; font:600 .82rem/1 var(--font-display); color:var(--ink-500);
  transition:background .2s, color .2s;
}
.lang__btn[lang="ar"]{font-family:"Tajawal",sans-serif; font-size:.9rem}
.lang__btn[aria-pressed="true"]{background:var(--ink-900); color:#fff}
@media (max-width:560px){ .lang__btn{padding:6px 9px} }

/* ---------------------------------------------------------- RTL mirroring
   Each rule below undoes one physical left/right in styles.css, plans.css or
   code.css. Logical properties would be cleaner at the source, but those
   files are shared with pages another session is editing. */
/* (.brand__thin is NOT mirrored: the logo is forced left-to-right above, so
   its original margin-left is still the correct side.) */
html[dir="rtl"] .nav__links{margin-left:0; margin-right:auto}
/* Arabic nav labels are longer; keep each on one line and give the bar room
   by dropping the secondary "quote" button before the links start wrapping. */
html[lang="ar"] .nav__links a{white-space:nowrap; padding:9px 11px}
@media (max-width:1240px){ html[lang="ar"] .nav__hide-sm{display:none} }
html[dir="rtl"] .nav__actions{margin-left:0; margin-right:auto}
html[dir="rtl"] .hero__trust b{margin-right:0; margin-left:5px}
html[dir="rtl"] .card__bin{right:auto; left:20px}
html[dir="rtl"] .market::before{left:auto; right:0}
html[dir="rtl"] .faq__item summary{padding:20px 24px 20px 56px}
html[dir="rtl"] .faq__item summary::after{right:auto; left:24px}
html[dir="rtl"] .field select{background-position:left 16px center; padding-right:15px; padding-left:42px}
html[dir="rtl"] .contact__points li span{margin-top:2px}

/* the arrow in "link →" points the way you read */
html[dir="rtl"] .link-arrow > span[aria-hidden="true"],
html[dir="rtl"] .link-arrow .arr{display:inline-block; transform:scaleX(-1)}
html[dir="rtl"] .link-arrow:hover > span[aria-hidden="true"],
html[dir="rtl"] .link-arrow:hover .arr{transform:scaleX(-1) translateX(5px)}

/* plans.css */
html[dir="rtl"] .plan__flag{left:auto; right:28px}
html[dir="rtl"] .plan__bin{right:auto; left:22px}
html[dir="rtl"] .plan__cur{margin-right:0; margin-left:1px}
html[dir="rtl"] .plan__from{margin-right:0; margin-left:7px}
html[dir="rtl"] .plan__list li{padding-left:0; padding-right:26px}
html[dir="rtl"] .plan__list li::before{left:auto; right:2px}
html[dir="rtl"] .wa-fab{right:auto; left:22px}
@media (max-width:640px){ html[dir="rtl"] .wa-fab{left:16px} }

/* code.css — prose, contents list, tables */
html[dir="rtl"] .toc a{border-left:0; border-right:2px solid var(--line); padding:7px 14px 7px 0}
html[dir="rtl"] .toc a:hover{border-right-color:var(--one)}
html[dir="rtl"] .prose h2 .n{margin-right:0; margin-left:10px}
html[dir="rtl"] .prose ul li{padding-left:0; padding-right:24px}
html[dir="rtl"] .prose ul li::before{left:auto; right:0}
html[dir="rtl"] .prose th, html[dir="rtl"] .prose td{text-align:right}
@media (max-width:900px){
  html[dir="rtl"] .toc a{border-right:0; padding:6px 0 6px 16px}
}