/* ========================================== MCQ Single Page
========================================== */

/* ———- Page Layout ———- */

.mcq-page{
    display:block;
    width:100%;
    max-width:900px;
    margin:10px auto;
    padding:0 0px;
    box-sizing:border-box;
}

/* ———- Breadcrumb ———- */

.mcq-breadcrumb{ margin-bottom:10px; font-size:12px; color:#666; }

.mcq-breadcrumb a{ text-decoration:none; }

.mcq-breadcrumb .separator{ margin:0 1px; color:#999; }

.mcq-breadcrumb .current{ font-weight:600; color:#222; }

/* ———- Progress ———- */

.mcq-progress{ margin-bottom:5px; font-size:14px; font-weight:600;
color:#666; }

/* ———- Question ———- */

.mcq-question h1{ margin-bottom:10px; font-size:16px; line-height:1.5;
}

/* ———- Options ———- */

.mcq-options{ display:flex; flex-direction:column; gap:10px; width:100%; }

.mcq-option{ display:flex; align-items:center; gap:10px; padding:10px;
border:2px solid #dcdcdc; border-radius:12px; background:#fff;
cursor:pointer; transition:all .25s ease; }

.mcq-option:hover{ border-color:#0d6efd; transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.08); }

.option-letter{ display:flex; align-items:center;
justify-content:center; width:24px; height:24px; border:2px solid
#dcdcdc; border-radius:50%; font-weight:700; transition:all .25s ease; }

.option-text{ flex:1; font-size:16px; }

.mcq-option.correct{ background:#d4edda; border-color:#28a745;
transform:scale(1.01); }

.mcq-option.correct .option-letter{ background:#28a745; color:#fff;
border-color:#28a745; }

.mcq-option.wrong{ background:#f8d7da; border-color:#dc3545;
transform:scale(1.01); }

.mcq-option.wrong .option-letter{ background:#dc3545; color:#fff;
border-color:#dc3545; }

.mcq-option.disabled{ background:#f2f2f2; color:#888; }

.mcq-option.disabled .option-letter{ background:#ddd; border-color:#ddd;
}

.mcq-option.locked{ pointer-events:none; }

/* ———- Correct Option ———- */

.mcq-answer{ margin-top:10px; padding:10px; border-radius:12px;
background:#e8f5e9; font-size:16px; animation:mcqFade .3s ease;
transition:all .25s ease; }

.mcq-answer strong{ font-size:16px; font-weight:700; }

/* ———- Explanation ———- */

.mcq-explanation{ margin-top:10px; padding:10px; border-radius:12px;
background:#fffbe6; animation:mcqFade .3s ease; transition:all .25s
ease; }

.mcq-explanation h3{ margin:0 0 8px; font-size:16px; }

.mcq-explanation p{ margin:0; font-size:14px; line-height:1.5; }

/* ———- Navigation ———- */

.mcq-navigation{ display:flex; justify-content:space-between; gap:10px;
margin-top:10px; }

.mcq-navigation button{ flex:1; padding:10px; border:none;
border-radius:10px; font-size:16px; cursor:pointer; }

.mcq-prev, .mcq-next{ flex:1; padding:10px; border-radius:10px;
background:#0d6efd; color:#fff; text-align:center; text-decoration:none;
font-weight:600; transition:all .25s ease; }

.mcq-prev:hover, .mcq-next:hover{ color:#fff; }

.mcq-prev.disabled, .mcq-next.disabled{ background:#ddd; color:#888;
pointer-events:none; }

.mcq-retry{ background:#444; color:#fff; font-weight:600; transition:all
.25s ease; }

/* ———- Animations ———- */

@keyframes mcqFade{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
@media (min-width: 900px){

    .mcq-page{
        width:900px;
    }

}
/* ==========================================
   Finished Section
========================================== */

.mcq-finished{
    margin-top:30px;
    text-align:center;
}

.mcq-finished h2{
    margin:0 0 20px;
    font-size:28px;
    font-weight:700;
}

.mcq-finished .mcq-subject-card{
    max-width:320px;
    margin:0 auto;
    background:#fff;
    border:2px solid #111827;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
    transition:.25s;
}

.mcq-finished .mcq-subject-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.mcq-finished .mcq-subject-card a{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    padding:12px 20px;
    color:#2563eb;
    text-decoration:none;
    font-size:18px;
    font-weight:600;
}

.mcq-finished .mcq-subject-title{
    color:#2563eb;
}