/* ==========================================
   QUIZ SECTION
========================================== */

.quiz-section{
    padding-top:120px;
    padding-bottom:120px;
}

.quiz-container{
    max-width:920px;
}


/* ==========================================
   QUIZ CARD
========================================== */

.quiz-section .quiz-container{
    padding:52px;

    background:#ffffff;
    border:1px solid rgba(29,29,31,.08);
    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-medium);
}


/* ==========================================
   QUIZ HEADER
========================================== */

.quiz-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;

    margin-bottom:28px;
}

.quiz-header .eyebrow{
    margin-bottom:10px;
}

.quiz-header h2{
    max-width:610px;

    font-size:44px;
    line-height:1.08;
    letter-spacing:-.035em;
}

.quiz-progress-text{
    flex-shrink:0;

    padding-bottom:6px;

    color:var(--text-secondary);
    font-size:14px;
    font-weight:600;
}


/* ==========================================
   PROGRESS BAR
========================================== */

.quiz-progress{
    width:100%;
    height:7px;
    margin-bottom:52px;

    overflow:hidden;

    background:#ececee;
    border-radius:999px;
}

.quiz-progress__bar{
    width:12.5%;
    height:100%;

    background:var(--primary);
    border-radius:inherit;

    transform-origin:left center;

    transition:
        width .4s cubic-bezier(.4,0,.2,1);
}


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

.quiz-question{
    min-height:390px;
}

.quiz-question__number{
    margin-bottom:14px;

    color:var(--primary);
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.quiz-question__title{
    max-width:760px;
    margin-bottom:36px;

    font-size:34px;
    line-height:1.18;
    letter-spacing:-.025em;
}

.quiz-question__description{
    max-width:700px;
    margin-top:-22px;
    margin-bottom:34px;

    color:var(--text-secondary);
    font-size:16px;
}


/* ==========================================
   ANSWERS
========================================== */

.quiz-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.quiz-option{
    position:relative;
    display:block;
}

.quiz-option__input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;
    pointer-events:none;
}

.quiz-option__content{
    position:relative;

    display:flex;
    align-items:center;
    gap:16px;

    min-height:78px;
    padding:18px 20px;

    background:#f7f7f8;
    border:2px solid transparent;
    border-radius:18px;

    color:var(--text);
    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.quiz-option__content::before{
    content:"";

    flex:0 0 auto;

    width:22px;
    height:22px;

    background:#ffffff;
    border:2px solid #c9c9ce;
    border-radius:50%;

    box-shadow:inset 0 0 0 5px #ffffff;

    transition:
        border-color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}

.quiz-option__content:hover{
    transform:translateY(-2px);

    background:#ffffff;
    border-color:rgba(239,125,0,.28);

    box-shadow:var(--shadow-small);
}

.quiz-option__input:checked + .quiz-option__content{
    background:rgba(239,125,0,.07);
    border-color:var(--primary);

    box-shadow:0 10px 28px rgba(239,125,0,.12);
}

.quiz-option__input:checked +
.quiz-option__content::before{
    background:var(--primary);
    border-color:var(--primary);

    box-shadow:inset 0 0 0 5px #ffffff;
}

.quiz-option__input:focus-visible +
.quiz-option__content{
    outline:2px solid var(--primary);
    outline-offset:4px;
}


/* ==========================================
   QUIZ ERROR
========================================== */

.quiz-error{
    margin-top:18px;

    color:#c53b2f;
    font-size:14px;
    font-weight:600;
}

.quiz-error[hidden]{
    display:none;
}


/* ==========================================
   QUIZ ACTIONS
========================================== */

.quiz-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin-top:34px;
    padding-top:28px;

    border-top:1px solid rgba(29,29,31,.08);
}

.quiz-actions .button{
    min-width:132px;
}

.quiz-actions .button:disabled{
    opacity:.35;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}


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

.quiz-question.is-leaving{
    animation:quiz-leave .18s ease forwards;
}

.quiz-question.is-entering{
    animation:quiz-enter .32s ease forwards;
}

.quiz-question.is-entering-back{
    animation:quiz-enter-back .32s ease forwards;
}

@keyframes quiz-leave{
    from{
        opacity:1;
        transform:translateX(0);
    }

    to{
        opacity:0;
        transform:translateX(-18px);
    }
}

@keyframes quiz-enter{
    from{
        opacity:0;
        transform:translateX(24px);
    }

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

@keyframes quiz-enter-back{
    from{
        opacity:0;
        transform:translateX(-24px);
    }

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