/* ======================================== RTL (Right-to-Left) Hybrid Support Strategy: dir="rtl" on flips the layout (flex, grid, margins). Then * rule forces all text back to LTR via isolate-override, keeping English text and punctuation perfectly intact. ======================================== */ [dir="rtl"] * { direction: ltr; unicode-bidi: isolate-override; } [dir="rtl"] .text-center { text-align: center !important; } /* ─── Mobile Menu: always above sticky header ─── */ #mobileMenu, aside#mobileMenu { z-index: 60 !important; } /* Backdrop overlay: above header too */ #mobileMenu~div[class*="fixed inset-0"], div.fixed.inset-0[class*="bg-black"] { z-index: 55 !important; } /* RTL: slide from right instead of left */ [dir="rtl"] #mobileMenu, [dir="rtl"] aside#mobileMenu { left: auto; right: 0; transform: translateX(100%); } [dir="rtl"] #mobileMenu.active, [dir="rtl"] aside#mobileMenu.active { transform: translateX(0); } /* Keep mobile menu vertical layout intact */ [dir="rtl"] #mobileMenu nav, [dir="rtl"] aside#mobileMenu nav { flex-direction: column !important; } /* Keep mobile menu header row (logo + close) in correct order */ [dir="rtl"] #mobileMenu>div, [dir="rtl"] aside#mobileMenu>div { flex-direction: row !important; } [dir="rtl"] [class*="animate-[marquee"] { animation-direction: reverse; } [dir="rtl"] .-space-x-3> :not(:first-child) { margin-left: 0; margin-right: -0.75rem; } [dir="rtl"] .-space-x-2> :not(:first-child) { margin-left: 0; margin-right: -0.5rem; } [dir="rtl"] body { overflow-x: hidden; } [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: left; } [dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; } [dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; } #rtlToggle { transition: transform 0.3s ease; } [dir="rtl"] #rtlToggle { transform: scaleX(-1); } @media print { [dir="rtl"] { direction: ltr; unicode-bidi: normal; } } /* ======================================== Layout Mirroring Overrides Since [dir="rtl"] * forces direction:ltr on everything, flex/grid containers won't auto-reverse. We manually flip key layout containers below. ======================================== */ /* ─── Header: reverse logo ↔ actions ─── */ [dir="rtl"] header { flex-direction: row-reverse; } /* ─── Desktop nav links: reverse order ─── */ [dir="rtl"] header>nav { flex-direction: row-reverse; } /* ─── Header action buttons (dark mode, RTL, login, CTA) ─── */ [dir="rtl"] header>div:last-child, [dir="rtl"] header .flex.items-center.gap-4, [dir="rtl"] header .flex.items-center.gap-3 { flex-direction: row-reverse; } /* ─── Two-column hero/content grids ─── */ @media (min-width: 1024px) { [dir="rtl"] .grid.lg\:grid-cols-2 { direction: rtl; } [dir="rtl"] .grid.lg\:grid-cols-2>* { direction: ltr; unicode-bidi: isolate-override; } } @media (min-width: 768px) { [dir="rtl"] .grid.md\:grid-cols-2 { direction: rtl; } [dir="rtl"] .grid.md\:grid-cols-2>* { direction: ltr; unicode-bidi: isolate-override; } [dir="rtl"] .flex.md\:flex-row { flex-direction: row-reverse; } [dir="rtl"] .grid.md\:grid-cols-3 { direction: rtl; } [dir="rtl"] .grid.md\:grid-cols-3>* { direction: ltr; unicode-bidi: isolate-override; } } /* ─── Flex row layouts (hero, content sections) ─── */ @media (min-width: 1024px) { [dir="rtl"] .flex.lg\:flex-row { flex-direction: row-reverse; } } /* ─── Footer: reverse columns ─── */ [dir="rtl"] footer .grid { direction: rtl; } [dir="rtl"] footer .grid>* { direction: ltr; unicode-bidi: isolate-override; } /* Footer bottom bar */ [dir="rtl"] footer .flex.justify-between, [dir="rtl"] footer .flex.items-center.justify-between { flex-direction: row-reverse; } /* ─── Pricing cards (3-col grid) ─── */ @media (min-width: 1024px) { [dir="rtl"] .grid.lg\:grid-cols-3 { direction: rtl; } [dir="rtl"] .grid.lg\:grid-cols-3>* { direction: ltr; unicode-bidi: isolate-override; } }