/*
 * Area riservata — continua il sito, non ne apre un altro.
 *
 * Da fuori riprende quello che si riconosce a colpo d'occhio: la fascia scura
 * con la foto degli spazi e il marchio bianco, il Montserrat maiuscolo dei
 * titoli col trattino blu sopra, il blu #6683E7, i bottoni squadrati e il piede
 * nero con l'indirizzo. Dentro resta una cosa da usare tutti i giorni: fondo
 * chiaro, testo grande abbastanza, niente decorazioni che intralciano.
 */

:root {
  --blu: #6683E7;
  --blu-scuro: #4a63bd;
  --inchiostro: #262316;
  --grigio: #6b6a63;
  --linea: #e3e2dd;
  --fondo: #f6f5f2;
  --bianco: #fff;
  --nero: #000;
  --verde: #2e8b57;
  --ambra: #b9761a;
  --rosso: #b3372f;
  --raggio: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--blu-scuro); }

/* --- la fascia in testa, come l'apertura del sito ------------------------- */

.striscia {
  position: relative;
  background: #1a1a1a url(/images/head-img.jpg) center 38% / cover no-repeat;
  z-index: 1;
}
.striscia::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--nero);
  opacity: .72;
  z-index: -1;
}
.striscia .dentro {
  max-width: 1170px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.marchio { display: block; line-height: 0; }
.marchio img { height: 38px; width: auto; display: block; }
.spinta { margin-left: auto; }

.striscia a { color: #fff; text-decoration: none; }
.striscia a:hover { color: var(--blu); }
.striscia .chi { color: #fff; font-size: 14px; }

.lingue { display: flex; gap: 2px; }
.lingue a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  padding: 3px 7px;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
}
.lingue a.lingua-scelta { color: #fff; border-bottom: 2px solid var(--blu); }

.monte {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; padding: 4px 15px; font-size: 13px;
  color: rgba(255, 255, 255, .75);
}
.monte b { font-size: 15px; color: #fff; font-weight: 600; }

/* L'insegna: il titolo della pagina dentro la fascia, bianco sopra la foto e
   col trattino sopra, esattamente come l'apertura del sito. */
.insegna {
  max-width: 1170px;
  margin: 0 auto;
  padding: 16px 20px 52px;
  text-align: center;
}
.insegna h1 {
  color: #fff;
  font-size: 38px;
  margin: 0;
  padding-top: 28px;
}
.insegna h1::before {
  background-color: #fff;
  left: 50%;
  transform: translateX(-50%);
}
.insegna p {
  color: rgba(255, 255, 255, .75);
  margin: 10px auto 0;
  max-width: 620px;
}

/* --- corpo della pagina --------------------------------------------------- */

.pagina { max-width: 1170px; width: 100%; margin: 0 auto; padding: 34px 20px 60px; flex: 1; }

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 10px;
  padding-top: 20px;
  position: relative;
}
h1::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 50px; height: 3px;
  background-color: var(--blu);
}
h2 { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700;
     text-transform: uppercase; letter-spacing: .03em; margin: 0 0 14px; }
h3 { font-size: 15px; margin: 0 0 8px; font-weight: 600; }
p.guida { color: var(--grigio); margin: 0 0 22px; }

.scheda {
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 24px;
  margin-bottom: 20px;
}

/* --- comandi -------------------------------------------------------------- */

label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--inchiostro);
  background: var(--bianco);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blu);
  box-shadow: 0 0 0 3px rgba(102, 131, 231, .18);
}
.campo { margin-bottom: 16px; }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }

button, .bottone {
  font: inherit;
  font-weight: 700;
  border: 2px solid var(--blu);
  border-radius: 5px;
  padding: 10px 22px;
  cursor: pointer;
  background: var(--blu);
  color: var(--bianco);
  text-decoration: none;
  display: inline-block;
  transition: all .2s linear;
}
button:hover, .bottone:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); }
button:disabled { opacity: .5; cursor: default; }
button.calmo, .bottone.calmo { background: var(--bianco); color: var(--inchiostro); border-color: var(--linea); font-weight: 500; }
button.calmo:hover, .bottone.calmo:hover { background: var(--fondo); border-color: var(--grigio); }
button.pericolo, .bottone.pericolo { background: var(--bianco); color: var(--rosso); border-color: #e6cbc8; font-weight: 500; }
button.pericolo:hover, .bottone.pericolo:hover { background: #fdf3f2; border-color: var(--rosso); }
button.minuto, .bottone.minuto { padding: 5px 13px; font-size: 13px; border-width: 1px; }
.striscia button.calmo, .striscia .bottone.calmo {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45);
}
.striscia button.calmo:hover, .striscia .bottone.calmo:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* --- avvisi a video ------------------------------------------------------- */
.messaggio { border-radius: var(--raggio); padding: 12px 15px; margin-bottom: 18px; font-size: 14px; }
.messaggio.male { background: #fdf3f2; color: var(--rosso); border: 1px solid #e6cbc8; }
.messaggio.bene { background: #f0f7f3; color: var(--verde); border: 1px solid #cfe4d8; }
.messaggio.nota { background: #fdf7ee; color: var(--ambra); border: 1px solid #edddc3; }
.nascosto { display: none !important; }

/* --- schede in alto ------------------------------------------------------- */
.linguette { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 24px;
             border-bottom: 1px solid var(--linea); }
.linguette button {
  background: transparent;
  color: var(--grigio);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: -1px;
}
.linguette button:hover { background: transparent; color: var(--inchiostro); }
.linguette button[aria-selected=true] { color: var(--blu); border-bottom-color: var(--blu); }

/* --- etichette di stato --------------------------------------------------- */
.etichetta {
  display: inline-block; font-size: 12px; font-weight: 500;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.etichetta.confermata      { background: #eaf1e9; color: var(--verde); }
.etichetta.in_attesa       { background: #fdf3e3; color: var(--ambra); }
.etichetta.da_conteggiare  { background: #fdeeec; color: var(--rosso); }
.etichetta.annullata,
.etichetta.rifiutata       { background: #efeeea; color: var(--grigio); }
.etichetta.sospeso         { background: #fdeeec; color: var(--rosso); }
.etichetta.attivo          { background: #eaf1e9; color: var(--verde); }

/* --- tabelle -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-family: 'Montserrat', sans-serif; font-weight: 700;
     font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
     color: var(--grigio); padding: 0 10px 10px; }
td { padding: 12px 10px; border-top: 1px solid var(--linea); vertical-align: top; }
.cifra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.avvolgi { overflow-x: auto; }
.vuoto { color: var(--grigio); padding: 26px 0; text-align: center; }

/* --- piede di pagina, come quello del sito -------------------------------- */
.piede {
  background: var(--nero);
  color: #969696;
  text-align: center;
  padding: 48px 20px;
  font-size: 14px;
  line-height: 24px;
}
.piede a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.3;
}
.piede a:hover { color: var(--blu); }
.piede .indirizzo { margin-top: 16px; font-size: 16px; }

/* --------------------------------------------------------------------------
 * Il calendario della settimana
 * ------------------------------------------------------------------------ */

.settimana { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.settimana .quando { font-family: 'Montserrat', sans-serif; font-weight: 700; min-width: 210px; }

.griglia {
  display: grid;
  grid-template-columns: 62px repeat(7, minmax(72px, 1fr));
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--bianco);
  min-width: 620px;
}
.griglia .intestazione {
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
  padding: 9px 4px;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grigio);
}
.griglia .intestazione b { display: block; font-family: 'Montserrat', sans-serif;
                           font-size: 16px; font-weight: 700; color: var(--inchiostro); }
.griglia .intestazione.oggi, .griglia .intestazione.oggi b { color: var(--blu); }
.griglia .ora {
  font-size: 11px;
  color: var(--grigio);
  text-align: right;
  padding: 0 6px;
  transform: translateY(-7px);
}
.griglia .colonna { position: relative; }
.griglia .colonna .cella:first-child { border-top: none; }
.griglia .fascia-ore { border-right: 1px solid var(--linea); }
.griglia .fascia-ore .ora { height: 22px; }
.griglia .cella {
  border-top: 1px solid #f1f0ec;
  border-left: 1px solid var(--linea);
  height: 22px;
  position: relative;
  cursor: pointer;
}
.griglia .cella:hover { background: rgba(102, 131, 231, .10); }
.griglia .cella.passata,
.griglia .cella.passata:hover {
  background: repeating-linear-gradient(45deg, #fafaf8, #fafaf8 4px, #f2f1ed 4px, #f2f1ed 8px);
  cursor: default;
}

.blocco {
  position: absolute;
  left: 2px; right: 2px;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.25;
  overflow: hidden;
  color: var(--bianco);
  background: var(--blu);
  border: 1px solid rgba(0, 0, 0, .06);
  z-index: 2;
}
.blocco b { display: block; font-weight: 600; }
.blocco.altrui { background: #b9b8b1; }
.blocco.in_attesa { background: var(--ambra); }

/* parcheggio: una casella per giorno, con i posti liberi */
.giorni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; min-width: 620px; }
.giorno {
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--bianco);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s linear;
}
.giorno:hover { border-color: var(--blu); }
.giorno.esaurito, .giorno.passato {
  background: var(--fondo); color: var(--grigio); cursor: default; border-color: var(--linea);
}
.giorno .data { font-size: 12px; color: var(--grigio); text-transform: uppercase; letter-spacing: .04em; }
.giorno .numero { font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; }
.giorno .liberi { font-size: 12px; margin-top: 6px; }
.giorno .liberi b { color: var(--verde); }
.giorno.esaurito .liberi b { color: var(--rosso); }
.giorno .mia { font-size: 11px; color: var(--blu); margin-top: 4px; font-weight: 600; }

/* --- finestra di prenotazione --------------------------------------------- */
.velo {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 40;
}
.finestra {
  background: var(--bianco); border-radius: 10px; padding: 28px;
  width: 100%; max-width: 430px; max-height: 90vh; overflow-y: auto;
}
.finestra h2 { margin-bottom: 4px; }
.finestra .sottotitolo { color: var(--grigio); font-size: 14px; margin: 0 0 18px; }
.finestra .azioni { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.conto {
  background: var(--fondo); border-radius: var(--raggio); padding: 13px 15px;
  font-size: 14px; margin-top: 4px;
}
.conto div { display: flex; justify-content: space-between; }
.conto .totale { font-weight: 700; border-top: 1px solid var(--linea); margin-top: 8px; padding-top: 8px; }

@media (max-width: 640px) {
  .pagina { padding: 22px 14px 50px; }
  .scheda { padding: 18px; }
  h1 { font-size: 24px; }
  .striscia .dentro { padding: 14px; gap: 12px; }
  .marchio img { height: 26px; }
  .insegna { padding: 8px 14px 34px; }
  .insegna h1 { font-size: 26px; }
  .piede a { font-size: 22px; }
}