/* ==========================================================================
   La Nave — Pagina /prenota (widget prenotazione isolato)
   Mobile-first: regole base per 375px, poi min-width 768px.
   Nessun header/footer del sito: pagina minimale e autonoma.
   Richiede variables.css, font-face.css e style.css già caricati.
   ========================================================================== */

body.prenota-page {
  background: var(--colore-sabbia);
  min-height: 100vh;
  padding-bottom: 60px;
}

/* Header centrato come nel resto del sito: logo e titolo restano
   sempre sull'asse centrale, senza spostamenti. .prenota__header
   replica esattamente lo stesso margin-inline/max-width di
   .prenota__card (vedi sotto) a ogni breakpoint, così il lato
   sinistro del selettore lingua coincide sempre col lato sinistro
   della card, sia su mobile che da desktop.
   Su mobile il selettore lingua è ancorato in position:absolute
   nell'angolo in alto a sinistra — fuori dal flusso normale, quindi
   non spinge né ridimensiona il blocco logo+titolo ("alla sinistra
   del logo" senza essere invadente). Da 768px in su torna alla
   disposizione originale (riga propria sopra il logo, vedi media
   query in fondo al file). */
.prenota__header {
  position: relative;
  text-align: center;
  padding-block: 20px 32px;
  margin-inline: 16px;
}

.prenota__header .lang-switch {
  position: absolute;
  top: 20px;
  inset-inline-start: 0;
}

.prenota__logo img {
  height: 64px;
  width: auto;
  margin-inline: auto;
  margin-bottom: 16px;
}

.prenota__title {
  color: var(--colore-borgogna);
  font-size: 1.6rem;
}

/* Il menu a tendina della lingua condiviso (.lang-switch__menu, in
   style.css) è pensato per un toggle vicino al bordo destro dello
   schermo (right: 0, si apre verso sinistra). Su questa pagina il
   toggle sta invece vicino al bordo sinistro: senza override il
   menu si apre fuori dallo schermo. Qui si apre verso destra, e la
   larghezza è vincolata al viewport per non uscire mai di schermo
   anche sui telefoni più stretti. */
body.prenota-page .lang-switch__menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
  width: max-content;
  max-width: min(220px, calc(100vw - 40px));
}

/* Le voci del menu lingua qui sono <button>, non <a>: a differenza
   del sito madre, selezionare una lingua non naviga verso un'altra
   pagina ma traduce il contenuto sul posto (vedi applyTranslations
   in prenota.js). Stessa resa visiva delle voci <a> condivise
   (.lang-switch__menu a, in style.css). */
body.prenota-page .lang-switch__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-testo);
  font-size: 0.9rem;
  color: var(--colore-testo);
  text-align: start;
}

body.prenota-page .lang-switch__menu button:hover {
  background: var(--colore-sabbia);
}

body.prenota-page .lang-switch__menu button[aria-current="true"] {
  color: var(--colore-terracotta);
  font-weight: 700;
}

/* -----------------------------------------------------------------------
   CARD PRINCIPALE + STEP INDICATOR
   ----------------------------------------------------------------------- */
.prenota__card {
  background: var(--colore-lino);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(65, 25, 22, 0.1);
  padding: 24px 20px 32px;
  /* margin-inline:auto da solo non crea margine su mobile: si nota
     solo quando la larghezza disponibile supera max-width. Sotto i
     768px serve un margine esplicito, altrimenti il bordo della card
     coincide con quello dello schermo. */
  margin-inline: 16px;
}

@media (min-width: 768px) {
  .prenota__card {
    max-width: 640px;
    margin-inline: auto;
  }
}

.prenota__steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}

.prenota__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.prenota__step::before {
  content: "";
  position: absolute;
  top: 13px;
  inset-inline-start: -50%;
  width: 100%;
  height: 2px;
  background: var(--colore-bordo);
  z-index: 0;
}

.prenota__step:first-child::before {
  display: none;
}

.prenota__step.is-complete::before,
.prenota__step.is-active::before {
  background: var(--colore-terracotta);
}

.prenota__step-num {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--colore-bordo);
  color: var(--colore-testo-chiaro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: 0.8rem;
  transition: background-color 0.2s ease;
}

.prenota__step.is-active .prenota__step-num,
.prenota__step.is-complete .prenota__step-num {
  background: var(--colore-terracotta);
}

.prenota__step-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--colore-testo);
  opacity: 0.6;
  text-align: center;
}

.prenota__step.is-active .prenota__step-label,
.prenota__step.is-complete .prenota__step-label {
  opacity: 1;
  color: var(--colore-terracotta);
}

/* -----------------------------------------------------------------------
   FORM — campi, gruppi di pulsanti, select
   ----------------------------------------------------------------------- */
