/* ============================================================================
   RECESSO — art. 54-bis Codice del Consumo

   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.
   ============================================================================ */

:root {
    --rec-ink: #2a251f;
    --rec-mute: #7c736a;
    --rec-line: #e6dfd3;
    --rec-gold: #B0904A;
    --rec-ok: #3c5c36;
    --rec-okbg: #e9efe6;
    --rec-stop: #8d3b2f;
    --rec-stopbg: #f7e9e6;
    --rec-warnbg: #f8efd9;
    --rec-warn: #7d6114;
}

/* Il tema centra il testo dentro le sezioni. Su una pagina di lettura va bene,
   su un modulo no: etichette e campi devono partire tutti dallo stesso bordo
   sinistro, o l'occhio non trova la colonna e la compilazione diventa faticosa.
   La sola eccezione e' la conferma, che e' un annuncio e resta centrata. */
.rec { text-align: left; }
.rec .recdone { text-align: center; }

.rec__h1 {
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 .8rem 0;
}

.rec__h2 {
    font-size: 1.05rem;
    margin: 1.8rem 0 .6rem 0;
}

.rec__intro {
    color: var(--rec-mute);
    margin-bottom: 1.5rem;
}

.rec__note {
    font-size: .85rem;
    color: var(--rec-mute);
    margin-bottom: .5rem;
}

.rec__help {
    margin-top: 2rem;
    font-size: .9rem;
    color: var(--rec-mute);
}
.rec__help a { text-decoration: underline; }

/* -- Passaggi ---------------------------------------------------------------
   Due, dichiarati subito: chi esercita un diritto deve sapere quanto e' lungo
   il percorso, o lascia a meta' temendo che non finisca mai. */
