/* droPrompt i18n styles — Arabic font + RTL overrides + toggle button. Loaded alongside i18n.js on every page. The only thing flipping layouts is plus body.is-rtl — browsers handle most of the work (flex, grid, text alignment) via the `dir` attribute alone. This file covers the spots where we need manual intervention (icons, margins that were hardcoded with left/right, the floating toggle itself). */ /* ── Arabic font ──────────────────────────────────────────────────────── Readex Pro is a contemporary Arabic + Latin variable sans-serif with great optical sizing. We only apply it when the page is in Arabic so English pages keep using the site's Geist stack. */ /* Readex Pro loads lazily from i18n.js only when Arabic is active. */ html[lang="ar"], html[lang="ar"] body { font-family: 'Readex Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Arabic', sans-serif !important; } html[lang="ur"], html[lang="ur"] body { font-family: 'Noto Nastaliq Urdu', 'Readex Pro', serif !important; } /* Preserve monospace blocks (codeblocks, prompt output) — we do NOT want Arabic digits or shaping inside technical output. */ html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] kbd, html[dir="rtl"] samp, html[dir="rtl"] .mono, html[dir="rtl"] [class*="font-mono"] { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; direction: ltr; unicode-bidi: isolate; } /* ── RTL layout nudges ────────────────────────────────────────────────── Most modern CSS (flex, grid, logical properties) handles RTL cleanly. These rules cover a few places where we hardcoded left/right or rely on icon ordering. */ body.is-rtl .flip-rtl { transform: scaleX(-1); } /* Any ->arrow / chevron we use for "next" navigation should mirror so it points the natural reading direction. Add class="i18n-dir-icon" to any icon that should flip with language. */ body.is-rtl .i18n-dir-icon { transform: scaleX(-1); } /* Keep currency / numeric values LTR even inside Arabic paragraphs so things like "1,000 EGP" or "$10 USD/mo" don't get weird bidi flipping. */ body.is-rtl .ltr, body.is-rtl [data-ltr], body.is-rtl .plan-price, body.is-rtl .amount, body.is-rtl .ps-price, body.is-rtl [data-model], body.is-rtl .active-engine, body.is-rtl .credit-cost-preview, body.is-rtl input[type="email"], body.is-rtl input[type="url"], body.is-rtl input[type="tel"], body.is-rtl input[type="number"] { direction: ltr; unicode-bidi: isolate; } /* ── Floating language toggle (DISABLED site-wide) ────────────────────── The floating pill used to dock bottom-right as a fallback for pages without their own [data-lang-toggle] slot. Per product decision the language switch should ONLY live inside the header dropdown menu (#hd-lang-btn on index.html, #dp-shared-lang-btn on subpages) — never as a free-floating control on any page, mobile or desktop. Belt + suspenders + a third belt: 1. `.dp-lang-float` is the wrapper class for the floating fallback pill → hide it. 2. `.dp-lang-toggle` is the pill markup itself → hide ANY occurrence on the page. Dropdown items use `.hd-item` / `.dp-hd-item` (NOT `.dp-lang-toggle`) so they're unaffected. 3. i18n.js no longer injects the pill at all — even a `data-lang-toggle- mount` slot is ignored. These rules just neutralize anything an old cached script or third-party widget might still try to render. */ .dp-lang-float, .dp-lang-toggle, button.dp-lang-toggle { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ── The pill itself ── We use !important on background / color / border because most pages include a global `button { … }` reset (Tailwind preflight, normalize, custom resets) that would otherwise repaint our pill white-on-dark-text. The toggle has to look identical no matter which page hosts it. */ button.dp-lang-toggle, .dp-lang-toggle { pointer-events: auto !important; position: relative !important; display: inline-flex !important; align-items: center !important; gap: 9px !important; height: 40px !important; padding: 0 14px 0 6px !important; margin: 0 !important; border-radius: 999px !important; border: 1px solid rgba(231, 115, 26, 0.55) !important; background: #0e0e10 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important; color: #f4f4f4 !important; font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1 !important; text-transform: none !important; text-decoration: none !important; cursor: pointer !important; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s !important; -webkit-tap-highlight-color: transparent; } button.dp-lang-toggle:hover, .dp-lang-toggle:hover { border-color: #e7731a !important; background: #161618 !important; transform: translateY(-1px) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(231, 115, 26, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important; } button.dp-lang-toggle:focus-visible, .dp-lang-toggle:focus-visible { outline: 2px solid #e7731a !important; outline-offset: 2px !important; } .dp-lang-toggle .dp-lang-toggle-flag { font-family: 'Geist Mono', ui-monospace, monospace !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.1em !important; background: #e7731a !important; color: #080808 !important; padding: 6px 10px !important; border-radius: 999px !important; text-transform: uppercase !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 32px !important; height: 28px !important; box-sizing: border-box !important; } .dp-lang-toggle .dp-lang-toggle-label { color: #f4f4f4 !important; font-weight: 600 !important; white-space: nowrap !important; } body.is-rtl .dp-lang-toggle .dp-lang-toggle-label { font-family: 'Readex Pro', 'Geist', ui-sans-serif, sans-serif !important; } /* Tiny status dot for "loading translations" state */ .dp-lang-toggle.is-loading::after { content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #e7731a; box-shadow: 0 0 0 2px #0e0e10; animation: dpLangPulse 1.2s ease-in-out infinite; } body.is-rtl .dp-lang-toggle.is-loading::after { right: auto; left: 8px; } @keyframes dpLangPulse { 0%, 100% { opacity: 0.5; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } @media (max-width: 520px) { .dp-lang-float { bottom: 14px; right: 14px; } body.is-rtl .dp-lang-float { right: auto; left: 14px; } button.dp-lang-toggle, .dp-lang-toggle { height: 38px !important; font-size: 12.5px !important; padding: 0 12px 0 5px !important; } .dp-lang-toggle .dp-lang-toggle-flag { font-size: 10px !important; padding: 5px 9px !important; min-width: 30px !important; height: 26px !important; } }