.prenota__panel[hidden] {
  display: none;
}

.prenota__subpanel[hidden] {
  display: none;
}

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--colore-testo);
}

.form-field .required,
.consent-item__row .required {
  color: var(--colore-terracotta);
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--colore-bordo);
  border-radius: var(--radius-sm);
  background: var(--colore-testo-chiaro);
  font-family: var(--font-testo);
  font-size: 0.95rem;
  color: var(--colore-testo);
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--colore-terracotta);
}

.form-field input.has-error,
.form-field select.has-error,
.persone-group.has-error .persone-btn,
.motivo-group.has-error .motivo-btn {
  border-color: #C0392B;
}

.phone-group {
  display: flex;
  gap: 8px;
}

.phone-group input {
  flex: 1;
  min-width: 0;
}

/* Selettore prefisso internazionale — dropdown custom con bandiere
   SVG reali al posto di una <select> nativa: le opzioni di una
   <select> non possono contenere immagini, e le bandiere emoji non
   sono affidabili su tutti i sistemi (su Windows, ad es., spesso
   il fallback mostra solo le lettere "IT" ecc. invece della
   bandiera). Stesso pattern del .lang-switch dell'header. */
.prefix-select {
  position: relative;
  flex: 0 0 auto;
}

.prefix-select__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 12px 10px;
  border: 1.5px solid var(--colore-bordo);
  border-radius: var(--radius-sm);
  background: var(--colore-testo-chiaro);
  font-family: var(--font-testo);
  font-size: 0.95rem;
  color: var(--colore-testo);
  min-width: 92px;
}

.prefix-select__flag {
  display: block;
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.prefix-select__chevron {
  width: 12px;
  height: 12px;
  margin-inline-start: auto;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.prefix-select__toggle[aria-expanded="true"] .prefix-select__chevron {
  transform: rotate(180deg);
}

.prefix-select__menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--colore-testo-chiaro);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 24px rgba(65, 25, 22, 0.12);
  z-index: 20;
}

.prefix-select__menu[hidden] {
  display: none;
}

.prefix-select__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-testo);
  font-size: 0.85rem;
  color: var(--colore-testo);
  text-align: start;
}

.prefix-select__option:hover {
  background: var(--colore-sabbia);
}

.prefix-select__option.is-selected {
  color: var(--colore-terracotta);
  font-weight: 700;
}

.prefix-select__option img {
  display: block;
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

.form-hint {
  font-size: 0.8rem;
  opacity: 0.75;
  margin-top: 10px;
}

.form-hint a {
  color: var(--colore-terracotta);
  font-weight: 700;
  text-decoration: underline;
}

.form-error {
  color: #C0392B;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.form-error[hidden] {
  display: none;
}

/* -----------------------------------------------------------------------
   CALENDARIO VISIVO MENSILE — sotto-passo Data (step Prenotazione)
   ----------------------------------------------------------------------- */
.calendar {
  border: 1.5px solid var(--colore-bordo);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--colore-testo-chiaro);
}

.calendar.has-error {
  border-color: #C0392B;
}

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar__month-label {
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--colore-testo);
  text-transform: capitalize;
}

.calendar__nav {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colore-terracotta);
  background: var(--colore-sabbia);
}

.calendar__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.calendar__nav svg {
  width: 16px;
  height: 16px;
}

.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.calendar__weekdays span {
  text-align: center;
  font-family: var(--font-testo);
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.5;
  text-transform: uppercase;
}

.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar__day {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  font-family: var(--font-testo);
  font-size: 0.85rem;
  color: var(--colore-testo);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.calendar__day:hover:not(:disabled) {
  background: var(--colore-sabbia);
}

.calendar__day:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

.calendar__day--empty {
  visibility: hidden;
}

.calendar__day--today {
  font-weight: 700;
  color: var(--colore-terracotta);
}

.calendar__day--selected,
.calendar__day--selected:hover {
  background: var(--colore-terracotta);
  color: var(--colore-testo-chiaro);
}

/* Gruppi di pulsanti selezionabili: persone, motivo */
.persone-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.persone-btn {
  aspect-ratio: 1;
  border: 1.5px solid var(--colore-bordo);
  border-radius: var(--radius-sm);
  background: var(--colore-testo-chiaro);
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--colore-testo);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.persone-btn.is-selected {
  background: var(--colore-terracotta);
  border-color: var(--colore-terracotta);
  color: var(--colore-testo-chiaro);
}

.motivo-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.motivo-btn {
  padding: 10px 16px;
  border: 1.5px solid var(--colore-bordo);
  border-radius: var(--radius-full);
  background: var(--colore-testo-chiaro);
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--colore-testo);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.motivo-btn.is-selected {
  background: var(--colore-terracotta);
  border-color: var(--colore-terracotta);
  color: var(--colore-testo-chiaro);
}

/* -----------------------------------------------------------------------
   RIEPILOGO — rilettura dati prima di "PRENOTA" (passo Prenotazione)
   ----------------------------------------------------------------------- */
.riepilogo-card {
  background: var(--colore-sabbia);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
}

.riepilogo-card__title {
  color: var(--colore-borgogna);
  font-size: 1rem;
  margin-bottom: 12px;
}

.riepilogo-card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.riepilogo-card__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
}

