/**
 * NP Booking — stile del widget.
 *
 * I font (Basier Circle, Playfair Display) li carica gia' il tema: qui non si
 * importa niente, si eredita. I colori sono i token del brand NP, esposti come
 * variabili cosi' si sovrascrivono da Bricks senza toccare il plugin.
 *
 * SCALA: tutto dentro il widget e' in `em`, relativo a `.npb { font-size }`.
 * Per ingrandire/rimpicciolire l'intero widget si tocca UNA riga (o si passa
 * --npb-size da Bricks). Niente misure fisse sparse: erano tarate solo sul
 * mobile e su desktop il widget sembrava un francobollo.
 */
.npb {
  --npb-size: 16px;
  /* crema di fondo: e' il colore delle card-sezione E delle sfumature laterali
     della striscia giorni (le ::before/::after la referenziano). Cambiare QUI
     tinge entrambe di conseguenza — per questo la rifinitura di Ale su Bricks
     (#fff8f1) vive in questa sola riga invece che in tre !important. */
  --npb-ground: #fff8f1;
  --npb-surface: #ffffff;
  --npb-ink: #351e13;
  --npb-brown: #5b3721;
  --npb-muted: rgba(53, 30, 19, .58);
  --npb-hairline: rgba(91, 55, 33, .16);
  --npb-accent: #e35c7c;
  --npb-accent-strong: #d15572; /* accent scurito: hover del CTA (che ora e' accent di base) */
  --npb-accent-soft: #e7bfc3;
  --npb-go: #2ec397;
  --npb-go-soft: #c1e5c0;
  --npb-warn: #8a4b12;
  --npb-warn-soft: #ffe0c2;
  --npb-shadow: 0 1px 2px rgba(53, 30, 19, .06), 0 8px 24px -12px rgba(53, 30, 19, .28);
  --npb-r: .9em;

  font-family: 'Basier Circle', system-ui, -apple-system, sans-serif;
  font-size: var(--npb-size);
  color: var(--npb-ink);
  /* min(): rispetta comunque il contenitore Bricks, non sfonda mai */
  max-width: min(34em, 100%);
  margin: 0 auto;
  line-height: 1.5;
}
/* Desktop: il widget cresce col testo, non solo in larghezza.
   NB: il sito ha una tipografia grossa (vedi il menu) — un widget a 16px
   ci sta dentro come un francobollo. Qui si va volutamente alti. */
@media (min-width: 782px) { .npb { --npb-size: 19px; } }
@media (min-width: 1100px) { .npb { --npb-size: 20px; } }

.npb *, .npb *::before, .npb *::after { box-sizing: border-box; }

/* Bricks (frontend.min.css) resetta i button con:
     button,input,optgroup,select,textarea { text-align: inherit }
   Cosi' salta il `text-align: center` nativo dei <button> e il testo si allinea
   a sinistra ereditando dalla pagina — con padding orizzontale 0 finisce a filo
   bordo. Lo rimettiamo qui per tutti i pulsanti del widget, una volta sola.
   Specificita': .npb button (0,1,1) > button (0,0,1) -> vinciamo noi. */
.npb button { text-align: center; }

.npb-boot { padding: 2.2em 0; text-align: center; color: var(--npb-muted); font-size: .9em; }

/* Ogni step (Con chi / Che giorno / A che ora / I tuoi dati) e' una card crema.
   La barra riepilogo+Prenota resta FUORI (e' un div, non un <section>) — voluto:
   la CTA non deve stare dentro il riquadro. Misure in em: cosi' l'intera card
   scala col widget (--npb-size) come il resto, tarate per combaciare col look
   che Ale ha regolato su desktop (~30px padding / 20px raggio). */
.npb section {
  margin-top: 1.6em;
  padding: 1.55em;
  background: var(--npb-ground);
  border-radius: 1.05em;
}
.npb-lab { display: flex; align-items: baseline; justify-content: space-between; gap: .8em; margin-bottom: .7em; }
.npb-lab h2 {
  font-size: .8em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--npb-brown); margin: 0; font-family: inherit; line-height: 1.3;
}
.npb-hint { font-size: .78em; color: var(--npb-muted); }


