/** * RTL overrides for Arabic layout. * Loaded conditionally when language is 'ar'. * Uses the [dir="rtl"] selector so it only applies when dir="rtl" is on . */ /* ── Arabic font ── */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700;800&display=swap'); [dir="rtl"] { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; } /* ── Nav fixes ── */ [dir="rtl"] .nav-links li { margin-left: 0; margin-right: 25px; } [dir="rtl"] .logo { margin-right: 0; margin-left: 15px; } [dir="rtl"] .nav-links li a::after { left: auto; right: 0; } /* Dropdown alignment */ [dir="rtl"] .dropdown-content { right: auto; left: 0; } [dir="rtl"] .dropdown-content a { text-align: right; } /* ── Text alignment ── */ [dir="rtl"] h3 { text-align: right; } /* ── Hero section ── */ [dir="rtl"] .hero-section h1, [dir="rtl"] .hero-section p { direction: rtl; } /* ── Feature cards ── */ [dir="rtl"] .feature-card p, [dir="rtl"] .step p { direction: rtl; } /* ── Testimonials ── */ [dir="rtl"] .testimonial-author { flex-direction: row-reverse; } /* ── Pricing page ── */ [dir="rtl"] .feature-list li { text-align: right; } [dir="rtl"] .feature-list li i { margin-right: 0; margin-left: 0.6rem; } [dir="rtl"] .trust-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .trust-item i { margin-right: 0; margin-left: 1rem; } /* ── Login / Register forms ── */ [dir="rtl"] .login-container label, [dir="rtl"] .register-container label { text-align: right; display: block; } [dir="rtl"] .login-container input, [dir="rtl"] .register-container input { text-align: right; } /* ── Profile page ── */ [dir="rtl"] .info-label { text-align: right; } [dir="rtl"] .info-value { text-align: left; } [dir="rtl"] .profile-actions { flex-direction: row-reverse; } /* ── Quiz start page ── */ [dir="rtl"] .main-content label, [dir="rtl"] .main-content select, [dir="rtl"] .main-content input[type="text"] { text-align: right; } [dir="rtl"] .tab-btn { direction: rtl; } [dir="rtl"] .attempts-table th, [dir="rtl"] .attempts-table td { text-align: right; } [dir="rtl"] .action-buttons { text-align: left; } /* ── Sim page ── */ [dir="rtl"] .topbar-exit { margin-left: auto; margin-right: 0; } [dir="rtl"] .exam-sidebar { /* If sidebar is on the left, flip to right */ order: 2; } [dir="rtl"] .exam-main { order: 1; } [dir="rtl"] .sidebar-stat-row { flex-direction: row-reverse; } [dir="rtl"] .sidebar-stat-label, [dir="rtl"] .sidebar-section-label { text-align: right; } /* ── Sim page sidebar ── */ [dir="rtl"] .sidebar-time-row, [dir="rtl"] .sidebar-time-elapsed-row { flex-direction: row-reverse; } /* ── Payment success/error ── */ [dir="rtl"] .result-card { direction: rtl; } [dir="rtl"] .result-btn { flex-direction: row-reverse; } /* ── Footer ── */ [dir="rtl"] footer p { direction: rtl; } /* ── Print report ── */ [dir="rtl"] .print-table th, [dir="rtl"] .print-table td { text-align: right; } [dir="rtl"] .info-table td { text-align: right; } /* ── Language switcher ── */ .lang-switcher { display: inline-flex; align-items: center; gap: 4px; background: rgba(101, 6, 64, 0.06); border-radius: 20px; padding: 4px; margin-left: 10px; } [dir="rtl"] .lang-switcher { margin-left: 0; margin-right: 10px; } .lang-switcher a { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 16px; font-size: 13px; font-weight: 600; text-decoration: none; color: #650640; transition: all 0.25s ease; } .lang-switcher a:hover { background: rgba(101, 6, 64, 0.1); } .lang-switcher a.active-lang { background: #650640; color: #fff; } /* Remove underline animation from lang switcher links */ .lang-switcher a::after { display: none !important; } /* ── Mobile responsive RTL ── */ @media (max-width: 768px) { [dir="rtl"] .nav-links { right: auto; left: -280px; align-items: flex-start; /* Align menu items to right side inside the container. Because it's RTL, flex-start is actually right. */ } [dir="rtl"] .nav-links.active { left: 0; right: auto; } [dir="rtl"] .nav-links li { margin-right: 0; text-align: right; } [dir="rtl"] .close-offcanvas { right: auto !important; left: 15px; text-align: left; } }