/* ============================================================ RTL overrides — applied only when the page has dir="rtl" (Arabic). Loaded as the last stylesheet and gated by `.rtl-app` on the element so it never affects English layout. ============================================================ */ /* --- Arabic typography -------------------------------------- */ .rtl-app { font-family: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .rtl-app h1, .rtl-app h2, .rtl-app h3, .rtl-app h4, .rtl-app .lp-brand .name, .rtl-app .sidebar-brand .name, .rtl-app .lp-price-name, .rtl-app .lp-price-amt { font-family: 'Tajawal', 'Lora', Georgia, serif; letter-spacing: 0; } .rtl-app .nav-label, .rtl-app .waqf-switcher label, .rtl-app .lp-trust-label, .rtl-app .lp-hero-badge { letter-spacing: 0; } /* --- App shell: sidebar pinned to the right ------------------ */ .rtl-app .sidebar { left: auto; right: 0; } .rtl-app .main-col { margin-left: 0; margin-right: var(--sidebar-w); } .rtl-app .nav-link .count { margin-left: 0; margin-right: auto; } .rtl-app .sidebar-backdrop { left: auto; right: 0; } @media (max-width: 900px) { .rtl-app .sidebar { transform: translateX(100%); } .rtl-app .sidebar.open { transform: translateX(0); } .rtl-app .main-col { margin-right: 0; } } /* --- Landing page chips & directional bits -------------------- */ .rtl-app .lp-chip-a { right: auto; left: -10px; } .rtl-app .lp-chip-b { left: auto; right: -14px; } .rtl-app .lp-mock-url { margin-left: 0; margin-right: 8px; } /* --- Language switcher (shared) ------------------------------- */ .lang-switcher { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; } .lang-btn, .lang-current { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px; } .lang-btn { color: var(--teal-700); text-decoration: none; border: 1px solid var(--teal-700); /* background: var(--teal-50); */ } .lang-btn:hover { background: var(--teal-100); color: var(--teal-800); text-decoration: none; } .lang-current { color: #fff; background: var(--teal-700); border: 1px solid var(--teal-700); } .topbar-lang { align-self: center; padding: 0 4px; }