/* /pagamento/ — schermata minimale. Si appoggia a /contratto/contratto.css per barra e piede.
   Regole: icone 20px a tratto 1,5 accanto a testo regolare; righe da 48px; numeri tabulari;
   raggi concentrici (scheda 16 = riga 10 + 6); ombre per la profondità, bordi solo per struttura. */
:root{--r-scheda:16px;--r-riga:10px;--ombra:0 1px 2px rgb(20 22 24 / .04),0 8px 24px -12px rgb(20 22 24 / .12)}
.avviso-test{margin:0;padding:8px 24px;background:#fff3c4;color:#5a4300;font-size:.85rem;text-align:center;border-bottom:1px solid #f1dc8a}
.errore{background:#fdecec;border:1px solid #f3b4b4;color:#7a1f1f;border-radius:12px;padding:14px 18px;margin:0 0 20px}
.errore ul{margin:0;padding-left:1.2rem}

.contenuto.largo{max-width:1040px;padding:20px 24px 72px}
.indietro{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--notte);background:var(--bianco);box-shadow:var(--ombra);margin:0 0 18px;transition:background-color .15s,transform .15s}
.indietro svg{width:20px;height:20px}
.indietro:hover{background:#eef3fd}
.indietro:active{transform:scale(.96)}

.griglia{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.colonna-ordine{display:grid;gap:16px}
.scheda{background:var(--bianco);border-radius:var(--r-scheda);box-shadow:var(--ombra);padding:20px 22px}
.scheda h2{font-size:1.05rem;margin:0 0 14px;letter-spacing:-.01em}
.titoletto,.scheda h2.titoletto{margin:0 0 6px;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grigio);font-weight:600}

/* blocco prezzo */
.prezzo-blocco{padding:20px 22px 18px}
.prezzo-etichetta{margin:0;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grigio);font-weight:600}
.prezzo-numero{margin:2px 0 14px;font-size:2.75rem;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--blu);font-variant-numeric:tabular-nums}
.prezzo-riga{margin:0;font-size:.86rem;line-height:1.45;color:var(--grigio);text-wrap:pretty}
.cta{display:block;width:100%;margin:0;height:48px;border:0;border-radius:12px;background:var(--blu);color:#fff;font:600 1rem/1 inherit;font-family:inherit;cursor:pointer;transition:background-color .15s,transform .15s}
.cta:hover{background:var(--blu-scuro)}
.cta:active{transform:scale(.96)}
.cta:focus-visible{outline:3px solid var(--blu);outline-offset:2px}

/* scelta pacchetto (solo senza ?p=) */
.scelte{display:grid;gap:8px}
.scelta{display:flex;gap:12px;align-items:center;border:1.5px solid var(--linea);border-radius:var(--r-riga);padding:10px 12px;cursor:pointer;min-height:48px}
.scelta:has(input:checked){border-color:var(--blu)}
.scelta input{accent-color:var(--blu);margin:0}
.scelta span{display:flex;flex-direction:column;gap:1px;font-size:.92rem}
.scelta em{font-style:normal;color:var(--grigio);font-size:.82rem}

/* riga a fisarmonica: icona · titolo · più */
details.voce{border-top:1px solid var(--linea)}
details.voce:first-of-type{border-top:0}
.aggiunta details.voce{border-top:0;flex:1;min-width:0}
details.voce > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 2px;font-size:.94rem;line-height:1.35;color:var(--notte);border-radius:var(--r-riga);transition:background-color .15s}
details.voce > summary::-webkit-details-marker{display:none}
details.voce > summary:hover{background:#f3f6fb}
details.voce > summary:focus-visible{outline:3px solid var(--blu);outline-offset:-3px}
details.voce > summary svg{width:20px;height:20px;flex:none;color:var(--blu);stroke-width:1.5}
.voce-titolo{flex:1;min-width:0;text-wrap:pretty}
.voce-titolo em{font-style:normal;color:var(--grigio);font-size:.86rem;white-space:nowrap;margin-left:2px}
details.voce > p{margin:-2px 40px 12px 34px;font-size:.86rem;line-height:1.5;color:var(--grigio);text-wrap:pretty}
.piu{flex:none;width:16px;height:16px;position:relative;color:var(--grigio)}
.piu::before,.piu::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);border-radius:1px}
.piu::before{width:12px;height:1.5px}
.piu::after{width:1.5px;height:12px;transition:transform .15s}
details[open] > summary .piu::after{transform:translate(-50%,-50%) scaleY(0)}

/* aggiungi servizi */
.sezione-aggiunte > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:24px}
.sezione-aggiunte > summary::-webkit-details-marker{display:none}
.sezione-aggiunte > summary .titoletto{margin:0}
.sezione-aggiunte[open] > summary{margin-bottom:6px}
.aggiunta{display:flex;align-items:flex-start;gap:0;border-top:1px solid var(--linea)}
.aggiunta:first-of-type{border-top:0}
.aggiunta[hidden]{display:none}
.aggiunta > .sel{flex:none;display:grid;place-items:center;width:36px;height:48px;margin-left:-8px;cursor:pointer}
.aggiunta > .sel input{width:16px;height:16px;margin:0;accent-color:var(--blu)}

/* dati */
.colonna-dati{padding:24px 26px 26px;position:sticky;top:76px}
.campi{display:grid;gap:14px 18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.campi label{display:block;min-width:0}
.campi label.largo{grid-column:1/-1}
.etichetta{display:block;font-size:.84rem;font-weight:600;color:var(--grigio);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px;margin-bottom:6px}
.etichetta small{font-weight:400;font-size:.78rem;color:#8a9098;margin-left:5px}
.campi input{display:block;font:inherit;color:var(--notte);padding:0 12px;border:1.5px solid var(--linea);border-radius:var(--r-riga);background:var(--bianco);width:100%;height:44px;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.campi input:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 3px rgb(17 92 250 / .14)}
.accetto{display:flex;align-items:flex-start;gap:10px;font-size:.84rem;line-height:1.5;color:var(--grigio);margin:18px 0 0;text-wrap:pretty}
.accetto input{flex:none;width:16px;height:16px;margin-top:3px;accent-color:var(--blu)}
.accetto span{flex:1;min-width:0}

@media (max-width:900px){
  .griglia{grid-template-columns:1fr}
  .colonna-dati{position:static}
}
@media (max-width:560px){.campi{grid-template-columns:1fr}.contenuto.largo{padding:16px 16px 56px}}

/* intestazione pacchetto (colonna ordine, in cima) */
.intestazione-pacchetto{padding:18px 22px}
.nome-pacchetto{margin:2px 0 2px;font-size:1.35rem;font-weight:600;letter-spacing:-.02em}
.desc-pacchetto{margin:0;font-size:.9rem;color:var(--grigio);text-wrap:pretty}

/* aggiungi servizi: aperta, al massimo 600px e scorrevole */
.aggiunte{max-height:600px;overflow-y:auto;overscroll-behavior:contain;margin:0 -8px;padding:0 8px;scrollbar-width:thin}

/* recap sotto il prezzo */
.recap{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--linea);display:grid;gap:6px;font-size:.86rem}
.recap div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.recap dt{color:var(--grigio);min-width:0}
.recap dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--notte)}
.recap .recap-poi{margin-top:4px;padding-top:8px;border-top:1px dashed var(--linea)}
.recap-nota{margin:8px 0 0;font-size:.8rem;color:var(--grigio)}