/* Il tema dei portali: morbido, pulito, senza bordi.

   Superfici bianche su un fondo appena tinto, ombre leggere al posto dei
   bordi, angoli ampi, bottoni a pillola. Chiaro e scuro: il chiaro è il
   sito, lo scuro segue la preferenza del sistema o l'interruttore in
   testata (`html[data-schema]`). Un colore per portale, verde-acqua e
   ambra, in due versioni ciascuno: il chiaro deve reggere il contrasto su
   bianco, lo scuro su carbone.

   I token stanno tutti qui in cima: le regole sotto non conoscono un
   esadecimale. */

:root {
  --ground: #f6f7f7; --card: #ffffff; --ink: #1a1f1e; --muted: #66716e;
  --line: #e6ebe9; --field: #eef1f0; --accent: #1f5eff; --accent-ink: #ffffff; --soft: #e6edff;
  --shadow: 0 1px 2px rgba(20, 30, 28, .04), 0 6px 20px rgba(20, 30, 28, .06);
  --shadow-su: 0 2px 4px rgba(20, 30, 28, .06), 0 12px 28px rgba(20, 30, 28, .10);
  --ok: #1a7f4b; --male: #c0392b; --attenzione: #b26a00;
  --r: 16px; --r-piccolo: 12px; --r-pillola: 999px;
  --bg: var(--card);
}
[data-theme="appuntamento"] { --ground: #f5f8f7; --accent: #0f7b6c; --soft: #e3f2ee; --field: #eef2f1; --line: #e6ebe9; }
[data-theme="prenotazione"] { --ground: #faf8f5; --ink: #1f1a15; --muted: #73695f; --accent: #b45309; --soft: #fbeedd; --field: #f3eee7; --line: #ebe5dd;
                              --shadow: 0 1px 2px rgba(40, 30, 20, .04), 0 6px 20px rgba(40, 30, 20, .06);
                              --shadow-su: 0 2px 4px rgba(40, 30, 20, .06), 0 12px 28px rgba(40, 30, 20, .10); }

/* Lo scuro: segue il sistema, salvo scelta esplicita; e la scelta esplicita
   vince nei due versi. Carbone tinto, non nero: il nero puro fa vibrare il
   testo bianco. */
@media (prefers-color-scheme: dark) {
  html:not([data-schema="light"]) :root, html:not([data-schema="light"]) {
    --ground: #12161a; --card: #1a2025; --ink: #e8edec; --muted: #97a3a0; --line: #273034; --field: #212a2e;
    --accent: #6f9bff; --accent-ink: #0d1a2b; --soft: #1b2740;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-su: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .45);
    --ok: #4fd08a; --male: #ff7b6b; --attenzione: #f5b041;
  }
  html:not([data-schema="light"]) [data-theme="appuntamento"] { --ground: #111716; --card: #182120; --ink: #e8eeec; --muted: #97a5a1; --line: #25302e; --field: #1f2a28; --accent: #3ddcbb; --accent-ink: #0d1a17; --soft: #173029; }
  html:not([data-schema="light"]) [data-theme="prenotazione"] { --ground: #171310; --card: #1f1a16; --ink: #efe9e2; --muted: #a89c8f; --line: #332b24; --field: #2a231d; --accent: #f5b041; --accent-ink: #1a1208; --soft: #3a2a10; }
}
html[data-schema="dark"] {
  --ground: #12161a; --card: #1a2025; --ink: #e8edec; --muted: #97a3a0; --line: #273034; --field: #212a2e;
  --accent: #6f9bff; --accent-ink: #0d1a2b; --soft: #1b2740;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-su: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .45);
  --ok: #4fd08a; --male: #ff7b6b; --attenzione: #f5b041;
}
html[data-schema="dark"] [data-theme="appuntamento"] { --ground: #111716; --card: #182120; --ink: #e8eeec; --muted: #97a5a1; --line: #25302e; --field: #1f2a28; --accent: #3ddcbb; --accent-ink: #0d1a17; --soft: #173029; }
html[data-schema="dark"] [data-theme="prenotazione"] { --ground: #171310; --card: #1f1a16; --ink: #efe9e2; --muted: #a89c8f; --line: #332b24; --field: #2a231d; --accent: #f5b041; --accent-ink: #1a1208; --soft: #3a2a10; }

/* --- base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 15px/1.55 "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 60rem; margin: 0 auto; padding: .5rem 1.5rem 3.5rem; }
header.site { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.5rem; }
footer.site { color: var(--muted); font-size: .85rem; padding: 1.25rem 1.5rem 2rem; max-width: 60rem; margin: 0 auto; }
footer.site a { color: var(--muted); }
.brand { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--ink); }
.brand span { color: var(--accent); }
.tagline { color: var(--muted); font-size: .85rem; }
header.site .lingua { margin-left: auto; font-size: .85rem; color: var(--muted); text-decoration: none; }
header.site .lingua:hover { color: var(--ink); }
/* L'interruttore chiaro/scuro: un cerchio, nessuna etichetta. */
button.schema { width: 2.15rem; height: 2.15rem; border: 0; border-radius: var(--r-pillola); background: var(--field); color: var(--muted);
                font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
button.schema:hover { color: var(--ink); }
button.schema svg { width: 1.05rem; height: 1.05rem; }
h1 { font-size: clamp(1.5rem, 3.6vw, 2.05rem); line-height: 1.2; margin: 1.2rem 0 .5rem; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 1.1rem; margin: 1.8rem 0 .65rem; font-weight: 700; }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.lede { color: var(--muted); font-size: 1.02rem; }
.meta { color: var(--muted); font-size: .85rem; }
.muted { color: var(--muted); }
.crumbs { font-size: .8rem; color: var(--muted); margin: .25rem 0 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
a { color: var(--accent); }
a:hover { color: var(--ink); }
ul { list-style: none; padding: 0; margin: 0; }
p { margin: 0 0 .75rem; }
code { font-size: .8rem; background: var(--field); padding: .1rem .4rem; border-radius: .35rem; }
::selection { background: var(--soft); }

/* Le superfici: senza bordo, con un'ombra leggera. `--card` è il bianco
   della scheda; il fondo della pagina è appena più scuro. */
.grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.grid li a {
  display: block; padding: .9rem 1rem; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease;
}
.grid li a:hover { transform: translateY(-2px); box-shadow: var(--shadow-su); color: var(--ink); }
.grid strong { display: block; }
.grid span { color: var(--muted); font-size: .85rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li { background: var(--field); border-radius: var(--r-pillola); padding: .3rem .8rem; font-size: .85rem; }
.chips li.on { background: var(--soft); color: var(--accent); font-weight: 600; }
.chips a { text-decoration: none; color: inherit; }
.chips em { color: var(--muted); font-style: normal; font-size: .8rem; }
.slots { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.slots button {
  width: 100%; padding: .55rem; border: 1.5px solid var(--line); border-radius: var(--r-piccolo);
  background: var(--card); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.slots button:hover { border-color: var(--accent); color: var(--accent); }
.empty { color: var(--muted); }
.partecipante { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: .9rem 1rem; margin: 0 0 1rem; border: 0; }
.partecipante legend { padding: 0 .4rem; font-size: .8rem; color: var(--muted); }
.riga-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; }
.riga-check input { width: auto; margin-top: .2rem; accent-color: var(--accent); }
.manleva { margin: .5rem 0; font-size: .8rem; }
.manleva summary { cursor: pointer; color: var(--accent); }
.manleva .testo { white-space: pre-wrap; margin-top: .5rem; padding: .625rem .75rem; border-left: 2px solid var(--line); color: var(--muted); }
.soglia { display: block; font-size: .7rem; color: var(--muted); margin-top: .15rem; }
.quanti { display: flex; align-items: center; gap: .5rem; margin: 0 0 .875rem; }
.quanti label { color: var(--muted); font-size: .85rem; }
.quanti input { width: 4.5rem; padding: .45rem .6rem; border: 0; border-radius: var(--r-piccolo); background: var(--field); color: var(--ink); font: inherit; }
.quanti button { padding: .45rem .9rem; border: 0; border-radius: var(--r-pillola); background: var(--field); color: var(--ink); font: inherit; cursor: pointer; }
.quanti button:hover { background: var(--soft); color: var(--accent); }
.detail { display: grid; grid-template-columns: 10rem 1fr; gap: .35rem 1rem; }
.detail dt { color: var(--muted); }

.quality { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; margin: 1rem 0 0; padding: .9rem 1.1rem;
           background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.quality li b { display: block; font-size: 1.3rem; }
.quality li span { color: var(--muted); font-size: .75rem; }

/* Bottoni: pillole. Il primario è pieno, il secondario è un campo. */
button.primary, a.primary { padding: .6rem 1.15rem; border: 0; border-radius: var(--r-pillola); background: var(--accent);
                            color: var(--accent-ink); font: inherit; font-weight: 700; cursor: pointer; }
button.primary:hover, a.primary:hover { filter: brightness(1.06); color: var(--accent-ink); }
a.primary { display: inline-block; text-decoration: none; text-align: center; }
button:not(.primary):not(.schema):not(.vicino) { font: inherit; }
.ok { color: var(--ok); }

.avviso-cassa { background: var(--soft); border-radius: var(--r-piccolo); padding: .75rem 1rem; font-size: .85rem; margin-bottom: 1.25rem; }
.azioni-cassa { display: flex; gap: .75rem; margin-top: 1rem; }
.azioni-cassa button { padding: .6rem 1.1rem; border: 0; border-radius: var(--r-pillola); background: var(--field); color: var(--ink); font: inherit; cursor: pointer; }

.avviso-errore { background: color-mix(in srgb, var(--male) 12%, var(--card)); color: var(--male); border-radius: var(--r-piccolo);
                 padding: .625rem .875rem; font-size: .85rem; margin-bottom: 1rem; }
a.slot { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem; border: 1.5px solid var(--line); border-radius: var(--r-piccolo);
         background: var(--card); text-decoration: none; color: var(--ink); font-size: .8rem; text-align: center; }
a.slot:hover { border-color: var(--accent); color: var(--ink); }
a.slot .quando { font-weight: 700; }
a.slot .titolo { color: var(--muted); }
a.slot .posti { color: var(--muted); font-size: .75rem; }
a.slot .posti.pochi { color: var(--attenzione); }

/* Moduli: campi pieni, senza bordo, che si accendono al fuoco. */
.form-prenota { display: grid; gap: .75rem; max-width: 30rem; margin-top: 1.25rem; }
.form-prenota label { display: grid; gap: .3rem; font-size: .8rem; color: var(--muted); }
.form-prenota input, .form-prenota textarea, .form-prenota select, .cerca input, .filtri select {
  font: inherit; font-size: .95rem; padding: .55rem .75rem; border: 1.5px solid transparent; border-radius: var(--r-piccolo);
  background: var(--field); color: var(--ink); width: 100%; }
.form-prenota input:focus, .form-prenota textarea:focus, .form-prenota select:focus, .cerca input:focus, .filtri select:focus {
  outline: 0; border-color: var(--accent); background: var(--card); }
.form-prenota select option { color: initial; }
.form-prenota select { width: 100%; }

/* --- home ---------------------------------------------------------------- */
.hero { margin: .5rem 0 1.5rem; }
.hero .lede { max-width: 44rem; }
.passi ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem;
            grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: passo; }
.passi li { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: .9rem 1rem; }
.passi li::before { counter-increment: passo; content: counter(passo); display: inline-block; margin-right: .5rem; color: var(--accent); font-weight: 700; }
.passi strong { display: inline; }
.passi span { display: block; color: var(--muted); font-size: .85rem; margin-top: .25rem; }
.invito { background: var(--soft); border-radius: var(--r); padding: 1.1rem 1.25rem; margin-top: 2rem; }
.invito h2 { margin-top: 0; }
.invito p { max-width: 44rem; }
.invito p a.primary { margin-right: .5rem; }

/* --- ricerca ------------------------------------------------------------- */
.cerca { display: grid; gap: .75rem; grid-template-columns: 2fr 1fr auto; align-items: end; margin: 1rem 0 1.25rem;
         padding: 1rem 1.1rem; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
@media (max-width: 40rem) { .cerca { grid-template-columns: 1fr; } }
.cerca label { display: grid; gap: .3rem; font-size: .8rem; color: var(--muted); }
.cerca button.primary { height: 2.6rem; }
.cerca .vicino { justify-self: start; width: max-content; grid-column: 1 / -1; }
.vicino { padding: .45rem .9rem; border: 0; border-radius: var(--r-pillola); background: var(--field); color: var(--accent); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; }
.vicino:hover { background: var(--soft); }
.vicino[disabled] { opacity: .7; cursor: wait; }
.mappa { height: 22rem; border-radius: var(--r); margin: 1rem 0 1.25rem; overflow: hidden; box-shadow: var(--shadow); }
.risultati li { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: .9rem 1.1rem; margin-bottom: .75rem; }
.risultati .chi { display: block; text-decoration: none; color: var(--ink); font-size: 1.02rem; }
.risultati .dove, .risultati .cosa { display: block; color: var(--muted); font-size: .85rem; }
.risultati .dove em { font-style: normal; color: var(--accent); }
.risultati .slots { margin-top: .6rem; }
.risultati .testa { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; }
.risultati .voto { color: var(--accent); font-weight: 700; }
.risultati .voto em { font-style: normal; font-weight: 400; color: var(--muted); }
.risultati .cosa b { margin-left: .5rem; color: var(--ink); }
.risultati .prossimo { margin: .4rem 0 .3rem; }
.conteggio { margin: .25rem 0 .75rem; }
.filtri { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin: .75rem 0 1rem; }
.filtri label { display: grid; gap: .25rem; font-size: .8rem; color: var(--muted); }
.filtri select { width: auto; padding: .45rem .6rem; }
.filtri button { padding: .5rem 1rem; border: 0; border-radius: var(--r-pillola); background: var(--field); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.paginazione { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.5rem 0; color: var(--muted); }

/* --- scheda del fornitore ---------------------------------------------- */
.meta.orari { margin-top: -.25rem; }
.meta.prestazioni a { margin-right: .1rem; }
.avviso-fornitore { background: var(--soft); border-radius: var(--r-piccolo); padding: .7rem 1rem; margin: 1rem 0; }
.prenota-ora { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: 1.25rem 0; padding: .9rem 1.1rem;
               background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.prenota-ora a.primary { display: inline-block; }
.presentazione p { max-width: 44rem; }
table.tariffe { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
table.tariffe td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); }
table.tariffe tr:last-child td { border-bottom: 0; }
table.tariffe td.prezzo { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.scorri { overflow-x: auto; }
.orari-giorni summary { cursor: pointer; }
.orari-giorni table { margin-top: .6rem; border-collapse: collapse; }
.orari-giorni th { text-align: left; font-weight: 600; padding: .25rem 1rem .25rem 0; }
.orari-giorni tr.chiuso th { color: var(--muted); }
dl.info { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; padding: .9rem 1.1rem;
          background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
dl.info dt { color: var(--muted); }
dl.info dd { margin: 0; }
.faq details { border-bottom: 1px solid var(--line); padding: .6rem 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { max-width: 44rem; margin: .5rem 0 .2rem; }
.segnala { margin-top: 2.5rem; }
details.regalo { margin: .5rem 0; }
details.regalo summary { cursor: pointer; color: var(--accent); }
details.pacchetti button { width: 100%; text-align: left; padding: .8rem 1rem; border: 0; border-radius: var(--r);
                           background: var(--card); box-shadow: var(--shadow); color: var(--ink); font: inherit; cursor: pointer; }
details.pacchetti button:hover { box-shadow: var(--shadow-su); }
details.pacchetti button strong { display: block; }
details.pacchetti button span { color: var(--muted); font-size: .85rem; }

/* --- home alla Doctolib: promesse, numeri, dati ------------------------- */
.promesse ul, .invito ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.promesse li { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: .9rem 1rem; }
.invito li { background: var(--card); border-radius: var(--r); padding: .9rem 1rem; }
.promesse strong, .invito strong { display: block; margin-bottom: .25rem; }
.promesse span, .invito span { color: var(--muted); font-size: .88rem; }
.numeri ul { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
.numeri b { display: block; font-size: 1.7rem; line-height: 1.1; color: var(--accent); }
.numeri span { color: var(--muted); font-size: .85rem; }
.dati-blocco { margin-top: 2rem; }
.pulita { list-style: disc; padding-left: 1.2rem; }

/* ---- per chi eroga: la faccia del fornitore, prezzi, settori ---- */
.sopra { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--muted); margin: 0 0 .4rem; }
.sopra a { color: inherit; }
.doppia { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.doppia .secondaria { display: inline-block; padding: .6rem 1.1rem; border: 0; border-radius: var(--r-pillola); background: var(--field); color: var(--ink); font-weight: 600; text-decoration: none; }
.doppia .secondaria:hover { background: var(--soft); color: var(--accent); }
.hero.eroga h1 { max-width: 22ch; }
.fiducia .meta { max-width: 65ch; margin-top: .5rem; }
.piani { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.25rem 0; }
.piani article { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.piani h2 { margin: 0; }
.piani .cifra { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.piani .cifra b { font-size: 1.9rem; font-variant-numeric: tabular-nums; color: var(--accent); }
.piani .cifra span { color: var(--muted); }
.piani ul { margin: .5rem 0 0; padding-left: 1.1rem; list-style: disc; }
.piani li { margin: .25rem 0; }
.iscrizione-fornitore fieldset { border: 0; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 1rem 1.2rem; margin: 0 0 1rem; }
.iscrizione-fornitore legend { font-weight: 700; padding: 0 .4rem; }
.iscrizione-fornitore .due { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
footer.site .vie { margin-top: .3rem; }

/* ---- foto della scheda ---- */
.copertina { margin: .5rem 0 1rem; }
.copertina img { width: 100%; max-height: 24rem; object-fit: cover; border-radius: var(--r); display: block; box-shadow: var(--shadow); }
.galleria { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.galleria li { margin: 0; }
.galleria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-piccolo); display: block; }
.risultati li.con-foto { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 1rem; }
.risultati li.con-foto > *:not(.miniatura) { grid-column: 2; }
.risultati .miniatura { grid-column: 1; grid-row: 1 / span 6; width: 7.5rem; height: 5.6rem; object-fit: cover; border-radius: var(--r-piccolo); }
.grid li.con-foto a { padding: .55rem .55rem .8rem; }
.grid li.con-foto a img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-piccolo); display: block; margin-bottom: .5rem; }
.grid li.con-foto a strong, .grid li.con-foto a span { padding: 0 .35rem; }

/* ---- documenti di piattaforma ---- */
.documento { max-width: 68ch; }
.documento h2 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
.documento p { margin: 0 0 .8rem; }

/* ---- prenotazione, portafoglio, attesa: le pagine con un blocco solo ---- */
.serie, .benvenuto { background: var(--soft); border-radius: var(--r-piccolo); padding: .7rem 1rem; }
.stato { display: inline-block; padding: .2rem .7rem; border-radius: var(--r-pillola); background: var(--field); font-size: .8rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .grid li a { transition: none; } .grid li a:hover { transform: none; } }

/* Le due icone dell'interruttore: si vede quella dello schema in cui si andrebbe. */
button.schema .sole { display: none; }
html.scuro button.schema .sole { display: block; }
html.scuro button.schema .luna { display: none; }

/* ---- la disponibilità per giorno ---- */
.giorni { display: flex; gap: .4rem; overflow-x: auto; padding: .25rem 0 .5rem; margin: .5rem 0 .25rem; scrollbar-width: thin; }
.giorni a { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 3.6rem; padding: .4rem .6rem;
            border-radius: var(--r-piccolo); background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); line-height: 1.2; }
.giorni a b { font-size: .85rem; font-weight: 700; }
.giorni a span { font-size: .72rem; color: var(--muted); }
.giorni a.scelto { background: var(--accent); color: var(--accent-ink); }
.giorni a.scelto span { color: var(--accent-ink); opacity: .8; }
.giorni a.tutti { justify-content: center; font-size: .85rem; font-weight: 600; padding: .4rem .9rem; }
.giorni a:hover:not(.scelto) { box-shadow: var(--shadow-su); color: var(--ink); }
.giorno-titolo { font-size: .95rem; margin: 1rem 0 .5rem; }
.giorno-titolo::first-letter { text-transform: uppercase; }
.giorno-titolo .meta { font-weight: 400; margin-left: .35rem; }
.slots.compatti { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.slots.compatti a.slot .quando { font-size: 1rem; }
.slots.compatti a.slot .titolo { font-size: .75rem; }
.operatori { margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.operatori a { padding: .25rem .7rem; border-radius: var(--r-pillola); background: var(--field); text-decoration: none; color: var(--ink); font-size: .85rem; }
.operatori a.scelto { background: var(--soft); color: var(--accent); font-weight: 600; }

/* ---- accesso con Google e Apple ---- */
.sociale { display: grid; gap: .5rem; margin: .25rem 0 .75rem; }
.bottone-sociale { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .6rem 1rem; border-radius: var(--r-pillola);
                   background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-weight: 600; }
.bottone-sociale:hover { box-shadow: var(--shadow-su); color: var(--ink); }
.bottone-sociale svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.bottone-sociale.apple { background: var(--ink); color: var(--ground); }
.bottone-sociale.apple:hover { color: var(--ground); }
.oppure { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .8rem; margin: .5rem 0; }
.oppure::before, .oppure::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* La riga della casella contiene link: resta una riga anche dentro il modulo a griglia. */
.form-prenota label.riga-check { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; color: var(--ink); font-size: .85rem; }
.sociale, .sociale + .meta, .oppure { max-width: 30rem; }
.form-prenota label.riga-check input { width: auto; margin: 0; }

/* ---- aggiornamenti senza ricaricare: il bersaglio si attenua mentre arriva ---- */
#elenco.htmx-request, #disponibilita.htmx-request { opacity: .5; transition: opacity .15s; }

/* ---- la barra «Prenota» fissa in basso, solo sul telefono ---- */
.prenota-barra { display: none; }
@media (max-width: 54rem) {
  .prenota-barra:not([hidden]) { display: flex; align-items: center; gap: .75rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--card); box-shadow: 0 -4px 20px rgba(0, 0, 0, .12); font-size: .85rem; }
  .prenota-barra span { color: var(--muted); }
  .prenota-barra b { color: var(--ink); }
  body:has(.prenota-barra:not([hidden])) main { padding-bottom: 5rem; }
}

/* ---- condividi la prenotazione ---- */
.condividi { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.condividi .secondaria { display: inline-block; padding: .45rem .9rem; border: 0; border-radius: var(--r-pillola); background: var(--field); color: var(--ink);
                         font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.condividi .secondaria:hover { background: var(--soft); color: var(--accent); }
/* Sul telefono la testata resta una riga: il motto si nasconde. */
@media (max-width: 40rem) { header.site .tagline { display: none; } }

.cf-turnstile { margin: .25rem 0 .5rem; min-height: 0; }

/* Il campo esca: fuori dallo schermo, non display:none (i bot lo saltano). */
.esca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }