/* Sarh Al Etqan · language layer r2 (2026-11-02 22:40Z)
   Owner asked to keep the s5 design (pid8-site.css: guilloche paper, green header, ornaments) — so this file
   no longer changes the look. It only adds: the English/العربية switch, English typography, LTR mirroring
   of the s5 heading/footer rules, and English text for strings that live in CSS content. */

@font-face{font-family:SarhLatin;src:url('/assets/fonts/IBMPlexSansArabic-latin-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:SarhLatin;src:url('/assets/fonts/IBMPlexSansArabic-latin-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:SarhLatin;src:url('/assets/fonts/IBMPlexSansArabic-latin-700.woff2') format('woff2');font-weight:700 900;font-display:swap}

/* language switch — sits on the dark green s5 header and the dark «more» sheet header */
.lang-switch{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border:1px solid rgba(179,154,104,.65);border-radius:999px;background:rgba(255,255,255,.06);color:#f4f1e8;font:600 13px/1 SarhLatin,Sarh,system-ui,sans-serif;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:border-color .2s,background-color .2s}
.lang-switch[lang=ar]{font-family:Sarh,SarhLatin,system-ui,sans-serif;font-size:13.5px}
.lang-switch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.lang-switch:hover{border-color:#d9c08e;background:rgba(255,255,255,.12)}
.lang-switch:focus-visible{outline:2px solid #d9c08e;outline-offset:2px}
.ds-header-inner .lang-switch{margin-inline-start:4px}
@media(max-width:1100px){.ds-header-inner .lang-switch{margin-inline-start:auto;height:34px;padding:0 11px}}
@media(max-width:520px){body.design-v1 .ds-header-help{display:none!important}.ds-header-inner .lang-switch{padding:0 10px;font-size:12.5px}}
.ds-mobile-more .lang-switch--sheet{margin-inline-start:auto}

/* LTR mirroring of s5 rules that are drawn from the right */
html[dir=ltr] body.design-v1 :is(.ds-heading,.ds-page h2,main h2,.home-section h2):not(.pid *):not(dialog *){background:linear-gradient(var(--id-gold),var(--id-gold)) left bottom/30px 2px no-repeat,linear-gradient(90deg,rgba(179,154,104,.45),rgba(179,154,104,0)) left calc(100% - .5px)/min(100%,220px) 1px no-repeat!important}
html[dir=ltr] body.design-v1 .ds-footer h3{background:linear-gradient(var(--id-gold),var(--id-gold)) left bottom/26px 1.5px no-repeat!important}

/* =====================================================================
   English display mode (html.i18n-en, dir=ltr)
   ===================================================================== */
html.i18n-pending body{visibility:hidden}
html.i18n-en body.design-v1,html.i18n-en body{font-family:SarhLatin,Sarh,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;letter-spacing:0}
html.i18n-en body.design-v1 :is(h1,h2,h3,.ds-heading,.ds-brand b,.ds-footer h3,.ds-footer-brand strong,.ds-mobile-more h2):not(.pid *){font-family:SarhLatin,Sarh,system-ui,sans-serif!important;font-weight:600!important;letter-spacing:-.012em}
html.i18n-en body.design-v1 :is(h1,.ds-heading):not(.pid *){line-height:1.2}
html.i18n-en body.design-v1 :is(p,li,dd){line-height:1.65}
html.i18n-en body.design-v1 .ds-brand b{font-size:17px;letter-spacing:-.005em}
html.i18n-en body.design-v1 .ds-brand small{letter-spacing:.16em}
html.i18n-en body.design-v1 :is(.ds-eyebrow,.hero-kicker){text-transform:uppercase;font-size:12px;letter-spacing:.12em}
html.i18n-en .ds-nav{gap:22px}
html.i18n-en body.design-v1 .ds-footer::after{text-align:left}
/* user-entered Arabic (part names, notes) keeps its own direction inside English pages */
html.i18n-en body :is(input,textarea){unicode-bidi:plaintext}
.i18n-legal-note{margin:0 0 18px;padding:10px 14px;border:1px solid #dce2dd;border-inline-start:3px solid #b39a68;border-radius:10px;background:#fbfaf6;color:#53665e;font-size:13.5px;line-height:1.5}

/* English: text that lives in CSS content */
html.i18n-en .stock-search .my-car-bar:not(:has([data-car-offers]:not([hidden]))) [data-car-title]:after{content:'Your car, no sign-up'}
html.i18n-en .offer-row .product-photo.is-reference .photo-zoom::before{content:"Reference image"}

/* No flash of the old header (r3, 22:55Z): index.html still carries the legacy navy #appBar, which showed
   until design-shell.js (deferred) injected the green header. Hide it from the first paint, and hold the
   header's place with the same green band until the real header exists (no jump, no old theme). */
html:has(script[src*="/assets/design-shell.js"]) #appBar{display:none!important}
html:has(script[src*="/assets/design-shell.js"]):not(:has(.ds-header))::before{content:'';display:block;height:115px;margin-bottom:6px;background:radial-gradient(900px 260px at 85% -40px,rgba(255,255,255,.07),rgba(255,255,255,0) 70%),linear-gradient(180deg,#134034 0%,var(--id-green-deep,#0f3a2f) 100%);box-shadow:0 1px 0 rgba(179,154,104,.75),0 4px 0 #f8f6f0,0 5px 0 rgba(179,154,104,.35)}
@media(max-width:760px){html:has(script[src*="/assets/design-shell.js"]):not(:has(.ds-header))::before{height:99px}}