/* =================================================================== RTL.CSS - Right-to-Left Overrides for Arabic Applied when html[lang="ar"] or body.rtl-lang IMPORTANT: direction:rtl on already makes flex-direction:row flow right-to-left. Do NOT add flex-direction:row-reverse to flex containers that inherit direction:rtl — it double-reverses back to LTR. =================================================================== */ /* ===== BASE RTL ===== */ html[dir="rtl"], html[lang="ar"], body.rtl-lang { direction: rtl; text-align: right; } /* ===== HEADER RTL ===== */ body.rtl-lang .site-header .header-container { flex-direction: row-reverse; } body.rtl-lang .logo { margin-right: 0; margin-left: auto; } body.rtl-lang .main-nav { margin-right: 0; margin-left: auto; } /* Nav arrows flip */ body.rtl-lang .paths-dropdown .fa-arrow-left, body.rtl-lang .footer-links .fa-chevron-left, body.rtl-lang .nav-paths-toggle .fa-chevron-down { transform: scaleX(-1); } /* Dropdown direction */ body.rtl-lang .paths-dropdown { right: 0; left: auto; text-align: right; } /* UPDATED: Task 2 - stacked dropdown accent side in RTL mobile menu */ body.rtl-lang .main-nav.nav-open .paths-dropdown.open { border-right: none; border-left: 3px solid var(--color-secondary); border-radius: var(--border-radius) 0 0 var(--border-radius); } /* ===== HERO RTL ===== */ body.rtl-lang .hero-arrow-prev, body.rtl-lang .hero-slider .swiper-button-prev { right: auto; left: 24px; } body.rtl-lang .hero-arrow-next, body.rtl-lang .hero-slider .swiper-button-next { left: auto; right: 24px; } body.rtl-lang .hero-actions { flex-direction: row-reverse; } /* ===== SHOWCASE RTL ===== */ /* direction:rtl inherited from html already makes flex-row flow RTL. Only override physical properties (left/right) that don't respond to direction. */ html[dir="rtl"] .panel-arrows { left: auto; right: 0; } html[dir="rtl"] .panel-arrows .arr-prev, html[dir="rtl"] .panel-arrows .arr-next { transform: scaleX(-1); } html[dir="rtl"] .badge-status { right: auto; left: 12px; } html[dir="rtl"] .badge-cat { right: auto; left: 16px; } /* ===== STATS RTL ===== */ body.rtl-lang .stats-grid .stat-item { text-align: center; } /* ===== CARDS RTL ===== */ body.rtl-lang .course-card-footer { flex-direction: row-reverse; } body.rtl-lang .course-card-category { right: auto; left: 12px; } /* ===== FORMS RTL ===== */ body.rtl-lang .form-control { direction: rtl; text-align: right; } /* ===== AUTH SPLIT-SCREEN RTL ===== */ body.rtl-lang .auth-brand { text-align: right; } body.rtl-lang .auth-brand-inner { margin-left: 0; margin-right: auto; } body.rtl-lang .auth-brand-list li { text-align: right; } /* In RTL the brand panel sits on the right: flip the decorative glow */ html[dir="rtl"] .auth-brand::after { right: auto; left: -90px; } body.rtl-lang .footer-newsletter input { direction: rtl; } /* ===== TABLES RTL ===== */ body.rtl-lang .table-container table { text-align: right; } /* ===== GENERAL RTL ===== */ body.rtl-lang .section-header { text-align: right; } body.rtl-lang .empty-state { text-align: center; } body.rtl-lang .form-container { text-align: right; } body.rtl-lang .form-title { text-align: center; } body.rtl-lang .dashboard-header { text-align: right; } body.rtl-lang .contact-info-item { text-align: right; } body.rtl-lang .contact-info-item h4 { text-align: right; } body.rtl-lang .contact-grid { text-align: right; } body.rtl-lang .contact-grid .form-container { text-align: right; } body.rtl-lang .path-divider { flex-direction: row-reverse; } body.rtl-lang .course-detail-header { text-align: right; } body.rtl-lang .course-detail-body { text-align: right; } body.rtl-lang .dashboard-grid .stat-card { text-align: right; } /* Footer RTL */ body.rtl-lang .footer-bottom p { text-align: center; } /* Cart badge RTL */ body.rtl-lang .cart-badge { right: auto; left: -4px; } /* ===== TESTIMONIALS RTL ===== */ body.rtl-lang .testimonials-section .section-header { text-align: center; } /* ===== RESPONSIVE RTL ===== */ @media (max-width: 991px) { body.rtl-lang .site-header .header-container { flex-direction: row-reverse; } body.rtl-lang .nav-list { padding-right: 0; padding-left: 0; } } @media (max-width: 576px) { body.rtl-lang .hero-actions { flex-direction: column; gap: 0.75rem; } }