/* Il modulo «Il sito» della demo. Tutto sotto .demo-sito; i fogli usano
   classi sito-… I colori dell'anteprima sono variabili (--sito-…) che il
   modulo mette sul contenitore dai dati dei tre stili del gestionale vero:
   qui nessun colore scritto a mano. */

.demo-sito p {
  margin: 0;
}
.demo-sito .sito-intro {
  font-size: 0.875rem;
  color: var(--tenue);
  overflow-wrap: anywhere;
}
.demo-sito .sito-intro strong {
  color: var(--inchiostro);
}

/* --- Il pannello «Modifica» ---------------------------------------------------- */

.demo-sito .sito-modifica-titolo {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
}
.demo-sito .sito-stili {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}
.demo-sito .sito-stile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-md);
  background: var(--superficie);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.demo-sito .sito-stile[aria-checked='true'] {
  border-color: var(--accento);
  box-shadow: 0 0 0 1px var(--accento);
}
.demo-sito .sito-stile-campione {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: var(--raggio-sm);
  font-weight: 700;
}
.demo-sito .sito-stile-testo {
  flex: 1;
  min-width: 0;
  display: grid;
}
.demo-sito .sito-stile-nome {
  font-size: 0.9375rem;
  font-weight: 600;
}
.demo-sito .sito-stile-perchi {
  font-size: 0.8125rem;
  color: var(--tenue);
}
.demo-sito .sito-stile-scelto {
  display: none;
  flex: none;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--accento-chiaro);
  color: var(--accento-scuro);
  font-size: 0.75rem;
  font-weight: 700;
}
.demo-sito .sito-stile[aria-checked='true'] .sito-stile-scelto {
  display: inline-flex;
}

.demo-sito .sito-campo {
  display: grid;
  gap: 0.375rem;
  margin: 0 0 0.75rem;
}
.demo-sito .sito-campo label {
  font-size: 0.875rem;
  font-weight: 600;
}
.demo-sito .sito-aiuto {
  font-size: 0.8125rem;
  color: var(--tenue);
}

/* L'interruttore «Mostra i prezzi sul sito»: tutta la riga si tocca, e lo stato lo dice la parola. */
.demo-sito .sito-interruttore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.75rem 0;
  border: 0;
  border-top: 1px solid var(--bordo);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.demo-sito .sito-interruttore-testo {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}
.demo-sito .sito-interruttore-nome {
  font-size: 0.9375rem;
  font-weight: 600;
}
.demo-sito .sito-interruttore-descrizione {
  font-size: 0.8125rem;
  color: var(--tenue);
}
.demo-sito .sito-interruttore-destra {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.demo-sito .sito-interruttore-parola {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tenue);
}
.demo-sito .sito-interruttore-pista {
  position: relative;
  width: 3.125rem;
  height: 1.875rem;
  border-radius: 999px;
  background: var(--bordo-campo);
}
.demo-sito .sito-interruttore[aria-checked='true'] .sito-interruttore-pista {
  background: var(--accento);
}
.demo-sito .sito-interruttore-pomello {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: var(--ombra);
}
.demo-sito .sito-interruttore[aria-checked='true'] .sito-interruttore-pomello {
  transform: translateX(1.25rem);
}
@media (prefers-reduced-motion: no-preference) {
  .demo-sito .sito-interruttore-pista,
  .demo-sito .sito-interruttore-pomello {
    transition:
      background-color 0.2s ease,
      transform 0.2s ease;
  }
}
.demo-sito .sito-salva {
  width: 100%;
  margin-top: 0.5rem;
}

/* --- La cornice dell'anteprima --------------------------------------------------- */

.demo-sito .sito-cornice {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-lg);
  overflow: hidden;
  background: var(--superficie);
}
.demo-sito .sito-barra-indirizzo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.375rem 0.75rem;
  background: var(--superficie-alta);
  color: var(--tenue);
  font-size: 0.8125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.demo-sito .sito-icona {
  display: inline-flex;
  flex: none;
}
.demo-sito .sito-nota {
  margin: 0.5rem 0.25rem 0;
  font-size: 0.8125rem;
  color: var(--tenue);
}

/* --- Il sito del salone, dentro la cornice ---------------------------------------- */

.demo-sito .sito-pagina {
  background: var(--sito-sfondo);
  color: var(--sito-testo);
  font-size: 0.9375rem;
  line-height: 1.5;
}
@media (prefers-reduced-motion: no-preference) {
  .demo-sito .sito-pagina,
  .demo-sito .sito-sezione,
  .demo-sito .sito-eroe,
  .demo-sito .sito-striscia {
    transition:
      background-color 0.3s ease,
      color 0.3s ease;
  }
}
.demo-sito .sito-sezione:focus {
  outline: none;
}
.demo-sito .sito-testata {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--sito-linea);
}
.demo-sito .sito-marchio,
.demo-sito .sito-eroe-nome,
.demo-sito .sito-titolo {
  font-family: var(--sito-titoli);
  text-transform: var(--sito-maiuscole);
  letter-spacing: var(--sito-spaziatura);
  font-weight: 600;
}
.demo-sito .sito-marchio {
  font-size: 1.125rem;
}

