/* ==========================================================================
   IL CONFIGURATORE FLEX: le due versioni, l'elenco dei pacchetti, il totale.

   PERCHE' UN FILE STATICO E NON CLASSI DI TAILWIND. Il foglio compilato del
   sito NON si rigenera: `npm run build` riscriverebbe il manifest di tutte le
   pagine. Quindi una classe che non e' gia' dentro public/build/assets/app-*.css
   non esiste. Controllate una per una con grep su quel file e ASSENTI:
   prose-lg, isolate, -z-10, md:grid-cols-12, md:col-span-N. Qui dentro c'e'
   solo cio' che manca: la griglia delle due versioni, le righe del listino con
   la colonna del prezzo e il contatore, e la fascia del totale.

   I colori vengono dalle variabili del sito, col valore di ripiego accanto,
   come fa public/pannello/negozio/negozio.css:
     --color-primary #c7081b   --color-primary-dark #a50616
     --color-line #e3e3e3      --color-secondary #1a1a2e
     --color-body #3a3a3a
   Cosi' il rosso del marchio resta uno solo in tutto il sito.

   LA REGOLA DEI 390 PIXEL: niente scorrimento orizzontale su un telefono.
   Sotto i 600 px la colonna del prezzo esce dalla riga e si mette sotto il
   nome, che altrimenti andrebbe a capo tre volte.

   IL CONTRASTO E' MISURATO, non a occhio. Le coppie usate qui:
     #555 su #fafafa  7,14:1   (etichette)
     #555 su #fff     7,46:1   (descrizioni)
     #666 su #fff     5,74:1   (note)
     #fff su #c7081b  6,04:1   (pulsante e fascia del totale)
   Tutte sopra il 4,5:1 che serve al testo piccolo.
   ========================================================================== */

