/* Theme Name: Monetro Light RTL Description: Direction-aware overrides. Most layout uses logical properties in base.css / components.css / woocommerce.css; this file is for direction-only fixes (bidi isolation, marquee direction) and rare component-level tweaks. */ /* WordPress sets via language_attributes() and adds body.rtl. */ [dir="rtl"] body, body.rtl { direction: rtl; } /* ───────────────────────────────────────────────────────────── Bidi isolation for numeric / currency / hard-coded LTR runs These elements display USD amounts, percentages, and counters in Arabic context. Isolating prevents bidi reordering and ensures the digits read left-to-right regardless of locale. ───────────────────────────────────────────────────────────── */ [dir="rtl"] .stat-number, [dir="rtl"] .stat-number-anim, [dir="rtl"] .price-amount, [dir="rtl"] .price-currency, [dir="rtl"] .price-suffix, [dir="rtl"] .account-size, [dir="rtl"] .payout-amount, [dir="rtl"] .hero-headline-accent { unicode-bidi: isolate; direction: ltr; } /* ───────────────────────────────────────────────────────────── Marquee / ticker scrollers should stay visually LTR. The keyframes use translateX(-50%) which is unaffected by writing mode, but flex order would otherwise reverse cards in RTL. ───────────────────────────────────────────────────────────── */ [dir="rtl"] .ticker-inner, [dir="rtl"] .payout-feed-inner { direction: ltr; } /* ───────────────────────────────────────────────────────────── Compare table: numeric cells stay LTR even when the table itself is read in RTL. (Logical text-align: start would put them on the visual right; numeric values read better aligned to start of the cell in their own LTR run.) ───────────────────────────────────────────────────────────── */ [dir="rtl"] .monetro-compare-table-wrap { direction: rtl; } [dir="rtl"] .monetro-compare-table td[data-type="numeric"], [dir="rtl"] .monetro-compare-table th[data-type="numeric"] { direction: ltr; text-align: start; unicode-bidi: isolate; } /* ───────────────────────────────────────────────────────────── Direction-aware icon flips (CTA chevrons / arrows that should point in the reading direction). Targets only purely directional decorative icons; brand glyphs are unaffected. ───────────────────────────────────────────────────────────── */ [dir="rtl"] .btn-arrow, [dir="rtl"] .nav-arrow, [dir="rtl"] .chevron-end { transform: scaleX(-1); } /* ───────────────────────────────────────────────────────────── Compact fixes for components that opt into center alignment in RTL where the default is start (purely cosmetic). ───────────────────────────────────────────────────────────── */ [dir="rtl"] .faq-sidebar-cta, [dir="rtl"] .btn-primary, [dir="rtl"] .btn-secondary { text-align: center; } [dir="rtl"] .footer-top-actions { align-items: flex-start; }