/* REVIVA — Prenota
   La pagina dove si fissa un incontro con un professionista.

   Tre passi, uno alla volta: quando · come · chi sei. Il secondo passo non
   esiste finche' non c'e' il primo, perche' le modalita' disponibili
   dipendono dal giorno — e chiedere tutto insieme e' il modo piu' rapido di
   far chiudere la pagina.

   Il vetro e' quello dell'Atelier: fondo scuro, sfocatura dietro, cornice in
   sfumatura oro→argento. I quattro colori dicono il canale e nient'altro:
   argento telefono, verde messaggio, terra sul posto, oro bottega.
   ------------------------------------------------------------------------- */

.prenota-page {
  --pr-fondo: #0a0a0b;
  --pr-testo: #f2eee7;
  --pr-tenue: rgba(242, 238, 231, .62);
  --pr-fioco: rgba(242, 238, 231, .38);
  --pr-oro: #d3a825;
  --pr-terra: #c47a48;
  --pr-verde: #66b786;
  --pr-argento: #c6ccd4;
  --pr-cornice: linear-gradient(125deg, rgba(211,168,37,.85) 0%, rgba(211,168,37,.26) 28%,
                rgba(255,255,255,.12) 50%, rgba(236,238,240,.34) 72%, rgba(236,238,240,.8) 100%);
  background: var(--pr-fondo);
  color: var(--pr-testo);
}

.prenota-fondale {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.prenota-fondale i {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.prenota-fondale i:nth-child(1) {
  width: 580px; height: 580px; left: -160px; top: -180px;
  background: radial-gradient(circle at 35% 35%, rgba(196,122,72,.26), transparent 68%);
}

.prenota-fondale i:nth-child(2) {
  width: 640px; height: 640px; right: -220px; top: -60px;
  background: radial-gradient(circle at 40% 40%, rgba(211,168,37,.16), transparent 66%);
}

.prenota-main {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

/* ── L'avviso sui dati dimostrativi ──────────────────────────────────────── */
.prenota-avviso {
  margin: 0 0 26px;
  padding: 11px 16px;
  border: 1px dashed rgba(242, 238, 231, .22);
  border-radius: 10px;
  color: var(--pr-fioco);
  font: 500 11px/1.5 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .06em;
}

.prenota-avviso[hidden] { display: none; }

/* ── Chi, e che cosa si sta chiedendo ────────────────────────────────────── */
.prenota-testa {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 30px;
}

.prenota-testa > div { min-width: 0; flex: 1 1 320px; }

.prenota-kicker {
  margin: 0 0 8px;
  color: var(--pr-fioco);
  font: 600 10px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.prenota-testa h1 {
  margin: 0 0 6px;
  font: 400 clamp(30px, 4vw, 46px)/1.04 var(--reviva-display, Georgia, serif);
  letter-spacing: -.02em;
}

.prenota-testa p {
  margin: 0;
  max-width: 56ch;
  color: var(--pr-tenue);
  font-size: 14.5px;
  line-height: 1.55;
}

.prenota-cambia {
  flex: 0 0 auto;
  align-self: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--pr-tenue);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.prenota-cambia:hover { border-color: rgba(255, 255, 255, .34); color: var(--pr-testo); }

/* ── I passi ─────────────────────────────────────────────────────────────── */
.prenota-passi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.prenota-passi li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--pr-fioco);
  font: 500 11.5px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.prenota-passi b {
  width: 21px; height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  font: 600 10px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
}

.prenota-passi li.fatto { color: var(--pr-tenue); }
.prenota-passi li.fatto b { border-color: rgba(102, 183, 134, .5); color: var(--pr-verde); }
.prenota-passi li.ora { color: var(--pr-testo); }
.prenota-passi li.ora b { border-color: rgba(211, 168, 37, .6); background: rgba(211, 168, 37, .16); color: var(--pr-oro); }

/* ── Il vetro, una volta sola ────────────────────────────────────────────── */
.vetro {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
  padding: 24px 26px;
  background: linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,.014) 38%, rgba(0,0,0,.24));
  background-color: rgba(8, 10, 11, .5);
  backdrop-filter: blur(24px) saturate(155%);
  box-shadow: 0 26px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);
}

.vetro::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--pr-cornice);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* La barra in alto e' `sticky`: senza questo margine di rispetto lo scorrimento
   automatico porterebbe il titolo della sezione esattamente sotto la barra, e
   chi arriva non vede la domanda a cui deve rispondere. 84px e' l'altezza
   della barra, piu' aria. */
