/*
  PubblicaQui — modulo d'ordine /ordina/ (agente A). Si carica dopo sito.css e ne usa i token.
  Una pagina sola (decisione del 17/9/2026): quattro gruppi di campi e il riquadro «Il tuo ordine».
  Telefono: una colonna, il riquadro chiude la pagina. Computer (da 1000 px): modulo a sinistra, riquadro fisso a destra.
*/

[hidden] { display: none !important; }
.pagina-ordina { background: var(--carta); }

/* Testata essenziale */
.ordina-testa { background: var(--bianco); border-bottom: 1px solid var(--linea); }
.ordina-testa .contenitore { display: flex; align-items: center; gap: var(--s-4); min-height: 56px; }
.ordina-testa .marchio { font-size: 1.2rem; }
.ordina-testa .marchio img { width: 28px; height: 28px; }
.ordina-sicuro { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--verde); font-weight: 600; }
.ordina-aiuto { font-size: var(--t-xs); font-weight: 600; }
@media (max-width: 420px) { .ordina-sicuro span { display: none; } }

/* Struttura */
.ordina { padding-block: var(--s-5) var(--s-7); }
.ordina-intestazione { max-width: 760px; margin-bottom: var(--s-5); }
.ordina-intestazione h1 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.ordina-sottotitolo { color: var(--inchiostro-2); margin: 0; }
.ordina > .contenitore > .avviso { margin-bottom: var(--s-4); max-width: 760px; }
.ordina .avviso p { margin: 0; }
.ordina-griglia { display: grid; gap: var(--s-5); align-items: start; }
.ordina-griglia > * { min-width: 0; }
@media (min-width: 1000px) { .ordina-griglia { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); } }
.ordina-principale { display: grid; gap: var(--s-5); }

