/* ============================================================================
   La Querce — RECESSO v2 (art. 54-bis Codice del Consumo)
   Caricato da tpl/recesso.html e tpl/recesso-ricevuta.html come pagecss2,
   dopo v2-base.css (token) e pagina-v2.css (testata scura e main).

   Pagina di un atto, non di un acquisto: niente che spinga, niente che
   distragga, niente che somigli a un tentativo di trattenere. Chi arriva qui ha
   gia' deciso, e la cosa piu' rispettosa e' non mettersi in mezzo — ogni
   ostacolo in piu' e' anche un rischio legale, perche' la norma chiede che la
   funzione sia "facilmente accessibile".

   Pensata prima per il telefono: campi a tutta larghezza, bersagli grandi,
   nessuna colonna che si stringe. Classi identiche al riferimento, cosi'
   recesso.js e il markup restano compatibili.
   ============================================================================ */

/* Colori di stato: la palette v2 non li ha, e qui servono tre toni distinti —
   fatto, attenzione, blocco. Caldi, per stare accanto all'oro. */
.v2 .rec {
    --rec-ok: #3c5c36;
    --rec-okbg: #e9efe6;
    --rec-stop: #8d3b2f;
    --rec-stopbg: #f7e9e6;
    --rec-warn: #7d6114;
    --rec-warnbg: #f6efdc;
    --rec-soft: #fbf9f4;      /* fondo delle scelte attive, appena piu' caldo del bianco */
}

/* Una colonna sola, stretta abbastanza da leggersi come un modulo e non come
   una pagina: circa la misura della colonna del riferimento. */
.v2 .rec {
    max-width: 42rem;
    margin: 0 auto;
    text-align: left;
    color: var(--text);
}
.v2 .rec .recdone { text-align: center; }

.v2 .rec h2,
.v2 .rec h3 {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    text-align: left;
}

.v2 .rec__h2 {
    margin: 2.2rem 0 .8rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text);
}
.v2 .rec__h2::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-top: .6rem;
    background-color: var(--gold);
}
.v2 .rec__h2--first { margin-top: 0; }
.v2 .rec__h2 label { font: inherit; letter-spacing: inherit; cursor: pointer; }
.v2 .rec__h2 .recfield__opt { text-transform: none; letter-spacing: 0; }

.v2 .rec__intro {
    margin: 0 0 1.75rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-soft);
}

.v2 .rec__note {
    margin: 0 0 .6rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text-soft);
}

.v2 .rec__help {
    margin-top: 2.25rem;
    font-size: .9rem;
    color: var(--text-soft);
}
.v2 .rec__help a {
    color: var(--gold-dark);
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* Visibile solo sul foglio stampato (vedi @media print). */
.v2 .rec__printonly { display: none; }

/* -- Riquadro dei moduli ------------------------------------------------------ */
.v2 .recbox {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 4vw, 2rem);
    box-shadow: 0 1px 2px rgba(28, 27, 23, .04), 0 10px 30px rgba(28, 27, 23, .05);
}

/* -- Passaggi ----------------------------------------------------------------
   Due, dichiarati subito: chi esercita un diritto deve sapere quanto e' lungo
   il percorso, o lascia a meta' temendo che non finisca mai. */
.v2 .recstep {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-soft);
}
.v2 .recstep__item { display: flex; align-items: center; gap: .5rem; }
.v2 .recstep__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(28, 27, 23, .2);
    font-size: .75rem;
    letter-spacing: 0;
}
.v2 .recstep__item.is-now { color: var(--text); }
.v2 .recstep__item.is-now .recstep__n { border-color: var(--gold); color: var(--gold-dark); }
.v2 .recstep__item.is-done .recstep__n { background-color: var(--gold); border-color: var(--gold); color: #fff; }

/* -- Avvisi ------------------------------------------------------------------ */
.v2 .recalert {
    border-radius: .5rem;
    padding: .9rem 1.1rem;
    margin: 0 0 1.25rem;
    font-size: .92rem;
    line-height: 1.55;
}
.v2 .recalert p { margin: 0 0 .4rem; }
.v2 .recalert p:last-child { margin-bottom: 0; }
.v2 .recalert--stop { background-color: var(--rec-stopbg); color: var(--rec-stop); }
.v2 .recalert--ok { background-color: var(--rec-okbg); color: var(--rec-ok); }
.v2 .recalert--warn { background-color: var(--rec-warnbg); color: var(--rec-warn); }

/* -- Scelta rapida fra i propri ordini ----------------------------------------- */
.v2 .recpick {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.v2 .recpick__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "radio code  days"
        "radio meta  days";
    gap: .1rem .75rem;
    align-items: center;
    padding: .9rem 1rem;
    margin: 0;
    cursor: pointer;
}
.v2 .recpick__row + .recpick__row { border-top: 1px solid var(--line); }
.v2 .recpick__row:has(input:checked) { background-color: var(--rec-soft); }
.v2 .recpick__row input { grid-area: radio; accent-color: var(--gold); }
.v2 .recpick__code { grid-area: code; font-weight: 600; letter-spacing: .05em; }
.v2 .recpick__meta { grid-area: meta; font-size: .82rem; color: var(--text-soft); }
.v2 .recpick__days {
    grid-area: days;
    font-size: .75rem;
    font-weight: 600;
    color: var(--rec-warn);
    background-color: var(--rec-warnbg);
    padding: .25rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* -- Campi ---------------------------------------------------------------------
   Etichetta sopra, sempre visibile: le etichette che scompaiono dentro il campo
   fanno perdere il filo a chi compila, e qui si compila una dichiarazione. */
.v2 .recform { margin-bottom: 1rem; }

.v2 .recfield { margin-bottom: 1.25rem; }
.v2 .recfield__label {
    display: block;
    margin-bottom: .4rem;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-soft);
}
.v2 .recfield__opt {
    font-weight: 400;
    font-size: .8rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-soft);
}
.v2 .recfield__input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: .75rem .9rem;
    border: 1px solid rgba(28, 27, 23, .2);
    border-radius: .5rem;
    background-color: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.v2 textarea.recfield__input { resize: vertical; min-height: 5.5rem; }
