/* ═══════════════════════════════════════════════════════════════ icealex — Arabic (RTL) stylesheet Loaded when is set ═══════════════════════════════════════════════════════════════ */ [dir="rtl"] { font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ── Nav ─────────────────────────────────────────────────────── */ [dir="rtl"] .nav { flex-direction: row-reverse; } [dir="rtl"] .nav-links { flex-direction: row-reverse; } [dir="rtl"] .nav-actions { flex-direction: row-reverse; } /* ── Language switcher pill ─────────────────────────────────── */ .lang-switcher { display: flex; align-items: center; gap: 2px; background: var(--gray-100, #f3f4f6); border-radius: 100px; padding: 3px; border: 1.5px solid var(--gray-200, #e5e7eb); } .lang-switcher .lang-btn { padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; color: var(--gray-500, #6b7280); transition: all 0.15s; border: none; background: transparent; letter-spacing: 0.5px; } .lang-switcher .lang-btn.lang-active { background: white; color: var(--dark, #0a1628); box-shadow: 0 1px 4px rgba(0,0,0,0.12); } .lang-switcher .lang-btn:hover:not(.lang-active) { color: var(--dark, #0a1628); } /* ── RTL text alignment ──────────────────────────────────────── */ [dir="rtl"] .section-header, [dir="rtl"] .eyebrow, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p { text-align: right; } [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-col ul { text-align: right; } [dir="rtl"] .breadcrumb { direction: rtl; } [dir="rtl"] .nav-mobile { text-align: right; } /* ── Flex reversals ──────────────────────────────────────────── */ [dir="rtl"] .footer-brand { text-align: right; } /* ── Form fields ─────────────────────────────────────────────── */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } /* ── Arrows in CTAs reverse for RTL ─────────────────────────── */ [dir="rtl"] .arrow-cta::after { content: ' ←'; } /* ── Stat cards, program cards ──────────────────────────────── */ [dir="rtl"] .stat-card, [dir="rtl"] .program-card { text-align: right; } /* ── Sidebar details ─────────────────────────────────────────── */ [dir="rtl"] .site-header { direction: rtl; } /* ── Mobile menu ─────────────────────────────────────────────── */ [dir="rtl"] .nav-mobile ul { text-align: right; }