/**
 * Test "Che amministratore sei?".
 *
 * I colori arrivano dalle variabili del kit (--e-global-color-*): ritoccare la
 * tavolozza del sito ricolora anche il test, senza rimettere mano qui. I valori
 * dopo la virgola sono solo la rete di sicurezza se il kit non fosse caricato.
 * Il carattere non è mai dichiarato: si eredita dal tema, che è DM Sans.
 */

.cas {
    --cas-navy:    var(--e-global-color-primary, #2A4666);
    --cas-scuro:   var(--e-global-color-secondary, #002338);
    --cas-testo:   var(--e-global-color-text, #323232);
    --cas-rosso:   var(--e-global-color-accent, #A61B17);
    --cas-azzurro: var(--e-global-color-azzurro, #E4F5FF);
    --cas-blu:     var(--e-global-color-bluacc, #015D96);
    --cas-campo:   var(--e-global-color-campo, #E6E9ED);
    --cas-bianco:  var(--e-global-color-bianco, #FFFFFF);

    --cas-raggio:  16px;
    --cas-bordo:   1px solid rgba(42, 70, 102, .14);
    --cas-ombra:   0 18px 48px rgba(0, 35, 56, .10);

    max-width: 760px;
    margin-inline: auto;
    color: var(--cas-testo);
}

/* Il passo attivo entra con un accenno di movimento: basta a far capire che
   la pagina è cambiata senza far aspettare nessuno. */
.cas__passo {
    animation: cas-entra .35s ease both;
}
@keyframes cas-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cas__passo { animation: none; }
    .cas * { transition: none !important; }
}

/* Il kit dà a ogni <button> della pagina il vestito del pulsante rosso, e con
   `display:inline-block` scavalca anche l'attributo hidden. Le regole del test
   sono quindi tutte scritte sotto `.cas`: due classi battono "una classe più
   un tipo", e il test si riprende i suoi pulsanti senza ricorrere a
   !important. Per la stessa ragione qui si ripete che hidden nasconde. */
.cas [hidden] { display: none; }

/* ── pezzi ricorrenti ──────────────────────────────────── */

.cas__pillola {
    display: inline-block;
    margin: 0 0 16px;
    padding: 6px 16px;
    border-radius: 999px;
    background-color: var(--cas-azzurro);
    color: var(--cas-navy);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cas__scheda {
    background-color: var(--cas-bianco);
    border: var(--cas-bordo);
    border-radius: var(--cas-raggio);
    box-shadow: var(--cas-ombra);
    padding: 32px;
}
.cas__scheda:focus { outline: none; }

.cas .cas__bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: center;
}
/* I pulsanti principali portano anche la classe .elementor-button: padding,
   raggio e colori li decide il kit, quindi qui non si ripete niente. */
.cas .cas__bottone--secondario {
    background: none;
    padding: 14px 24px;
    border-radius: 10px;
    border: 1px solid var(--cas-campo);
    color: var(--cas-navy);
    transition: border-color .2s, background-color .2s;
}
.cas .cas__bottone--secondario:hover,
.cas .cas__bottone--secondario:focus {
    background-color: var(--cas-azzurro);
    border-color: var(--cas-navy);
    color: var(--cas-navy);
}

.cas__vuoto {
    padding: 40px;
    text-align: center;
    color: var(--cas-navy);
    background-color: var(--cas-azzurro);
    border-radius: var(--cas-raggio);
}

/* ── apertura ──────────────────────────────────────────── */

.cas__intro { text-align: center; }

.cas__titolo {
    margin: 0 0 16px;
    color: var(--cas-navy);
}
.cas__descrizione {
    margin: 0 auto 28px;
    max-width: 52ch;
}
.cas__descrizione p:last-child { margin-bottom: 0; }

.cas__nota {
    margin: 16px 0 0;
    font-size: 14px;
    opacity: .7;
}

/* ── avanzamento ───────────────────────────────────────── */

.cas__avanzamento { margin-bottom: 20px; }

.cas__avanzamento-testo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--cas-navy);
}
.cas__avanzamento-percento { font-weight: 700; }

.cas__barra {
    height: 8px;
    border-radius: 999px;
    background-color: var(--cas-campo);
    overflow: hidden;
}
.cas__barra-pieno {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: var(--cas-navy);
    transition: width .45s ease;
}

/* ── domanda e risposte ────────────────────────────────── */

.cas__domanda {
    margin: 0 0 24px;
    color: var(--cas-navy);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.cas__risposte {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cas .cas__risposta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--cas-campo);
    border-radius: 12px;
    background-color: var(--cas-bianco);
    color: var(--cas-testo);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, background-color .18s, color .18s;
}
.cas .cas__risposta:hover:not(:disabled):not(.is-scelta),
.cas .cas__risposta:focus:not(:disabled):not(.is-scelta) {
    border-color: var(--cas-navy);
    background-color: var(--cas-azzurro);
    /* Il kit porta a bianco il testo di ogni <button> sotto il mouse: su
       questo sfondo chiaro sparirebbe. Ogni stato "hover" del test deve
       quindi ridichiarare anche il colore. */
    color: var(--cas-navy);
}
.cas .cas__risposta:focus-visible {
    outline: 2px solid var(--cas-blu);
    outline-offset: 2px;
}
/* Disattivate durante il passaggio alla domanda dopo: restano leggibili,
   sbiadisce solo quello che non è stato scelto. */
.cas .cas__risposta:disabled { cursor: default; }
.cas .cas__risposta:disabled:not(.is-scelta) { opacity: .45; }

.cas .cas__risposta.is-scelta {
    border-color: var(--cas-navy);
    background-color: var(--cas-navy);
    color: var(--cas-bianco);
}

.cas__lettera {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--cas-campo);
    color: var(--cas-navy);
    font-weight: 700;
    line-height: 1;
}
.cas .cas__risposta.is-scelta .cas__lettera {
    background-color: var(--cas-bianco);
    color: var(--cas-navy);
}

.cas .cas__indietro {
    align-self: flex-start;
    margin-top: 20px;
    padding: 0;
    border: none;
    background: none;
    color: var(--cas-blu);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.cas .cas__indietro:hover,
.cas .cas__indietro:focus {
    background: none;
    color: var(--cas-blu);
    text-decoration: underline;
}

/* ── risultato ─────────────────────────────────────────── */

.cas__scheda--risultato {
    text-align: center;
    border-top: 6px solid var(--cas-navy);
}
/* Il bordo superiore dice a colpo d'occhio dove si è finiti, prima ancora di
   leggere il numero. */
.cas__scheda--risultato[data-cas-esito="a"] { border-top-color: var(--cas-rosso); }
.cas__scheda--risultato[data-cas-esito="b"] { border-top-color: var(--cas-blu); }
.cas__scheda--risultato[data-cas-esito="c"] { border-top-color: #1E8E5A; }

.cas__punteggio {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: var(--cas-navy);
}
.cas__punteggio-numero {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
}
.cas__punteggio-totale {
    font-size: 20px;
    font-weight: 600;
    opacity: .5;
}

.cas__barra--punteggio {
    max-width: 320px;
    margin: 18px auto 0;
}
.cas__scheda--risultato[data-cas-esito="a"] .cas__barra-pieno { background-color: var(--cas-rosso); }
.cas__scheda--risultato[data-cas-esito="b"] .cas__barra-pieno { background-color: var(--cas-blu); }
.cas__scheda--risultato[data-cas-esito="c"] .cas__barra-pieno { background-color: #1E8E5A; }

.cas__fascia {
    margin: 14px 0 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .6;
}
.cas__profilo {
    margin: 0 0 20px;
    color: var(--cas-navy);
}

.cas__messaggio,
.cas__extra,
.cas__cta {
    text-align: left;
}
.cas__messaggio { margin-bottom: 20px; }

.cas__extra {
    margin-bottom: 20px;
    padding: 20px 24px;
    border-radius: 12px;
    background-color: var(--cas-azzurro);
}
.cas__extra p:first-child { margin-top: 0; }
.cas__extra ul {
    margin: 10px 0 0;
    padding-left: 20px;
}
.cas__extra li { margin-bottom: 4px; }
.cas__extra > :last-child,
.cas__messaggio > :last-child,
.cas__cta > :last-child { margin-bottom: 0; }

.cas__cta {
    margin-bottom: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--cas-campo);
}

.cas__azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ── gradimento ────────────────────────────────────────── */

.cas__gradimento {
    margin-top: 20px;
    padding: 24px 28px;
    border-radius: var(--cas-raggio);
    background-color: var(--cas-navy);
    color: var(--cas-bianco);
    text-align: center;
}
.cas__gradimento-domanda {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
}
.cas__gradimento-opzioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.cas .cas__gradimento-opzione {
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s;
}
.cas .cas__gradimento-opzione:hover,
.cas .cas__gradimento-opzione:focus {
    background-color: rgba(255, 255, 255, .12);
    border-color: var(--cas-bianco);
    color: var(--cas-bianco);
}
.cas .cas__gradimento-opzione.is-scelta {
    background-color: var(--cas-bianco);
    border-color: var(--cas-bianco);
    color: var(--cas-navy);
    font-weight: 600;
}

.cas__gradimento-grazie {
    margin: 16px 0 0;
    text-align: center;
    font-weight: 600;
    color: var(--cas-navy);
}

/* ── il blocco del modulo ──────────────────────────────── */

/* Resta fuori scena finché il test non è finito. Nell'editor si vede sempre,
   altrimenti il cliente non potrebbe modificarlo. */
.cas-modulo:not(.is-visibile) { display: none; }
body.elementor-editor-active .cas-modulo:not(.is-visibile) { display: flex; }

/* ── telefono ──────────────────────────────────────────── */

@media (max-width: 767px) {
    .cas__scheda { padding: 22px 18px; }
    .cas__domanda { font-size: 20px; }
    .cas .cas__risposta { padding: 12px 14px; gap: 10px; }
    .cas__lettera { width: 30px; height: 30px; font-size: 14px; }
    .cas__punteggio-numero { font-size: 52px; }
    .cas__gradimento { padding: 20px 16px; }
    .cas .cas__azioni .cas__bottone { width: 100%; }
}