.prenota-sezione {
  margin: 0 0 20px;
  scroll-margin-top: 104px;
}

@media (max-width: 880px) {
  .prenota-sezione { scroll-margin-top: 84px; }
}
.prenota-sezione[hidden] { display: none; }

.prenota-sezione > h2 {
  margin: 0 0 4px;
  font: 400 clamp(20px, 2.2vw, 25px)/1.15 var(--reviva-display, Georgia, serif);
}

.prenota-sezione > h2 + p {
  margin: 0 0 18px;
  max-width: 58ch;
  color: var(--pr-tenue);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ── 1 · Il calendario ───────────────────────────────────────────────────── */
.calendario-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.calendario-mese {
  font: 500 15.5px/1 var(--reviva-display, Georgia, serif);
  letter-spacing: .01em;
}

.calendario-nav { display: flex; gap: 7px; }

.calendario-nav button {
  min-width: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: var(--pr-tenue);
  font: 500 11px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .08em;
  cursor: pointer;
}

.calendario-nav button:hover:not(:disabled) { border-color: rgba(255,255,255,.32); color: var(--pr-testo); }
.calendario-nav button:disabled { opacity: .3; cursor: not-allowed; }

.calendario-griglia {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-items: center;
  /* Righe piu' distanti delle colonne: sotto ogni tondo deve poterci stare
     il punto di «oggi» senza toccare la riga successiva. */
  gap: 26px 6px;
}

.calendario-intestazione {
  padding: 0 0 6px;
  text-align: center;
  color: var(--pr-fioco);
  font: 600 9.5px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* I giorni sono tondi di vetro.

   La forma: un cerchio piccolo dentro una cella quadrata. Il rettangolo
   grande faceva sembrare il calendario una tabella di dati; il tondo e' la
   pastiglia che si preme, e occupa meno spazio a parita' di leggibilita'.

   Il vetro: fondo quasi trasparente (il colore si vede attraverso, non
   sopra), sfocatura dietro, un filo di luce in alto e un anello sottile
   della tinta. La tinta sta nell'anello, non nel riempimento — e' cosi' che
   il vetro colorato si comporta davvero.

   Verde  = si puo' chiedere tutto quello che offre.
   Giallo = solo una parte.
   Rosso  = quel giorno lavora, ma e' tutto occupato.
   Spento = non lavora. Sabato e domenica lo sono finche' non li apre lui.
   ------------------------------------------------------------------------ */

.giorno {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 52px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(242, 238, 231, .88);
  font: 500 15px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
  cursor: pointer;
  transition: background-color .22s, box-shadow .22s, transform .22s, color .22s;
}

/* Il riflesso sul vetro: una mezzaluna chiara in alto, non un velo su tutto. */
.giorno.libero::before,
.giorno.parziale::before,
.giorno.pieno::before,
.giorno.scelto::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(168deg, rgba(255,255,255,.28), rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 62%);
  pointer-events: none;
}

.giorno.libero,
.giorno.parziale,
.giorno.pieno {
  backdrop-filter: blur(14px) saturate(180%);
}

.giorno.libero {
  background-color: rgba(126, 219, 163, .11);
  box-shadow: inset 0 0 0 1px rgba(126, 219, 163, .55), inset 0 1px 0 rgba(255,255,255,.3);
  color: #cdf3dd;
}

.giorno.libero:hover {
  background-color: rgba(126, 219, 163, .2);
  box-shadow: inset 0 0 0 1px rgba(126, 219, 163, .9), inset 0 1px 0 rgba(255,255,255,.42),
              0 0 16px rgba(102, 183, 134, .35);
  color: #eafaf0;
  transform: translateY(-1px);
}

.giorno.parziale {
  background-color: rgba(240, 199, 74, .11);
  box-shadow: inset 0 0 0 1px rgba(240, 199, 74, .55), inset 0 1px 0 rgba(255,255,255,.3);
  color: #f7e8bd;
}

.giorno.parziale:hover {
  background-color: rgba(240, 199, 74, .2);
  box-shadow: inset 0 0 0 1px rgba(240, 199, 74, .9), inset 0 1px 0 rgba(255,255,255,.42),
              0 0 16px rgba(211, 168, 37, .35);
  color: #fdf5df;
  transform: translateY(-1px);
}

/* Pieno: l'anello rosso acceso. Non si preme, ma si vede benissimo — e'
   l'unico stato che vale la pena di guardare due volte, perche' domani
   potrebbe essersi liberato. */
.giorno.pieno {
  background-color: rgba(226, 90, 90, .1);
  box-shadow: inset 0 0 0 1px rgba(233, 104, 104, .75), inset 0 1px 0 rgba(255,255,255,.24),
              0 0 14px rgba(226, 90, 90, .3);
  color: #f0b8b8;
  cursor: not-allowed;
}

.giorno.vuoto { cursor: default; box-shadow: none; background: transparent; }

.giorno.chiuso {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: rgba(242, 238, 231, .18);
  cursor: not-allowed;
}

/* Il giorno scelto: lo stesso vetro, ma acceso da dentro. */
.giorno.scelto,
.giorno.scelto:hover {
  background-color: rgba(246, 205, 74, .88);
  box-shadow: inset 0 0 0 1px rgba(255, 231, 150, .95), inset 0 1px 0 rgba(255,255,255,.7),
              0 0 26px rgba(211, 168, 37, .5);
  color: #1a1509;
  transform: none;
}

/* Il punto sotto il tondo: ce l'hanno tutti i giorni che si possono
   guardare, del colore del loro stato. E' il segno che si legge da lontano —
   scorrendo il mese si vede la settimana buona senza mettere a fuoco i
   numeri. I giorni in cui non lavora non hanno punto: non c'e' niente da
   dire su di loro.

   Sta a 12px dal bordo, staccato abbastanza da non sembrare una sbavatura
   del cerchio, e ha un alone perche' a cinque pixel un punto pieno contro il
   fondo scuro si perde. */
.giorno.libero::after,
.giorno.parziale::after,
.giorno.pieno::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Oggi non ha un punto piu' grosso.
   Avevo provato a dire due cose con lo stesso segno — il colore lo stato, la
   misura che e' adesso — e il risultato e' che il punto di oggi sembrava un
   rosso piu' luminoso degli altri. I punti sono una scala: se uno cambia
   misura, la scala non si legge piu'. Oggi si segna sul numero. */
.giorno.oggi {
  font-weight: 700;
}

/* Sul giorno scelto il testo diventa scuro: li' il punto sparirebbe. */
.giorno.scelto::after {
  background: var(--pr-oro);
  box-shadow: 0 0 11px rgba(246, 205, 74, .95);
}

/* La legenda: tre parole, altrimenti i colori vanno interpretati. */
.calendario-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.calendario-legenda li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pr-fioco);
  font-size: 11.5px;
}

