/* ========================================
   Verificatore bolletta
   Usa i token e i bottoni di style.css
   ======================================== */

.verifica-hero {
    background: var(--navy);
    padding: 36px 0 52px;
    text-align: center;
}
.verifica-hero__eyebrow {
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 14px;
    text-transform: uppercase;
}
.verifica-hero h1 {
    color: var(--white);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.verifica-hero p {
    color: var(--text-light);
    font-size: clamp(15px, 2vw, 18px);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Il form scavalca l'hero: è l'elemento su cui deve cadere l'occhio. */
.verifica-tool {
    padding-top: 0;
    margin-top: -40px;
}
.verifica-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 18px 50px rgba(15, 41, 66, 0.10);
}
.verifica-card__title {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 6px;
}
.verifica-card__sub {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.verifica-tipo {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
}
.verifica-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.verifica-tipo label {
    flex: 1;
    text-align: center;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.verifica-tipo input:checked + label {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}
.verifica-tipo input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; }

/* [hidden] va riaffermato: la regola d'autore display:grid batte quella del
   browser, quindi senza questa riga il gruppo nascosto resta visibile. */
.verifica-grid[hidden] { display: none; }
.verifica-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}
.verifica-field { display: flex; flex-direction: column; }
.verifica-field--full { grid-column: 1 / -1; }
.verifica-field label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #2C2C2A;
}
.verifica-field input {
    font-family: inherit;
    font-size: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: #2C2C2A;
}
.verifica-field input:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}
.verifica-field__hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 5px;
}

/* Il messaggio di un campo sbagliato sta sotto quel campo. Prima finiva in
   fondo al risultato, fuori schermo e senza scroll: si premeva il bottone e
   sembrava che non succedesse niente. */
.verifica-field.is-errato input,
.verifica-field.is-errato select {
    border-color: #DC2626;
}
.verifica-field.is-errato input:focus,
.verifica-field.is-errato select:focus {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}
.verifica-field__errore {
    font-size: 12.5px;
    font-weight: 700;
    color: #DC2626;
    margin-top: 5px;
}

.verifica-submit { width: 100%; }

/* Le tre prove sono scese qui dall'hero: nel punto in cui si decide se
   premere valgono di piu' che in cima, e in cima costavano 70px di scroll
   prima ancora di vedere un campo. Fondo bianco, quindi testo scuro. */
.verifica-prove {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 16px;
}
.verifica-prove span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}
.verifica-prove svg { flex-shrink: 0; }
.verifica-nota {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 14px;
    line-height: 1.5;
}

