/* ============================================================ rtl.css — Right-to-left overrides for Cabadz (Arabic UI) Loaded ONLY when the active language is RTL (see i18n_head_tags()). Flips the most common Tailwind *physical* utilities so existing pages render correctly in Arabic without rewriting every class. ============================================================ */ /* Arabic webfonts are loaded in by cz_theme_head() (Amiri + IBM Plex Sans Arabic). This sheet only handles directional/layout flips. */ html[dir="rtl"], html[dir="rtl"] body { direction: rtl; text-align: right; font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* ---- Text alignment flips ---- */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* ---- Float flips ---- */ html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } /* ---- Flex direction: keep rows visually mirrored ---- */ html[dir="rtl"] .flex-row { flex-direction: row-reverse !important; } html[dir="rtl"] .flex-row-reverse { flex-direction: row !important; } /* ---- Nav chrome exception: direction:ltr pill keeps LTR layout ---- */ html[dir="rtl"] [style*="direction:ltr"] .flex-row, html[dir="rtl"] [style*="direction:ltr"] .flex { flex-direction: row !important; } html[dir="rtl"] nav.fixed [style*="direction:ltr"] .ml-1, html[dir="rtl"] nav.fixed [style*="direction:ltr"] .ml-2, html[dir="rtl"] nav.fixed [style*="direction:ltr"] .ml-auto { margin-left: auto !important; margin-right: unset !important; } html[dir="rtl"] nav.fixed [style*="direction:ltr"] .mr-1, html[dir="rtl"] nav.fixed [style*="direction:ltr"] .mr-2 { margin-right: 0.25rem !important; margin-left: unset !important; } html[dir="rtl"] .space-x-reverse > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0 !important; } /* ---- Margin start/end flips (Tailwind scale 0–8) ---- */ html[dir="rtl"] .ml-0{margin-left:0!important;margin-right:0!important} html[dir="rtl"] .mr-0{margin-right:0!important;margin-left:0!important} html[dir="rtl"] .ml-1{margin-left:0!important;margin-right:.25rem!important} html[dir="rtl"] .mr-1{margin-right:0!important;margin-left:.25rem!important} html[dir="rtl"] .ml-2{margin-left:0!important;margin-right:.5rem!important} html[dir="rtl"] .mr-2{margin-right:0!important;margin-left:.5rem!important} html[dir="rtl"] .ml-3{margin-left:0!important;margin-right:.75rem!important} html[dir="rtl"] .mr-3{margin-right:0!important;margin-left:.75rem!important} html[dir="rtl"] .ml-4{margin-left:0!important;margin-right:1rem!important} html[dir="rtl"] .mr-4{margin-right:0!important;margin-left:1rem!important} html[dir="rtl"] .ml-6{margin-left:0!important;margin-right:1.5rem!important} html[dir="rtl"] .mr-6{margin-right:0!important;margin-left:1.5rem!important} html[dir="rtl"] .ml-8{margin-left:0!important;margin-right:2rem!important} html[dir="rtl"] .mr-8{margin-right:0!important;margin-left:2rem!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} /* ---- Padding start/end flips (Tailwind scale 0–8) ---- */ html[dir="rtl"] .pl-1{padding-left:0!important;padding-right:.25rem!important} html[dir="rtl"] .pr-1{padding-right:0!important;padding-left:.25rem!important} html[dir="rtl"] .pl-2{padding-left:0!important;padding-right:.5rem!important} html[dir="rtl"] .pr-2{padding-right:0!important;padding-left:.5rem!important} html[dir="rtl"] .pl-3{padding-left:0!important;padding-right:.75rem!important} html[dir="rtl"] .pr-3{padding-right:0!important;padding-left:.75rem!important} html[dir="rtl"] .pl-4{padding-left:0!important;padding-right:1rem!important} html[dir="rtl"] .pr-4{padding-right:0!important;padding-left:1rem!important} html[dir="rtl"] .pl-6{padding-left:0!important;padding-right:1.5rem!important} html[dir="rtl"] .pr-6{padding-right:0!important;padding-left:1.5rem!important} html[dir="rtl"] .pl-8{padding-left:0!important;padding-right:2rem!important} html[dir="rtl"] .pr-8{padding-right:0!important;padding-left:2rem!important} html[dir="rtl"] .pl-10{padding-left:0!important;padding-right:2.5rem!important} html[dir="rtl"] .pr-10{padding-right:0!important;padding-left:2.5rem!important} html[dir="rtl"] .pl-12{padding-left:0!important;padding-right:3rem!important} html[dir="rtl"] .pr-12{padding-right:0!important;padding-left:3rem!important} /* ---- Absolute positioning — additional scales ---- */ html[dir="rtl"] .left-3{left:auto!important;right:.75rem!important} html[dir="rtl"] .right-3{right:auto!important;left:.75rem!important} /* ---- Absolute positioning flips (common scales) ---- */ /* Exception: fixed nav must always span full width — never flip its left/right */ html[dir="rtl"] nav.fixed { left: 0 !important; right: 0 !important; } html[dir="rtl"] .left-0{left:auto!important;right:0!important} html[dir="rtl"] .right-0{right:auto!important;left:0!important} /* Restore nav's left-0 and right-0 after the generic flip above */ html[dir="rtl"] nav.fixed.left-0 { left: 0 !important; right: 0 !important; } html[dir="rtl"] nav.fixed.right-0{ left: 0 !important; right: 0 !important; } html[dir="rtl"] .left-2{left:auto!important;right:.5rem!important} html[dir="rtl"] .right-2{right:auto!important;left:.5rem!important} html[dir="rtl"] .left-4{left:auto!important;right:1rem!important} html[dir="rtl"] .right-4{right:auto!important;left:1rem!important} /* ---- Rounded corners (mirror the most common asymmetric ones) ---- */ html[dir="rtl"] .rounded-l-lg{border-radius:0 .5rem .5rem 0!important} html[dir="rtl"] .rounded-r-lg{border-radius:.5rem 0 0 .5rem!important} /* ---- Borders ---- */ html[dir="rtl"] .border-l{border-left:0!important;border-right-width:1px!important} html[dir="rtl"] .border-r{border-right:0!important;border-left-width:1px!important} html[dir="rtl"] .border-l-4{border-left:0!important;border-right-width:4px!important} /* ---- Mobile nav notification badge (was right:15%) ---- */ html[dir="rtl"] .notif-badge{right:auto!important;left:15%!important} /* ---- FontAwesome directional arrows ---- */ html[dir="rtl"] .fa-chevron-right:before{content:"\f053"} /* show left chevron */ html[dir="rtl"] .fa-chevron-left:before{content:"\f054"} /* show right chevron */ html[dir="rtl"] .fa-arrow-right:before{content:"\f060"} html[dir="rtl"] .fa-arrow-left:before{content:"\f061"} html[dir="rtl"] .fa-arrow-end:before{content:"\f060"} /* inline-end arrow → left in RTL */ /* ---- Kicker line (::before) — flip to after in RTL ---- */ html[dir="rtl"] .kicker::before, html[dir="rtl"] .cz-kicker::before { display:none; } html[dir="rtl"] .kicker::after, html[dir="rtl"] .cz-kicker::after { content:""; width:22px; height:2px; border-radius:2px; background:currentColor; opacity:0.55; }