/* Loaded unconditionally on every real user-facing page. Everything inside is gated behind [dir="rtl"], so it's a harmless no-op for English/LTR users - keeps each page's own change down to one line regardless of locale. IMPORTANT: dir="rtl" on already makes plain `flex-direction: row` elements auto-mirror their child order, because `direction` is an inherited CSS property and flex's main-start follows it. Do NOT add `flex-direction: row-reverse` to a shared class just because it's a flex row - that cancels the auto-mirror and flips it straight back to looking LTR. Rules below only cover what does NOT auto-fix: physical left/right-anchored properties, directional icon glyphs, and components that must actively resist the mirror (numerals, fixed nav order). */ [dir="rtl"] body { direction: rtl; text-align: right; } /* Chevrons reposition automatically with their row, but the glyph itself doesn't reshape - a right-pointing "navigate deeper" chevron still visually points right after landing on the new left edge. Mirror the glyph so it points the correct reading direction. Covers both icon sets used across the app (Bootstrap Icons + Font Awesome). */ [dir="rtl"] .chevron, [dir="rtl"] .acct-chev, [dir="rtl"] .bi-chevron-right, [dir="rtl"] .bi-chevron-left, [dir="rtl"] .fa-chevron-right, [dir="rtl"] .fa-chevron-left { transform: scaleX(-1); } /* Back button (app/auth/partials/signup-styles.blade.php .back): pinned flush to the card's edge via a physical negative margin - physical properties never auto-flip, need an explicit swap to the other side. */ [dir="rtl"] .back { margin-left: 0; margin-right: -9px; } /* Bottom nav: DECISION - tab order stays fixed left-to-right even in Arabic, not mirrored. Icons are recognized by fixed spatial position; major trading apps (Binance and comparable) don't reorder bottom-nav tabs per locale. Without this, dir="rtl"'s auto-mirror would silently reverse the 5 tabs. */ [dir="rtl"] .bottom-nav { direction: ltr; } /* OTP digit boxes (app/partials/otp-code.blade.php .code): must stay left-to-right regardless of page direction - numeral entry convention, same reasoning as bottom-nav above. */ [dir="rtl"] .code { direction: ltr; } /* Trading pages (forex/futures/options, added when that batch is translated): price tickers, order books and numeric displays stay LTR for the same reason as OTP boxes above - real trading UIs keep numbers left-to-right even in RTL locales. Selectors added once that batch starts rather than guessed here. */ /* Shared PnL chart partial (app/main/partials/pnl_chart.blade.php), included on all 3 wallet pages plus pnl_report.blade.php: the running total and the chart's date-range axis labels are numeric/date content, same forced-LTR treatment as everywhere else in the app. Lives here rather than per-page since the partial itself is the shared unit. */ [dir="rtl"] .chart-total, [dir="rtl"] .chart-axis { direction: ltr; }