/* --- Esito --- */
.verifica-esito {
    margin-top: 28px;
    border-radius: 14px;
    padding: 32px;
    border: 2px solid var(--border);
    background: var(--bg-light);
}
.verifica-esito--buono { border-color: #16A34A; background: #F0FDF4; }
.verifica-esito--medio { border-color: var(--gold); background: #FFFBEB; }
.verifica-esito--alto { border-color: #EA580C; background: #FFF7ED; }
.verifica-esito--critico { border-color: #DC2626; background: #FEF2F2; }

.verifica-esito__eyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.verifica-esito__title {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 22px;
}
.verifica-esito__numbers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}
.verifica-num {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
}
.verifica-num__value {
    display: block;
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 900;
    line-height: 1.1;
}
.verifica-num__label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 5px;
    line-height: 1.3;
}
.verifica-num--accent .verifica-num__value { color: var(--navy); }

/* --- Il numero che conta: euro all'anno, non percentuale --- */
.verifica-esito__chiave {
    background: var(--navy);
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    margin-bottom: 18px;
}
.verifica-esito__chiave-label {
    display: block;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.verifica-esito__chiave-cifra {
    display: block;
    color: var(--gold);
    font-size: clamp(42px, 13vw, 60px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}
.verifica-esito__chiave-unita {
    display: block;
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    margin-top: 8px;
}
/* Chi e' in linea col mercato non deve vedere la sua spesa colorata come un
   allarme: la cifra resta grande, ma bianca invece che oro. */
.verifica-esito__chiave--calmo .verifica-esito__chiave-cifra { color: var(--white); }
.verifica-esito__chiave-nota {
    color: var(--text-light);
    font-size: 13.5px;
    line-height: 1.6;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.14);
    text-align: left;
}
.verifica-esito__chiave-nota strong { color: var(--white); font-weight: 700; }

.verifica-esito__badge {
    display: inline-block;
    background: var(--navy);
    color: var(--white);
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: 1px;
}

/* --- Il buono Amazon: era solo in fondo alla home --- */
/* Non flex: con il badge come colonna a se', su 360px al testo restavano
   130px e la frase andava a sette righe. In blocco con il badge flottante il
   testo gli gira intorno e poi riprende tutta la larghezza. flow-root tiene
   il float dentro il riquadro senza bisogno di clearfix. */
.verifica-esito__bonus {
    display: flow-root;
    background: var(--white);
    border: 1px dashed var(--amazon);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
}
.verifica-esito__bonus strong { color: #2C2C2A; }
.verifica-esito__bonus-badge {
    float: left;
    margin-right: 11px;
    background: var(--amazon);
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    padding: 7px 9px;
    border-radius: 7px;
    white-space: nowrap;
}

/* --- Il dettaglio del calcolo resta tutto, ma dopo la decisione --- */
.verifica-esito__chiusura {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.verifica-esito__summary {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 18px;
}
/* Il bersaglio principale della pagina: su telefono deve essere impossibile
   mancarlo, e il testo va a capo invece di uscire dallo schermo. */
.verifica-esito__cta {
    /* Non flex: con icona e testo come due colonne affiancate, su 390px al
       testo restavano 145px e la frase andava a quattro righe. In blocco con
       l'icona inline prima della prima parola il testo usa tutta la larghezza,
       come fa gia' il bottone grande della home. */
    display: block;
    width: 100%;
    text-align: center;
    padding: 18px 16px;
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: 0;
    border-radius: 10px;
    max-width: none;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}
.verifica-esito__cta-icona {
    display: inline-block;
    vertical-align: -4px;
    margin-right: 9px;
}
.verifica-esito__cta-nota {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 10px 0 14px;
    text-align: center;
}
.verifica-esito__disclaimer {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 16px;
}

/* --- Contenuto di supporto --- */
.verifica-help { background: var(--bg-light); }
.verifica-help__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}
.verifica-help__item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}
.verifica-help__item h3 {
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 10px;
}
.verifica-help__item p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
}

@media (max-width: 700px) {
    .verifica-grid { grid-template-columns: 1fr; }
    .verifica-help__grid { grid-template-columns: 1fr; }
    .verifica-esito__numbers { grid-template-columns: 1fr; }
    .verifica-card { padding: 22px; }
    .verifica-esito { padding: 22px; }
    .verifica-hero { padding: 26px 0 46px; }
}

/* ========================================
   Offerta riservata
   Compare solo quando ha numeri veri, non scaduti
   e migliori del riferimento pubblico.
   ======================================== */
.verifica-riservata {
    background: var(--navy);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 22px;
}
.verifica-riservata__eyebrow {
    color: var(--gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.verifica-riservata__rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
}
.verifica-riservata__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-light);
    font-size: 14px;
}
.verifica-riservata__row strong { color: var(--white); font-weight: 700; white-space: nowrap; }
.verifica-riservata__row--top {
    border-bottom: none;
    padding-top: 12px;
}
.verifica-riservata__row--top span { color: var(--white); font-weight: 700; }
.verifica-riservata__row--top strong { color: var(--gold); font-size: 22px; font-weight: 900; }
.verifica-riservata__saving {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
}
.verifica-riservata__saving strong { color: var(--white); }
.verifica-riservata__cta { display: block; text-align: center; width: 100%; }

/* Su schermo stretto le righe dell'offerta si impilano: affiancate, l'etichetta
   veniva schiacciata dal prezzo (che è in nowrap) e si spezzava su quattro righe. */
@media (max-width: 420px) {
    .verifica-riservata { padding: 20px 18px; }
    .verifica-riservata__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 12px 0;
    }
    .verifica-riservata__row--top strong { font-size: 26px; }
    .verifica-num { padding: 12px 10px; }
    .btn { padding: 14px 20px; font-size: 14px; }
    /* La regola .btn qui sopra non deve toccare il CTA del risultato: e' il
       bottone che deve restare grosso proprio sui telefoni piccoli. */
    .verifica-esito__cta { padding: 16px 13px; font-size: 16px; }
    .verifica-esito__chiave { padding: 20px 16px; }
    .verifica-esito__bonus { font-size: 13px; padding: 11px 12px; gap: 9px; }
}

