/* Laguna Mare · tema del widget. SOLO colori del sito ristorante.mifaccioilsito.com, misurati il 29/09/2026
   con un browser su home, il-ristorante, dove-siamo, menu-ristorante e prenota:
     #069288  verde acqua: testata, piè di pagina, bottoni (fondo e bordo), link, titoli a pennello
     #403D39  testo · #000000 titoli h1/h3 · #777777 e #666666 grigi · #CCCCCC grigio medio
     #F6F7F8  fasce chiare e testo sul verde · #FAFAFA riquadri · #EDEDED bordi · #FFFFFF
     #FED78F e #E7AE2E  l'oro del «nastrino» del logo
   Le tinte del verde acqua nella mappa (tenda, acqua) sono lo stesso #069288 su bianco, non colori nuovi.
   Il bottone è quello del sito: squadrato, bordo 2px verde acqua, Montserrat 600 maiuscolo spaziato 0,1em;
   al passaggio si svuota, testo e bordo verde acqua su fondo trasparente. I campi a fuoco: bordo nero.
   Il corsivo del sito, Sensations and Qualities, è commerciale: qui Kaushan Script (Google Fonts, OFL).
   Si carica DOPO prenota.css e ridefinisce i ruoli; le regole in fondo sono quelle che un colore non basta. */
:root {
  --scuro: #069288; --scuro-2: #069288; --accento: #069288; --accento-2: #069288;
  --tenue: #069288; --tenue-2: #EDEDED; --crema: #F6F7F8; --carta: #FFFFFF;
  --fondo: #069288; --inchiostro: #403D39; --inchiostro-2: #666666; --inchiostro-3: #777777;
  --ok: #069288; --pieno: #CCCCCC; --oro: #FED78F; --oro-2: #E7AE2E;
  --errore: #FF0000; --errore-fondo: #FFF2F2; --anello: transparent;   /* il sito ha solo «red» */
  --r: 4px; --ombra: 0 1.25rem 2rem -1rem rgba(35,44,57,.35);            /* l'ombra dei menu del sito */
  --titoli: "Kaushan Script", "Brush Script MT", cursive;
  --dettagli: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --testo: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --logo-filtro: none;                          /* il logo del sito è già bianco */
  --eroe-ombra: rgba(6,146,136,.92); --eroe-luogo: #F6F7F8;
  --lingua-testo: #FFFFFF; --lingua-bordo: #FFFFFF;
  --pie: #F6F7F8; --pie-link: #FFFFFF;
  --tavolo-inadatto: #F6F7F8;
  /* la mappa: bianco, grigi e verde acqua del sito; l'oro del nastrino per le fioriere e il lampione */
  --mappa-pav: #FFFFFF; --mappa-parete: #403D39; --mappa-banco: #069288;
  --mappa-plateatico: #F6F7F8; --mappa-fondamenta: #EDEDED;
  --mappa-tenda: #E5F0F0; --mappa-tenda-riga: #D9EBEB;         /* #069288 al 7% e al 12% su #F6F7F8 */
  --mappa-acqua: #C1E4E1; --mappa-onda: #8FCEC9; --mappa-et-acqua: #069288;   /* #069288 al 25% e al 45% */
  --mappa-fioriera: #CCCCCC; --mappa-fiore: #E7AE2E; --mappa-lampione: #403D39; --mappa-luce: rgba(254,215,143,.7);
}

/* i titoli a pennello, come «Il nostro menù» e «Prenota un tavolo!» sul sito */
.eroe h1, .gestione-ospite h1 { font-weight: 400; letter-spacing: 0; font-size: clamp(2.3rem, 6.5vw, 3.2rem); line-height: 1.1; }
.passo h2 { font-weight: 400; font-size: 2.05rem; color: var(--accento); line-height: 1.15; }
.esito h2 { font-size: 2.3rem; }
.gestione-ospite h1 { color: var(--accento); }
.eroe-luogo { letter-spacing: .18em; font-weight: 600; font-size: .72rem; }
.gestione-ospite .eroe-luogo { color: var(--inchiostro-3); }

/* numeri e dettagli in Montserrat: il corsivo è per i titoli, non per le cifre */
.coperto, .cal-testa h3, .orari h3, .riepilogo, .tavolo-desc, .codice b { font-weight: 600; }
.cal-testa h3 { font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: #000; }
.orari h3 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-3); }
.tavolo-desc { font-size: 1rem; color: var(--accento); }
.codice b { font-size: 1.25rem; letter-spacing: .08em; color: var(--accento); }
.firma { font-style: normal; letter-spacing: .2em; text-transform: uppercase; font-size: .66rem; }

/* il riepilogo come le fasce chiare del sito, con i valori in verde acqua */
.riepilogo { background: var(--crema); color: var(--inchiostro); border-left: 3px solid var(--accento); font-size: 1rem; line-height: 1.5; font-weight: 500; }
.riepilogo b { color: var(--accento); }

/* scelte: verde acqua pieno e testo bianco, come i bottoni del sito */
.coperto.scelto, .cal-d.scelto { color: #FFFFFF; }
.cal-d.scelto::after { background: #FFFFFF; }
.cal-d.scelto:not(:disabled):hover { color: #000000; }            /* sotto il mouse il fondo è chiaro: testo nero */
.cal-d.scelto:not(:disabled):hover::after { background: var(--accento); }

/* il bottone del sito */
.cta, .indietro { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; font-weight: 600; }
.cta { border: 2px solid var(--accento); padding: 1.1rem 1.5rem; }
.cta:hover { background: transparent; color: var(--accento); border-color: var(--accento); }
.cta:disabled, .cta:disabled:hover { background: var(--tenue-2); border-color: var(--tenue-2); color: var(--inchiostro-3); }
.cta.secondario { border: 2px solid var(--accento); color: var(--accento); }
.cta.secondario:hover { background: var(--accento); color: #FFFFFF; }
.cta.pericolo { border-width: 2px; }
.indietro { border: 2px solid var(--tenue-2); color: var(--inchiostro-2); }
.indietro:hover { border-color: var(--accento); color: var(--accento); }
.azioni-ospite .cta { letter-spacing: .06em; }
.lingua { border-radius: 0; letter-spacing: .14em; }
.lingua:hover { background: #FFFFFF; color: var(--accento); border-color: #FFFFFF; }

/* caselle e campi: angoli dei riquadri del sito (4px), bordo #CCCCCC, a fuoco nero come sul sito */
.coperto, .slot, .cal-d, .campo input, .campo textarea, .alternative, .errore-form, .riepilogo { border-radius: 4px; }
.campo input, .campo textarea { border-color: var(--pieno); }
.campo input:focus, .campo textarea:focus { border-color: #000000; box-shadow: none; }
.mappa-cont { background: #FFFFFF; border: 1px solid var(--tenue-2); border-radius: 4px; }

/* lo stato della prenotazione, nella pagina «gestisci» */
.stato-confirmed { background: var(--accento); color: #FFFFFF; }
.stato-pending { background: var(--oro); color: var(--inchiostro); }

/* la mappa */
#mappa .sedia { fill: var(--pieno); }
#mappa .d-banco { fill: var(--mappa-banco); }
#mappa .d-et-chiara { fill: #FFFFFF; }

/* in fondo, sul verde acqua del sito */
.pie { font-size: .8rem; letter-spacing: .02em; }
a:hover { color: var(--inchiostro); }
.pie a:hover { color: #FFFFFF; }