.calendario-legenda i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(242, 238, 231, .16);
}

.calendario-legenda .tutto {
  background: rgba(126, 219, 163, .12);
  box-shadow: inset 0 0 0 1px rgba(126, 219, 163, .75), inset 0 1px 0 rgba(255,255,255,.3);
}

.calendario-legenda .parte {
  background: rgba(240, 199, 74, .12);
  box-shadow: inset 0 0 0 1px rgba(240, 199, 74, .75), inset 0 1px 0 rgba(255,255,255,.3);
}

.calendario-legenda .occupato {
  background: rgba(226, 90, 90, .1);
  box-shadow: inset 0 0 0 1px rgba(233, 104, 104, .85), inset 0 1px 0 rgba(255,255,255,.26);
}

/* ── 2 · Le modalita', con colore e icona ────────────────────────────────── */
.modalita {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}

.modalita button {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 15px 17px;
  border: 0;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--pr-testo);
  background: linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 42%, rgba(0,0,0,.2));
  background-color: rgba(8, 10, 11, .4);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 26px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .25s;
}

.modalita button:hover { transform: translateY(-2px); background-color: rgba(8, 10, 11, .26); }

.modalita button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--tinta-cornice, var(--pr-cornice));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.modalita button[aria-pressed="true"] { background-color: rgba(211, 168, 37, .12); }

/* Una modalita' che quel giorno non c'e' resta in elenco e lo dice. Sparire
   sarebbe piu' pulito e piu' bugiardo: il cliente leggerebbe «non lo fa». */
.modalita button.spenta {
  cursor: not-allowed;
  box-shadow: none;
  background: rgba(255, 255, 255, .016);
  backdrop-filter: none;
}