/* Gruppi di campi */
.blocco { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--ombra); padding: var(--s-5) var(--s-4); min-width: 0; }
@media (min-width: 480px) { .blocco { padding: var(--s-5); } }
@media (min-width: 720px) { .blocco { padding: var(--s-6); } }
.blocco > * + *, .campi > * + *, .gruppo-campi > * + * { margin-top: var(--s-5); }
.blocco > * { margin-bottom: 0; }
.blocco-titolo { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-size: var(--t-l); }
.blocco-numero { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--testata); color: var(--testata-testo); font: 700 1rem / 1 var(--font-testo); }
.blocco-icona { margin-left: auto; color: var(--grigio-chiaro); display: inline-flex; }
.blocco-intro { color: var(--inchiostro-2); font-size: var(--t-s); margin: 0; }
.blocco-titolo + .blocco-intro { margin-top: var(--s-2); }
.blocco-vuoto { margin: var(--s-4) 0 0; padding: var(--s-4); border: 1px dashed var(--linea-forte); border-radius: var(--raggio); color: var(--grigio); font-size: var(--t-s); text-align: center; }
.campo { min-width: 0; }
.campo textarea { min-height: 96px; }
.campo textarea[rows='10'] { min-height: 220px; }
.campi-affiancati { display: grid; gap: var(--s-5) var(--s-4); }
.campi-affiancati > .campo { align-content: start; }
/* Da 600 px ogni campo visibile ha la sua colonna (quelli nascosti non ne occupano) */
@media (min-width: 600px) { .campi-affiancati { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.campi-indirizzo { grid-auto-flow: row; grid-template-columns: 7rem minmax(0, 1fr); }
@media (min-width: 600px) { .campi-indirizzo { grid-template-columns: 7rem minmax(0, 1fr) 7rem; } }
.gruppo-campi { border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s-4); background: var(--carta); min-width: 0; }
.gruppo-campi > legend { padding: 0 var(--s-2); margin: 0 0 0 calc(-1 * var(--s-2)); font-weight: 650; font-size: var(--t-s); }
.gruppo-campi > .aiuto { margin-top: 0; }
.gruppo-scelta > legend { font-weight: 650; font-size: var(--t-s); margin-bottom: var(--s-2); }
.contatore { margin: 0; text-align: left; }
.contatore-ok { color: var(--verde); font-weight: 600; }
.errore-campo { display: flex; gap: var(--s-1); margin-top: var(--s-1); }
.errore-campo::before { content: '!'; flex: none; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--rosso); color: #fff; font-size: 0.75em; display: grid; place-items: center; margin-top: 0.15em; }
.spunta { cursor: pointer; line-height: 1.45; }
.spunta a { font-weight: 600; }
.spunta-piccola { font-size: var(--t-xs); color: var(--inchiostro-2); }
.spunta-piccola input { width: 20px; height: 20px; }
.spunta:has(input:checked) { color: var(--inchiostro); }
.bottone-link { background: none; border: 0; padding: 0; min-height: 24px; font: inherit; font-weight: 650; color: var(--blu); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.bottone-link:hover { color: var(--inchiostro); }
.campo-promo .aiuto { margin: 0; }

/* Giornale: due pulsanti grandi */
.scelte-testate { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.scelta-testata { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.scelta-testata input, .scelta-formato input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scelta-testata-corpo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--s-3); min-height: 76px; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 4px); background: var(--bianco); border: 1.5px solid var(--linea-forte); border-radius: var(--raggio); overflow: hidden; transition: border-color var(--durata), box-shadow var(--durata), background var(--durata); }
.scelta-testata-corpo::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--testata); }
.scelta-testata-corpo .mt { font-size: 1.45rem; grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scelta-testata-zona { grid-column: 1; font-size: var(--t-xs); font-weight: 600; color: var(--inchiostro-2); }
.scelta-testata-prezzo { grid-column: 2; grid-row: 1 / span 2; font-size: var(--t-xs); color: var(--grigio); text-align: right; white-space: nowrap; }
.scelta-testata:hover .scelta-testata-corpo { border-color: var(--grigio-chiaro); }
.scelta-testata input:checked + .scelta-testata-corpo { border-color: var(--testata); box-shadow: 0 0 0 2px var(--testata); background: color-mix(in srgb, var(--testata) 6%, #fff); }
.scelta-testata input:focus-visible + .scelta-testata-corpo, .scelta-formato input:focus-visible + .scelta-formato-corpo { outline: 3px solid var(--blu); outline-offset: 2px; }

/* Formato: tre righe con prezzo e spiegazione */
.scelte-formati { display: grid; gap: var(--s-2); }
.scelta-formato { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.scelta-formato-corpo {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: 2px; align-items: baseline;
  padding: var(--s-3) var(--s-4); background: var(--bianco); border: 1.5px solid var(--linea-forte); border-radius: var(--raggio);
  transition: border-color var(--durata), box-shadow var(--durata), background var(--durata);
}
.scelta-formato-corpo::before { content: ''; grid-column: 1; grid-row: 1; align-self: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linea-forte); background: var(--bianco); box-sizing: border-box; transition: border-color var(--durata), box-shadow var(--durata); }
.scelta-formato-nome { grid-column: 2; font-family: var(--font-titoli); font-weight: 650; font-size: 1.12rem; line-height: 1.2; }
.scelta-formato-prezzo { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
.scelta-formato-prezzo b { font-family: var(--font-titoli); font-size: 1.3rem; }
.scelta-formato-prezzo s { color: var(--grigio); font-size: var(--t-xs); margin-left: 4px; }
.scelta-formato-prezzo small { color: var(--grigio); font-size: var(--t-xs); }
.scelta-formato-riga { grid-column: 2 / span 2; font-size: var(--t-xs); color: var(--inchiostro-2); line-height: 1.45; }
.scelta-formato-lancio { grid-column: 2 / span 2; font-size: var(--t-xs); font-weight: 700; color: var(--accento-scuro); }
.scelta-formato:hover .scelta-formato-corpo { border-color: var(--grigio-chiaro); }
.scelta-formato input:checked + .scelta-formato-corpo { border-color: var(--testata); box-shadow: 0 0 0 2px var(--testata); background: color-mix(in srgb, var(--testata) 5%, #fff); }
.scelta-formato input:checked + .scelta-formato-corpo::before { border-color: var(--testata); box-shadow: inset 0 0 0 4px var(--bianco), inset 0 0 0 10px var(--testata); }
@media (max-width: 380px) { .scelta-formato-corpo { padding-inline: var(--s-3); column-gap: var(--s-2); } .scelta-formato-prezzo b { font-size: 1.15rem; } }

/* Giorno di uscita */
.selettore-data {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4);
  background: var(--bianco); border: 1px solid var(--linea-forte); border-radius: var(--raggio-piccolo);
  font: 600 1rem / 1.3 var(--font-testo); color: var(--inchiostro); text-align: left; cursor: pointer;
  transition: border-color var(--durata), box-shadow var(--durata);
}
.selettore-data .icona { color: var(--testata); }
.selettore-data span { flex: 1; min-width: 0; }
.selettore-data::after { content: '\25BE'; color: var(--grigio); transition: transform var(--durata); }
.selettore-data[aria-expanded='true'] { border-color: var(--inchiostro); }
.selettore-data[aria-expanded='true']::after { transform: rotate(180deg); }
.selettore-data:hover:not(:disabled) { border-color: var(--grigio-chiaro); }
.selettore-data:disabled { background: var(--carta-2); color: var(--grigio); font-weight: 500; cursor: not-allowed; }
.selettore-data:disabled .icona { color: var(--grigio-chiaro); }
.selettore-data[aria-invalid='true'] { border-color: var(--rosso); }
.campo-data .aiuto { font-size: var(--t-xs); line-height: 1.5; }
.campo-data .aiuto strong { color: var(--giallo); }
.calendario-modulo { margin-top: var(--s-2); background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: var(--s-3); }
@media (min-width: 600px) { .calendario-modulo { padding: var(--s-4); } }
.calendario-mese { margin: 0; font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 600; text-transform: capitalize; }
.calendario { gap: 5px; }
.calendario-nomi { margin-bottom: 4px; }
.giorno { min-height: 50px; border: 1px solid var(--linea); gap: 2px; transition: transform var(--durata), border-color var(--durata), background var(--durata); }
.giorno span { font-size: 1.02rem; }
.giorno small { margin-top: 0; font-size: 0.6rem; white-space: nowrap; min-height: 0.75rem; }
.giorno-libero { border-color: #bfe3cd; background: #f6fcf8; }
.giorno-libero:hover { border-color: var(--testata); }
.giorno-pieno small { color: var(--rosso); }
.giorno:disabled { background: transparent; border-color: transparent; text-decoration: none; }
.giorno:disabled span { color: #b8b3a8; }
.giorno-pieno:disabled span { text-decoration: line-through; }
.giorno[aria-pressed='true'] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--testata) 25%, transparent); }
.calendario-attesa { grid-column: 1 / -1; text-align: center; color: var(--grigio); padding: var(--s-6) 0; margin: 0; min-height: 240px; }
@media (max-width: 380px) { .calendario { gap: 3px; } .giorno small { display: none; } .giorno { min-height: 42px; } }
.legenda { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-xs); color: var(--grigio); }
.legenda li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.legenda-segno { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--linea-forte); }
.legenda-libero { background: #f6fcf8; border-color: #8fd0a9; }
.legenda-pieno { background: var(--rosso-tenue); border-color: #f4c7c3; }
.legenda-no { background: transparent; border-style: dashed; }

/* Foto */
.caricamento-foto { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-4); transition: border-color var(--durata), background var(--durata), opacity var(--durata); }
.caricamento-foto p { margin: 0; }
.caricamento-foto.completa { padding-block: var(--s-3); background: var(--carta); }
.caricamento-foto.completa .bottone-caricamento, .caricamento-foto.spenta .bottone-caricamento { opacity: 0.45; cursor: not-allowed; }
.caricamento-foto.in-corso { border-color: var(--testata); }
.bottone-caricamento { position: relative; }
.bottone-caricamento:focus-within { outline: 3px solid var(--blu); outline-offset: 2px; }
.caricamento-stato { font-size: var(--t-s); font-weight: 600; color: var(--inchiostro-2); }
.caricamento-stato:empty { display: none; }
.miniature { list-style: none; padding: 0; margin: var(--s-3) 0 0; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.miniature:empty { display: none; }
.miniature li { position: relative; margin: 0; }
.miniature img { aspect-ratio: 4 / 3; border: 1px solid var(--linea); background: var(--carta-2); }
.miniatura-elimina { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgb(22 24 29 / 0.8); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.miniatura-elimina:hover { background: var(--rosso); }
.miniatura-apertura { position: absolute; left: 6px; bottom: 6px; background: var(--testata); color: var(--testata-testo); }

/* Controllo preventivo */
.ordina .controllo p { margin: 0; }
.ordina .controllo p + p { margin-top: var(--s-2); }
.controllo-titolo { font-weight: 700; }
.controllo .azioni { margin-top: var(--s-3); gap: var(--s-4); }
.controllo:focus { outline: none; box-shadow: 0 0 0 3px rgb(31 95 191 / 0.25); }

/* Il tuo ordine */
@media (min-width: 1000px) {
  .ordina-lato { position: sticky; top: var(--s-4); max-height: calc(100vh - 2 * var(--s-4)); overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; scrollbar-width: thin; }
}
.riquadro-ordine { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); background: var(--bianco); border: 1px solid var(--linea); border-top: 5px solid var(--testata); border-radius: 14px; box-shadow: var(--ombra); padding: var(--s-5) var(--s-4); }
@media (min-width: 480px) { .riquadro-ordine { padding: var(--s-5); } }
.riquadro-ordine > * { margin: 0; min-width: 0; }
.riquadro-titolo { font-size: var(--t-l); }
.riquadro-testata { display: grid; gap: 2px; font-size: var(--t-s); }
.riquadro-testata .mt { font-size: 1.55rem; }
.riquadro-zona { font-size: var(--t-xs); color: var(--grigio); }
.riepilogo-voci { display: grid; font-size: var(--t-s); }
.riepilogo-voci > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--linea); }
.riepilogo-voci > div:first-child { border-top: 1px solid var(--linea); }
.riepilogo-voci dt { color: var(--grigio); flex: none; }
.riepilogo-voci dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.tabella-riepilogo th small.lancio { display: block; font-weight: 600; color: var(--accento-scuro); margin-top: 2px; }
.tabella-riepilogo .totale td { font-family: var(--font-titoli); font-size: 1.6rem; line-height: 1.1; }
.dicitura { margin: calc(-1 * var(--s-2)) 0 0; line-height: 1.45; }
.riquadro-ordine .spunta { font-size: var(--t-xs); }
.riquadro-ordine .campo { gap: var(--s-1); }
.clausole { margin: var(--s-1) 0 0 calc(22px + var(--s-3)); font-size: var(--t-xs); color: var(--inchiostro-2); }
.clausole summary { cursor: pointer; font-weight: 650; color: var(--blu); }
.clausole ul { margin: var(--s-2) 0; padding-left: 1.1em; }
.clausole p { margin: 0; }
.stato-invio { font-weight: 600; font-size: var(--t-s); color: var(--inchiostro-2); }
.stato-invio:empty { display: none; }
.bottone-paga { min-height: 60px; font-size: 1.08rem; box-shadow: 0 10px 24px rgb(228 71 43 / 0.28); }
.bottone-paga[disabled] { box-shadow: none; }
.bottone-paga.in-corso[disabled] { opacity: 0.85; cursor: progress; }
.bottone-paga.in-corso .icona { display: none; }
.bottone-paga.in-corso::before { content: ''; width: 1.1em; height: 1.1em; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira 0.8s linear infinite; }
.riquadro-nota { text-align: center; }
.anteprima-piccola { border-top: 1px solid var(--linea); padding-top: var(--s-3); }
.anteprima-piccola summary { cursor: pointer; display: flex; align-items: center; gap: var(--s-2); font-weight: 650; font-size: var(--t-s); list-style: none; }
.anteprima-piccola summary::-webkit-details-marker { display: none; }
.anteprima-piccola summary::after { content: '\25BE'; margin-left: auto; color: var(--grigio); transition: transform var(--durata); }
.anteprima-piccola[open] summary::after { transform: rotate(180deg); }
.anteprima-corpo { margin-top: var(--s-3); min-width: 0; overflow: hidden; border-radius: 14px; }
.anteprima-corpo .giornale { box-shadow: var(--ombra); }
.anteprima-corpo .giornale-card { grid-template-columns: 1fr; }
.anteprima-corpo .giornale-card-foto { aspect-ratio: 16 / 9; }
.salvataggio { font-size: var(--t-xs); color: var(--grigio); text-align: center; }
.salvataggio:empty { display: none; }

/* Piede essenziale */
.ordina-piede { border-top: 1px solid var(--linea); padding-block: var(--s-5); font-size: var(--t-xs); color: var(--grigio); background: var(--bianco); }
.ordina-piede p { margin: 0 0 var(--s-1); }