.npb-chips { display: flex; gap: .5em; overflow-x: auto; padding-bottom: .25em; scrollbar-width: none; }
.npb-chips::-webkit-scrollbar { display: none; }
.npb-chip {
  flex: none; border: 1px solid var(--npb-hairline); background: var(--npb-surface); color: var(--npb-ink);
  padding: .6em 1em; border-radius: 999px; font: inherit; font-size: .92em; font-weight: 600;
  cursor: pointer; transition: .15s; white-space: nowrap; line-height: 1.4;
}
.npb-chip:hover { border-color: var(--npb-accent); }
.npb-chip[aria-pressed="true"] { background: var(--npb-ink); color: var(--npb-ground); border-color: var(--npb-ink); }
.npb-chip .npb-cnt { opacity: .5; font-weight: 400; }
.npb-note { margin-top: .6em; font-size: .85em; color: var(--npb-muted); border-left: 2px solid var(--npb-accent); padding-left: .7em; }

/* ---- striscia giorni ---- */
.npb-days-wrap { position: relative; }
.npb-days {
  display: flex; gap: .55em; overflow-x: auto; padding: .15em 0 .4em;
  scrollbar-width: none; scroll-behavior: smooth; scroll-snap-type: x proximity;
}
.npb-days::-webkit-scrollbar { display: none; }
.npb-days > * { scroll-snap-align: start; }
.npb-days-wrap::before, .npb-days-wrap::after {
  content: ''; position: absolute; top: 0; bottom: .4em; width: 2.6em;
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .18s;
}
.npb-days-wrap::before { left: 0; background: linear-gradient(90deg, var(--npb-ground) 30%, transparent); }
.npb-days-wrap::after { right: 0; background: linear-gradient(270deg, var(--npb-ground) 30%, transparent); }
.npb-days-wrap[data-l="1"]::before { opacity: 1; }
.npb-days-wrap[data-r="1"]::after { opacity: 1; }
.npb-nav {
  position: absolute; top: calc(50% - .3em); transform: translateY(-50%); z-index: 2;
  width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--npb-hairline); background: var(--npb-surface); color: var(--npb-ink);
  cursor: pointer; box-shadow: var(--npb-shadow); transition: .15s; padding: 0;
}
.npb-nav svg { width: .95em; height: .95em; }
.npb-nav:hover { border-color: var(--npb-accent); color: var(--npb-accent); }
.npb-nav.prev { left: -.4em; }
.npb-nav.next { right: -.4em; }
.npb-nav[hidden] { display: none; }
/* Da tablet in su c'e' spazio: le frecce escono dalla striscia e smettono di
   coprire i giorni (sul mobile restano sopra, con la sfumatura che le stacca). */
@media (min-width: 782px) {
  .npb-nav.prev { left: -2.7em; }
  .npb-nav.next { right: -2.7em; }
}