/* ========================================
   Selettore modalità: chi ha la bolletta
   davanti non conosce il prezzo al kWh
   ======================================== */
.verifica-modo {
    display: flex;
    gap: 6px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 24px;
}
.verifica-modo__btn {
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 11px 8px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.verifica-modo__btn.is-attivo {
    background: var(--white);
    color: var(--navy);
    box-shadow: 0 1px 4px rgba(15, 41, 66, 0.10);
}
.verifica-modo__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.verifica-field select {
    font-family: inherit;
    font-size: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    color: #2C2C2A;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23566776' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
.verifica-field select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

/* Via d'uscita per chi non trova nemmeno l'importo: vale più di un form abbandonato. */
.verifica-aiuto {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    line-height: 1.6;
}
.verifica-aiuto a {
    color: var(--navy);
    font-weight: 700;
    border-bottom: 1px solid rgba(30, 64, 175, 0.3);
}

@media (max-width: 420px) {
    .verifica-modo__btn { font-size: 13px; padding: 10px 4px; }
}

.verifica-esito__stima {
    background: rgba(255, 255, 255, 0.65);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* ========================================
   Bolletta d'esempio
   A parole "il totale in prima pagina" non
   basta: vederlo evidenziato sì.
   ======================================== */
.dove-guardare[hidden] { display: none; }   /* come per .verifica-grid: l'autore batte il browser */
.dove-guardare {
    margin: -6px 0 24px;
    padding: 18px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.dove-guardare__intro {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dove-guardare__intro::-webkit-details-marker { display: none; }
.dove-guardare__intro::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-left: 2px;
    flex-shrink: 0;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .18s ease;
}
.dove-guardare[open] .dove-guardare__intro::before { transform: rotate(45deg) translate(-2px, -2px); }
.dove-guardare__intro:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.dove-guardare[open] .dove-guardare__intro { margin-bottom: 12px; }

.mock {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(15, 41, 66, 0.05);
}
.mock__testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--navy);
    padding: 9px 14px;
}
.mock__logo {
    width: 34px;
    height: 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.5);
}
.mock__periodo {
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.mock__corpo { padding: 6px 14px 12px; }

.mock__riga {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #F1F3F6;
}
.mock__riga:last-child { border-bottom: none; }

/* Righe finte: barre grigie, servono solo a far sembrare una bolletta vera */
.mock__riga--fantasma { justify-content: space-between; }
.mock__riga--fantasma i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #E9ECF1;
}

.mock__riga--spot {
    background: rgba(201, 169, 97, 0.13);
    border-bottom: none;
    border-radius: 6px;
    margin: 4px -8px;
    padding: 9px 8px;
    box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.45);
}
.mock__badge {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);
    font-size: 11px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
}
.mock__etichetta {
    flex: 1;
    font-size: 12px;
    color: #2C2C2A;
    font-weight: 700;
}
.mock__valore {
    font-size: 13px;
    font-weight: 900;
    color: var(--navy);
    white-space: nowrap;
}

/* ========================================
   Rifiniture: fiducia sotto il titolo
   ======================================== */
