/* ========================================================================== Right-to-left (RTL) adjustments — loaded only when the active language is Arabic (dir="rtl" on ). The browser already mirrors text flow and default block alignment from the dir attribute. These rules flip the horizontal spacing/alignment utilities that Tailwind does not mirror on its own, so icons, lists and dropdowns sit on the correct side. Explicitly centered content (.text-center) is left untouched. ========================================================================== */ [dir="rtl"] body { text-align: right; } /* Preserve intentionally centered content. */ [dir="rtl"] .text-center { text-align: center !important; } /* Mirror the small horizontal margins used for icon + text spacing. */ [dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; } [dir="rtl"] .ml-1\.5 { margin-left: 0; margin-right: 0.375rem; } [dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; } [dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; } [dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; } [dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; } /* Legal/bullet lists: move the bullet to the right side. */ [dir="rtl"] .legal-content li::before { padding-right: 0; padding-left: 8px; } /* Flip Font Awesome chevrons/arrows that imply direction. */ [dir="rtl"] .fa-angle-right { transform: scaleX(-1); } [dir="rtl"] .fa-angle-left { transform: scaleX(-1); }