/* Terralora baseline RTL support layer. Applies only when (currently the Arabic locale, via tl_current_direction()). This is a structural baseline covering the most common layout primitives used across templates (flex direction, text alignment, absolute-position offsets, floats, common margin/padding utilities). It is not a full per-template pixel-perfect RTL redesign; visually review high-traffic templates (home, product, cart, checkout) in Arabic before fully relying on it for production RTL traffic. */ html[dir="rtl"] { direction: rtl; } html[dir="rtl"] body { text-align: right; } /* Text alignment utilities */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* Common margin auto utilities (Tailwind) */ 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; } /* Absolute-position offsets used for badges, dropdown carets, icons */ html[dir="rtl"] .left-0 { left: auto !important; right: 0 !important; } html[dir="rtl"] .right-0 { right: auto !important; left: 0 !important; } html[dir="rtl"] .left-2 { left: auto !important; right: calc(var(--spacing) * 2) !important; } html[dir="rtl"] .left-3 { left: auto !important; right: calc(var(--spacing) * 3) !important; } html[dir="rtl"] .left-4 { left: auto !important; right: calc(var(--spacing) * 4) !important; } /* Floats */ html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } /* Forms */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* Header / navigation / drawers: keep primary nav and cart drawer contents in reading order */ html[dir="rtl"] .tl-header nav, html[dir="rtl"] .tl-nav, html[dir="rtl"] .tl-cd-benefit-row { flex-direction: row-reverse; } /* Directional icons/chevrons that visually imply LTR reading order */ html[dir="rtl"] svg.tl-chevron, html[dir="rtl"] .tl-arrow-icon { transform: scaleX(-1); } /* Card/overview text blocks read right-to-left */ html[dir="rtl"] .tl-overview-card, html[dir="rtl"] .tl-cd-benefits { text-align: right; }