/* =====================================================
   DAILY ENGLISH WITH AI
   PREMIUM QUIZ DESIGN SYSTEM
   PART 1 — DESKTOP
   ===================================================== */


/* =====================================================
   1. QUIZ PAGE WRAPPER
===================================================== */

.quiz-page{
    width:100%;
    max-width:980px;

    margin:40px auto;

    padding:28px;

    background:#F8F7FD;

    border-radius:32px;

    font-family:'Poppins',sans-serif;

    color:#0F172A;

    box-sizing:border-box;
}


/* =====================================================
   2. GLOBAL BOX SIZING
===================================================== */

.quiz-page *,
.quiz-page *::before,
.quiz-page *::after{
    box-sizing:border-box;
}


/* =====================================================
   3. TYPOGRAPHY
===================================================== */

.quiz-page h1,
.quiz-page h2,
.quiz-page h3,
.quiz-page p{
    margin-top:0;
}

.quiz-page h1{
    font-size:52px;

    line-height:1.1;

    font-weight:800;

    color:#0F172A;

    margin-bottom:18px;

    letter-spacing:-1px;
}

.quiz-page h2{
    font-size:32px;

    line-height:1.25;

    font-weight:700;

    color:#0F172A;

    margin-bottom:18px;
}

.quiz-page h3{
    font-size:24px;

    line-height:1.35;

    font-weight:600;

    color:#0F172A;

    margin-bottom:18px;
}

.quiz-page p,
.quiz-page li{
    font-size:17px;

    line-height:1.8;

    color:#475569;
}


/* =====================================================
   4. SHARED CARD SYSTEM
===================================================== */

.quiz-info,
.quiz-instructions,
.quiz-progress,
.question-area,
.quiz-submit,
.quiz-results,
.review-answers,
.next-lesson{

    background:#FFFFFF;

    border:1px solid #ECE8FF;

    border-radius:24px;

    padding:32px;

    margin-bottom:32px;

    box-shadow:
        0 8px 24px rgba(108,62,244,.06);
}


/* =====================================================
   5. HERO
===================================================== */

.quiz-hero{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F5EFFF 100%
        );

    border:1px solid #ECE8FF;

    border-radius:32px;

    padding:48px;

    margin-bottom:32px;

    min-height:280px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    box-shadow:
        0 12px 30px rgba(108,62,244,.08);
}


/* Decorative Circle */

.quiz-hero::before{

    content:"";

    position:absolute;

    top:-90px;

    right:-80px;

    width:260px;

    height:260px;

    background:
        radial-gradient(
            circle,
            rgba(108,62,244,.15),
            rgba(108,62,244,0)
        );

    border-radius:50%;

    pointer-events:none;
}


/* Decorative Circle 2 */

.quiz-hero::after{

    content:"";

    position:absolute;

    bottom:-100px;

    right:180px;

    width:220px;

    height:220px;

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.10),
            rgba(139,92,246,0)
        );

    border-radius:50%;

    pointer-events:none;
}


/* Keep content above decorations */

.quiz-hero > *{

    position:relative;

    z-index:2;
}


/* Quiz Badge */

.quiz-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    background:#EEE7FF;

    color:#6C3EF4;

    padding:9px 17px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:18px;
}


/* Quiz Subtitle */

.quiz-subtitle{

    max-width:760px;

    font-size:20px;

    line-height:1.7;

    color:#475569;

    margin:0 0 24px;
}


/* =====================================================
   6. START QUIZ BUTTON
===================================================== */

.start-quiz-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:30px;

    text-align:center;
}