@media (max-width: 420px) {
    .dove-guardare { padding: 14px; }
    .mock__etichetta { font-size: 11px; }
    .verifica-prove { gap: 7px 14px; }
    .verifica-prove span { font-size: 12px; }
}

/* ========================================
   Contatto alternativo: chi non apre
   WhatsApp puo' lasciare il numero
   ======================================== */

/* Deliberatamente piu' sobrio del bottone verde: e' la seconda scelta, non
   deve competere con la prima. Sfondo bianco su card gia' colorata, nessuna
   ombra, bordo sottile. */
.verifica-richiamo {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}
.verifica-richiamo__titolo {
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 5px;
}
.verifica-richiamo__sub {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 14px;
}
.verifica-richiamo__riga { display: flex; flex-direction: column; margin-bottom: 12px; }
.verifica-richiamo__etichetta {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}
.verifica-richiamo input[type="tel"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;   /* sotto i 16px iOS fa lo zoom automatico sul focus */
    font-family: inherit;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--white);
}
.verifica-richiamo input[type="tel"]:focus {
    outline: none;
    border-color: var(--navy);
}
.verifica-richiamo__consenso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 14px;
    cursor: pointer;
}
/* 20px e non la dimensione di sistema: sul telefono la casella di default e'
   un bersaglio da 13px, e questa spunta e' obbligatoria per proseguire. */
.verifica-richiamo__consenso input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--navy);
    cursor: pointer;
}
.verifica-richiamo__consenso a { color: var(--navy); text-decoration: underline; font-weight: 700; }
.verifica-richiamo__invia {
    width: 100%;
    padding: 15px 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 900;
    color: var(--white);
    background: var(--navy);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}
.verifica-richiamo__invia:hover { background: var(--navy-dark); }
.verifica-richiamo__invia:disabled { opacity: 0.55; cursor: default; }
.verifica-richiamo__invia:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.verifica-richiamo__stato {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 10px;
}
.verifica-richiamo__stato:empty { display: none; }
.verifica-richiamo__stato--errore { color: #B91C1C; }
.verifica-richiamo__stato--attesa { color: var(--text-muted); }

.verifica-esito .basso-impegno { margin-top: 4px; font-size: 13.5px; }

/* Avviso sui limiti della stima: non e' un errore, quindi non e' rosso, ma
   deve staccare dal testo normale perche' chi legge di fretta lo veda. */
.verifica-esito__avviso {
    background: #FFFBEB;
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    padding: 13px 15px;
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #92400E;
}

/* ========================================
   "Come ho fatto il conto": il dettaglio
   del calcolo, chiuso finche' non serve
   ======================================== */

/* Non e' roba nascosta: sta nel DOM e si apre con un tocco. Ma chi arriva da
   un annuncio decide nei primi tre blocchi, e i numeri del calcolo non sono
   quello che gli serve per decidere. */
.verifica-dettaglio {
    border-top: 1px solid var(--border);
    padding-top: 4px;
}
.verifica-dettaglio summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 2px;
    font-size: 14px;
    font-weight: 900;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 10px;
}
.verifica-dettaglio summary::-webkit-details-marker { display: none; }
.verifica-dettaglio summary::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-left: 3px;
    flex-shrink: 0;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .18s ease;
}
.verifica-dettaglio[open] summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.verifica-dettaglio summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.verifica-dettaglio__corpo { padding-top: 4px; }
.verifica-dettaglio__corpo .verifica-esito__summary { font-size: 14.5px; }
.verifica-dettaglio__corpo > :last-child { margin-bottom: 0; }

/* Quando il modulo del numero non riesce a inviare, il bottone che resta
   porta a WhatsApp: deve avere l'aria di WhatsApp, non del modulo fallito. */
.verifica-richiamo__invia--wa {
    display: block;
    text-align: center;
    background: var(--whatsapp);
    text-decoration: none;
}
.verifica-richiamo__invia--wa:hover { background: #1FBA5A; }