/* ══════════════════════════════════════════════════════ RTL overrides — loaded only when dir="rtl" (Arabic) ══════════════════════════════════════════════════════ */ [dir="rtl"] { font-family: 'Cairo', 'Poppins', sans-serif; direction: rtl; text-align: right; } /* ── Typography ─────────────────────────────────────── */ [dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] label, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th { direction: rtl; } /* ── Header ─────────────────────────────────────────── */ /* RTL direction on already reverses flex row order — do NOT add row-reverse here or it cancels out (RTL×reverse = LTR again) */ [dir="rtl"] .hdr-brand { margin-right: 0; margin-left: 28px; } [dir="rtl"] .hdr-brand-text { border-left: none; border-right: 1px solid rgba(255,255,255,.25); padding-left: 0; padding-right: 10px; } [dir="rtl"] .hdr-right { margin-left: 0; margin-right: auto; } [dir="rtl"] .dropdown-menu { right: auto; left: 0; } [dir="rtl"] .dd-icon { margin-right: 0; margin-left: 8px; } [dir="rtl"] .hdr-notif-dot { right: auto; left: -2px; } /* ── Dashboard sidebar ───────────────────────────────── */ [dir="rtl"] .dash-layout { flex-direction: row-reverse; } [dir="rtl"] .dash-sidebar { border-right: none; border-left: 1px solid rgba(255,255,255,.07); } [dir="rtl"] .sb-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .sb-item i { margin-right: 0; margin-left: 10px; } [dir="rtl"] .sb-badge { margin-left: 0; margin-right: auto; } [dir="rtl"] .dash-brand { flex-direction: row-reverse; } /* ── Cards & grids ───────────────────────────────────── */ [dir="rtl"] .card { text-align: right; } [dir="rtl"] .flex-between { flex-direction: row-reverse; } [dir="rtl"] .job-meta { flex-direction: row-reverse; } [dir="rtl"] .job-skills { flex-direction: row-reverse; } [dir="rtl"] .tag { direction: rtl; } /* ── Forms ───────────────────────────────────────────── */ [dir="rtl"] .form-group, [dir="rtl"] .form-label { text-align: right; } [dir="rtl"] .form-control { text-align: right; direction: rtl; } [dir="rtl"] select.form-control, [dir="rtl"] .form-select { background-position: left 12px center; padding-left: 36px; padding-right: 12px; } [dir="rtl"] .input-group .form-control { border-radius: var(--r) 0 0 var(--r); } [dir="rtl"] .input-group .btn { border-radius: 0 var(--r) var(--r) 0; } /* ── Footer ──────────────────────────────────────────── */ [dir="rtl"] .footer-inner { flex-direction: row-reverse; } [dir="rtl"] .footer-col { text-align: right; } [dir="rtl"] .footer-social { flex-direction: row-reverse; } [dir="rtl"] .footer-inner > div:first-child > div { flex-direction: row-reverse; } [dir="rtl"] .footer-inner > div:first-child > div > div { border-left: none; border-right: 1px solid rgba(255,255,255,.15); padding-left: 0; padding-right: 12px; } /* ── Chat / Messages ─────────────────────────────────── */ [dir="rtl"] .chat-wrap { flex-direction: row-reverse; } [dir="rtl"] .chat-sidebar { border-right: none; border-left: 1px solid var(--g200); } [dir="rtl"] .msg-own { flex-direction: row-reverse; } [dir="rtl"] .msg-other { flex-direction: row; } [dir="rtl"] .msg-bubble-own { border-radius: 18px 18px 4px 18px; } [dir="rtl"] .msg-bubble-other { border-radius: 18px 18px 18px 4px; } [dir="rtl"] .chat-input-row { flex-direction: row-reverse; } [dir="rtl"] .contact-item { flex-direction: row-reverse; } [dir="rtl"] .contact-item.active { border-left: none; border-right: 3px solid var(--navy); padding-left: 14px; padding-right: 11px; } /* ── Landing page ────────────────────────────────────── */ [dir="rtl"] .lp-hero-inner { flex-direction: row-reverse; } [dir="rtl"] .lp-cats-grid { direction: rtl; } [dir="rtl"] .lp-svcs-grid { direction: rtl; } [dir="rtl"] .lp-trust-grid { direction: rtl; } [dir="rtl"] .stats-bar { flex-direction: row-reverse; } /* ── Language switcher ───────────────────────────────── */ .lang-switcher { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin: 0 6px; } .lang-btn { color: rgba(255,255,255,.7); text-decoration: none; padding: 2px 5px; border-radius: 4px; transition: color .15s; cursor: pointer; } .lang-btn:hover, .lang-btn.active-lang { color: #fff; } .lang-btn.active-lang { background: rgba(255,255,255,.12); } .lang-divider { color: rgba(255,255,255,.3); font-size: 10px; } /* ── Sidebar RTL variant for lang switcher ───────────── */ .sb-lang-switcher { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 6px 18px; margin-top: 4px; } .sb-lang-btn { color: rgba(255,255,255,.5); text-decoration: none; padding: 3px 8px; border-radius: 4px; transition: all .15s; cursor: pointer; } .sb-lang-btn:hover, .sb-lang-btn.active-lang { color: #fff; background: rgba(255,255,255,.1); } .sb-lang-divider { color: rgba(255,255,255,.2); } /* ── Misc RTL swaps ──────────────────────────────────── */ [dir="rtl"] .ms-row { direction: rtl; } [dir="rtl"] .fee-row { flex-direction: row-reverse; } [dir="rtl"] .cust-info table { direction: rtl; } [dir="rtl"] .cust-info td:first-child { text-align: right; } [dir="rtl"] .flash { flex-direction: row-reverse; } [dir="rtl"] .flash i { margin-right: 0; margin-left: 8px; } /* ── Pagination ──────────────────────────────────────── */ [dir="rtl"] .pagination { flex-direction: row-reverse; }