/* =========================================================
   1SAFETY Course Engine V2.3.3 — Question Core
   QUESTION_SINGLE / QUESTION_MULTI / TRUE_FALSE
   Visual-only layer. Business logic remains in course_answer.php.
   Palette: white / black / gray / 1SAFETY yellow; red only error.
   ========================================================= */

/* ---------- shared question surface ---------- */
#ca-form .ca-card--question{
    --q-yellow:#FFC400;
    --q-yellow-border:#D9A700;
    --q-yellow-soft:#FFF8D8;
    --q-text:#111315;
    --q-muted:#747C86;
    --q-line:#DDE2E7;
    --q-line-strong:#BFC6CE;
    --q-soft:#F5F6F7;
    --q-red:#D94B4B;
    --q-red-soft:#FFF1F1;
}

#ca-form .ca-card--question .ca-card__inner{
    padding:28px 34px 24px!important;
}
#ca-form .ca-card--question .ca-question{
    max-width:760px!important;
    margin:4px auto 18px!important;
    color:var(--q-text)!important;
    font-size:27px!important;
    line-height:1.22!important;
    font-weight:820!important;
    letter-spacing:-.025em!important;
}
#ca-form .ca-card--question .ca-options-label{
    max-width:760px!important;
    margin:0 auto 10px!important;
    color:var(--q-muted)!important;
    font-size:13px!important;
    line-height:1.35!important;
    font-weight:650!important;
    text-transform:none!important;
    letter-spacing:0!important;
}
#ca-form .ca-card--question .ca-options{
    max-width:760px!important;
    width:100%!important;
    margin:0 auto!important;
    gap:10px!important;
    padding:1px!important;
}
#ca-form .ca-card--question .ca-option{
    min-height:62px!important;
    height:auto!important;
    padding:13px 15px!important;
    gap:13px!important;
    align-items:center!important;
    border:1.5px solid var(--q-line)!important;
    border-radius:15px!important;
    background:#fff!important;
    color:var(--q-text)!important;
    box-shadow:none!important;
    font-size:16px!important;
    line-height:1.35!important;
    font-weight:650!important;
    cursor:pointer!important;
    transition:border-color .14s ease,background-color .14s ease,transform .10s ease!important;
}
@media(hover:hover){
    #ca-form .ca-card--question .ca-option:not(.is-disabled):hover{
        border-color:var(--q-line-strong)!important;
        background:#FCFCFD!important;
        transform:none!important;
    }
}
#ca-form .ca-card--question .ca-option:active:not(.is-disabled){
    transform:scale(.992)!important;
}
#ca-form .ca-card--question .ca-option > span:not(.ca-option__letter):not(.ca-option__state){
    flex:1 1 auto!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
}

/* Selected is always yellow — no extra blue/green brand states. */
#ca-form .ca-card--question .ca-option.is-selected{
    border-color:var(--q-yellow-border)!important;
    background:var(--q-yellow-soft)!important;
    box-shadow:inset 0 0 0 1px rgba(255,196,0,.18)!important;
    transform:none!important;
}
#ca-form .ca-card--question .ca-option.is-disabled{
    cursor:default!important;
}
#ca-form .ca-card--question .ca-option.is-disabled:not(.is-correct):not(.is-wrong){
    opacity:.52!important;
}

/* Correct is 1SAFETY yellow. */
#ca-form .ca-card--question .ca-option.is-correct,
#ca-form .ca-card--question .ca-option.is-disabled.is-correct{
    opacity:1!important;
    pointer-events:none!important;
    border-color:var(--q-yellow-border)!important;
    background:var(--q-yellow-soft)!important;
    box-shadow:inset 0 0 0 1px rgba(255,196,0,.20)!important;
}
#ca-form .ca-card--question .ca-option.is-correct .ca-option__state{
    opacity:1!important;
    transform:scale(1)!important;
    background:var(--q-yellow)!important;
    color:#111!important;
}
#ca-form .ca-card--question .ca-option.is-correct .ca-option__state::before{
    content:'✓'!important;
    width:auto!important;
    height:auto!important;
    border:0!important;
    transform:none!important;
    font-size:15px!important;
    font-weight:900!important;
    color:#111!important;
}

/* Error is the only red semantic state. */
#ca-form .ca-card--question .ca-option.is-wrong,
#ca-form .ca-card--question .ca-option.is-disabled.is-wrong{
    opacity:1!important;
    pointer-events:none!important;
    border-color:#E29494!important;
    background:var(--q-red-soft)!important;
    box-shadow:none!important;
}
#ca-form .ca-card--question .ca-option.is-wrong .ca-option__state{
    opacity:1!important;
    transform:scale(1)!important;
    background:var(--q-red)!important;
    color:#fff!important;
}
#ca-form .ca-card--question .ca-option.is-wrong .ca-option__state::before{
    content:'×'!important;
    font-size:20px!important;
    line-height:1!important;
    color:#fff!important;
}