.npb-day {
  flex: none; width: 4.3em; padding: .7em 0 .55em; border-radius: var(--npb-r);
  border: 1px solid var(--npb-hairline); background: var(--npb-surface); color: var(--npb-ink);
  font: inherit; cursor: pointer; text-align: center; transition: .15s;
}
.npb-day:hover:not(:disabled) { border-color: var(--npb-accent); }
.npb-day .npb-dow { font-size: .7em; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--npb-muted); }
.npb-day .npb-num { font-size: 1.55em; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.npb-day .npb-pips { display: flex; gap: .2em; justify-content: center; height: .35em; margin-top: .3em; }
.npb-day .npb-pips i { width: .26em; height: .26em; border-radius: 50%; background: var(--npb-go); }
.npb-day[aria-pressed="true"] { background: var(--npb-ink); color: var(--npb-ground); border-color: var(--npb-ink); }
.npb-day[aria-pressed="true"] .npb-dow { color: rgba(255, 241, 227, .72); }
.npb-day:disabled { opacity: .4; cursor: not-allowed; }
.npb-day:disabled .npb-num { text-decoration: line-through; }
.npb-day.npb-closed:disabled .npb-num { text-decoration: none; }
.npb-day .npb-tiny { font-size: .62em; color: var(--npb-muted); letter-spacing: .03em; line-height: 1.4; }

/* ---- slot ---- */
.npb-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55em; }
.npb-slot {
  /* il padding orizzontale e' una rete di sicurezza: anche se qualcuno
     rimettesse text-align a sinistra, l'orario non tocca mai il bordo */
  padding: .82em .4em; border-radius: .75em; border: 1px solid var(--npb-hairline);
  background: var(--npb-surface); color: var(--npb-ink); font: inherit; font-size: 1em; font-weight: 600;
  cursor: pointer; transition: .15s; font-variant-numeric: tabular-nums; text-align: center;
}
.npb-slot:hover { border-color: var(--npb-accent); }
.npb-slot[aria-pressed="true"] { background: var(--npb-accent); color: #fff; border-color: var(--npb-accent); }
.npb-empty {
  grid-column: 1 / -1; padding: 1.4em .9em; text-align: center; color: var(--npb-muted);
  font-size: .9em; border: 1px dashed var(--npb-hairline); border-radius: var(--npb-r);
}

/* ---- form ---- */
.npb-fields { display: flex; flex-direction: column; gap: .7em; }
.npb-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.npb label { display: block; font-size: .78em; font-weight: 600; color: var(--npb-muted); margin-bottom: .3em; }
.npb input {
  width: 100%; padding: .8em .9em; border-radius: .75em; border: 1px solid var(--npb-hairline);
  background: var(--npb-surface); color: var(--npb-ink); font: inherit; font-size: 1em;
}
.npb input:focus { outline: 2px solid var(--npb-accent); outline-offset: 1px; border-color: transparent; }
.npb-opt { font-weight: 400; text-transform: none; letter-spacing: 0; }
.npb-hp { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; }
/* Il riquadro Turnstile sparisce una volta verificato (vedi tsBox() nel JS).
   NB: si usa display:none, non visibility, cosi' non lascia il buco. */
.npb-hide { display: none !important; }
#npb-ts:not(.npb-hide) { margin-top: .2em; }

/* ---- barra ---- */
/* Barra di riepilogo + Prenota: NON ancorata.
   Era position:sticky, ma su mobile si sovrapponeva al bottone WhatsApp
   floattante del sito, affollando la parte bassa dello schermo proprio dove
   la cliente deve premere "Prenota". Ora scorre col resto della pagina. */
.npb-bar {
  margin-top: 1.4em; padding-top: 1em;
  border-top: 1px solid var(--npb-hairline);
}
.npb-bar-in { display: flex; align-items: center; gap: .8em; }
.npb-bar-sum { flex: 1; min-width: 0; }
.npb-bar-sum .npb-l1 { font-size: .95em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npb-bar-sum .npb-l2 { font-size: .8em; color: var(--npb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Prenota: accent pieno di base (scelta di Ale su Bricks), non piu' ink scuro.
   Hover -> accent scurito, cosi' un feedback c'e' comunque. Padding piu' compatto
   (~10/20px @desktop) come tarato da Ale. */
.npb-cta {
  flex: none; padding: .55em 1.1em; border-radius: 999px; border: 0;
  background: var(--npb-accent); color: #fff; font: inherit; font-size: 1em; font-weight: 700;
  cursor: pointer; transition: .15s;
}
.npb-cta:hover:not(:disabled) { background: var(--npb-accent-strong); color: #fff; }
.npb-cta:disabled { opacity: .35; cursor: not-allowed; }

/* ---- esiti ---- */
.npb-err { margin-top: .7em; padding: .8em .9em; border-radius: .75em; background: var(--npb-accent-soft); color: var(--npb-ink); font-size: .87em; }

/* Promo non spettante. Era un rettangolo rosa con il pulsante incastrato in
   mezzo alla frase: sembrava un ripensamento. Ora e' un blocco con gerarchia
   vera — titolo, spiegazione, link — e il link e' un link, non un bottone
   che compete con "Prenota". */
.npb-block {
  margin-top: .9em; padding: 1.1em 1.2em; border-radius: var(--npb-r);
  background: var(--npb-accent-soft); color: var(--npb-ink);
}
.npb-block strong { display: block; font-size: 1em; line-height: 1.35; margin-bottom: .35em; }
.npb-block p { margin: 0; font-size: .87em; line-height: 1.5; color: rgba(53, 30, 19, .72); }
.npb-block a {
  display: inline-block; margin-top: .8em; color: var(--npb-ink);
  font-size: .87em; font-weight: 600; text-decoration: underline;
  text-underline-offset: .22em; text-decoration-thickness: 1.5px;
}
.npb-block a:hover { color: var(--npb-accent); }
.npb-block a::after { content: ' →'; text-decoration: none; }
/* Targa dell'anteprima: volutamente sgraziata, non deve sembrare parte del
   design — se un giorno comparisse per sbaglio si deve notare subito. */
.npb-demo-tag {
  margin-bottom: 1.2em; padding: .7em .9em; border-radius: .5em;
  background: repeating-linear-gradient(45deg, #ffe0c2, #ffe0c2 10px, #ffd0a0 10px, #ffd0a0 20px);
  border: 1px dashed #8a4b12; color: #6b3a0e;
  font-size: .78em; font-weight: 600; line-height: 1.45; text-align: center;
}
.npb-demo-tag code { font-family: ui-monospace, Menlo, monospace; font-size: .95em; background: rgba(255,255,255,.6); padding: 0 .3em; border-radius: .2em; }

.npb-done { text-align: center; padding: 2em 0 1.2em; }
.npb-check { width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--npb-go-soft); display: grid; place-items: center; margin: 0 auto 1.1em; }
.npb-check svg { width: 1.7em; height: 1.7em; }
/* Buckwheat, non Playfair, e senza corsivo: e' la faccia che il sito usa per
   gli H2 — la conferma deve sembrare parte del sito, non del widget. */
.npb-done h2 { font-family: 'Buckwheat', 'Basier Circle', sans-serif; font-style: normal; font-weight: 400; font-size: 2.2em; color: var(--npb-brown); margin: 0 0 .35em; line-height: 1.1; }
.npb-recap dd { hyphens: none; }
.npb-sub { color: var(--npb-muted); font-size: .96em; margin: 0; }
.npb-recap { text-align: left; background: var(--npb-surface); border: 1px solid var(--npb-hairline); border-radius: var(--npb-r); padding: 1em; margin: 1.3em 0; box-shadow: var(--npb-shadow); }
.npb-recap dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55em 1em; font-size: .92em; }
.npb-recap dt { color: var(--npb-muted); }
.npb-recap dd { margin: 0; font-weight: 600; text-align: right; }

/* ---- mobile (Bricks "Mobile portrait", <=478px) ---- */
/* Rifiniture di Ale per il telefono: barra impilata, CTA a tutta larghezza,
   form a una colonna, chip a capo invece che a scorrimento. */
@media (max-width: 478px) {
  /* Prenota a tutta larghezza sotto il riepilogo */
  .npb-cta { width: 100%; }
  /* barra: riepilogo sopra (centrato, piu' grande) + CTA sotto */
  .npb-bar-in { flex-direction: column; gap: 1.25em; padding: 1.25em; }
  .npb-bar-sum { text-align: center; font-size: 1.12em; }
  /* Nome/Cognome a colonna singola */
  .npb-row { grid-template-columns: 1fr; }
  /* i nomi delle operatrici vanno a capo invece di scorrere in orizzontale */
  .npb-chips { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .npb *, .npb .npb-days { transition: none !important; scroll-behavior: auto !important; }
}

/* Via di fuga WhatsApp negli errori: deve LEGGERSI come un link e reggere il
   tap col pollice (il caso d'uso e' una webview Instagram che ha appena
   fallito Turnstile). Sottolineato: dentro un box di errore un testo solo
   colorato non si capisce che e' cliccabile. */
.npb-wa {
  color: var(--npb-accent-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: .15em .1em;
}
.npb-wa:hover { color: var(--npb-accent); }