/* ===============================
   🔥 QUIZ CONTAINER
=============================== */
.quiz-container {
    margin-top: 30px;
}

/* ===============================
   🔥 QUESTION BOX
=============================== */
.quiz-question {
    background: #f8fafc;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* QUESTION TEXT */
.quiz-question p {
    margin-bottom: 10px;
    font-weight: 500;
}

/* ===============================
   🔥 OPTIONS
=============================== */
.quiz-option {
    padding: 10px 12px;
    margin: 6px 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s ease;
    font-size: 14px;
}

/* HOVER */
.quiz-option:hover {
    background: #e7f3ff;
    border-color: #93c5fd;
}

/* SELECTED */
.quiz-option.selected {
    background: #dbeafe;
    border-color: #3b82f6;
}

/* ===============================
   🔥 CORRECT / WRONG
=============================== */
.quiz-option.correct {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}

.quiz-option.wrong {
    background: #fee2e2;
    border-color: #ef4444;
    color: #7f1d1d;
}

/* DISABLE AFTER ANSWER */
.quiz-question.answered .quiz-option {
    pointer-events: none;
    opacity: 0.95;
}

/* ===============================
   🔥 EXPLANATION BOX
=============================== */
.quiz-explanation {
    display: none;
    margin-top: 10px;
    padding: 12px;
    background: #e0f2fe;
    border-left: 4px solid #0ea5e9;
    border-radius: 5px;
    font-size: 14px;
    color: #0c4a6e;
}

/* ===============================
   🔥 QUIZ RESULT / SCORE
=============================== */
#quizScore {
    margin-top: 20px;
    padding: 15px;
    background: #fef3c7;
    border-left: 5px solid #f59e0b;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
}

/* ===============================
   🔥 SUBMIT BUTTON
=============================== */
#submitQuiz {
    margin-top: 15px;
    padding: 10px 20px;
    background: #04AA6D;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#submitQuiz:hover {
    background: #059862;
}

/* ===============================
   🔥 MOBILE OPTIMIZATION
=============================== */
@media (max-width: 768px) {

    .quiz-option {
        font-size: 15px;
        padding: 12px;
    }

    #submitQuiz {
        width: 100%;
    }

}