#ca-form .ca-card--question .ca-option__state{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
    border-radius:50%!important;
}

/* ---------- QUESTION_SINGLE ---------- */
#ca-form .ca-card--question.is-q-single .ca-option__letter{
    flex:0 0 34px!important;
    width:34px!important;
    height:34px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border:1.5px solid var(--q-line)!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#727B85!important;
    font-size:12px!important;
    font-weight:850!important;
}
#ca-form .ca-card--question.is-q-single .ca-option.is-selected .ca-option__letter,
#ca-form .ca-card--question.is-q-single .ca-option.is-correct .ca-option__letter{
    border-color:var(--q-yellow-border)!important;
    background:var(--q-yellow)!important;
    color:#111!important;
}
#ca-form .ca-card--question.is-q-single .ca-option.is-wrong .ca-option__letter{
    border-color:var(--q-red)!important;
    background:#fff!important;
    color:var(--q-red)!important;
}

/* ---------- QUESTION_MULTI ---------- */
#ca-form .ca-card--question.is-q-multi .ca-option__letter{
    position:relative!important;
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
    border:1.5px solid #C8CED5!important;
    border-radius:9px!important;
    background:#fff!important;
    color:transparent!important;
    font-size:0!important;
}
#ca-form .ca-card--question.is-q-multi .ca-option__letter::after{
    content:'';
    position:absolute;
    left:8px;
    top:6px;
    width:10px;
    height:6px;
    border-left:3px solid transparent;
    border-bottom:3px solid transparent;
    transform:rotate(-45deg);
}
#ca-form .ca-card--question.is-q-multi .ca-option.is-selected .ca-option__letter,
#ca-form .ca-card--question.is-q-multi .ca-option.is-correct .ca-option__letter{
    border-color:var(--q-yellow-border)!important;
    background:var(--q-yellow)!important;
}
#ca-form .ca-card--question.is-q-multi .ca-option.is-selected .ca-option__letter::after,
#ca-form .ca-card--question.is-q-multi .ca-option.is-correct .ca-option__letter::after{
    border-left-color:#111!important;
    border-bottom-color:#111!important;
}
#ca-form .ca-card--question.is-q-multi .ca-option.is-wrong .ca-option__letter{
    border-color:var(--q-red)!important;
    background:#fff!important;
}
#ca-form .ca-card--question.is-q-multi .ca-option.is-wrong .ca-option__letter::after{
    content:'×';
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    border:0!important;
    transform:none!important;
    color:var(--q-red);
    font-size:19px;
    line-height:1;
}

/* ---------- TRUE_FALSE ---------- */
#ca-form .ca-card--question.is-q-truefalse .ca-options-label{
    text-align:center!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-options{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    overflow:visible!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-option{
    min-height:88px!important;
    justify-content:center!important;
    text-align:center!important;
    padding:18px 16px!important;
    font-size:18px!important;
    font-weight:800!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-option__letter{
    display:none!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-option > span:not(.ca-option__state){
    flex:0 1 auto!important;
}
#ca-form .ca-card--question.is-q-truefalse .ca-option__state{
    position:absolute!important;
    right:12px!important;
    top:12px!important;
}

/* ---------- feedback ---------- */
#ca-form .ca-card--question .ca-feedback.is-visible{
    max-width:760px!important;
    width:calc(100% - 68px)!important;
    margin:12px auto 0!important;
    padding:13px 14px!important;
    border-radius:14px!important;
    box-shadow:none!important;
}
#ca-form .ca-card--question .ca-feedback--correct{
    background:var(--q-yellow-soft)!important;
    border:1px solid #E5C45A!important;
}
#ca-form .ca-card--question .ca-feedback--correct .ca-feedback__icon{
    background:var(--q-yellow)!important;
}
#ca-form .ca-card--question .ca-feedback--correct .ca-feedback__icon svg{
    stroke:#111!important;
}
#ca-form .ca-card--question .ca-feedback--correct .ca-feedback__title{
    color:#111!important;
}
#ca-form .ca-card--question .ca-feedback--wrong{
    background:var(--q-red-soft)!important;
    border:1px solid #EDB0B0!important;
}
#ca-form .ca-card--question .ca-feedback--wrong .ca-feedback__icon{
    background:var(--q-red)!important;
}
#ca-form .ca-card--question .ca-feedback--wrong .ca-feedback__title{
    color:#A72F2F!important;
}
#ca-form .ca-card--question .ca-feedback__icon{
    flex:0 0 36px!important;
    width:36px!important;
    height:36px!important;
}
#ca-form .ca-card--question .ca-feedback__title{
    font-size:15px!important;
    font-weight:850!important;
}
#ca-form .ca-card--question .ca-feedback__sub{
    margin-top:2px!important;
    font-size:13px!important;
    line-height:1.42!important;
    color:#5F6873!important;
}

