/* ===================================================================== Arabic, right to left. Loaded only when is_rtl() is true, so the five left-to-right languages never download it. It corrects the things Bootstrap's LTR build and site.css get wrong when is set — mostly anything that was written with an explicit "left" or "right" in it. Deliberately short: the layout is flexbox and grid almost everywhere, and those flip on their own. Only the hard-coded sides need help. ===================================================================== */ body, .navbar, .btn, input, textarea, select, .card, .dropdown-menu { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* Orbitron has no Arabic; anything using it must fall back or the headings render in a system font at a different weight */ h1, h2, h3, .logo, .stat-num, .hero-h1 { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important; letter-spacing: 0; } /* ── lists and ticks ── The check marks sit on the left in the LTR sheet. */ [dir="rtl"] ul { padding-right: 0; } [dir="rtl"] .srv-list li, [dir="rtl"] .pri-list li, [dir="rtl"] .dec-list li { padding-left: 0; padding-right: 1.9rem; } [dir="rtl"] .srv-list li::before, [dir="rtl"] .pri-list li::before, [dir="rtl"] .dec-list li::before { left: auto; right: 0; } /* ── icons that sit before text ── Bootstrap's me-2 is margin-inline-end in 5.3, so it flips by itself. These are the ones written as margin-right in site.css. */ [dir="rtl"] .bi[class*="me-"] { margin-left: .5rem; margin-right: 0 !important; } /* ── the C-line box and anything monospaced ── A C-line is Latin text: forcing it LTR stops the colon and the port number jumping to the wrong end, which makes it look mistyped. */ [dir="rtl"] .hero-line, [dir="rtl"] .cline-box, [dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .crypto-addr, [dir="rtl"] input[type="email"], [dir="rtl"] input[name="reference"] { direction: ltr; text-align: left; unicode-bidi: embed; } /* prices stay Latin too — "9 €" must not become "€ 9" */ [dir="rtl"] .price-num, [dir="rtl"] .pri-amount, [dir="rtl"] .sum-val { direction: ltr; unicode-bidi: embed; } /* ── navbar and dropdowns ── */ [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .dropdown-menu-end { --bs-position: start; } [dir="rtl"] .navbar-nav { padding-right: 0; } /* ── decorative pieces anchored to a side ── */ [dir="rtl"] .sat-field { transform: scaleX(-1); } [dir="rtl"] .badge-corner { left: 12px; right: auto; } [dir="rtl"] .modal-foot { flex-direction: row-reverse; } /* ── forms ── */ [dir="rtl"] .form-check { padding-right: 1.5em; padding-left: 0; } [dir="rtl"] .form-check .form-check-input { float: right; margin-right: -1.5em; margin-left: 0; } [dir="rtl"] label, [dir="rtl"] .field label { text-align: right; } /* ── footer columns ── */ [dir="rtl"] footer, [dir="rtl"] footer a { text-align: right; } /* The arrow in "Continue to payment ←" is already written pointing left in ar.php, so nothing to flip here — a CSS transform would have reversed the text with it. */