/* L'apertura senza foto: il colore principale dello stile, al centro. */
.demo-sito .sito-eroe {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2.25rem 1rem 2.5rem;
  background: var(--sito-primario);
  color: var(--sito-su-primario);
  text-align: center;
}
.demo-sito .sito-apertura {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--inchiostro);
  font-size: 0.8125rem;
  font-weight: 600;
}
.demo-sito .sito-apertura-pallino {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--positivo);
}
/* Il pallino batte due volte, poi si ferma (come sul sito vero). */
@media (prefers-reduced-motion: no-preference) {
  .demo-sito .sito-apertura-pallino {
    animation: sito-batte 1.2s ease-out 2;
  }
}
@keyframes sito-batte {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--positivo) 55%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--positivo) 0%, transparent);
  }
}
.demo-sito .sito-eroe-nome {
  font-size: 2.125rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.demo-sito .sito-eroe-slogan {
  max-width: 20rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

/* I bottoni del sito: tondi, alti almeno 44 px. */
.demo-sito .sito-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.demo-sito .sito-bottone-chiaro {
  margin-top: 0.5rem;
  background: var(--sito-su-primario);
  color: var(--sito-primario);
}
.demo-sito .sito-bottone-contorno {
  background: transparent;
  border-color: var(--sito-primario-testo);
  color: var(--sito-primario-testo);
}

/* La striscia «In breve» e le scorciatoie. */
.demo-sito .sito-striscia {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--sito-sfondo-alt);
}
.demo-sito .sito-striscia-titolo {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
}
.demo-sito .sito-striscia-dettaglio {
  display: block;
  font-size: 0.8125rem;
  color: var(--sito-tenue);
}
.demo-sito .sito-striscia-whatsapp {
  display: grid;
  justify-items: start;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.demo-sito .sito-striscia-whatsapp .sito-striscia-titolo {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.demo-sito .sito-scorciatoie {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--sito-linea);
}
.demo-sito .sito-pillola {
  flex: none;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--sito-linea-accento);
  background: var(--sito-sfondo);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sito-testo);
  cursor: pointer;
}
.demo-sito .sito-pillola[aria-checked='true'] {
  background: var(--sito-primario);
  border-color: var(--sito-primario);
  color: var(--sito-su-primario);
}

/* Le sezioni: chiare e tinte che si alternano, l'ultima chiara (il piede è scuro). */
.demo-sito .sito-sezione {
  padding: 1.75rem 1rem;
}
.demo-sito .sito-chiara {
  background: var(--sito-sfondo);
}
.demo-sito .sito-tinta {
  background: var(--sito-sfondo-alt);
}
.demo-sito .sito-etichetta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sito-accento-testo);
}
.demo-sito .sito-etichetta::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--sito-linea-accento);
}
.demo-sito .sito-titolo {
  margin: 0.25rem 0 1rem;
  font-size: 1.625rem;
  line-height: 1.1;
}
.demo-sito .sito-tenue {
  color: var(--sito-tenue);
}

/* I servizi a schede. */
.demo-sito .sito-categorie {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
}
.demo-sito .sito-schede {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.demo-sito .sito-scheda {
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--sito-linea);
  border-radius: 1.25rem;
  background: var(--sito-sfondo);
}
.demo-sito .sito-scheda-nome {
  font-weight: 700;
}
.demo-sito .sito-scheda-durata {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--sito-tenue);
}
.demo-sito .sito-scheda-prezzo {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sito-primario-testo);
}
.demo-sito .sito-scheda .sito-bottone {
  justify-self: start;
  margin-top: 0.5rem;
}

/* Il team: il monogramma con le iniziali, nei colori dello stile. */
.demo-sito .sito-persone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.demo-sito .sito-persona {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.demo-sito .sito-monogramma {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sito-linea-accento);
  border-radius: 999px;
  color: var(--sito-accento-testo);
  font-family: var(--sito-titoli);
  font-size: 1.0625rem;
  font-weight: 600;
}

/* Gli orari: la riga di oggi in grassetto, nel colore d'accento, con «Oggi». */
.demo-sito .sito-orari {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.demo-sito .sito-orari th,
.demo-sito .sito-orari td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--sito-linea);
  text-align: left;
  font-weight: 400;
}
.demo-sito .sito-orari td {
  text-align: right;
}
.demo-sito .sito-orari .sito-oggi th,
.demo-sito .sito-orari .sito-oggi td {
  font-weight: 700;
  color: var(--sito-accento-testo);
}
.demo-sito .sito-oggi-parola {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--sito-accento-testo);
  font-size: 0.75rem;
}
.demo-sito .sito-indirizzo {
  margin-top: 1rem;
  font-family: var(--sito-titoli);
  font-size: 1.25rem;
  font-weight: 600;
}
.demo-sito .sito-piede {
  padding: 1.25rem 1rem;
  background: var(--sito-piede-sfondo);
  color: var(--sito-piede-testo);
  font-size: 0.8125rem;
}

/* Il foglio della spiegazione («Prenota su WhatsApp», «Salva le modifiche»). */
.sito-spiegazione p {
  margin: 0 0 0.75rem;
}
.sito-spiegazione .sito-spiegazione-tenue {
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  color: var(--tenue);
}
.sito-spiegazione .sito-spiegazione-messaggio {
  padding: 0.75rem 1rem;
  border-radius: var(--raggio-md);
  background: var(--superficie);
  white-space: pre-line;
  overflow-wrap: anywhere;
}