.recstep {
    display: flex;
    gap: 1.2rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    font-size: .85rem;
    color: var(--rec-mute);
    flex-wrap: wrap;
}
.recstep__item { display: flex; align-items: center; gap: .4rem; }
.recstep__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--rec-line);
    font-size: .78rem;
    font-weight: 700;
}
.recstep__item.is-now { color: var(--rec-ink); font-weight: 700; }
.recstep__item.is-now .recstep__n { border-color: var(--rec-gold); color: var(--rec-gold); }
.recstep__item.is-done .recstep__n { background-color: var(--rec-gold); border-color: var(--rec-gold); color: #fff; }

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

/* -- Scelta rapida fra i propri ordini --------------------------------------- */
.recpick {
    border: 1px solid var(--rec-line);
    border-radius: .5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.recpick__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "radio code  days"
        "radio meta  days";
    gap: .1rem .7rem;
    align-items: center;
    padding: .9rem 1rem;
    cursor: pointer;
    margin: 0;
}
.recpick__row + .recpick__row { border-top: 1px solid var(--rec-line); }
.recpick__row input { grid-area: radio; }
.recpick__code { grid-area: code; font-weight: 700; letter-spacing: .05em; }
.recpick__meta { grid-area: meta; font-size: .82rem; color: var(--rec-mute); }
.recpick__days {
    grid-area: days;
    font-size: .78rem;
    font-weight: 700;
    color: var(--rec-warn);
    background-color: var(--rec-warnbg);
    padding: .25rem .5rem;
    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. */
.recform { margin-bottom: 1rem; }

.recfield { margin-bottom: 1.2rem; }
.recfield__label {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .35rem;
}
.recfield__opt {
    font-weight: 400;
    font-size: .8rem;
    color: var(--rec-mute);
}
.recfield__input {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid var(--rec-line);
    border-radius: .4rem;
    font-size: 1rem;
    background-color: #fff;
    color: var(--rec-ink);
}
.recfield__input:focus {
    outline: 2px solid var(--rec-gold);
    outline-offset: -2px;
    border-color: var(--rec-gold);
}
.recfield__hint {
    display: block;
    margin-top: .3rem;
    font-size: .8rem;
    color: var(--rec-mute);
}

/* -- Scelta totale / parziale ------------------------------------------------ */
.recchoice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1rem;
    border: 1px solid var(--rec-line);
    border-radius: .5rem;
    margin-bottom: .6rem;
    cursor: pointer;
}
.recchoice input { margin-top: .2rem; }
.recchoice b { display: block; font-size: .95rem; }
.recchoice small { color: var(--rec-mute); }
.recchoice:has(input:checked) { border-color: var(--rec-gold); background-color: #fdfbf7; }

/* Gli articoli compaiono solo se si sceglie "alcuni": mostrarli sempre
   suggerirebbe che vada scelto qualcosa anche quando si restituisce tutto. */
.recitems { display: none; margin: 0 0 1rem 0; }
.recitems.is-open { display: block; }

.recitem {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .7rem;
    align-items: center;
    padding: .7rem .2rem;
    border-bottom: 1px solid var(--rec-line);
    margin: 0;
    cursor: pointer;
}
.recitem__qty { color: var(--rec-mute); font-size: .85rem; white-space: nowrap; }

/* -- 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". */
.recdeclare {
    margin-top: 2rem;
    padding: 1.1rem;
    border: 1px solid var(--rec-line);
    border-radius: .5rem;
    background-color: #fdfbf7;
}
.recdeclare p {
    margin: 0 0 1rem 0;
    font-size: .9rem;
    color: var(--rec-ink);
}

.recbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 3rem;
    padding: .8rem 1.4rem;
    border-radius: .4rem;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.recbtn--go,
.recbtn--send {
    width: 100%;
    background-color: var(--rec-gold);
    color: #fff;
}
.recbtn--go:hover,
.recbtn--send:hover { filter: brightness(.95); color: #fff; }
.recbtn--ghost {
    background-color: #fff;
    border-color: var(--rec-line);
    color: var(--rec-ink);
    font-weight: 400;
    font-size: .9rem;
}
.recbtn:focus-visible { outline: 2px solid var(--rec-ink); outline-offset: 2px; }

/* 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. */
.recbtn[disabled] { opacity: .7; cursor: progress; }
.recbtn[disabled] .recbtn__text { display: none; }
.recbtn[disabled] .recbtn__wait { display: inline !important; }

/* -- Ordine identificato ----------------------------------------------------- */
.recorder {
    border: 1px solid var(--rec-line);
    border-left: 4px solid var(--rec-gold);
    border-radius: .4rem;
    padding: .9rem 1rem;
    margin-bottom: 1.5rem;
}
.recorder__code { font-size: .95rem; }
.recorder__time { font-size: .85rem; color: var(--rec-mute); margin-top: .2rem; }

/* -- Ricevuta ---------------------------------------------------------------- */
.recdone { text-align: center; margin-bottom: 1.8rem; }
.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);
    font-size: 1.8rem;
    margin-bottom: .8rem;
}
.recdone__title { font-size: 1.5rem; margin: 0 0 .5rem 0; }
.recdone__lead { color: var(--rec-mute); margin: 0; }

.recreceipt {
    border: 1px solid var(--rec-line);
    border-radius: .5rem;
    padding: .3rem 1rem;
    margin-bottom: 1.2rem;
}
.recreceipt__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .3rem 1rem;
    padding: .7rem 0;
}
.recreceipt__row + .recreceipt__row { border-top: 1px solid var(--rec-line); }
.recreceipt dt { color: var(--rec-mute); font-weight: 400; font-size: .9rem; }
.recreceipt dd { margin: 0; text-align: right; }
/* Il momento esatto e' il dato legalmente rilevante della pagina: si legge per
   primo anche a colpo d'occhio. */
.recreceipt__row--time dd { font-size: 1.05rem; }
.recreceipt__token {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    word-break: break-all;
}

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

.recnext__list { padding-left: 1.2rem; color: var(--rec-ink); }
.recnext__list li { margin-bottom: .4rem; }

@media only screen and (min-width: 768px) {
    .rec__h1 { font-size: 2rem; }
    .recbtn--go, .recbtn--send { width: auto; min-width: 18rem; }
}

/* Stampa: la ricevuta e' una prova, e ogni tanto qualcuno la stampa davvero.
   Via il contorno del sito, resta il documento. */
@media print {
    .page-header, .footer-classic, .breadcrumbs-custom,
    .recdone__actions, .rec__help, .pwa-banner { display: none !important; }
    .recreceipt { border-color: #000; }
}