/* =========================================================
   ZAHI STEEL — Language switcher, Arabic (RTL) & Chinese
   ========================================================= */

/* ---------- Language switcher (always visible in the header bar) ---------- */
.lang-sw{display:flex;align-items:center;border:1px solid var(--line);border-radius:30px;padding:3px;gap:2px;margin-inline-start:22px;flex:none;position:relative;z-index:2;background:rgba(13,15,19,.4)}
.lang-sw a{padding:5px 10px;border-radius:20px;font-size:.78rem;font-weight:600;color:var(--steel-2);line-height:1.2;transition:background .25s,color .25s}
.lang-sw a:hover{color:#fff;background:rgba(255,255,255,.06)}
.lang-sw a.on{background:var(--red);color:#fff}
.lang-sw a[lang="ar"]{font-family:'Noto Kufi Arabic',sans-serif;font-size:.8rem}
.lang-sw a[lang="zh"]{font-family:'Noto Sans SC',sans-serif}
@media (max-width:860px){
  .lang-sw{margin-inline-start:auto;margin-inline-end:10px}
  .lang-sw a{padding:5px 8px;font-size:.74rem}
  .burger{position:relative;z-index:2}
}
@media (max-width:380px){
  .brand-text i{display:none}
  .lang-sw a{padding:4px 6px}
}

/* ---------- Shared for non-Latin scripts ---------- */
html[lang="ar"] *,html[lang="zh"] *{letter-spacing:0!important}
html[lang="ar"] .kicker,html[lang="zh"] .kicker,
html[lang="ar"] .eyebrow,html[lang="zh"] .eyebrow{font-size:.85rem}

/* ---------- Chinese ---------- */
html[lang="zh"]{--font:'Noto Sans SC','Archivo',system-ui,sans-serif}
html[lang="zh"] body{font-family:var(--font);line-height:1.75}
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3{line-height:1.25;font-weight:900}
html[lang="zh"] .hero-title{line-height:1.12;font-size:clamp(3rem,7.4vw,6.4rem)}
html[lang="zh"] .ph-title{line-height:1.2}

/* ---------- Arabic ---------- */
html[lang="ar"]{--font:'IBM Plex Sans Arabic','Archivo',system-ui,sans-serif}
html[lang="ar"] body{font-family:var(--font);line-height:1.85}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .stat b,
html[lang="ar"] .brand-text b,html[lang="ar"] .btn,html[lang="ar"] .commit-track span{font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.45}
html[lang="ar"] .hero-title{line-height:1.3;font-size:clamp(2.8rem,7vw,6rem)}
html[lang="ar"] .hero-title .line{padding-bottom:.12em}
html[lang="ar"] .ph-title{line-height:1.4}
html[lang="ar"] .kicker,html[lang="ar"] .crumbs,html[lang="ar"] .eyebrow,html[lang="ar"] .specs dt,
html[lang="ar"] .quote-form label,html[lang="ar"] .contact-list span,html[lang="ar"] .gtable thead th,
html[lang="ar"] .foot-cols h4,html[lang="ar"] .gal figcaption,html[lang="ar"] .terms span,
html[lang="ar"] .legend,html[lang="ar"] .pb span,html[lang="ar"] .lt-row div b,html[lang="ar"] .ticker-track,
html[lang="ar"] .pre-text,html[lang="ar"] .src-center{font-family:'IBM Plex Sans Arabic',sans-serif}
html[lang="ar"] .pb span b{font-family:'Noto Kufi Arabic',sans-serif}

/* RTL mirror fixes (flex/grid flip automatically; these are the absolute-positioned bits) */
[dir="rtl"] .btn svg,[dir="rtl"] .prod-link svg{transform:scaleX(-1)}
[dir="rtl"] .btn:hover svg,[dir="rtl"] .prod-link:hover svg{transform:scaleX(-1) translateX(5px)}
[dir="rtl"] .stat{border-right:0;border-left:1px solid var(--line);padding-left:24px;padding-right:24px}
[dir="rtl"] .stat:first-child{padding-right:0}
[dir="rtl"] .stat:last-child{border-left:0}
[dir="rtl"] .tag::before{left:auto;right:0}
[dir="rtl"] .readout{border-left:1px solid var(--line);border-right:2px solid var(--red)}
[dir="rtl"] .readout b{margin-right:0;margin-left:6px}
[dir="rtl"] .prod-code{right:auto;left:22px}
[dir="rtl"] .ticks li{padding-left:0;padding-right:26px}
[dir="rtl"] .ticks li::before{left:auto;right:0}
[dir="rtl"] .mkt::before,[dir="rtl"] .why-item::before{left:auto;right:0}
[dir="rtl"] .step::after{transform-origin:right}
[dir="rtl"] .nav-links a:not(.btn)::after{transform-origin:left}
[dir="rtl"] .nav-links a:not(.btn):hover::after,[dir="rtl"] .nav-links a.active::after{transform-origin:right}
[dir="rtl"] .dd-menu{left:auto;right:-18px}
[dir="rtl"] .apps li{padding:20px 50px 20px 22px}
[dir="rtl"] .apps li::before{left:auto;right:20px}
[dir="rtl"] .apps li:hover{transform:translateX(-4px)}
[dir="rtl"] .cmp.feature li{padding-left:0;padding-right:22px}
[dir="rtl"] .cmp.feature li::before{left:auto;right:0}
[dir="rtl"] .cmp.feature::after{right:auto;left:-10px}
[dir="rtl"] .qa summary{padding:20px 22px 20px 56px}
[dir="rtl"] .qa summary::after{right:auto;left:22px}
[dir="rtl"] .gtable th,[dir="rtl"] .gtable td{text-align:right}
[dir="rtl"] .ph-code{right:auto;left:24px}
[dir="rtl"] .ph-shade{background:linear-gradient(270deg,rgba(13,15,19,.95) 0%,rgba(13,15,19,.75) 45%,rgba(13,15,19,.35) 100%),linear-gradient(0deg,var(--ink) 0%,transparent 40%)}
[dir="rtl"] .pb span{left:auto;right:22px}
[dir="rtl"] .quote-form select{background-position:13px 50%,18px 50%;padding-left:34px}
[dir="rtl"] .policy-body .draft{border-left:0;border-right:3px solid var(--red)}
[dir="rtl"] .wa-float{right:auto;left:22px}
[dir="rtl"] .kicker::before{flex:none}
/* marquees keep moving the same way */
[dir="rtl"] .ticker-track,[dir="rtl"] .commit-track{direction:ltr}
[dir="rtl"] .ticker-track span,[dir="rtl"] .commit-track span{direction:rtl}
/* numbers, codes and emails stay left-to-right inside Arabic text */
[dir="rtl"] .contact-list a,[dir="rtl"] .js-email,[dir="rtl"] .js-wa,[dir="rtl"] .specs dd,[dir="rtl"] .gtable td{unicode-bidi:plaintext}
[dir="rtl"] .contact-list a[href^="https://wa.me"],[dir="rtl"] .js-wa{direction:ltr;text-align:right}
@media (max-width:860px){
  [dir="rtl"] .stat{padding:26px 16px}
  [dir="rtl"] .stat:nth-child(2){border-left:0}
  [dir="rtl"] .stat:nth-child(3){padding-right:0}
  [dir="rtl"] .ro2{left:auto;right:-4%}
}
@media (min-width:861px){ .nav-links{margin-inline-start:auto} }