.start-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    padding:16px 30px;

    background:
        linear-gradient(
            135deg,
            #6C3EF4,
            #8B5CF6
        );

    color:#FFFFFF;

    border:none;

    border-radius:999px;

    font-family:'Poppins',sans-serif;

    font-size:17px;

    font-weight:700;

    line-height:1.2;

    cursor:pointer;

    box-shadow:
        0 12px 25px rgba(108,62,244,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.start-btn:hover{

    background:
        linear-gradient(
            135deg,
            #5931D8,
            #7C3AED
        );

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(108,62,244,.28);
}


.start-btn:active{

    transform:translateY(-1px);
}


.start-btn:focus-visible{

    outline:3px solid rgba(108,62,244,.25);

    outline-offset:4px;
}


/* =====================================================
   7. QUIZ INFORMATION
===================================================== */

.info-grid{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:18px;

    margin-top:20px;
}


.info-card{

    background:#F8F5FF;

    border:1px solid #ECE8FF;

    border-radius:20px;

    padding:22px;

    text-align:center;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.info-card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 10px 24px rgba(108,62,244,.08);
}


.info-card span{

    display:block;

    margin-bottom:8px;

    color:#6C3EF4;

    font-size:14px;

    font-weight:600;
}


.info-card strong{

    display:block;

    color:#0F172A;

    font-size:24px;

    line-height:1.3;

    font-weight:800;
}


/* =====================================================
   8. INSTRUCTIONS
===================================================== */

.quiz-instructions ul{

    margin:18px 0 0;

    padding-left:22px;
}

.quiz-instructions li{

    margin-bottom:10px;
}


/* =====================================================
   9. PROGRESS
===================================================== */

.progress-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:14px;

    font-size:15px;

    font-weight:700;

    color:#0F172A;
}


.progress-bar{

    width:100%;

    height:12px;

    background:#E9E4FF;

    border-radius:999px;

    overflow:hidden;
}


.progress-fill{

    width:10%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            #6C3EF4,
            #8B5CF6
        );

    border-radius:999px;

    transition:
        width .4s ease;
}


/* =====================================================
   10. QUESTION AREA
===================================================== */

.question{

    display:none;
}


.question.active{

    display:block;

    animation:
        quizQuestionIn .3s ease;
}


@keyframes quizQuestionIn{

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

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

}


.question-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#EEE7FF;

    color:#6C3EF4;

    padding:7px 15px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;
}


.question h3{

    font-size:27px;

    line-height:1.45;

    margin-bottom:26px;

    color:#0F172A;
}


/* =====================================================
   11. ANSWER OPTIONS
===================================================== */

.options{

    display:flex;

    flex-direction:column;

    gap:14px;
}


.options label{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 20px;

    background:#FFFFFF;

    border:2px solid #E9E4FF;

    border-radius:18px;

    cursor:pointer;

    color:#334155;

    font-size:16px;

    font-weight:500;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.options label:hover{

    border-color:#6C3EF4;

    background:#F8F5FF;

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(108,62,244,.06);
}


.options input[type="radio"]{

    width:18px;

    height:18px;

    margin:0;

    accent-color:#6C3EF4;

    transform:scale(1.15);

    flex-shrink:0;
}


.options label:has(
    input[type="radio"]:checked
){

    border-color:#6C3EF4;

    background:#F5EFFF;

    box-shadow:
        0 8px 20px rgba(108,62,244,.08);
}


/* =====================================================
   12. ANSWER EXPLANATION
===================================================== */

.answer-explanation{

    display:none;

    margin-top:24px;

    padding:20px 22px;

    background:#EEF6FF;

    border-left:5px solid #3B82F6;

    border-radius:16px;

    color:#334155;

    line-height:1.75;
}


/* =====================================================
   13. QUIZ NAVIGATION
===================================================== */

.quiz-navigation{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-bottom:32px;
}


.quiz-navigation button,
#submitQuiz,
.next-lesson button{

    flex:1;

    min-height:54px;

    border:none;

    border-radius:999px;

    padding:16px 22px;

    font-family:'Poppins',sans-serif;

    font-size:17px;

    font-weight:700;

    line-height:1.2;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.quiz-navigation button:hover,
#submitQuiz:hover,
.next-lesson button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 22px rgba(108,62,244,.15);
}


#prevBtn{

    background:#E9E4FF;

    color:#6C3EF4;
}


#nextBtn,
#submitQuiz{

    background:
        linear-gradient(
            135deg,
            #6C3EF4,
            #8B5CF6
        );

    color:#FFFFFF;
}


#prevBtn:hover{

    background:#DDD5FF;
}


#nextBtn:hover,
#submitQuiz:hover{

    background:
        linear-gradient(
            135deg,
            #5931D8,
            #7C3AED
        );
}