.v2 .recfield__input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(170, 150, 75, .2);
}
.v2 .recfield__hint {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-soft);
}

/* -- Scelta totale / parziale ---------------------------------------------------- */
.v2 .recchoice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 1rem;
    margin: 0 0 .6rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.v2 .recchoice input { margin-top: .25rem; accent-color: var(--gold); flex: none; }
.v2 .recchoice b { display: block; font-size: .95rem; font-weight: 600; }
.v2 .recchoice small { display: block; margin-top: .15rem; color: var(--text-soft); font-size: .85rem; }
.v2 .recchoice:has(input:checked) { border-color: var(--gold); background-color: var(--rec-soft); }

/* Gli articoli compaiono solo se si sceglie "alcuni": mostrarli sempre
   suggerirebbe che vada scelto qualcosa anche quando si restituisce tutto.
   Solo con lo script attivo (classe rec-js su <html>, messa nel <head>): senza,
   restano visibili e la scelta resta possibile. */
.v2 .recitems { margin: .4rem 0 1rem; }
.rec-js .v2 .recitems { display: none; }
.rec-js .v2 .recitems.is-open { display: block; }

.v2 .recitem {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .75rem .25rem;
    margin: 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}
.v2 .recitem input { accent-color: var(--gold); }
.v2 .recitem__name { overflow-wrap: anywhere; }
.v2 .recitem__qty { color: var(--text-soft); font-size: .85rem; white-space: nowrap; }

/* -- Cosa non si puo' restituire ------------------------------------------------
   Un elenco, non un avviso di errore: le esclusioni dell'art. 59 non sono una
   cosa che il cliente ha sbagliato. Colore d'attenzione, non di blocco, e il
   motivo sempre accanto all'articolo — separarli obbligherebbe a tenere a mente
   quale riga spiega quale prodotto. */
.v2 .recexcl {
    margin: 0 0 1.5rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(125, 97, 20, .18);
    border-left: 3px solid var(--rec-warn);
    border-radius: .5rem;
    background-color: var(--rec-warnbg);
}
.v2 .recexcl--inline { margin-bottom: 1rem; }

.v2 .recexcl__title {
    margin: 0 0 .5rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--rec-warn);
}
.v2 .recexcl__intro {
    margin: 0 0 .8rem;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--text);
}

.v2 .recexcl__list { margin: 0; padding: 0; list-style: none; }
.v2 .recexcl__item {
    padding: .6rem 0;
    border-top: 1px solid rgba(125, 97, 20, .18);
}
.v2 .recexcl__item:first-child { border-top: 0; padding-top: 0; }

.v2 .recexcl__name { display: block; font-weight: 600; font-size: .95rem; }
.v2 .recexcl__model { font-weight: 400; color: var(--text-soft); font-size: .85rem; }
.v2 .recexcl__why {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--rec-warn);
}

/* -- L'atto ----------------------------------------------------------------------
   Il riquadro finale dice cosa sta per succedere con parole non equivoche, e il
   pulsante ripete l'azione al posto di un generico "Invia". */
.v2 .recdeclare {
    margin-top: 2rem;
    padding: 1.15rem;
    border: 1px solid rgba(170, 150, 75, .35);
    border-radius: .5rem;
    background-color: var(--rec-soft);
}
.v2 .recdeclare p {
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--text);
}

