/**
 * Il modulo di sottoscrizione.
 *
 * Poche regole e nessuna dipendenza: il tema del sito vetrina decide i caratteri
 * e i colori di fondo, qui si definisce solo cio' che serve al modulo per essere
 * leggibile ovunque venga messo.
 */

.sgds {
    max-width: 900px;
    margin: 0 auto;
}

.sgds-passo {
    display: none;
}

.sgds-passo.sgds-attivo {
    display: block;
}

.sgds-titolo {
    font-size: 26px;
    margin: 0 0 6px;
}

.sgds-sotto {
    margin: 0 0 24px;
    color: #64748b;
    font-size: 14.5px;
}


/* ---------- i piani ---------- */

.sgds-piani {
    display: grid;
    /*
     * Le colonne si adattano da se': tre su uno schermo largo, una su telefono,
     * senza punti di rottura da mantenere.
     */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.sgds-piano {
    padding: 24px 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, transform .15s;
}

.sgds-piano:hover {
    border-color: #6d28d9;
    transform: translateY(-2px);
}

.sgds-piano-no {
    opacity: .55;
}

.sgds-piano-no:hover {
    border-color: #e2e8f0;
    transform: none;
}

.sgds-piano-nome {
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
}

.sgds-piano-prezzo {
    font-size: 38px;
    font-weight: 700;
    color: #6d28d9;
    margin: 10px 0 18px;
    line-height: 1;
}

.sgds-piano-prezzo span {
    font-size: 15px;
    font-weight: 400;
    color: #64748b;
}

.sgds-piano-cosa {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    /*
     * Cresce fino a occupare lo spazio disponibile, cosi' i pulsanti delle tre
     * card restano allineati anche se una ha piu' voci delle altre.
     */
    flex: 1;
}

.sgds-piano-cosa li {
    padding: 5px 0 5px 22px;
    font-size: 13.5px;
    color: #475569;
    position: relative;
}

.sgds-piano-cosa li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #16a34a;
    font-weight: 700;
}

.sgds-scegli {
    width: 100%;
    padding: 12px;
    background: #6d28d9;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.sgds-scegli:hover {
    background: #5b21b6;
}

.sgds-non-disp {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 13.5px;
    color: #94a3b8;
}


/* ---------- i campi ---------- */

.sgds-indietro {
    background: none;
    border: none;
    padding: 0 0 14px;
    color: #6d28d9;
    font-size: 14px;
    cursor: pointer;
}

.sgds-campi label {
    display: block;
    margin-bottom: 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
}

.sgds-campi input[type="text"],
.sgds-campi input[type="email"],
.sgds-campi select {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 11px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 400;
    box-sizing: border-box;
}

.sgds-campi input:focus,
.sgds-campi select:focus {
    outline: none;
    border-color: #6d28d9;
}

.sgds-campi small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
}

.sgds-due {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 520px) {
    .sgds-due {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.sgds-facolt {
    font-weight: 400;
    color: #94a3b8;
}


/* ---------- l'archivio ---------- */

.sgds-archivio {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 22px 0;
}

.sgds-archivio legend {
    padding: 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
}

.sgds-radio {
    display: flex !important;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px !important;
    cursor: pointer;
    font-weight: 400 !important;
}

.sgds-radio input {
    margin-top: 3px;
}

.sgds-radio strong {
    display: block;
    font-size: 14px;
    color: #1e293b;
}

#sgds-zone {
    margin: 0 0 16px 27px;
    padding-left: 14px;
    border-left: 2px solid #e2e8f0;
}


/* ---------- l'esito ---------- */

/*
   L'ERRORE ACCANTO AL CAMPO.

   Il riquadro .sgds-errore sta in fondo al modulo, sopra il pulsante: per un
   campo in alto il messaggio compariva fuori dallo schermo, e sembrava che il
   modulo non rispondesse. Questo invece nasce sotto il campo che lo riguarda.
*/
.sgds-errore-campo {
    /*
       Sta DENTRO l'etichetta, sulla stessa riga del nome del campo: non e' un
       blocco a se' - lo era, e finiva sopra il campo successivo o dentro una
       colonna della griglia Nome/Cognome.
    */
    margin-left: 8px;
    font-size: 12.5px;
    font-weight: 400;
    color: #dc2626;
}

.sgds-campo-errato {
    border-color: #dc2626 !important;
}

.sgds-campo-errato:focus {
    outline-color: #dc2626;
}

.sgds-errore {
    margin-bottom: 14px;
    font-size: 13.5px;
    color: #dc2626;
}

.sgds-paga {
    width: 100%;
    padding: 15px;
    background: #6d28d9;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.sgds-paga:hover {
    background: #5b21b6;
}

.sgds-paga:disabled {
    background: #a78bfa;
    cursor: default;
}

.sgds-nota {
    margin-top: 12px;
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.55;
}

.sgds-avviso {
    padding: 16px 18px;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    color: #92400e;
}

/* ------------------------------------------------------------------
   L'asterisco dei campi obbligatori, e le caselle di scelta.
   ------------------------------------------------------------------ */

/*
 * L'asterisco e' rosso ma non urla: deve distinguersi dall'etichetta senza
 * sembrare un errore gia' commesso.
 */
.sgds-obbl {
    color: #dc2626;
    font-weight: 700;
    margin-left: 1px;
}

.sgds-legenda {
    margin: -4px 0 18px;
    font-size: 12.5px;
    color: #94a3b8;
}

/*
 * Le caselle stanno sulla riga della loro etichetta, non sopra: una casella
 * senza testo accanto non si capisce a cosa si riferisca.
 */
.sgds label.sgds-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0;
    font-weight: 500;
    cursor: pointer;
}

.sgds label.sgds-check input[type="checkbox"] {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

/* Il blocco della societa' si stacca da quello che c'e' sopra. */
.sgds-societa {
    padding: 4px 0 0 16px;
    margin-bottom: 6px;
    border-left: 2px solid #e2e8f0;
}

/* La partita IVA si compone da se': si legge, non si scrive. */
.sgds .sgds-vat[readonly] {
    background: #f8fafc;
    color: #64748b;
}

/* ------------------------------------------------------------------
   Il selettore della lingua.
   ------------------------------------------------------------------ */

/*
 * GLI STILI STANNO QUI, NON DENTRO style="".
 *
 * Erano scritti nell'attributo, e uno stile in linea vince su qualunque regola
 * del foglio: dentro la barra della vetrina il selettore restava allineato a
 * destra con un margine sotto, fuori asse rispetto agli altri collegamenti, e
 * non c'era modo di correggerlo da fuori.
 */
.sgds-lingue {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1;
}

.sgds-lingue .sgds-lingua {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    text-decoration: none;
    color: #64748b;
    line-height: 1.4;
}

.sgds-lingue .sgds-lingua-attiva {
    background: #6d28d9;
    color: #fff;
    font-weight: 600;
}