/* =====================================================
   14. RESULTS
===================================================== */

.quiz-results{

    display:none;

    text-align:center;

    padding-top:40px;

    padding-bottom:40px;
}


.score-circle{

    width:170px;

    height:170px;

    margin:28px auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #6C3EF4,
            #8B5CF6
        );

    color:#FFFFFF;

    font-size:36px;

    font-weight:800;

    box-shadow:
        0 18px 40px rgba(108,62,244,.25);
}


/* =====================================================
   15. PASS / FAIL COLORS
===================================================== */

.pass{

    color:#22C55E;
}


.fail{

    color:#EF4444;
}


/* =====================================================
   16. REVIEW ANSWERS
===================================================== */

.review-answers{

    display:none;
}


.review-item{

    background:#F8F5FF;

    border:1px solid #ECE8FF;

    border-radius:18px;

    padding:20px;

    margin-bottom:18px;
}


.review-item.correct{

    border-left:5px solid #22C55E;
}


.review-item.wrong{

    border-left:5px solid #EF4444;
}


/* =====================================================
   17. NEXT LESSON
===================================================== */

.next-lesson{

    text-align:center;

    background:
        linear-gradient(
            135deg,
            #6C3EF4,
            #8B5CF6
        );

    border:none;

    color:#FFFFFF;
}


.next-lesson h2,
.next-lesson h3,
.next-lesson p{

    color:#FFFFFF;
}


.next-lesson button{

    background:#FFFFFF;

    color:#6C3EF4;

    margin-top:18px;
}


.next-lesson button:hover{

    background:#F8F5FF;
}


/* =====================================================
   18. CONGRATULATIONS POPUP
===================================================== */

.congrats-popup{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(10,10,30,.55);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    z-index:99999;

    overflow:hidden;
}


.congrats-popup.show{

    display:flex;

    animation:
        fadeIn .35s ease;
}


.congrats-card{

    position:relative;

    z-index:2;

    width:min(460px,92vw);

    padding:42px 32px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #F8F5FF
        );

    border:1px solid rgba(255,255,255,.45);

    border-radius:32px;

    text-align:center;

    box-shadow:
        0 30px 70px rgba(108,62,244,.28);

    animation:
        popIn .45s cubic-bezier(.2,.9,.2,1.1);
}


.celebration-icon{

    width:90px;

    height:90px;

    margin:0 auto 20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    background:
        linear-gradient(
            135deg,
            #6C3EF4,
            #8B5CF6
        );

    box-shadow:
        0 15px 35px rgba(108,62,244,.35);
}


.congrats-card h2{

    margin-bottom:12px;

    font-size:36px;

    line-height:1.2;

    color:#0F172A;
}


.congrats-text{

    margin-bottom:26px;

    font-size:18px;

    line-height:1.7;

    color:#475569;
}


.popup-score{

    width:170px;

    height:170px;

    margin:0 auto 30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #6C3EF4,
            #8B5CF6
        );

    color:#FFFFFF;

    font-size:30px;

    font-weight:800;

    box-shadow:
        0 20px 40px rgba(108,62,244,.35);
}


/* =====================================================
   19. PREMIUM CONTINUE BUTTON
===================================================== */

#closeCongrats{

    width:100%;

    border:none;

    border-radius:999px;

    padding:18px 24px;

    background:
        linear-gradient(
            135deg,
            #6C3EF4,
            #8B5CF6
        );

    color:#FFFFFF;

    font-family:'Poppins',sans-serif;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 14px 30px rgba(108,62,244,.35);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


#closeCongrats:hover{

    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 20px 40px rgba(108,62,244,.45);
}


#closeCongrats:active{

    transform:scale(.98);
}


/* =====================================================
   20. CONFETTI
===================================================== */

#confettiCanvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:1;
}


/* =====================================================
   21. ANIMATIONS
===================================================== */

@keyframes popIn{

    0%{
        transform:
            scale(.75)
            translateY(30px);

        opacity:0;
    }

    100%{
        transform:
            scale(1)
            translateY(0);

        opacity:1;
    }

}


@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


/* =====================================================
   22. RETAKE QUIZ BUTTON
===================================================== */