.riepilogo-card__row dt {
  font-weight: 700;
  color: var(--colore-testo);
  opacity: 0.7;
  flex-shrink: 0;
}

.riepilogo-card__row dd {
  text-align: end;
  color: var(--colore-testo);
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------
   TERMINI E CONDIZIONI
   ----------------------------------------------------------------------- */
.prenota__terms {
  background: var(--colore-sabbia);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 20px;
}

.prenota__terms p {
  font-size: 0.8rem;
  opacity: 0.8;
  line-height: 1.5;
}

.prenota__terms p + p {
  margin-top: 10px;
}

/* -----------------------------------------------------------------------
   PASSO 1 — TERMINI E CONDIZIONI (consensi trattamento dati, integrati
   nel passo Contatti)
   ----------------------------------------------------------------------- */
.prenota__panel-title {
  color: var(--colore-borgogna);
  font-size: 1.3rem;
  margin-bottom: 8px;
  text-align: center;
}

.prenota__panel-intro {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 20px;
  text-align: center;
}

/* display:grid senza grid-template-columns + justify-content:center è
   il trick per centrare un blocco verticale sull'asse orizzontale
   mantenendo tutte le righe alla stessa larghezza (quella della riga
   più larga): così le checkbox restano allineate in colonna invece
   di "fare zig-zag" seguendo la lunghezza del testo di ogni riga. */
.consent-list {
  display: grid;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Consensi granulari (marketing, profilazione, privacy): volutamente
   defilati, senza box né grassetto, per non distogliere attenzione
   dal flusso di prenotazione. Il testo importante ("Autorizzo tutti
   i trattamenti") resta più leggibile, vedi .consent-item--all.
   justify-content: flex-start allinea checkbox+testo+link a sinistra
   della riga (che grazie a .consent-list occupa sempre la stessa
   larghezza su tutte le righe, quindi le checkbox restano allineate
   verticalmente pur restando il blocco centrato in pagina). */
.consent-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
}

.consent-item__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-testo);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--colore-testo);
  opacity: 0.75;
}

.consent-checkbox {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--colore-terracotta);
}

.consent-item__link {
  font-family: var(--font-testo);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--colore-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.85;
}

.consent-item__link:hover {
  opacity: 1;
}

.consent-item--all {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--colore-bordo);
}

.consent-item--all .consent-item__row {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--colore-testo);
  opacity: 1;
}

.consent-item--all .consent-checkbox {
  width: 18px;
  height: 18px;
}

/* -----------------------------------------------------------------------
   AZIONI (avanti / indietro / accetto)
   ----------------------------------------------------------------------- */
.prenota__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.prenota__back-btn {
  padding: 14px 24px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1.5px solid var(--colore-bordo);
  color: var(--colore-testo);
  font-family: var(--font-testo);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.prenota__actions .btn {
  flex: 1;
}

/* Bottone "Avanti" oscurato finché il consenso privacy obbligatorio
   (passo 1 — Contatti, sezione Termini e condizioni) non è stato
   spuntato. */
.prenota__actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

@media (min-width: 480px) {
  .prenota__actions .btn {
    flex: 0 0 auto;
  }
}

/* Spinner nel bottone PRENOTA durante l'invio a n8n (submitBooking() in
   prenota.js) — un cerchietto che ruota, accanto al testo (non al posto
   del testo: applyTranslations() scrive su uno <span> interno dedicato,
   non più sul bottone stesso, altrimenti un cambio lingua durante il
   caricamento cancellerebbe lo spinner). */
.btn__spinner {
  width: 16px;
  height: 16px;
  margin-inline-start: 8px;
  border: 2px solid rgba(253, 250, 248, 0.4);
  border-top-color: var(--colore-testo-chiaro);
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  animation: prenota-spin 0.7s linear infinite;
}

.btn__spinner[hidden] {
  display: none;
}

@keyframes prenota-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Errore di invio prenotazione (fetch fallita/non ok): card con i
   contatti diretti come alternativa immediata, mostrata solo se
   submitBooking() fallisce — vedi prenota.js. */
.prenota__submit-error {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--colore-sabbia);
  border: 1px solid #C0392B;
}

