/* ============================================= CRYPTO TEK AI - WEB APP RTL Support Arabic language layout adjustments NOTE: direction:rtl on already reverses flexbox order automatically. Do NOT add flex-direction: row-reverse — that would double-reverse back to LTR. ============================================= */ /* Global RTL */ html[dir="rtl"] { direction: rtl; text-align: right; } /* ============================ TOP BAR ============================ */ /* User dropdown - stays aligned to its parent */ html[dir="rtl"] .user-dropdown { right: auto; left: 0; } html[dir="rtl"] .user-info { direction: rtl; } html[dir="rtl"] .dropdown-item { direction: rtl; } /* ============================ SIDE MENU - slides from RIGHT in RTL ============================ */ html[dir="rtl"] .side-menu-content { left: auto; right: 0; animation: slideInRTL 0.3s ease; } html[dir="rtl"] .side-menu-header { direction: rtl; } html[dir="rtl"] .menu-item { direction: rtl; } @keyframes slideInRTL { from { transform: translateX(100%); } to { transform: translateX(0); } } /* ============================ CONTENT AREAS ============================ */ html[dir="rtl"] .card, html[dir="rtl"] .stat-card, html[dir="rtl"] .analysis-card { text-align: right; } html[dir="rtl"] .trade-item, html[dir="rtl"] .signal-item { text-align: right; } /* Form elements */ html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea { text-align: right; } /* Modal */ html[dir="rtl"] .modal-body { text-align: right; } /* Search icon flip */ html[dir="rtl"] .search-input { padding-right: 2.5rem; padding-left: 1rem; } html[dir="rtl"] .search-icon { left: auto; right: 0.75rem; } /* Profile */ html[dir="rtl"] .profile-info { text-align: right; } /* Settings */ html[dir="rtl"] .settings-item .settings-label { text-align: right; } /* ============================ KEEP LTR FOR SPECIFIC ELEMENTS ============================ */ /* Charts always LTR */ html[dir="rtl"] .chart-container, html[dir="rtl"] .tradingview-widget-container { direction: ltr; } /* Numbers, prices, percentages stay LTR */ html[dir="rtl"] .percentage, html[dir="rtl"] .price-value, html[dir="rtl"] .number-value, html[dir="rtl"] .price-change { direction: ltr; unicode-bidi: embed; display: inline-block; } /* ============================ TOAST POSITION ============================ */ html[dir="rtl"] .toast-container { right: auto; left: 20px; }