/**
 * SmartQuiz - Arabic RTL Overrides
 */

/* Fix icon alignment in RTL */
html[dir="rtl"] .nav-link .icon,
html[dir="rtl"] .btn .icon {
    order: 1;
}

html[dir="rtl"] .nav-link.live::before {
    order: 0;
}

/* Ensure proper text alignment */
html[dir="rtl"] .quiz-card-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .hero-title {
    text-align: right;
}

/* Fix form inputs */
html[dir="rtl"] .form-input {
    text-align: right;
}

html[dir="rtl"] .join-input {
    text-align: center;
}

/* Fix dropdown positioning */
html[dir="rtl"] .dropdown-menu {
    inset-inline-end: 0;
    inset-inline-start: auto;
}

/* Fix mobile menu slide for RTL - slides from LEFT */
html[dir="rtl"] .mobile-menu {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}

html[dir="rtl"] .mobile-menu.active {
    transform: translateX(0);
}

/* Answer marker letters for Arabic */
html[dir="rtl"] .answer-marker {
    font-family: 'Cairo', sans-serif;
}

/* Quiz navigation arrows */
html[dir="rtl"] .quiz-nav-buttons .btn .icon {
    transform: scaleX(-1);
}

/* Data table improvements */
html[dir="rtl"] .data-table th,
html[dir="rtl"] .data-table td {
    text-align: right;
}

/* Flash messages */
html[dir="rtl"] .flash {
    animation: slideInRTL 0.3s ease;
}

@keyframes slideInRTL {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Dialog RTL */
html[dir="rtl"] .dialog-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .teacher-contact-main {
    flex-direction: row-reverse;
}

html[dir="rtl"] .teacher-contact-text {
    text-align: end;
}

html[dir="rtl"] .quiz-teacher-line::after {
    content: 'arrow_back_ios';
    margin-inline-end: auto;
    margin-inline-start: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Auth Pages RTL
   ═══════════════════════════════════════════════════════════════ */

html[dir="rtl"] .auth-section-title,
html[dir="rtl"] .auth-section-subtitle {
    text-align: right;
}

html[dir="rtl"] .auth-body .form-input {
    text-align: right;
}

html[dir="rtl"] .sidebar-title,
html[dir="rtl"] .sidebar-desc {
    text-align: right;
}

html[dir="rtl"] .returning-guest-section {
    text-align: center;
}