/* ===================================================================== Core Direction — Arabic (RTL) layer + language toggle styling Loaded on every page. Only takes effect when . ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap'); /* ---------- Language toggle button ---------- */ .cd-lang-toggle{ display:inline-flex;align-items:center;gap:7px; background:rgba(176,38,255,.10); color:#C3D93B; border:1.5px solid rgba(195,217,59,.45); border-radius:999px; height:38px;box-sizing:border-box; padding:0 16px !important; font-family:'Montserrat','Tajawal',Arial,sans-serif; font-weight:800;font-size:13px;letter-spacing:.04em; line-height:1;cursor:pointer;white-space:nowrap; transition:transform .15s ease,border-color .15s ease,background .15s ease; /* Space between the language toggle and the adjacent theme toggle. Logical margin so it lands on the toggle-facing side in LTR *and* RTL. */ margin-inline-start: 12px !important; } .cd-lang-toggle:hover{ transform:translateY(-1px); border-color:#C3D93B; background:rgba(176,38,255,.18); } .cd-lang-toggle svg{ width:16px;height:16px;flex:0 0 auto; fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round; } .cd-lang-toggle .cd-lang-label{display:inline-block} .cd-lang-toggle .cd-lang-code{display:none;font-weight:800} /* Floating fallback (pages without a nav CTA cluster, e.g. guides) */ .cd-lang-toggle--float{ position:fixed;top:14px;right:16px;z-index:1000; background:rgba(13,8,20,.92); backdrop-filter:blur(10px); box-shadow:0 6px 22px rgba(20,5,40,.35); } [dir="rtl"] .cd-lang-toggle--float{right:auto;left:16px} /* On phones: drop the globe + full name, show just the EN/AR code pill */ @media(max-width:600px){ .cd-lang-toggle{height:34px;padding:0 12px !important;font-size:12px;gap:0} .cd-lang-toggle svg, .cd-lang-toggle .cd-lang-label{display:none} .cd-lang-toggle .cd-lang-code{display:inline-block} } /* ===================================================================== RTL / Arabic typography — scoped to dir="rtl" ===================================================================== */ [dir="rtl"] body{ font-family:'Tajawal','Montserrat',Arial,sans-serif; line-height:1.7; } /* Arabic reads better a touch larger and with normal letter-spacing */ [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4, [dir="rtl"] .quiz-q,[dir="rtl"] .amt{letter-spacing:0} [dir="rtl"] h1{line-height:1.2} [dir="rtl"] h2{line-height:1.25} /* Mirror default text alignment */ [dir="rtl"] .lead, [dir="rtl"] .price, [dir="rtl"] .price-body, [dir="rtl"] .quiz-opt, [dir="rtl"] footer.cdfoot, [dir="rtl"] .tcard{text-align:right} /* Keep genuinely-centred blocks centred */ [dir="rtl"] .center, [dir="rtl"] .trust p, [dir="rtl"] .truth h2, [dir="rtl"] .stats .grid, [dir="rtl"] .stories .head, [dir="rtl"] .quiz-note, [dir="rtl"] .price li{text-align:center} [dir="rtl"] .price li{text-align:right} /* Lists: move the tick / bullet to the right side */ [dir="rtl"] .price ul{padding:0} [dir="rtl"] .price li{padding:8px 30px 8px 0} [dir="rtl"] .price li:before{left:auto;right:0} [dir="rtl"] .quiz-res li{flex-direction:row} /* Numeric / currency + latin brand tokens stay LTR inside RTL text */ [dir="rtl"] .amt, [dir="rtl"] .stats .n, [dir="rtl"] .bidi-ltr{direction:ltr;unicode-bidi:isolate} [dir="rtl"] .amt{display:inline-block} /* Ecosystem strip + nav: let flexbox mirror naturally, tidy scroll */ [dir="rtl"] .quiz-close{margin-left:0;margin-right:auto} [dir="rtl"] .quiz-top{flex-direction:row} /* FAQ arrow / summary alignment */ [dir="rtl"] .faq summary{text-align:right} /* Footer grid keeps columns; just realign text (handled above) */ [dir="rtl"] footer.cdfoot .foot-bot{direction:rtl} /* Buttons with a trailing arrow "→" — flip to point the reading way */ [dir="rtl"] .rtl-flip-arrow{display:inline-block;transform:scaleX(-1)} /* Testimonials: avatar sits on the right */ [dir="rtl"] .tcard .author{flex-direction:row} [dir="rtl"] .tcard .qm{text-align:right} /* Guide pages commonly use these helpers — mirror them defensively */ [dir="rtl"] .breadcrumb, [dir="rtl"] .step, [dir="rtl"] .callout, [dir="rtl"] .toc, [dir="rtl"] .guide-nav, [dir="rtl"] main, [dir="rtl"] article, [dir="rtl"] .content{text-align:right} [dir="rtl"] ul,[dir="rtl"] ol{padding-right:1.4em;padding-left:0}