.cfg {
    margin: 1.75rem 0;
    padding: 1.25rem;
    border: 1px solid var(--color-line, #e3e3e3);
    border-radius: .625rem;
    background: #fafafa;
}

.cfg-titolo {
    margin: 0 0 .375rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-secondary, #1a1a2e);
}

.cfg-intro {
    margin: 0 0 1.125rem;
    font-size: .8125rem;
    line-height: 1.6;
    color: #555;
}

/* --- le due versioni: Master e Slave ---------------------------------- */

/* E' un <fieldset> perche' le due versioni sono una scelta sola e il lettore di
   schermo deve sentirle come un gruppo. Il bordo e i margini che il browser
   mette da se' a un fieldset vanno tolti, altrimenti compare una cornice che
   non c'entra niente col disegno della scheda. */
.cfg-versioni {
    display: flex;
    gap: .75rem;
    margin: 0 0 1.125rem;
    padding: 0;
    border: 0;
    min-width: 0;
    flex-wrap: wrap;
}

/* La legenda serve a chi ascolta, non a chi guarda: il titolo del riquadro lo
   dice gia' la riga sopra. `sr-only` c'e' nel foglio compilato (verificato), ma
   qui si ripete perche' questo file deve reggere anche da solo. */
.cfg-versioni > legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cfg-versione {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: 0;
    padding: .75rem .875rem;
    border: 2px solid #ddd;
    border-radius: .5rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.cfg-versione.cfg-attiva {
    border-color: var(--color-primary, #c7081b);
    box-shadow: 0 0 0 3px rgba(199, 8, 27, .08);
}

/* Il pallino resta nel documento (tastiera e lettore di schermo lo usano):
   si nasconde solo alla vista, e il contorno di fuoco si sposta sull'etichetta. */
.cfg-versione input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cfg-versione:focus-within {
    outline: 3px solid var(--color-primary, #c7081b);
    outline-offset: 2px;
}

.cfg-versione-nome { font-weight: 700; font-size: .9375rem; color: var(--color-secondary, #1a1a2e); }
.cfg-versione-sub  { font-size: .75rem; color: #666; }

/* --- l'elenco dei pacchetti ------------------------------------------- */

/* QUELLO CHE IL JAVASCRIPT NASCONDE DEVE SPARIRE DAVVERO.
   Dal 29/09/2026 il server stampa TUTTI i gruppi - a script spento i pacchetti
   Slave devono vedersi, prima non se ne vedeva nessuno - e a nasconderne uno e'
   il JavaScript, con l'attributo `hidden`. `hidden` pero' e' solo un
   `display: none` della foglia del browser: basta che un domani qualcuno dia un
   `display` a .cfg-gruppo perche' smetta di valere e i due elenchi tornino in
   pagina insieme, con le quantita' di tutti e due. Questa riga lo impedisce. */
.cfg [hidden] { display: none !important; }

.cfg-gruppo {
    margin-bottom: .875rem;
    background: #fff;
    border: 1px solid var(--color-line, #e3e3e3);
    border-radius: .375rem;
    overflow: hidden;
}

.cfg-testa {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5625rem .75rem;
    background: #f2f2f2;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #555;
}

.cfg-testa > span:first-child { flex: 1; }
.cfg-col-prezzo { width: 6rem; text-align: right; }
.cfg-col-quantita { width: 6rem; text-align: center; }

.cfg-riga {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5625rem .75rem;
    border-top: 1px solid #f0f0f0;
    font-size: .8125rem;
}

.cfg-riga.cfg-scelta { background: var(--color-primary-50, #fdf3f4); }

.cfg-nome { flex: 1; line-height: 1.4; min-width: 0; color: var(--color-body, #3a3a3a); }
.cfg-prezzo { width: 6rem; text-align: right; font-weight: 600; white-space: nowrap; color: var(--color-secondary, #1a1a2e); }

.cfg-quantita {
    width: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}

.cfg-passo {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    line-height: 1;
    border: 1px solid #ccc;
    border-radius: .25rem;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: .9375rem;
}

.cfg-passo:hover { background: var(--color-primary, #c7081b); border-color: var(--color-primary, #c7081b); color: #fff; }
.cfg-passo:focus-visible { outline: 3px solid var(--color-primary, #c7081b); outline-offset: 2px; }

.cfg-conta {
    width: 2.75rem;
    height: 1.75rem;
    padding: 0 .125rem;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: .25rem;
    font-size: .8125rem;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cfg-conta::-webkit-outer-spin-button,
.cfg-conta::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- il totale --------------------------------------------------------- */

.cfg-totale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
    flex-wrap: wrap;
    padding: .875rem;
    border-radius: .375rem;
    background: var(--color-primary, #c7081b);
    color: #fff;
}

.cfg-totale-etichetta { font-size: .8125rem; text-transform: uppercase; letter-spacing: .5px; }
.cfg-totale-cifra { font-size: 1.375rem; font-weight: 800; white-space: nowrap; }

/* Lo scorporo dell'IVA: la stessa terna che mostra la scheda prodotto sopra
   (imponibile + IVA = totale), cosi' le due cifre non si contraddicono. */
.cfg-scorporo {
    flex: 1 1 100%;
    margin: 0;
    font-size: .75rem;
    /* bianco pieno, non trasparente: su questo rosso un bianco al 70% scende
       sotto il 4,5:1 */
    color: #fff;
}

.cfg-nota { margin: .5rem 0 0; font-size: .75rem; color: #666; line-height: 1.6; }

/* --- il riepilogo di quello che si e' scelto --------------------------- */

.cfg-scelto { margin: .75rem 0 0; padding: 0; list-style: none; font-size: .8125rem; color: #555; }
.cfg-scelto li { padding: .1875rem 0; }
.cfg-scelto li::before { content: '\2713\00a0'; color: var(--color-primary, #c7081b); font-weight: 700; }

@media (max-width: 600px) {
    .cfg-testa .cfg-col-prezzo { display: none; }
    .cfg-riga { flex-wrap: wrap; }
    .cfg-nome { flex: 1 1 100%; }
    .cfg-prezzo { width: auto; flex: 1; text-align: left; }
}