/* ========================================================== Arabic / RTL layer — variation-d Dormant until . Purely presentational: no text lives here, so the translation plugin is unaffected. ========================================================== */ /* ---- Typography: Arabic families ---- */ html[dir="rtl"] body,html[dir="rtl"] p,html[dir="rtl"] li,html[dir="rtl"] .nav a,html[dir="rtl"] .btn,html[dir="rtl"] .topbar,html[dir="rtl"] input,html[dir="rtl"] select,html[dir="rtl"] textarea,html[dir="rtl"] button,html[dir="rtl"] summary{font-family:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif} html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h5,html[dir="rtl"] .serif,html[dir="rtl"] .pr-title,html[dir="rtl"] .acl-title,html[dir="rtl"] .pr-doc-name,html[dir="rtl"] .dc-name,html[dir="rtl"] .cred-name,html[dir="rtl"] blockquote,html[dir="rtl"] .rv-num,html[dir="rtl"] .cert-abbr,html[dir="rtl"] .ref-abbr{font-family:"Amiri","Noto Naskh Arabic","IBM Plex Sans Arabic",serif;font-style:normal;letter-spacing:0} /* Arabic has no italics */ html[dir="rtl"] em,html[dir="rtl"] i,html[dir="rtl"] .sig,html[dir="rtl"] .sm-quote blockquote em{font-style:normal} /* Arabic needs a touch more line-height and no tight tracking */ html[dir="rtl"] .pr-title,html[dir="rtl"] .acl-title,html[dir="rtl"] .hero h1{line-height:1.22;letter-spacing:0} html[dir="rtl"] .pr-eyebrow,html[dir="rtl"] .acl-eyebrow,html[dir="rtl"] .eyebrow,html[dir="rtl"] .pr-sec-h,html[dir="rtl"] .sec-h,html[dir="rtl"] .icard .ihd,html[dir="rtl"] .ii-note,html[dir="rtl"] .ii-badge,html[dir="rtl"] .rv-sport,html[dir="rtl"] .rv-ptag,html[dir="rtl"] .tw{letter-spacing:.02em} /* ---- Base direction ---- */ html[dir="rtl"] body{direction:rtl;text-align:right} /* Latin runs stay LTR: phone, email, URLs, acronyms, durations */ html[dir="rtl"] [data-keep-ltr],html[dir="rtl"] .phone,html[dir="rtl"] .ref-url,html[dir="rtl"] .vdur,html[dir="rtl"] .rv-dur,html[dir="rtl"] a[href^="tel:"],html[dir="rtl"] a[href^="mailto:"]{direction:ltr;unicode-bidi:isolate} /* ---- Header / nav ---- */ html[dir="rtl"] .header{direction:rtl} html[dir="rtl"] .nav-sub{left:auto;right:50%;transform:translateX(50%) translateY(6px)} html[dir="rtl"] .nav-item:hover .nav-sub{transform:translateX(50%) translateY(0)} html[dir="rtl"] .nav-sub a{text-align:right} /* Breadcrumb chevrons point the other way */ html[dir="rtl"] .crumb .sep{display:inline-block;transform:scaleX(-1)} /* ---- Home hero ---- */ html[dir="rtl"] .hero{background-position:left center} html[dir="rtl"] .hero-doc{right:auto;left:24%} html[dir="rtl"] .hero::before{background:linear-gradient(270deg,#F9F9F7 0%,#F9F9F7 22%,rgba(249,249,247,.72) 40%,rgba(249,249,247,.15) 52%,rgba(249,249,247,0) 62%)} html[dir="rtl"] .hero-media .or{object-position:center left} html[dir="rtl"] .hero-media::before{background:linear-gradient(270deg,#fff 0,rgba(255,255,255,.15) 12%,rgba(255,255,255,0) 30%)} html[dir="rtl"] .quote{right:auto;left:44px} @media (max-width:640px){html[dir="rtl"] .quote{left:auto}} /* ---- Stat / cert / footer dividers ---- */ html[dir="rtl"] .stat:not(:last-child)::after,html[dir="rtl"] .pr-stat:not(:last-child)::after{right:auto;left:0} html[dir="rtl"] .certifications div:not(:last-child){border-right:0;border-left:1px solid var(--line)} html[dir="rtl"] .footer .fcell:not(:last-child){border-right:0;border-left:1px solid var(--line)} html[dir="rtl"] .footer .fcell{text-align:right} html[dir="rtl"] .sport-item{border-left:0;border-right:1px solid var(--line)} html[dir="rtl"] .sports-photo{border-right:0} html[dir="rtl"] .sports-photo img{-webkit-mask-image:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,#000 58%,#000 100%);mask-image:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,#000 58%,#000 100%)} html[dir="rtl"] .card-body{text-align:right} /* ---- Procedure hero ---- */ /* Play triangles keep pointing right — media convention, not reading order */ html[dir="rtl"] .pr-play svg,html[dir="rtl"] .vplay svg,html[dir="rtl"] .lb-play svg{margin-left:0;margin-right:4px} html[dir="rtl"] .vdur{right:auto;left:10px} html[dir="rtl"] .lb-bar{right:auto;left:12px} html[dir="rtl"] .rv-dur{right:auto;left:12px} html[dir="rtl"] .step .snum{left:auto;right:7px} html[dir="rtl"] .pr-learn-grid{text-align:right} /* Facts / timeline lists */ html[dir="rtl"] .facts .fx dd{text-align:left} html[dir="rtl"] .facts .tl li{padding-left:0;padding-right:22px} html[dir="rtl"] .facts .tl li::before{left:auto;right:4px} html[dir="rtl"] .facts .tl li::after{left:auto;right:8px} html[dir="rtl"] .pr-appt .appt-col:not(:last-child){border-right:0;border-left:1px solid rgba(255,255,255,.14)} html[dir="rtl"] .appt-col:first-child{border-right:0;border-left:1px solid rgba(255,255,255,.14)} html[dir="rtl"] .appt-col{text-align:right} @media (max-width:1000px){html[dir="rtl"] .appt-col:first-child{border-left:0}} /* ---- Subpages (pages.css) ---- */ html[dir="rtl"] .dc-flag{right:auto;left:20px} html[dir="rtl"] .acl-flag{right:auto;left:40px} html[dir="rtl"] .dc-name{padding-right:0;padding-left:44px} @media (max-width:640px){html[dir="rtl"] .dc-name{padding-left:0}} html[dir="rtl"] .idx-item{padding:19px 0 19px 4px;transition:padding-right .2s ease} html[dir="rtl"] .idx-item:hover{padding-left:0;padding-right:10px} html[dir="rtl"] .idx-item .ii-note{margin-left:0;margin-right:10px} html[dir="rtl"] .cc-body{align-items:flex-end;text-align:right} html[dir="rtl"] .clin-sign{text-align:left} html[dir="rtl"] .clin-sign .sig-img{margin-left:0;margin-right:auto} html[dir="rtl"] .ref-cell{border-left:0;border-right:1px solid var(--line)} html[dir="rtl"] .ref-cell:first-child{border-right:0} @media (max-width:1000px){html[dir="rtl"] .ref-cell:nth-child(odd){border-right:0}} @media (max-width:640px){html[dir="rtl"] .ref-cell{border-right:0}} html[dir="rtl"] .ref-logo{object-position:right center;align-self:flex-end} html[dir="rtl"] .sm-quote{border-left:0;border-right:3px solid var(--gold);padding:8px 26px 8px 0} html[dir="rtl"] .rv-pquote{padding-left:0;padding-right:14px;border-left:0;border-right:2px solid var(--gold)} html[dir="rtl"] .rv-banner-score{border-right:0;border-left:1px solid rgba(255,255,255,.16);padding-right:0;padding-left:34px} @media (max-width:1000px){html[dir="rtl"] .rv-banner-score{border-left:0;padding-left:0}} html[dir="rtl"] .cta-band,html[dir="rtl"] .disclaimer,html[dir="rtl"] .faq summary{text-align:right} /* ---- Directional arrows: mirror, never rotate glyphs ---- */ html[dir="rtl"] .vpro svg,html[dir="rtl"] .btn-arrow svg,html[dir="rtl"] .revs-more svg,html[dir="rtl"] .cc svg.cc-arrow,html[dir="rtl"] a[class*="more"] svg,html[dir="rtl"] .ii-right svg{transform:scaleX(-1)} /* Chevrons that point down (accordions, selects) must NOT flip */ html[dir="rtl"] .step .sthumb svg,html[dir="rtl"] .pr-viewall svg{transform:scaleX(-1)} html[dir="rtl"] .chev,html[dir="rtl"] .nav-caret,html[dir="rtl"] .i.sm,html[dir="rtl"] .pr-play svg,html[dir="rtl"] .vplay svg,html[dir="rtl"] .lb-play svg{transform:none} html[dir="rtl"] .rv-play{transform:translate(-50%,-50%)} html[dir="rtl"] .nav-item:hover .nav-caret{transform:rotate(180deg)} /* ---- Language switch pill (injected by rtl-toggle.js) ---- */ .lang-switch{display:inline-flex;align-items:center;gap:0;border:1px solid currentColor;border-radius:6px;overflow:hidden;opacity:.9} .lang-switch button{appearance:none;background:transparent;border:0;color:inherit;font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;padding:3px 8px;cursor:pointer;line-height:1.5} .lang-switch button[aria-pressed="true"]{background:var(--gold,#d1a24a);color:#0b2440} .lang-switch button:hover:not([aria-pressed="true"]){color:var(--gold,#d1a24a)}