.retake-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:240px;

    margin:28px auto 0;

    padding:16px 34px;

    border:none;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #6C3EF4,
            #8B5CF6
        );

    color:#FFFFFF;

    font-family:'Poppins',sans-serif;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    box-shadow:
        0 14px 30px rgba(108,62,244,.28);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.retake-btn:hover{

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 20px 40px rgba(108,62,244,.40);
}


.retake-btn:active{

    transform:scale(.97);
}


.retake-btn::before{

    content:"↻";

    font-size:20px;

    font-weight:700;
}





/* ===========================================================================================================================================================================================================================================
   DAILY ENGLISH WITH AI
   PREMIUM QUIZ DESIGN SYSTEM
   PART 2 — TABLET
   769px – 1100px
===================================================== */

@media (min-width:769px) and (max-width:1100px){


    /* =========================================
       1. QUIZ PAGE
    ========================================== */

    .quiz-page{

        width:calc(100% - 40px);

        max-width:900px;

        margin:28px auto;

        padding:22px;

        border-radius:28px;
    }


    /* =========================================
       2. TYPOGRAPHY
    ========================================== */

    .quiz-page h1{

        font-size:46px;

        line-height:1.12;

        letter-spacing:-.8px;
    }


    .quiz-page h2{

        font-size:29px;

        line-height:1.25;
    }


    .quiz-page h3{

        font-size:22px;

        line-height:1.4;
    }


    .quiz-page p,
    .quiz-page li{

        font-size:16px;

        line-height:1.75;
    }


    /* =========================================
       3. SHARED CARDS
    ========================================== */

    .quiz-info,
    .quiz-instructions,
    .quiz-progress,
    .question-area,
    .quiz-submit,
    .quiz-results,
    .review-answers,
    .next-lesson{

        padding:26px;

        margin-bottom:26px;

        border-radius:22px;
    }


    /* =========================================
       4. HERO
    ========================================== */

    .quiz-hero{

        min-height:260px;

        padding:40px;

        border-radius:28px;

        margin-bottom:26px;
    }


    .quiz-hero::before{

        width:220px;

        height:220px;

        top:-70px;

        right:-65px;
    }


    .quiz-hero::after{

        width:190px;

        height:190px;

        bottom:-90px;

        right:100px;
    }


    /* =========================================
       5. BADGE
    ========================================== */

    .quiz-badge{

        font-size:13px;

        padding:8px 15px;

        margin-bottom:16px;
    }


    /* =========================================
       6. SUBTITLE
    ========================================== */

    .quiz-subtitle{

        max-width:680px;

        font-size:18px;

        line-height:1.7;

        margin-bottom:22px;
    }


    /* =========================================
       7. START QUIZ
    ========================================== */

    .start-quiz-wrapper{

        margin-top:26px;
    }


    .start-btn{

        min-width:210px;

        padding:15px 28px;

        font-size:16px;
    }


    /* =========================================
       8. QUIZ INFORMATION
    ========================================== */

    .info-grid{

        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:14px;

        margin-top:18px;
    }


    .info-card{

        padding:18px;

        border-radius:18px;
    }


    .info-card span{

        font-size:13px;
    }


    .info-card strong{

        font-size:21px;
    }


    /* =========================================
       9. INSTRUCTIONS
    ========================================== */

    .quiz-instructions ul{

        padding-left:20px;

        margin-top:15px;
    }


    .quiz-instructions li{

        margin-bottom:9px;
    }


    /* =========================================
       10. PROGRESS
    ========================================== */

    .progress-header{

        font-size:14px;

        margin-bottom:12px;
    }


    .progress-bar{

        height:11px;
    }


    /* =========================================
       11. QUESTION
    ========================================== */

    .question-number{

        padding:6px 13px;

        font-size:13px;

        margin-bottom:16px;
    }


    .question h3{

        font-size:24px;

        line-height:1.45;

        margin-bottom:22px;
    }


    /* =========================================
       12. OPTIONS
    ========================================== */

    .options{

        gap:12px;
    }


    .options label{

        padding:16px 18px;

        gap:13px;

        border-radius:17px;

        font-size:16px;
    }


    .options input[type="radio"]{

        width:18px;

        height:18px;

        transform:scale(1.1);
    }


    /* =========================================
       13. ANSWER EXPLANATION
    ========================================== */

    .answer-explanation{

        margin-top:20px;

        padding:18px 20px;

        border-radius:15px;

        font-size:15px;

        line-height:1.7;
    }


    /* =========================================
       14. NAVIGATION
    ========================================== */

    .quiz-navigation{

        gap:14px;

        margin-bottom:26px;
    }


    .quiz-navigation button,
    #submitQuiz,
    .next-lesson button{

        min-height:52px;

        padding:15px 20px;

        font-size:16px;
    }


    /* =========================================
       15. RESULTS
    ========================================== */

    .quiz-results{

        padding-top:34px;

        padding-bottom:34px;
    }


    .score-circle{

        width:150px;

        height:150px;

        margin:24px auto;

        font-size:32px;
    }


    /* =========================================
       16. REVIEW
    ========================================== */

    .review-item{

        padding:18px;

        margin-bottom:15px;

        border-radius:17px;
    }


    /* =========================================
       17. NEXT LESSON
    ========================================== */

    .next-lesson{

        padding:28px;

        border-radius:22px;
    }


    .next-lesson button{

        margin-top:16px;
    }


    /* =========================================
       18. CONGRATULATIONS POPUP
    ========================================== */

    .congrats-popup{

        padding:20px;
    }


    .congrats-card{

        width:min(440px,90vw);

        padding:36px 28px;

        border-radius:28px;
    }


    .celebration-icon{

        width:82px;

        height:82px;

        margin-bottom:18px;

        font-size:38px;
    }


    .congrats-card h2{

        font-size:33px;

        margin-bottom:11px;
    }


    .congrats-text{

        font-size:17px;

        line-height:1.65;

        margin-bottom:23px;
    }


    .popup-score{

        width:155px;

        height:155px;

        margin-bottom:26px;

        font-size:28px;
    }


    /* =========================================
       19. CONTINUE BUTTON
    ========================================== */

    #closeCongrats{

        min-height:54px;

        padding:16px 22px;

        font-size:17px;
    }


    /* =========================================
       20. RETAKE BUTTON
    ========================================== */

    .quiz-results .retake-btn{

        width:230px;

        min-height:52px;

        padding:15px 28px;

        margin-top:24px;

        font-size:16px;
    }

}





