/* ============================================================ * RTL overrides — loaded only when . * Minimal but functional: flips text direction + the most common * Bootstrap 3 + custom helpers (pull-*, text-*, mr/ml gutters, navbar * dropdowns, input-group addons). * * Add a rule here when you spot something that didn't mirror — keep * it scoped under [dir="rtl"] / html[dir="rtl"] so we never affect * the LTR layout. * ============================================================ */ html[dir="rtl"] body { direction: rtl; text-align: right; font-family: 'Cairo', 'Tahoma', 'Segoe UI', sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] td, html[dir="rtl"] th { font-family: 'Cairo', 'Tahoma', 'Segoe UI', sans-serif; } /* ── Bootstrap helper flips ──────────────────────────────── */ html[dir="rtl"] .pull-left { float: right !important; } html[dir="rtl"] .pull-right { float: left !important; } html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* ── Navbar ────────────────────────────────────────────────── The header chrome (logo + main menu) stays in LTR layout under Arabic — brand on the left, menu on the right — same as English. Only the *menu-item text* renders right-to-left (Arabic glyphs are bidirectional by Unicode rules, so they read correctly even inside an LTR-laid container). We force `direction: ltr` on the header so flex / float / margins all behave like LTR, then let menu-item TEXT switch back to RTL per element so the words read naturally. */ html[dir="rtl"] .header, html[dir="rtl"] .header .navbar, html[dir="rtl"] .header .container, html[dir="rtl"] .header .navbar-collapse, html[dir="rtl"] .header .navbar-nav, html[dir="rtl"] .header .navbar-header { direction: ltr; } /* Re-enable RTL text inside each menu item so Arabic labels render correctly. Dropdown items are right-aligned for the same reason. */ html[dir="rtl"] .header .navbar-nav > li > a, html[dir="rtl"] .header .dropdown-menu > li > a { direction: rtl; } html[dir="rtl"] .header .dropdown-menu { text-align: right; } html[dir="rtl"] .caret { margin-right: 4px; margin-left: 0; } /* Menu group stays on the right of the viewport (LTR position), but the *order* of items within reverses under RTL — so the first DOM item (Home) sits at the right edge of the menu where Arabic reading begins, and the CTA pill sits at the left of the menu, closest to the brand. Scoped to desktop where the inline menu shows; the mobile drawer keeps its natural top-down order. */ @media (min-width: 992px) { html[dir="rtl"] .header .navbar-nav { flex-direction: row-reverse; } } /* ── Buttons + icons ─────────────────────────────────────── */ html[dir="rtl"] .btn > i.fa:first-child, html[dir="rtl"] .btn > i.fas:first-child, html[dir="rtl"] .btn > i.far:first-child, html[dir="rtl"] .btn > i.fab:first-child, html[dir="rtl"] .btn > .glyphicon:first-child { margin-left: 8px; margin-right: 0; } html[dir="rtl"] .btn-xs > i.fa:first-child { margin-left: 5px; margin-right: 0; } /* ── Input-group addons (icons on the side) ──────────────── */ html[dir="rtl"] .input-group-addon:first-child { border-radius: 0 4px 4px 0; border-left: 0; border-right: 1px solid #ccc; } html[dir="rtl"] .input-group-addon:last-child { border-radius: 4px 0 0 4px; border-right: 0; border-left: 1px solid #ccc; } html[dir="rtl"] .input-group .form-control:first-child { border-radius: 4px 0 0 4px; } html[dir="rtl"] .input-group .form-control:last-child { border-radius: 0 4px 4px 0; } /* ── Gutters / spacing helpers ───────────────────────────── */ html[dir="rtl"] .col-md-offset-1, html[dir="rtl"] .col-sm-offset-1 { margin-right: 8.33333333%; margin-left: 0; } html[dir="rtl"] .col-md-offset-2, html[dir="rtl"] .col-sm-offset-2 { margin-right: 16.66666667%; margin-left: 0; } html[dir="rtl"] .col-md-offset-3, html[dir="rtl"] .col-sm-offset-3 { margin-right: 25%; margin-left: 0; } /* ── Footer columns ──────────────────────────────────────── */ html[dir="rtl"] .footer ul, html[dir="rtl"] .footer-distributed ul { padding-right: 0; } /* ── Bootstrap labels / list-group ───────────────────────── */ html[dir="rtl"] .list-group-item { text-align: right; } html[dir="rtl"] .label { margin-left: 0; margin-right: 4px; } /* ── Form labels ─────────────────────────────────────────── */ html[dir="rtl"] label { text-align: right; } /* ── Check-list (footer "check" bullets) ─────────────────── */ html[dir="rtl"] .check li, html[dir="rtl"] .check-list li { padding-right: 22px; padding-left: 0; } html[dir="rtl"] .check li::before, html[dir="rtl"] .check-list li:before { right: 0; left: auto; } /* ── Tables ──────────────────────────────────────────────── */ html[dir="rtl"] table { text-align: right; } html[dir="rtl"] .table > thead > tr > th { text-align: right; }