.modalita button.spenta:hover { transform: none; background-color: transparent; }
.modalita button.spenta::before { background: rgba(255, 255, 255, .08); }
.modalita button.spenta .modalita-icona { background: rgba(255, 255, 255, .05); color: rgba(242, 238, 231, .26); }
.modalita button.spenta .modalita-testo strong { color: rgba(242, 238, 231, .4); }
.modalita button.spenta .modalita-testo small { color: rgba(242, 238, 231, .28); }

.modalita-prezzo.non-disponibile { color: rgba(242, 238, 231, .3); }

.modalita-icona {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tinta-fondo, rgba(255,255,255,.08));
  color: var(--tinta, #fff);
}

.modalita-icona svg { width: 19px; height: 19px; }

.modalita-testo { min-width: 0; }

.modalita-testo strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 3px;
}

.modalita-testo small {
  display: block;
  color: var(--pr-tenue);
  font-size: 12.5px;
  line-height: 1.45;
}

.modalita-prezzo {
  display: block;
  margin-top: 8px;
  color: var(--pr-oro);
  font: 600 10px/1.3 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .07em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.modalita-prezzo.gratis { color: var(--pr-verde); }
.modalita-prezzo.concordare { color: var(--pr-fioco); }

.modalita-prezzo em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-weight: 400;
  font-size: 9px;
  color: var(--pr-fioco);
}

/* I quattro canali. Il colore non decora: dice per quale strada avviene. */
.canale-telefono  { --tinta: var(--pr-argento); --tinta-fondo: rgba(198,204,212,.16); }
.canale-messaggio { --tinta: var(--pr-verde);   --tinta-fondo: rgba(102,183,134,.16); }
.canale-posto     { --tinta: var(--pr-terra);   --tinta-fondo: rgba(196,122,72,.2); }
.canale-bottega   { --tinta: var(--pr-oro);     --tinta-fondo: rgba(211,168,37,.17); }

/* ── 3 · Gli orari ───────────────────────────────────────────────────────── */
.orari {
  scroll-margin-top: 120px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.orari button {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: var(--pr-tenue);
  font: 500 13px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
  cursor: pointer;
}

.orari button:hover { border-color: rgba(255,255,255,.34); color: var(--pr-testo); }

.orari button[aria-pressed="true"] {
  border-color: rgba(211, 168, 37, .6);
  background: rgba(211, 168, 37, .14);
  color: var(--pr-testo);
}

.orari-vuoto {
  margin: 14px 0 0;
  color: var(--pr-fioco);
  font-size: 13px;
}

/* ── Il conto ────────────────────────────────────────────────────────────── */
.conto {
  margin: 18px 0 0;
  padding: 15px 17px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .028);
}

.conto > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--pr-tenue);
}

.conto > div[hidden] { display: none; }

.conto b { font-weight: 500; color: rgba(242, 238, 231, .92); }

.conto-durata { display: flex; gap: 6px; flex-wrap: wrap; }

.conto-durata button {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: var(--pr-tenue);
  font: 500 11.5px/1 inherit;
  cursor: pointer;
}

.conto-durata button[aria-pressed="true"] {
  border-color: rgba(211, 168, 37, .55);
  background: rgba(211, 168, 37, .14);
  color: var(--pr-testo);
}

.conto-totale {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.conto.solo-costo .conto-totale { margin-top: 0; padding-top: 0; border-top: 0; }
.conto-totale b { color: var(--pr-oro); font: 600 16px/1 var(--reviva-mono, 'IBM Plex Mono', monospace); }

/* ── Le opere dichiarate ─────────────────────────────────────────────────── */
.opere {
  margin: 0 0 20px;
  padding: 16px 17px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 14px;
}

.opere legend {
  padding: 0 8px;
  margin: 0;
  color: rgba(242, 238, 231, .75);
  font: 400 15px/1 var(--reviva-display, Georgia, serif);
  letter-spacing: 0;
  text-transform: none;
}

.opere-nota {
  margin: 0 0 14px;
  max-width: 62ch;
  color: var(--pr-fioco);
  font-size: 12.5px;
  line-height: 1.5;
}

.opera {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}

.opera select {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .03);
  color: var(--pr-testo);
  font: 400 14px/1.45 inherit;
}

.opera-togli {
  width: 42px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: transparent;
  color: var(--pr-fioco);
  font-size: 18px;
  cursor: pointer;
}