/* ===========================================================================================================================================================================================================================================
   DAILY ENGLISH WITH AI
   PREMIUM QUIZ DESIGN SYSTEM
   PART 3 — MOBILE
===================================================== */


/* =====================================================
   MOBILE
   0px – 768px
===================================================== */

@media (max-width:768px){


    /* =========================================
       1. PAGE WRAPPER
    ========================================== */

    .quiz-page{
        width:calc(100% - 20px);

        max-width:none;

        margin:10px auto;

        padding:14px;

        border-radius:24px;
    }


    /* =========================================
       2. GLOBAL TYPOGRAPHY
    ========================================== */

    .quiz-page h1{
        font-size:36px;

        line-height:1.15;

        letter-spacing:-0.6px;

        margin-bottom:14px;
    }

    .quiz-page h2{
        font-size:26px;

        line-height:1.25;

        margin-bottom:16px;
    }

    .quiz-page h3{
        font-size:20px;

        line-height:1.4;

        margin-bottom:16px;
    }

    .quiz-page p,
    .quiz-page li{
        font-size:15px;

        line-height:1.7;
    }


    /* =========================================
       3. SHARED CARDS
    ========================================== */

    .quiz-info,
    .quiz-instructions,
    .quiz-progress,
    .question-area,
    .quiz-submit,
    .quiz-results,
    .review-answers,
    .next-lesson{

        padding:22px 18px;

        margin-bottom:22px;

        border-radius:20px;
    }


    /* =========================================
       4. HERO
    ========================================== */

    .quiz-hero{

        min-height:auto;

        padding:28px 20px;

        border-radius:24px;

        margin-bottom:22px;
    }


    .quiz-hero::before{

        width:170px;

        height:170px;

        top:-55px;

        right:-55px;
    }


    .quiz-hero::after{

        width:150px;

        height:150px;

        bottom:-75px;

        right:-35px;
    }


    /* =========================================
       5. QUIZ BADGE
    ========================================== */

    .quiz-badge{

        font-size:12px;

        padding:8px 14px;

        margin-bottom:14px;
    }


    /* =========================================
       6. QUIZ SUBTITLE
    ========================================== */

    .quiz-subtitle{

        font-size:16px;

        line-height:1.65;

        margin-bottom:20px;
    }


    /* =========================================
       7. START QUIZ BUTTON
    ========================================== */

    .start-quiz-wrapper{

        width:100%;

        margin-top:22px;
    }


    .start-btn{

        width:100%;

        min-width:0;

        min-height:52px;

        padding:15px 18px;

        font-size:16px;
    }


    /* =========================================
       8. QUIZ INFORMATION
    ========================================== */

    .info-grid{

        grid-template-columns:1fr;

        gap:12px;

        margin-top:16px;
    }


    .info-card{

        padding:17px 16px;

        border-radius:17px;
    }


    .info-card span{

        font-size:13px;

        margin-bottom:5px;
    }


    .info-card strong{

        font-size:21px;
    }


    /* =========================================
       9. INSTRUCTIONS
    ========================================== */

    .quiz-instructions ul{

        padding-left:20px;

        margin-top:12px;
    }


    .quiz-instructions li{

        margin-bottom:8px;
    }


    /* =========================================
       10. PROGRESS
    ========================================== */

    .progress-header{

        gap:10px;

        margin-bottom:10px;

        font-size:13px;
    }


    .progress-bar{

        height:10px;
    }


    .progress-fill{

        height:100%;
    }


    /* =========================================
       11. QUESTION
    ========================================== */

    .question-number{

        padding:6px 12px;

        font-size:12px;

        margin-bottom:14px;
    }


    .question h3{

        font-size:20px;

        line-height:1.5;

        margin-bottom:20px;
    }


    /* =========================================
       12. ANSWER OPTIONS
    ========================================== */

    .options{

        gap:10px;
    }


    .options label{

        min-height:54px;

        padding:14px 15px;

        gap:11px;

        border-width:2px;

        border-radius:15px;

        font-size:15px;

        line-height:1.5;
    }


    .options label:hover{

        transform:none;
    }


    .options input[type="radio"]{

        width:18px;

        height:18px;

        transform:none;

        flex-shrink:0;
    }


    /* =========================================
       13. ANSWER EXPLANATION
    ========================================== */

    .answer-explanation{

        margin-top:18px;

        padding:16px;

        border-left-width:4px;

        border-radius:14px;

        font-size:14px;

        line-height:1.7;
    }


    /* =========================================
       14. QUIZ NAVIGATION
    ========================================== */

    .quiz-navigation{

        flex-direction:column;

        gap:10px;

        margin-bottom:22px;
    }


    .quiz-navigation button,
    #submitQuiz,
    .next-lesson button{

        width:100%;

        flex:none;

        min-height:52px;

        padding:14px 18px;

        font-size:15px;
    }


    /* =========================================
       15. RESULTS
    ========================================== */

    .quiz-results{

        padding-top:28px;

        padding-bottom:28px;

        text-align:center;
    }


    .score-circle{

        width:135px;

        height:135px;

        margin:20px auto;

        font-size:28px;
    }


    /* =========================================
       16. REVIEW ANSWERS
    ========================================== */

    .review-item{

        padding:15px;

        margin-bottom:12px;

        border-radius:15px;
    }


    /* =========================================
       17. NEXT LESSON
    ========================================== */

    .next-lesson{

        padding:24px 18px;

        border-radius:20px;
    }


    .next-lesson button{

        margin-top:14px;
    }


    /* =========================================
       18. CONGRATULATIONS POPUP
    ========================================== */

    .congrats-popup{

        padding:14px;
    }


    .congrats-card{

        width:100%;

        max-width:390px;

        max-height:calc(100vh - 28px);

        overflow-y:auto;

        padding:30px 20px;

        border-radius:26px;
    }


    .celebration-icon{

        width:72px;

        height:72px;

        margin-bottom:16px;

        font-size:34px;
    }


    .congrats-card h2{

        font-size:29px;

        line-height:1.2;

        margin-bottom:10px;
    }


    .congrats-text{

        font-size:15px;

        line-height:1.6;

        margin-bottom:20px;
    }


    .popup-score{

        width:135px;

        height:135px;

        margin-bottom:22px;

        font-size:25px;
    }


    /* =========================================
       19. CONTINUE BUTTON
    ========================================== */

    #closeCongrats{

        min-height:52px;

        padding:15px 20px;

        font-size:16px;
    }


    /* =========================================
       20. RETAKE QUIZ
    ========================================== */

    .quiz-results .retake-btn{

        display:flex;

        width:100%;

        max-width:280px;

        min-height:52px;

        margin:22px auto 0;

        padding:15px 22px;

        font-size:16px;
    }


    .retake-btn:hover{

        transform:none;
    }

}


