/* contact.php — card dell'assistente: modulo a 4 passi in forma di conversazione (inc/contact-form.js.php).
   Componenti comuni (btn, cx, fld) in css/ui.css. Colori: primary #A27ABA, secondary #69B4E4. */

.cf {
    scroll-margin-top: 6.5rem;
    padding: 1.25rem;
    border-radius: 1.5rem;
    overflow: hidden;
    background:
        radial-gradient(130% 55% at 50% 0%, rgba(162, 122, 186, 0.16), transparent 62%),
        radial-gradient(90% 40% at 100% 100%, rgba(105, 180, 228, 0.08), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
/* Filo di luce sul bordo alto, con alone */
.cf-gl {
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #69B4E4, #A27ABA, transparent);
    box-shadow: 0 0 18px 1px rgba(162, 122, 186, 0.55);
    pointer-events: none;
}

/* ---------- Testata: avatar e nome; sotto, la barra di avanzamento ---------- */
.cf-hd {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.9rem;
}
.cf-av {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #A27ABA, #69B4E4);
    box-shadow: 0 0 22px -4px rgba(162, 122, 186, 0.8);
}
/* Anello che "respira" attorno all'avatar */
.cf-av::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(162, 122, 186, 0.55);
    animation: cfRing 2.8s ease-out infinite;
}
@keyframes cfRing { 0% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.cf-who { flex: 1; min-width: 0; }
.cf-nm { font-size: 0.9375rem; font-weight: 700; color: #fff; }

/* Barra di avanzamento: la larghezza (pct, inc/contact-form.js.php) cresce piano piano */
.cf-pb {
    position: relative;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.cf-pb i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #69B4E4, #A27ABA);
    box-shadow: 0 0 12px rgba(162, 122, 186, 0.7);
    transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Corpo: messaggio dell'assistente, campi, pulsanti ---------- */
.cf-body { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.25rem; }
.cf-body > .btn { align-self: flex-start; }
.cf-msg {
    position: relative;
    min-height: 3.25rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.3rem 1.1rem 1.1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(162, 122, 186, 0.12), rgba(105, 180, 228, 0.05));
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.cf-it { margin-bottom: 0.3rem; font-size: 1.0625rem; font-weight: 700; color: #fff; }
.cf-ok { border-color: rgba(105, 180, 228, 0.35); }

/* "sta scrivendo": tre punti */
.cf-dots { display: inline-flex; gap: 0.3rem; padding: 0.45rem 0; }
.cf-dots i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    animation: cfDot 1.1s ease-in-out infinite;
}
.cf-dots i:nth-child(2) { animation-delay: 0.15s; }
.cf-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cfDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Campi del passo: compaiono quando la domanda è finita (.is-in) */
.cf-fs {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cf-fs.is-in { opacity: 1; transform: none; pointer-events: auto; }
.cf-row { display: grid; gap: 0.9rem; }
.cf-f { display: flex; flex-direction: column; gap: 0.4rem; }
.cf-lb {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
/* Spiegazione breve sotto un'etichetta (es. cos'e' la scheda Google): testo normale, non maiuscolo */
.cf-hint { display: block; margin-top: 0.2rem; font-size: 0.75rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.42); }
.cf-ta { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
/* Contatore dei caratteri: compare solo vicino al limite (maxlength) */
.cf-cnt { align-self: flex-end; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.45); }
.cf .fld::placeholder { color: rgba(255, 255, 255, 0.3); }

/* Scelte a pillola: radio vero (resta focalizzabile e valida col browser), pillola disegnata sullo span */
.cf-chs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: -0.35rem; }
.cf-ch { position: relative; cursor: pointer; }
.cf-ch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cf-ch span {
    display: inline-block;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.cf-ch input:checked + span {
    border-color: transparent;
    background: linear-gradient(115deg, #A27ABA, #69B4E4);
    box-shadow: 0 6px 20px -8px rgba(162, 122, 186, 0.9);
    color: #fff;
}
.cf-ch input:focus-visible + span { outline: 2px solid #69B4E4; outline-offset: 2px; }

/* Consensi: ogni consenso e' una riga in vetro con il testo a sinistra e un interruttore a destra. La casella vera
   (role="switch") resta sotto l'interruttore, trasparente: clic, tastiera, "required" e avviso del browser
   funzionano come prima. Riga e interruttore si accendono quando il consenso e' attivo (.is-on). */
.cf-ck {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
/* Le due righe dei consensi piu' vicine fra loro (0.5rem) dello spazio fra i campi del passo (gap 0.9rem) */
.cf-ck + .cf-ck { margin-top: -0.4rem; }
.cf-ck.is-on { border-color: rgba(162, 122, 186, 0.35); background: rgba(162, 122, 186, 0.07); color: rgba(255, 255, 255, 0.78); }
.cf-ckt { flex: 1; min-width: 0; }
.cf-ck a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 2px; }
.cf-swb { position: relative; flex: none; display: block; width: 2.6rem; height: 1.5rem; }
.cf-swb input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cf-sw {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.cf-sw::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.2rem;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: -0.525rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.cf-swb input:checked + .cf-sw {
    border-color: transparent;
    background: linear-gradient(90deg, #A27ABA, #69B4E4);
    box-shadow: 0 0 14px -4px rgba(162, 122, 186, 0.8);
}
.cf-swb input:checked + .cf-sw::before { transform: translateX(1.1rem); }
.cf-swb input:focus-visible + .cf-sw { outline: 2px solid #69B4E4; outline-offset: 2px; }
@media (hover: hover) {
    .cf-ck:hover { border-color: rgba(255, 255, 255, 0.16); }
    .cf-ck.is-on:hover { border-color: rgba(162, 122, 186, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
    .cf-ck, .cf-sw, .cf-sw::before { transition: none; }
}

.cf-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.25rem; }
.cf-nav .btn { margin-left: auto; }
.cf-nav .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
/* Invio in corso: il pulsante resta pieno (non "spento") e una rotellina gira accanto al testo. */
.cf-nav .btn.is-load:disabled { opacity: 1; cursor: progress; }
.cf-ld { display: inline-flex; align-items: center; gap: 0.6rem; }
.cf-spin {
    width: 1.05rem; height: 1.05rem; flex: none; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent; opacity: 0.9;
    animation: cfSpin 0.75s linear infinite;
}
@keyframes cfSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cf-spin { animation-duration: 1.6s; } }
.cf-back {
    padding: 0.5rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.25s ease;
}
.cf-back:focus-visible { outline: 2px solid #69B4E4; outline-offset: 2px; border-radius: 0.4rem; }
.cf-err {
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.1);
    font-size: 0.875rem;
    text-align: center;
    color: #fca5a5;
}
.cf-note { font-size: 0.6875rem; text-align: center; color: rgba(255, 255, 255, 0.4); }

@media (hover: hover) {
    .cf-ch:hover input:not(:checked) + span { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.35); }
    .cf-back:hover { color: #fff; }
}

/* Telefono: barra dei passi a tutta larghezza sotto la testata, scelte a tessere in griglia, pulsante pieno */
@media (max-width: 639px) {
    .cf { padding: 1.1rem 1rem 1.15rem; border-radius: 1.35rem; }
    .cf-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cf-msg { padding: 0.85rem 1rem; }
    .cf-it { font-size: 1rem; }
    .cf-chs { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); gap: 0.45rem; }
    .cf-ch span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.9rem;
        padding: 0.55rem 0.6rem;
        border-radius: 0.9rem;
        font-size: 0.84rem;
        line-height: 1.25;
        text-align: center;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .cf-ch input:checked + span { box-shadow: 0 8px 22px -10px rgba(162, 122, 186, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
    /* Fino a 3 opzioni (Sì / No / Non so) stanno su una riga; con un numero dispari oltre 3 l'ultima prende la riga intera */
    .cf-chs:not(:has(> :nth-child(4))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .cf-chs:has(> :nth-child(4)) > .cf-ch:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .cf-nav .btn { flex: 1; justify-content: center; }
}
@media (min-width: 640px) {
    .cf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .cf { padding: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cf-av::after, .cf-dots i, .cf-m.is-u, .cf-live { animation: none; }
    .cf-fs, .cf-pb i, .cf-ch span { transition: none; }
}

/* ---------- Riquadro "risposta entro 48 ore", sotto la card ---------- */
.cf-g {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
}
.cf-g .ico { width: 2rem; height: 2rem; border-radius: 0.6rem; color: #69B4E4; }
.cf-g .ico svg { width: 15px; height: 15px; }
.cf-gt { font-size: 0.8125rem; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, 0.62); }

/* ---------- Passo 3 adattivo: gruppi e ordine (nome attività, tipo e comune; poi Instagram, solo per i social) ---------- */
.cf-g3 { display: flex; flex-direction: column; gap: 0.9rem; }
.cf-o0 { order: -3; }
.cf-o1 { order: -2; }
.cf-o2 { order: -1; }

/* ---------- Chat: domande dell'assistente a sinistra, risposte a destra; scorre in verticale ---------- */
.cf-log {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: min(22rem, 46vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 0.2rem 0.1rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    -webkit-mask-image: linear-gradient(transparent, #000 1.25rem);
    mask-image: linear-gradient(transparent, #000 1.25rem);
}
.cf-m { display: flex; }
.cf-m.is-a { justify-content: flex-start; padding-right: 12%; }
.cf-m.is-u { justify-content: flex-end; padding-left: 15%; }
.cf-bub {
    padding: 0.6rem 0.9rem;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.is-a .cf-bub {
    border-radius: 0.3rem 1.1rem 1.1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
}
.is-u .cf-bub {
    border-radius: 1.1rem 1.1rem 0.3rem 1.1rem;
    border: 1px solid rgba(162, 122, 186, 0.35);
    background: linear-gradient(135deg, rgba(162, 122, 186, 0.3), rgba(105, 180, 228, 0.18));
    text-align: left;
    color: #fff;
    transition: border-color 0.25s ease;
}
.is-u .cf-bub:focus-visible { outline: 2px solid #69B4E4; outline-offset: 2px; }
/* Domanda corrente: stessa bolla delle altre, testo pieno */
.is-a .cf-now { color: #fff; white-space: normal; }
.cf-now .cf-dots { padding: 0.2rem 0; }

/* Animazioni dei messaggi: la risposta entra da destra, la domanda dell'assistente da sinistra */
.cf-m.is-u { animation: cfSendU 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: 100% 100%; }
.cf-live { animation: cfSendA 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: 0 100%; }
@keyframes cfSendU { from { opacity: 0; transform: translate(14px, 10px) scale(0.94); } }
@keyframes cfSendA { from { opacity: 0; transform: translate(-10px, 10px) scale(0.96); } }
@media (hover: hover) {
    .is-u .cf-bub:hover { border-color: rgba(162, 122, 186, 0.85); }
}

/* ---------- Mobile: chat a schermo intero (.is-full, inc/contact-form.js.php) ----------
   La pagina sotto non scorre (cf-lock su <html>). In alto testata con la X, al centro la chat che scorre,
   in basso campi e pulsanti, che scorrono per conto loro. */
.cf-in { display: flex; flex-direction: column; gap: 1.25rem; }
html.cf-lock, html.cf-lock body { overflow: hidden; }
.cf-x {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
}
.cf-x:focus-visible { outline: 2px solid #69B4E4; outline-offset: 2px; }
.cf.is-full {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 0.85rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 0.85rem);
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(130% 40% at 50% 0%, rgba(162, 122, 186, 0.18), transparent 62%),
        radial-gradient(90% 35% at 100% 100%, rgba(105, 180, 228, 0.1), transparent 70%),
        #0b0b10;
    animation: cfOpen 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cfOpen { from { opacity: 0; transform: translateY(24px); } }
.is-full .cf-gl { left: 0; right: 0; }
.is-full > .cf-body { flex: 1; min-height: 0; }
/* Un solo scorrimento: scorre il form intero (chat + campi); i pulsanti restano attaccati in fondo */
.is-full > form.cf-body {
    gap: 0.75rem;
    padding-bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.is-full .cf-log { flex: none; max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.is-full .cf-in { flex: 1 0 auto; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }
@media (prefers-reduced-motion: reduce) {
    .cf.is-full { animation: none; }
}

/* Schermo intero: "Interesse" ed "Entro quando" diventano rotelle verticali con aggancio (scroll-snap mandatory),
   bloccate in orizzontale (overflow-x hidden, touch-action pan-y):
   si legge una voce per volta nella fascia al centro, le vicine sfumano. La prima riga (.cf-ph) invita a scorrere.
   I pulsanti Avanti / Indietro restano sempre visibili in fondo all'area dei campi. */
.cf-ph { display: none; }
/* Aspetto da rotella: un "tamburo" con il fondo appena più chiaro, bordi sottili e un'ombra interna in alto e in basso
   (::after, sopra le voci) che fa sembrare le voci vicine curvate all'indietro; la fascia al centro (::before) ha
   a destra le due frecce su/giù che invitano a girarla. */
.is-full .cf-whw {
    position: relative;
    margin-top: -0.35rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.015));
}
.is-full .cf-whw::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(rgba(11, 11, 16, 0.4), rgba(11, 11, 16, 0) 28%, rgba(11, 11, 16, 0) 72%, rgba(11, 11, 16, 0.4));
    box-shadow: inset 0 10px 14px -10px rgba(0, 0, 0, 0.7), inset 0 -10px 14px -10px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}
.is-full .cf-whw::before {
    content: "";
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    top: 50%;
    height: 2.6rem;
    margin-top: -1.3rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(162, 122, 186, 0.45);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l3-3 3 3M2 10l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 0.625rem 1rem,
        linear-gradient(115deg, rgba(162, 122, 186, 0.22), rgba(105, 180, 228, 0.14));
    box-shadow: 0 0 24px -10px rgba(162, 122, 186, 0.9);
    pointer-events: none;
}
/* Rotella alta 7.6rem: la voce al centro (2.6rem) e 2.5rem di ciascuna vicina, così sopra e sotto si leggono */
.is-full .cf-list {
    position: relative;
    display: block;
    height: 7.6rem;
    margin: 0;
    padding: 2.5rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.7) 20%, #000 33%, #000 67%, rgba(0, 0, 0, 0.7) 80%, rgba(0, 0, 0, 0.12));
    mask-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.7) 20%, #000 33%, #000 67%, rgba(0, 0, 0, 0.7) 80%, rgba(0, 0, 0, 0.12));
}
.is-full .cf-list::-webkit-scrollbar { display: none; }
/* Niente scroll-snap-stop: always (fermava la rotella su ogni voce): così la spinta del dito prosegue con
   l'inerzia del telefono per più voci e poi si aggancia a quella più vicina al centro */
.is-full .cf-list > .cf-ch { display: block; height: 2.6rem; scroll-snap-align: center; }
.is-full .cf-list > .cf-ph { display: block; }
.is-full .cf-list > .cf-ch span,
.is-full .cf-list > .cf-ch input:checked + span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.6rem;
    min-height: 0;
    padding: 0 1.9rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.9375rem;
    line-height: 1.15;
    text-align: center;
    color: rgba(255, 255, 255, 0.62);
    transform: scale(0.94);
    transition: color 0.2s ease, transform 0.2s ease;
}
.is-full .cf-list > .cf-ph span { font-size: 0.8125rem; font-style: italic; }
/* Passo 2: le due rotelle una sopra l'altra, con etichetta e rotella vicine (rotella alta 7.6rem: la voce al centro
   e quasi tutte le due vicine) */
.cf-s2g, .cf-wcol { display: flex; flex-direction: column; gap: 0.9rem; }
.is-full .cf-s2g { gap: 1rem; }
.is-full .cf-wcol { gap: 0.4rem; }
/* Voce al centro: anche quando il suo radio è selezionato (stessa specificità della regola :checked, che viene prima) */
.is-full .cf-list > .cf-ch.is-c span,
.is-full .cf-list > .cf-ch.is-c input + span { color: #fff; font-weight: 600; transform: scale(1.04); }
.is-full .cf-nav {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    padding: 0.75rem 0 0.1rem;
    background: linear-gradient(rgba(11, 11, 16, 0), #0b0b10 0.75rem);
}
/* Rotella senza scelta e "Avanti": la fascia oscilla per chiedere di scegliere */
.is-full .cf-whw.is-need::before { animation: cfNeed 0.5s ease; border-color: rgba(239, 68, 68, 0.6); }
@keyframes cfNeed { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- Card iniziale: il titolo dell'offerta sta nella testata, sotto una frase e il pulsante ---------- */
.cf-nm-i {
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: normal;
}
.cf-hd.is-intro .cf-av { width: 2.75rem; height: 2.75rem; }
.cf-lead { font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }
/* Card dopo l'invio (mobile, chat chiusa): titolo con la spunta */
.cf-sent { display: flex; align-items: center; gap: 0.5rem; }
.cf-sent svg { flex: none; color: #69B4E4; }
/* Percorso "sito" (arrivo da AI-Websites): le due scelte come tessere grandi, sulla stessa riga */
.cf-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0; }
.cf-two .cf-ch span { display: flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.6rem 0.8rem; border-radius: 0.9rem; text-align: center; line-height: 1.25; }