/*
 * exam-question.css
 * Shared answer/feedback/explanation styles.
 * Used by:
 *   - Take.cshtml        (Exam Mode)
 *   - Details.cshtml     (Learning Mode — Try Yourself block)
 *
 * CSS custom properties (--spacing-*, --radius-*, etc.)
 * are resolved from the host layout's :root definition.
 */

/* ── Answers container ──────────────────────────────────────────── */

.answers-container {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* ── Answer option (base) ──────────────────────────────────────── */

.answer-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--bg-light);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.answer-label {
    display: contents;
    cursor: pointer;
}

.answer-option:hover {
    border-color: var(--primary-blue);
    background: #f0f8ff;
    transform: translateX(-4px);
}

.answer-option input[type="radio"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--primary-blue);
}

.answer-option input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--primary-blue);
    border-radius: 4px !important;
}

    .answer-option input[type="checkbox"]:checked ~ .checkmark,
    .answer-option input[type="radio"]:checked ~ .checkmark {
        display: flex;
    }

@keyframes checkPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.answer-option input[type="checkbox"]:checked {
    animation: checkPop 0.2s ease;
}

/* ── Answer text ────────────────────────────────────────────────── */

.answer-text {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
}

    .answer-text svg {
        max-width: 300px;
        height: auto;
        vertical-align: middle;
        margin: 4px 8px;
    }

/* ── Checkmark ──────────────────────────────────────────────────── */

.checkmark {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* ── State: correct ─────────────────────────────────────────────── */

.answer-option.correct {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-color: #66bb6a;
    animation: correctPulse 0.5s ease;
}

    .answer-option.correct .checkmark {
        background: #4caf50;
        border-color: #4caf50;
        color: white;
        display: flex;
    }

        .answer-option.correct .checkmark::before {
            content: "✓";
        }

/* ── State: wrong ───────────────────────────────────────────────── */

.answer-option.wrong {
    background: linear-gradient(135deg, #ffebee 0%, #ef9a9a 100%);
    border: 4px solid #d32f2f;
    border-right: 8px solid #b71c1c;
    animation: wrongShake 0.5s ease, wrongPulse 1.5s ease-in-out infinite;
    box-shadow: 0 6px 20px rgba(211, 47, 47, 0.4);
    position: relative;
}

    .answer-option.wrong::before {
        content: "✗";
        position: absolute;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28px;
        color: #d32f2f;
        font-weight: 900;
        animation: fadeIn 0.3s ease;
    }

    .answer-option.wrong .answer-text {
        color: #b71c1c;
        font-weight: 700;
        text-decoration: line-through;
        text-decoration-color: #d32f2f;
        text-decoration-thickness: 2px;
    }

    .answer-option.wrong .checkmark {
        background: #f44336;
        border-color: #f44336;
        color: white;
        display: flex;
    }

        .answer-option.wrong .checkmark::before {
            content: "✗";
        }

/* ── State: missed (correct answer not chosen) ──────────────────── */

.answer-option.missed {
    background: linear-gradient(135deg, #fff9e6 0%, #ffecb3 100%);
    border-color: #ff9800;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    position: relative;
}

    .answer-option.missed::after {
        content: "⚠";
        position: absolute;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28px;
        color: #ff9800;
        font-weight: 900;
        animation: fadeIn 0.3s ease;
    }

    .answer-option.missed .answer-text {
        color: #e65100;
        font-weight: 700;
    }

    .answer-option.missed .checkmark {
        background: #ff9800;
        border-color: #ff9800;
        color: white;
        display: flex;
    }

        .answer-option.missed .checkmark::before {
            content: "!";
            font-weight: bold;
        }

/* ── Keyframes ──────────────────────────────────────────────────── */

@keyframes wrongPulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(211, 47, 47, 0.4);
    }

    50% {
        box-shadow: 0 6px 30px rgba(211, 47, 47, 0.6);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

@keyframes correctPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

@keyframes wrongShake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}

/* ── Feedback bar ───────────────────────────────────────────────── */

.feedback {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 15px;
    display: none;
}

    .feedback.ok {
        background: #e8f5e9;
        color: #2e7d32;
        border-right: 4px solid #4caf50;
        display: block;
    }

    .feedback.bad {
        background: #ffebee;
        color: #c62828;
        border-right: 4px solid #f44336;
        display: block;
    }

/* ── Explanation block ──────────────────────────────────────────── */

.explanation {
    margin-top: var(--spacing-md);
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border: 2px solid #ffd54f;
    border-right: 6px solid #ffa000;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: none;
    animation: slideDown 0.3s ease;
}

.explanation-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: #e65100;
    margin-bottom: var(--spacing-sm);
    font-size: 16px;
}

    .explanation-header i {
        font-size: 20px;
    }

.explanation-body {
    color: var(--text-dark);
    line-height: 1.7;
    font-size: 15px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ── Question card (matches Takepreview .question-container) ──────── */

.question-container {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 2px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

    .question-container:hover {
        border-color: var(--primary-blue);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-bottom: 2px dashed var(--border-light);
}

.question-number {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: white;
    border-radius: 999px;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.question-body {
    margin-top: var(--spacing-sm);
}

.question-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

/* ── Practice explanation accordion ──────────────────────────────── */

.practice-explanation {
    background: white;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.practice-explanation-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-blue);
    text-align: left;
}

    .practice-explanation-toggle::after {
        content: "▼";
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .practice-explanation-toggle.open::after {
        transform: rotate(180deg);
    }

.practice-explanation-body {
    display: none;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    border-top: 1px solid var(--border-light);
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-dark);
}

    .practice-explanation-body.open {
        display: block;
    }