.prenota__submit-error[hidden] {
  display: none;
}

.prenota__submit-error-title {
  color: #C0392B;
  font-weight: 700;
  margin-bottom: 4px;
}

.prenota__submit-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.prenota__submit-error-actions .btn {
  flex: 1 1 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.prenota__submit-error-actions .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   STEP 3 — CONFERMA
   ----------------------------------------------------------------------- */
.prenota__confirm {
  text-align: center;
  padding-block: 24px;
}

.prenota__confirm-icon {
  width: 56px;
  height: 56px;
  color: var(--colore-verdemare);
  margin-inline: auto;
  margin-bottom: 16px;
}

.prenota__confirm h2 {
  color: var(--colore-borgogna);
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.prenota__confirm p {
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 24px;
}

/* -----------------------------------------------------------------------
   POPUP — avviso orario tavolo (fascia 18:00-20:00)
   ----------------------------------------------------------------------- */
.popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(42, 21, 18, 0.6);
}

.popup[hidden] {
  display: none;
}

.popup__box {
  background: var(--colore-lino);
  border-radius: var(--radius-md);
  padding: 24px;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
}

.popup__box p {
  font-size: 0.9rem;
  margin-bottom: 18px;
  color: var(--colore-testo);
}

@media (min-width: 768px) {
  .prenota__card {
    padding: 32px 40px 40px;
  }

  /* Stesso max-width/margin-inline della card: così il lato
     sinistro dell'header (e quindi del selettore lingua) coincide
     esattamente col lato sinistro della card. */
  .prenota__header {
    max-width: 640px;
    margin-inline: auto;
  }

  .prenota__title {
    font-size: 2rem;
  }

  .prenota__step-label {
    font-size: 0.75rem;
  }

  /* Da desktop il selettore lingua torna alla disposizione
     originale: una riga propria, allineata a sinistra, sopra il
     logo — non più ancorato in position:absolute nell'angolo (quel
     posizionamento resta solo per mobile, dove è "perfetto" così).
     position:relative (non static!) mantiene il box nel normale
     flusso ma resta comunque un contenitore posizionato: altrimenti
     il menu a tendina (.lang-switch__menu, position:absolute) perde
     il suo ancoraggio e si posiziona rispetto a .prenota__header
     (che è position:relative), calcolando "top: 100%" sull'intera
     altezza dell'header invece che sul solo pulsante — ecco perché
     compariva molto più in basso del previsto.
     justify-self:start annulla il justify-self:end ereditato dalla
     regola .lang-switch condivisa (style.css, pensata per l'header
     a griglia del sito): i browser moderni applicano justify-self
     anche nel normale flusso a blocco, non solo dentro grid/flex,
     quindi senza override il blocco si allineava a destra invece
     che a sinistra. */
  .prenota__header .lang-switch {
    position: relative;
    justify-self: start;
    text-align: start;
    margin-bottom: 20px;
  }
}

/* -----------------------------------------------------------------------
   RTL (arabo) — il resto del layout è già "logico" (proprietà
   inset-inline-*/margin-inline-*/text-align:start|end sopra, più i
   flex-container che si specchiano da soli con dir="rtl" perché usano
   l'asse inline). Le uniche cose che NON si specchiano da sole sono le
   icone a freccia con un significato direzionale (avanti/indietro,
   mese precedente/successivo): qui vengono ribaltate esplicitamente.
   dir="rtl" è impostato su <html> da applyTranslations() in
   prenota.js quando la lingua attiva è "ar".
   ----------------------------------------------------------------------- */
html[dir="rtl"] .prenota__sub-next svg,
html[dir="rtl"] .prenota__next svg,
html[dir="rtl"] .calendar__nav svg {
  transform: scaleX(-1);
}

/* -----------------------------------------------------------------------
   Font CJK (cinese, giapponese, coreano) — Libre Baskerville e
   Glacial Indifference coprono solo l'alfabeto latino: senza questa
   regola i caratteri CJK verrebbero renderizzati con un fallback di
   sistema generico e potenzialmente incoerente. Qui si forza una
   pila di font di sistema con buona copertura CJK per ciascuna delle
   tre lingue, sovrascrivendo le custom property così la modifica si
   propaga automaticamente a ogni regola che usa var(--font-titoli)/
   var(--font-testo). */
html[lang="zh"] .prenota-page,
html[lang="ja"] .prenota-page,
html[lang="ko"] .prenota-page {
  --font-titoli: "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Malgun Gothic", "Noto Sans CJK SC", sans-serif;
  --font-testo: "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Malgun Gothic", "Noto Sans CJK SC", sans-serif;
}