.opera-togli:hover { border-color: rgba(226, 90, 90, .6); color: #f0b8b8; }

.opere-aggiungi {
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, .2);
  background: transparent;
  color: var(--pr-tenue);
  font: 500 13px/1 inherit;
  cursor: pointer;
}

.opere-aggiungi:hover { border-color: rgba(211, 168, 37, .55); color: var(--pr-testo); }
.opere-aggiungi[hidden] { display: none; }

@media (max-width: 720px) {
  .opera {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .opera .campo:nth-child(3) { grid-column: 1 / -1; }
}

/* Sotto i 380px due colonne non ci stanno: la riga diventa una colonna sola,
   con il pulsante per togliere allineato a destra sotto i campi. */
@media (max-width: 380px) {
  .opera { grid-template-columns: minmax(0, 1fr); }
  .opera .campo:nth-child(3) { grid-column: auto; }
  .opera-togli { justify-self: end; height: 38px; }
}

/* ── Il modulo ───────────────────────────────────────────────────────────── */
.campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 20px;
  margin-bottom: 18px;
}

.campo { display: grid; gap: 7px; min-width: 0; }
.campo.largo { grid-column: 1 / -1; }

.campo > span {
  color: var(--pr-fioco);
  font: 600 9.5px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .03);
  color: var(--pr-testo);
  font: 400 14px/1.45 inherit;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
  outline: 0;
  border-color: rgba(211, 168, 37, .55);
  background: rgba(255, 255, 255, .05);
}

.campo input::placeholder,
.campo textarea::placeholder { color: rgba(242, 238, 231, .28); }

.prenota-invio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 6px;
}

.prenota-invio button {
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(211, 168, 37, .6);
  background: rgba(211, 168, 37, .16);
  color: var(--pr-testo);
  font: 600 11.5px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.prenota-invio button:hover { background: rgba(211, 168, 37, .26); }

.prenota-invio p {
  flex: 1 1 260px;
  margin: 0;
  min-width: 0;
  color: var(--pr-fioco);
  font-size: 12.5px;
  line-height: 1.5;
}

.prenota-esito {
  margin: 18px 0 0;
  padding: 15px 17px;
  border-radius: 13px;
  border: 1px solid rgba(102, 183, 134, .35);
  background: rgba(102, 183, 134, .1);
  color: rgba(242, 238, 231, .9);
  font-size: 13.5px;
  line-height: 1.55;
}

.prenota-esito[hidden] { display: none; }

/* ── Larghezze strette ───────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .prenota-main { padding: 30px 16px 72px; }
  .vetro { padding: 20px 17px; border-radius: 18px; }
  .giorno { max-width: 40px; font-size: 13px; }
  .calendario-griglia { gap: 24px 4px; }
  .modalita { grid-template-columns: minmax(0, 1fr); }
}

/* ── L'indirizzo, a pezzi ────────────────────────────────────────────────── */
/* Le larghezze dicono che cosa aspettarsi: il CAP e' cinque cifre, la
   provincia due lettere. Un campo largo quanto la via inviterebbe a
   scriverci «Napoli» dentro. */
.campi.indirizzo {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: -2px;
}

.campo > span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: .02em;
  color: rgba(242, 238, 231, .26);
}

/* Una riga che dice, sopra i campi, se l'indirizzo serve davvero o e' solo
   un favore che fai al professionista. Cambia da sola col canale scelto. */
.indirizzo-nota {
  grid-column: span 12;
  margin: 0;
  color: rgba(242, 238, 231, .5);
  font-size: 12.5px;
  line-height: 1.5;
}

.indirizzo-nota b {
  color: rgba(242, 238, 231, .78);
  font-weight: 600;
}

.indirizzo .campo.largo { grid-column: span 12; }
.indirizzo-via { grid-column: span 5; }
.indirizzo-cap { grid-column: span 2; }
.indirizzo-citta { grid-column: span 3; }
.indirizzo-prov { grid-column: span 2; }

.indirizzo-cap input,
.indirizzo-prov input {
  font-family: var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .06em;
}

.indirizzo-prov input { text-transform: uppercase; }