/* ---------- actions ---------- */
#ca-form .ca-card--question .ca-toolbar{
    padding:12px 34px 18px!important;
    border-top:1px solid #ECEFF2!important;
    background:#fff!important;
}
#ca-form .ca-card--question .ca-toolbar__inner{
    max-width:760px!important;
    gap:9px!important;
}
#ca-form .ca-card--question .ca-btn{
    min-height:50px!important;
    border-radius:12px!important;
    box-shadow:none!important;
}
#ca-form .ca-card--question .ca-btn--answer,
#ca-form .ca-card--question .ca-btn--continue{
    background:var(--q-yellow)!important;
    border:1px solid var(--q-yellow-border)!important;
    color:#111!important;
}
#ca-form .ca-card--question .ca-btn--answer:disabled,
#ca-form .ca-card--question .ca-btn--continue:disabled{
    background:#ECEFF2!important;
    border-color:#E1E5E9!important;
    color:#9AA1AA!important;
}
#ca-form .ca-card--question .ca-btn--prev{
    background:#fff!important;
    border:1px solid #D6DCE2!important;
    color:#111!important;
}
#ca-form .ca-card--question .ca-btn--skip{
    background:transparent!important;
    border:0!important;
    color:#707985!important;
}

/* ---------- phone ---------- */
@media(max-width:700px){
    #ca-form .ca-card--question .ca-card__inner{
        padding:22px 16px 16px!important;
    }
    #ca-form .ca-card--question .ca-question{
        max-width:none!important;
        margin:0 0 16px!important;
        font-size:23px!important;
        line-height:1.23!important;
        letter-spacing:-.02em!important;
    }
    #ca-form .ca-card--question .ca-options-label{
        max-width:none!important;
        margin:0 0 10px!important;
        font-size:13px!important;
    }
    #ca-form .ca-card--question .ca-options{
        max-width:none!important;
        gap:9px!important;
    }
    #ca-form .ca-card--question .ca-option{
        min-height:62px!important;
        padding:13px 13px!important;
        gap:12px!important;
        border-radius:14px!important;
        font-size:16px!important;
        line-height:1.32!important;
    }
    #ca-form .ca-card--question .ca-feedback.is-visible{
        width:auto!important;
        max-width:none!important;
        margin:8px 16px 0!important;
    }
    #ca-form .ca-card--question .ca-toolbar{
        position:sticky!important;
        bottom:0!important;
        z-index:120!important;
        padding:9px 12px calc(10px + env(safe-area-inset-bottom))!important;
        background:rgba(255,255,255,.98)!important;
        backdrop-filter:blur(10px)!important;
        -webkit-backdrop-filter:blur(10px)!important;
    }
    #ca-form .ca-card--question .ca-toolbar__inner{
        max-width:none!important;
        width:100%!important;
        gap:8px!important;
    }
    #ca-form .ca-card--question .ca-btn{
        min-height:52px!important;
        font-size:14px!important;
    }
    #ca-form .ca-card--question .ca-btn--answer{
        flex:1 1 auto!important;
        max-width:none!important;
    }
    #ca-form .ca-card--question .ca-btn--continue{
        flex:1 1 auto!important;
        max-width:none!important;
    }
    #ca-form .ca-card--question .ca-btn--prev{
        flex:0 0 auto!important;
        min-width:110px!important;
        margin-right:0!important;
    }

    #ca-form .ca-card--question.is-q-truefalse .ca-options{
        grid-template-columns:1fr 1fr!important;
        gap:9px!important;
    }
    #ca-form .ca-card--question.is-q-truefalse .ca-option{
        min-height:86px!important;
        padding:16px 10px!important;
        font-size:17px!important;
    }
}

@media(max-width:380px){
    #ca-form .ca-card--question.is-q-truefalse .ca-options{
        grid-template-columns:1fr!important;
    }
    #ca-form .ca-card--question.is-q-truefalse .ca-option{
        min-height:62px!important;
    }
}