/* ========================================================================= RTL overrides — loaded only when (Arabic). Targets Bootstrap 4 utility classes that have an implicit left/right direction baked in, plus a few template_4 components that needed manual flipping. Keep this short — most of the layout flips automatically via dir="rtl". ========================================================================= */ html[dir="rtl"] body, html[dir="rtl"] .navbar-brand, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ── Base text alignment: right-align everything by default in RTL. Bootstrap 4's _reboot.scss sets `body { text-align: left }`, which overrides the natural dir="rtl" right-alignment unless we undo it. Anything intentionally centered keeps text-align: center via BS4 utilities or the .page-hero/.section-title rules — those win because of !important on .text-center. ── */ html[dir="rtl"] body, 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"] ul, html[dir="rtl"] ol, html[dir="rtl"] li, html[dir="rtl"] dl, html[dir="rtl"] label { text-align: right; } /* Inline text-align:left in markup (e.g. `

` from the auth-card and solution detail partials) needs an explicit override because inline styles trump everything except !important. */ html[dir="rtl"] [style*="text-align:left"], html[dir="rtl"] [style*="text-align: left"] { text-align: right !important; } html[dir="rtl"] [style*="text-align:right"], html[dir="rtl"] [style*="text-align: right"] { text-align: left !important; } /* Preserve explicitly centered content (page-hero, section-title, the 3-step "How it works" rows, auth-card title, etc.). */ html[dir="rtl"] .text-center, html[dir="rtl"] [style*="text-align:center"], html[dir="rtl"] [style*="text-align: center"] { text-align: center !important; } /* ── BS4 utility flips (mr-* → margin-right became margin-left in RTL) ── */ html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } html[dir="rtl"] .text-md-right { text-align: left !important; } html[dir="rtl"] .text-lg-right { text-align: left !important; } html[dir="rtl"] .text-right { text-align: left !important; } html[dir="rtl"] .text-left { text-align: right !important; } /* Bootstrap dropdown-menu-right — pin to the natural side of the trigger. */ html[dir="rtl"] .dropdown-menu-right { right: 0 !important; left: auto !important; } /* ── Topbar + navbar ── */ html[dir="rtl"] .top-bar-left, html[dir="rtl"] .top-bar-right { text-align: right; } html[dir="rtl"] .top-bar .tb-divider { /* Visually neutral character — works the same RTL or LTR. */ } /* ── Sidebar — flip indent for sub-links + icon margin. ── */ html[dir="rtl"] .app-sidebar a.side-link.sub-link { padding-left: 0.75rem; padding-right: 2rem; } html[dir="rtl"] .app-sidebar a.side-link i { margin-right: 0; margin-left: 0.6rem; } /* ── Solution detail hero — breadcrumb chevron faces the other way, and override the in-style.css `text-align: left` baked into the h1 + .lead so Arabic flows from the right edge. ── */ html[dir="rtl"] .solution-hero .hero-crumb i.fa-chevron-right { transform: scaleX(-1); } html[dir="rtl"] .solution-hero h1, html[dir="rtl"] .solution-hero .lead { text-align: right; } /* ── Feature cards (.feature-card has `text-align: left` baked in). ── */ html[dir="rtl"] .feature-card { text-align: right; } /* ── Form controls — keep input padding-left/right symmetric in RTL. ── */ html[dir="rtl"] .auth-card .form-control, html[dir="rtl"] .form-control { text-align: right; } html[dir="rtl"] .form-check-input { margin-right: 0; margin-left: 0.5rem; } /* ── Tables ── */ html[dir="rtl"] .server-list thead th, html[dir="rtl"] .server-list tbody td { text-align: right; } html[dir="rtl"] .server-list .text-right { text-align: left !important; } /* ── Ticket-row layout — flex order natural-flips, but the ID column (mono font) reads LTR by spec. Keep `` ltr on numbers. ── */ html[dir="rtl"] .ticket-row .tr-id { direction: ltr; text-align: right; } html[dir="rtl"] .ticket-detail-header .tdh-id { direction: ltr; } /* ── Price/amount strings — money reads LTR in any language. ── */ html[dir="rtl"] .plan-price, html[dir="rtl"] .sol-price, html[dir="rtl"] .hpc-amount, html[dir="rtl"] .server-card .price { direction: ltr; unicode-bidi: isolate; }