/* Pagina «prezzi» (/prezzi/, /en/pricing/): stili propri del gruppo prezzi, con il prefisso .prezzi- .
   Vale il contratto di style.css: nessuna risorsa esterna, animazioni e transizioni solo in @media (prefers-reduced-motion: no-preference),
   stati nascosti solo sotto html.js. Le schede, la tabella e le FAQ del listino le costruisce prezzi.js dal listino pubblicato; senza
   JavaScript o senza listino resta la riserva statica (nomi dei piani, gruppi, FAQ, nessuna cifra). */

/* gli elementi con hidden che hanno anche un display proprio */
#prezzi-intervallo[hidden], #prezzi-riserva[hidden], #prezzi-spazio[hidden] { display: none; }

/* Mese / Anno: due pulsanti con aria-pressed, alti 44 px */
.prezzi-intervallo { display: inline-flex; gap: var(--space-1); padding: var(--space-1); margin: 0 0 var(--space-6); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.prezzi-scelta { min-height: 44px; min-width: 44px; padding: 0 var(--space-6); border: 2px solid transparent; border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.prezzi-scelta[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.prezzi-scelta:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Schede dei piani */
.prezzi-schede { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 900px) { .prezzi-schede { gap: var(--space-6); } }
.prezzi-scheda { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.prezzi-scheda.prezzi-popolare { border: 2px solid var(--primary); }
.prezzi-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.prezzi-nome { margin: 0; font-size: 1.375rem; }
.prezzi-badge { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.prezzi-motto { margin: 0; color: var(--text-muted); }
.prezzi-cifra { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.prezzi-importo { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--text); }
.prezzi-unita { color: var(--text-muted); font-size: .9375rem; }
.prezzi-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.prezzi-righe li { display: flex; align-items: flex-start; gap: var(--space-2); }
.prezzi-righe .ico { color: var(--primary); flex: none; margin-top: 2px; }
.prezzi-cta { margin-top: auto; align-self: stretch; }
.prezzi-riserva { margin: 0 0 var(--space-4); }
.prezzi-riserva h3 { margin-top: 0; }
.prezzi-riserva .actions { margin-bottom: 0; }
.prezzi-nota { margin: 0; font-size: .9375rem; }

/* Gruppi (riserva) e tabella di confronto */
.prezzi-gruppi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.prezzi-gruppi h3 { margin-top: 0; }
.prezzi-gruppi p { margin-bottom: 0; color: var(--text-muted); }
/* la caption e' visually-hidden (assoluta): senza un contenitore posizionato sfuggirebbe allo scorrimento e allargherebbe la pagina */
.prezzi-matrice .tabella { position: relative; }
.prezzi-matrice .prezzi-gruppo th { background: var(--surface-alt); text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; color: var(--text); }
.prezzi-matrice tbody th small { display: block; font-weight: 400; color: var(--text-muted); font-size: .8125rem; }
.prezzi-matrice .prezzi-no { color: var(--text-muted); }

/* Espansioni dello spazio */
.prezzi-spazio { margin-top: var(--space-8); }
.prezzi-espansioni { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.prezzi-espansione { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
.prezzi-esp-nome { font-weight: 600; }
.prezzi-esp-prezzo { color: var(--text-muted); }