/* 
   ============================================
   USER MCQ STYLES
   ============================================
*/

.brand-text-primary {
    color: #E814FF !important;
}

.brand-bg-primary {
    background-color: #E814FF !important;
}

.brand-outline-primary {
    border: 2px solid #E814FF !important;
    color: #E814FF !important;
    background-color: transparent !important;
}

.brand-outline-primary:hover {
    background-color: rgba(232, 20, 255, 0.1) !important;
    color: #E814FF !important;
}

.bg-white-20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.transition-all {
    transition: all 0.3s ease;
}

.hover-lift-premium {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(232, 20, 255, 0.15);
    border-color: #E814FF !important;
}

.option-indicator {
    transition: all 0.3s ease;
}

/* MCQ Specific Dark Mode & Premium Fixes */
.mcq-option-btn {
    background-color: transparent;
    color: var(--text-main);
}

.mcq-option-correct {
    background-color: rgba(40, 167, 69, 0.1) !important;
    border-color: #28a745 !important;
    color: #28a745 !important;
    opacity: 1 !important;
}

[data-bs-theme="dark"] .mcq-option-correct {
    background-color: rgba(40, 167, 69, 0.2) !important;
    border-color: #2ecc71 !important;
    color: #2ecc71 !important;
}

.mcq-option-incorrect {
    background-color: #f8f9fa !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    opacity: 0.7 !important;
}

[data-bs-theme="dark"] .mcq-option-incorrect {
    background: rgba(232, 20, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #64748b !important;
}

.mcq-answer-alert {
    background-color: rgba(40, 167, 69, 0.05) !important;
    border: 1px solid rgba(40, 167, 69, 0.1) !important;
}

[data-bs-theme="dark"] .mcq-answer-alert {
    background-color: rgba(40, 167, 69, 0.15) !important;
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
}

[data-bs-theme="dark"] .scoreboard-main {
    background: rgba(232, 20, 255, 0.15) !important;
}

[data-bs-theme="dark"] .explanation-box {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--accent-primary) !important;
}

/* MCQ Standardized Font Sizes (Unified Questions & Options) */
/* MCQ Standardized Font Sizes (Unified Questions & Options) */
.option-text,
.reveal-answer-btn {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: #000 !important;
}

.mcq-question-text,
.mcq-question-text * {
    font-size: 1.35rem !important; /* Slightly larger for emphasis */
    line-height: 1.3 !important;
    font-weight: 800 !important;
    color: #000 !important;
}

/* Dark Mode Overrides for High Contrast & Synchronicity */
[data-bs-theme="dark"] .option-text,
[data-bs-theme="dark"] .reveal-answer-btn {
    color: #fff !important;
    font-size: 1.15rem !important; /* Explicit Sync */
    line-height: 1.4 !important;
}

[data-bs-theme="dark"] .mcq-question-text,
[data-bs-theme="dark"] .mcq-question-text * {
    color: #fff !important;
    font-size: 1.35rem !important; /* Explicit Sync */
    line-height: 1.3 !important;
}

/* Mobile Adjustments */
@media (max-width: 576px) {
    .option-text,
    .reveal-answer-btn,
    [data-bs-theme="dark"] .option-text,
    [data-bs-theme="dark"] .reveal-answer-btn {
        font-size: 1.00rem !important;
        line-height: 1.2 !important;
    }

    .mcq-question-text,
    .mcq-question-text *,
    [data-bs-theme="dark"] .mcq-question-text,
    [data-bs-theme="dark"] .mcq-question-text * {
        font-size: 1.15rem !important;
        line-height: 1.25 !important;
    }
}

/* Mobile: Explanation box — Line 1: Correct Answer, Line 2: Explanation, Line 3: Text */
@media (max-width: 576px) {
    .explanation-header {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .correct-answer-badge {
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        padding: 8px 14px !important;
        background: linear-gradient(135deg, rgba(40, 167, 69, 0.12), rgba(16, 185, 129, 0.08)) !important;
        color: #28a745 !important;
        border-radius: 10px !important;
        border: 1.5px solid rgba(40, 167, 69, 0.3) !important;
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        letter-spacing: 0.3px !important;
    }

    .correct-answer-badge::before {
        content: '\e86c';
        font-family: 'tabler-icons' !important;
        font-size: 1rem;
    }

    [data-bs-theme="dark"] .correct-answer-badge {
        background: linear-gradient(135deg, rgba(232, 20, 255, 0.1), rgba(232, 20, 255, 0.02)) !important;
        box-shadow: 0 4px 15px rgba(232, 20, 255, 0.1) !important;
        border-color: rgba(40, 167, 69, 0.35) !important;
    }

    .explanation-label {
        font-size: 0.82rem !important;
        padding-top: 4px !important;
        opacity: 0.85;
    }

    .explanation-box {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .explanation-box .pt-3.border-top {
        padding-top: 10px !important;
        margin-top: 2px !important;
    }

    .explanation-box .text-muted.small {
        font-size: 0.78rem !important;
        line-height: 1.55 !important;
    }
}