/* Aspetto da .v2-btn (v2-base.css); qui solo cio' che il modulo aggiunge:
   bersaglio alto e, su telefono, tutta la larghezza. */
.v2 .recbtn {
    min-height: 3rem;
    text-align: center;
    cursor: pointer;
}
.v2 .recbtn--go,
.v2 .recbtn--send { width: 100%; }

/* Invio in corso: il pulsante si spegne e cambia parola. Senza, un secondo clic
   su una connessione lenta manda due dichiarazioni per lo stesso ordine. */
.v2 .recbtn[disabled] { opacity: .7; cursor: progress; }
.v2 .recbtn[disabled] .recbtn__text { display: none; }
.v2 .recbtn[disabled] .recbtn__wait { display: inline !important; }

/* -- Ordine identificato ------------------------------------------------------------ */
.v2 .recorder {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: .5rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1.5rem;
}
.v2 .recorder__code { font-size: .95rem; }
.v2 .recorder__code b { letter-spacing: .05em; }
.v2 .recorder__time { font-size: .85rem; color: var(--text-soft); margin-top: .2rem; }

/* -- Ricevuta ------------------------------------------------------------------------ */
.v2 .recdone { margin-bottom: 1.75rem; }
.v2 .recdone__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background-color: var(--rec-okbg);
    color: var(--rec-ok);
    margin-bottom: .9rem;
}
.v2 .recdone__title {
    margin: 0 0 .5rem;
    font-size: 1.4rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: var(--tracking-display);
}
.v2 .recdone__lead {
    max-width: 34rem;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-soft);
}

.v2 .recreceipt {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .4rem clamp(1rem, 3vw, 1.5rem);
    margin: 0 0 1.25rem;
    box-shadow: 0 1px 2px rgba(28, 27, 23, .04), 0 10px 30px rgba(28, 27, 23, .05);
}
.v2 .recreceipt__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .3rem 1rem;
    padding: .8rem 0;
}
.v2 .recreceipt__row + .recreceipt__row { border-top: 1px solid var(--line); }
.v2 .recreceipt dt {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-soft);
    align-self: center;
}
.v2 .recreceipt dd { margin: 0; text-align: right; min-width: 0; }
/* Il momento esatto e' il dato legalmente rilevante della pagina: si legge per
   primo anche a colpo d'occhio. */
.v2 .recreceipt__row--time dd { font-size: 1.05rem; }
.v2 .recreceipt__token {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    word-break: break-all;
}

.v2 .recdone__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 2rem;
}
.v2 .recdone__actions .recbtn { flex: 1 1 auto; }

/* style.css toglie i pallini a ogni <li>: qui la numerazione e' l'ordine
   dei passi, va rimessa. */
.v2 .recnext__list { margin: 0; padding-left: 1.3rem; color: var(--text); }
.v2 .recnext__list li { list-style: decimal; margin-bottom: .5rem; line-height: 1.6; }
.v2 .recnext__list li::marker { color: var(--gold-dark); font-weight: 600; }

@media only screen and (min-width: 768px) {
    .v2 .recbtn--go,
    .v2 .recbtn--send { width: auto; min-width: 18rem; }
    .v2 .recdone__actions .recbtn { flex: 0 1 auto; }
}

/* -- Stampa ----------------------------------------------------------------------------
   La ricevuta e' una prova, e ogni tanto qualcuno la stampa davvero. Via il
   contorno del sito (header, testata scura, footer, pulsanti, banner cookie):
   resta il documento, nero su bianco. */
@media print {
    .fixedheader,
    .header,
    .usermenu,
    .pv2-hero,
    footer,
    .recstep,
    .recdone__actions,
    .rec__help,
    .v2-btn,
    button,
    #iubenda-cs-banner,
    .iubenda-tp-btn,
    .iubenda-cs-preferences-link { display: none !important; }

    html,
    body,
    .v2,
    .v2 main,
    .v2 #main {
        background: #fff !important;
        color: #000 !important;
    }

    .pagina-v2 main {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .v2 .rec { max-width: none; }
    .v2 .rec__printonly { display: block; }

    .v2 .recdone__mark { border: 1px solid #000; background: none; color: #000; }
    .v2 .recdone__lead,
    .v2 .recreceipt dt { color: #333; }

    .v2 .recreceipt {
        border-color: #000;
        box-shadow: none;
        break-inside: avoid;
    }
    .v2 .recreceipt__row + .recreceipt__row { border-top-color: #999; }

    .v2 .recalert { border: 1px solid #999; background: none !important; color: #000 !important; }
    .v2 .rec__h2::after { background-color: #000; }
}