/* =====================================================================================
   I LIVELLI DI MOOD — la pagina /pricing (13/10/2026).

   LA PAGINA RACCONTA COSA SI PUO' AVERE, NON QUANTO COSTA. Il titolare: «facciamo sempre in stile mood come
   funzionano i listini .. o meglio senza citare prezzi, parliamo di cosa si può avere .. nessun prezzo ..
   deve rimanere social .. rimaniamo fuori da possibili blocchi nella versione APP». Quindi qui non c'e'
   nessun prezzo da vestire: ci sono i livelli, i servizi editoriali, le sponsorizzazioni e il sigillo.

   STILE: solo variabili di casa (`--mood-*`, da `mood.css`) e i tasti di casa (`mood-btn`). Niente colori
   scritti a mano, niente regole che valgono solo in un tema: il tema scuro arriva da solo dalle variabili.
   ===================================================================================== */

.liv-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 28px 16px 72px;
}

.liv-testa {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.liv-titolo {
    margin: 0 0 6px;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--mood-text);
}

.liv-titolo--due {
    margin: 34px 0 14px;
    font-size: 1.2rem;
}

.liv-sotto {
    margin: 0 0 26px;
    max-width: 70ch;
    line-height: 1.55;
    color: var(--mood-text-muted);
}

.liv-sotto strong {
    color: var(--mood-text);
}

/* I livelli: una griglia che si adatta. Ogni scheda e' una cosa che si puo' avere. */
.liv-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.liv-livello {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius);
    box-shadow: var(--mood-shadow);
}

.liv-livello--scelto {
    border-color: var(--mood-primary);
    box-shadow: var(--mood-shadow), 0 0 0 1px var(--mood-primary);
}

.liv-scelto {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mood-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.liv-nome {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--mood-text);
}

.liv-cosa {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--mood-text);
}

.liv-cosa li::before {
    content: '✓';
    margin-right: 8px;
    font-weight: 800;
    color: var(--mood-primary);
}

.liv-cosa li:last-child {
    color: var(--mood-text-muted);
}

/* Il tasto che porta al piede: si chiede, non si compra. */
.liv-chiedi {
    margin-top: auto;
    text-align: center;
    text-decoration: none;
}

/* I servizi: tre riquadri di pari peso. */
.liv-riquadri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.liv-riquadro {
    padding: 20px;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius);
}

.liv-riquadro h3 {
    margin: 10px 0 6px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--mood-text);
}

.liv-riquadro p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--mood-text-muted);
}

.liv-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--mood-bg-hover);
    color: var(--mood-primary);
}

.liv-ico img,
.liv-ico svg {
    width: 22px;
    height: 22px;
    display: block;
}

.liv-piede {
    margin: 30px 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--mood-text);
}

.liv-nota {
    margin: 12px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--mood-text-muted);
}

/* =====================================================================================
   IL MODULO DELLE RICHIESTE (13/10/2026)

   Il titolare: «non mettere email ... mie ... metti richiedi informazioni con modulo come facciamo con
   editoriale», indicando https://mood.lsnn.net/landing/editorial/ come modello. Quindi niente indirizzo di
   posta in chiaro: quattro campi e il consenso, e la richiesta va dove va gia' quella dell'editoriale
   (`POST /api/editoriale/richiesta`). Le classi stanno tutte qui, sotto il contenitore `.liv-wrap`.
   ===================================================================================== */

.liv-modulo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
    max-width: 760px;
}

.liv-campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.liv-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mood-text);
}

.liv-campo span em {
    font-style: normal;
    font-weight: 400;
    color: var(--mood-text-muted);
}

.liv-campo input,
.liv-campo textarea {
    width: 100%;
    font: inherit;
    font-weight: 400;
    padding: 11px 12px;
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius-sm);
    background: var(--mood-bg-card);
    color: var(--mood-text);
}

.liv-campo input:focus,
.liv-campo textarea:focus {
    outline: 2px solid rgba(108, 92, 231, 0.45);
    outline-offset: 1px;
}

.liv-consenso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--mood-text-muted);
}

.liv-consenso input {
    margin-top: 2px;
}

.liv-esito {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--mood-text-muted);
}

.liv-esito.is-ok {
    color: var(--mood-text);
    font-weight: 700;
}

.liv-esito.is-ko {
    color: #c0392b;
}

.liv-azioni {
    display: flex;
    justify-content: flex-start;
}