@media (max-width: 900px) {
  .indirizzo-via { grid-column: span 12; }
  .indirizzo-cap { grid-column: span 4; }
  .indirizzo-citta { grid-column: span 5; }
  .indirizzo-prov { grid-column: span 3; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   La carta che si gira

   Mandata la richiesta, il calendario non serve piu': la scheda si volta e
   dietro c'e' il riepilogo. E' la stessa carta, non un messaggio che compare
   altrove — e questo dice da solo che quella cosa li' e' diventata questa.

   Le due facce stanno nella stessa cella di griglia: la carta e' alta quanto
   la piu' alta delle due, e nessuna delle due esce. Finita la rotazione la
   faccia davanti si toglie di mezzo e la carta si stringe sul riepilogo.
   ───────────────────────────────────────────────────────────────────────── */

.carta { perspective: 1800px; }

.carta-facce {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.carta-facce > .faccia {
  grid-area: 1 / 1;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.faccia.retro { transform: rotateY(180deg); }

.carta-facce.girata { transform: rotateY(180deg); }
.carta-facce.girata > .fronte[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .carta-facce { transition: none; }
}

.riepilogo-voci {
  margin: 18px 0 0;
  display: grid;
  gap: 12px 22px;
  grid-template-columns: max-content minmax(0, 1fr);
}

.riepilogo-voci dt {
  color: var(--pr-fioco);
  font: 600 9.5px/1.5 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.riepilogo-voci dd {
  margin: 0;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.riepilogo-voci dd b { font-weight: 500; color: var(--pr-oro); }
.riepilogo-voci dd small { display: block; margin-top: 2px; color: var(--pr-fioco); font-size: 12px; }

.riepilogo-poi {
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(102, 183, 134, .3);
  background: rgba(102, 183, 134, .09);
  font-size: 14px;
  line-height: 1.55;
}

.riepilogo-azioni {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 20px;
}

.riepilogo-azioni button {
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: transparent;
  color: var(--pr-tenue);
  font: 500 13px/1 inherit;
  cursor: pointer;
}

.riepilogo-azioni button:hover { border-color: rgba(255, 255, 255, .38); color: var(--pr-testo); }

.riepilogo-nota {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--pr-fioco);
  font: 500 10.5px/1.5 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .05em;
}

@media (max-width: 620px) {
  .riepilogo-voci { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .riepilogo-voci dd { margin-bottom: 10px; }
}


/* ── Il riepilogo: si controlla, poi si manda ────────────────────────────── */

/* Quello che manca non e' un errore: e' giallo, non rosso. Sono cose che si
   possono dire dopo, e dirlo qui evita che il committente creda di aver
   scritto qualcosa che non ha scritto. */
.riepilogo-manca {
  margin: 18px 0 0;
  padding: 12px 15px;
  border-radius: 11px;
  border: 1px solid rgba(240, 199, 74, .34);
  background: rgba(240, 199, 74, .08);
  color: rgba(242, 238, 231, .82);
  font-size: 13.5px;
  line-height: 1.5;
}

.riepilogo-manca[hidden] { display: none; }
.riepilogo-manca b { font-weight: 500; color: #f0c74a; }

.riepilogo-azioni[hidden] { display: none; }

.riepilogo-azioni .principale {
  border-color: rgba(211, 168, 37, .6);
  background: rgba(211, 168, 37, .16);
  color: var(--pr-testo);
  font-weight: 600;
  letter-spacing: .04em;
}

.riepilogo-azioni .principale:hover { background: rgba(211, 168, 37, .28); }

.riepilogo-via {
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--pr-tenue);
  font: 500 13px/1 inherit;
  text-decoration: none;
}

.riepilogo-via:hover { border-color: rgba(255, 255, 255, .38); color: var(--pr-testo); }

/* Le opere: una per riga, con quello che il committente ha detto di ognuna.
   Elencarne solo i nomi non gli permette di accorgersi che la descrizione
   l'ha messa sulla scultura sbagliata. */
.riepilogo-opere { margin: 0; padding: 0; list-style: none; }
.riepilogo-opere li { margin-bottom: 8px; }
.riepilogo-opere li:last-child { margin-bottom: 0; }

.riepilogo-opere em {
  font-style: normal;
  margin-right: 8px;
  color: var(--pr-fioco);
  font: 600 9px/1 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.riepilogo-opere small { display: block; margin-top: 2px; color: var(--pr-fioco); font-size: 12px; }

.riepilogo-nota {
  flex: none;
  margin: 14px 0 0;
  min-width: 0;
  color: var(--pr-fioco);
  font: 500 10.5px/1.5 var(--reviva-mono, 'IBM Plex Mono', monospace);
  letter-spacing: .05em;
}

.riepilogo-nota:empty { display: none; }