/* =====================================================
   SMALL MOBILE
   0px – 390px
===================================================== */

@media (max-width:390px){


    /* =========================================
       PAGE
    ========================================== */

    .quiz-page{

        width:calc(100% - 14px);

        margin:7px auto;

        padding:11px;

        border-radius:20px;
    }


    /* =========================================
       TYPOGRAPHY
    ========================================== */

    .quiz-page h1{

        font-size:32px;

        line-height:1.15;
    }


    .quiz-page h2{

        font-size:23px;
    }


    .quiz-page h3{

        font-size:19px;
    }


    .quiz-page p,
    .quiz-page li{

        font-size:14px;

        line-height:1.65;
    }


    /* =========================================
       CARDS
    ========================================== */

    .quiz-info,
    .quiz-instructions,
    .quiz-progress,
    .question-area,
    .quiz-submit,
    .quiz-results,
    .review-answers,
    .next-lesson{

        padding:18px 14px;

        border-radius:18px;
    }


    /* =========================================
       HERO
    ========================================== */

    .quiz-hero{

        padding:24px 16px;

        border-radius:20px;
    }


    .quiz-badge{

        font-size:11px;

        padding:7px 12px;
    }


    .quiz-subtitle{

        font-size:15px;
    }


    /* =========================================
       START BUTTON
    ========================================== */

    .start-btn{

        min-height:50px;

        font-size:15px;
    }


    /* =========================================
       INFO CARDS
    ========================================== */

    .info-card{

        padding:15px 12px;
    }


    .info-card strong{

        font-size:19px;
    }


    /* =========================================
       QUESTION
    ========================================== */

    .question-number{

        font-size:11px;

        padding:5px 10px;
    }


    .question h3{

        font-size:19px;

        line-height:1.45;
    }


    /* =========================================
       OPTIONS
    ========================================== */

    .options{

        gap:8px;
    }


    .options label{

        min-height:52px;

        padding:12px 13px;

        font-size:14px;

        border-radius:14px;
    }


    /* =========================================
       NAVIGATION
    ========================================== */

    .quiz-navigation button,
    #submitQuiz,
    .next-lesson button{

        min-height:50px;

        font-size:14px;
    }


    /* =========================================
       RESULTS
    ========================================== */

    .score-circle{

        width:120px;

        height:120px;

        font-size:25px;
    }


    /* =========================================
       CONGRATULATIONS POPUP
    ========================================== */

    .congrats-popup{

        padding:10px;
    }


    .congrats-card{

        max-width:370px;

        padding:26px 17px;

        border-radius:23px;
    }


    .celebration-icon{

        width:64px;

        height:64px;

        font-size:30px;

        margin-bottom:13px;
    }


    .congrats-card h2{

        font-size:26px;
    }


    .congrats-text{

        font-size:14px;

        margin-bottom:17px;
    }


    .popup-score{

        width:120px;

        height:120px;

        font-size:23px;

        margin-bottom:20px;
    }


    #closeCongrats{

        min-height:50px;

        font-size:15px;
    }


    /* =========================================
       RETAKE
    ========================================== */

    .quiz-results .retake-btn{

        max-width:none;

        width:100%;

        min-height:50px;

        font-size:15px;
    }

}