/* NUOVA PALETTE MINIMALE RAFFINATA - DARK MODE */
 :root{
  /* Sfondo molto scuro, quasi nero */
  --bg: #121212; 
  /* Sfondo di elementi chiari/card */
  --card: #1e1e1e; 
  /* Colore Acceso (Rosa/Rosso) - Mantenuto per impatto */
  --main-color: #c90000; 
  /* Testo principale chiaro/bianco sporco */
  --text-dark: #f0f0f0; 
  /* Grigio elegante per testo secondario (leggermente più chiaro per visibilità) */
  --muted: #a0a0a0; 
  /* Bordo molto sottile e scuro */
  --stroke: #333333; 
  /* Ombra interna o leggera per sollevare gli elementi scuri */
  --shadow: 0 4px 15px rgba(0,0,0,0.5);
  /* Sfondo input/campi chiaro */
  --input-bg: #2b2b2b; 
 }
 
 *{box-sizing:border-box}
 
 /* Stile di base: sfondo scuro, font più leggero */
 html,body{
  height:100%; 
  margin:0; 
  font-family:'Inter',system-ui,Arial,sans-serif; 
  background:var(--bg); 
  color:var(--text-dark); 
  font-weight:400; 
  -webkit-tap-highlight-color: transparent;
 }
 
 header{
  padding:18px 22px;
  text-align:center;
  background: var(--card);
  border-bottom:1px solid var(--stroke); 
  position: relative;
  z-index: 10;
  height: 59px; 
 }
 header h1{
  margin:0; 
  font-weight:800; 
  letter-spacing:4px; 
  font-size:20px; 
  color: var(--main-color);
 } 
 header p{
  margin:6px 0 0; 
  color:var(--muted); 
  font-size:13px; 
  font-weight:500;
 }
 
 /* layout screens: .screen è nascosto, .screen.active è mostrato */
 .screen{display:none; padding:0} 
 #home-screen.active {display: flex;}
 #map-screen.active {display: block;}
 
 .center {
  max-width:1100px;
  margin:18px auto;
  padding: 0 22px;
 }
 
 /* --- HOME SCREEN (ULTRA COMPATTA E NON SCORREVOLE) --- */
 #home-screen {
  background: var(--bg);
  height: calc(100vh - 59px); 
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  padding: 20px 22px; 
  color: var(--text-dark); 
  text-align: center;
  overflow: hidden; 
 }
 
 .home-content {
  max-width: 600px; 
  width: 100%;
  padding: 30px 40px; 
  background: var(--card); 
  border-radius: 16px;
  /* Ombra meno pronunciata sul fondo scuro */
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  border: 1px solid var(--stroke);
  margin: 0; 
  display: flex; 
  flex-direction: column;
  align-items: center; 
 }
 
 .home-content .pre-title {
  font-weight: 700; 
  font-size: 18px;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  color: var(--main-color); 
  text-transform: uppercase;
 }
 
 .home-content h2 {
  font-size: 38px; 
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 25px;
 }
 
 /* Stili pulsanti HOME (adattati per compattezza) */
 .big-btn, .ghost-btn{
  display:block;
  width:100%; 
  padding:16px 24px; 
  font-size:19px; 
  border-radius:14px; 
  font-weight:700; 
  cursor:pointer;
  margin-top:12px; 
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s;
  text-decoration: none;
  /* Ombra più scura */
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
  text-align: center; 
  max-width: 400px; 
  border: none;
 }
 
 /* Pulsante Primario HOME */
 .big-btn{
  background:var(--main-color); 
  color:white; 
  border:1px solid var(--main-color);
 }
 .big-btn:hover{
  background: #e31b4e;
  transform: translateY(-2px);
  /* Ombra più intensa */
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
 }
 
 /* Pulsante Secondario HOME - Aggiornato per Dark Mode */
 .ghost-btn{
  background:var(--input-bg); /* Sfondo leggermente sollevato */
  border:1.5px solid var(--stroke); 
  color:var(--text-dark);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
 }
 .ghost-btn:hover{
  background: #3a3a3a; /* Effetto hover scuro */
  border-color: #555555; 
  transform: translateY(-1px);
 }
 
 .button-subtext {
  font-size: 15px; 
  opacity: 1;
  margin-top: 5px; 
  display: block;
  font-weight: 500; 
  color: white; /* Testo sub-button primario rimane bianco */
  line-height: 1.2;
 }
 
 .ghost-btn .button-subtext {
  color: var(--muted); 
 }
 
 /* NUOVO STILE FOOTER ESCLUSIVO HOME */
 .home-footer{
  width: 100%;
  max-width: 600px; 
  margin-top: 20px; 
  padding: 10px 20px;
  background: transparent; 
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
 }
 
 /* map container */
 .map-wrap{
  max-width:1100px;
  margin:18px auto 80px;
  padding:16px; 
  border:1px solid var(--stroke);
  background: var(--card);
  border-radius:12px;
  box-shadow:var(--shadow);
 }
 
 /* --- STILI PER IL FLUSSO A SCHERMO INTERO --- */
 #full-screen-flow {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  z-index: 100;
  overflow-y: auto; 
 }
 
 .flow-content {
  max-width: 500px;
  margin: 15px auto 120px; 
  padding: 0 22px;
 }
 
 /* Gestione Steps */
 .step {
  display: none;
  padding-bottom: 20px;
 }
 .step.active {
  display: block;
 }
 
 /* Header Step - Fisso in alto */
 .flow-header {
  background: var(--card);
  border-bottom: 1px solid var(--stroke);
  padding: 15px 22px;
  position: sticky;
  top: 0;
  z-index: 10;
 }
 .flow-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
 }
 .flow-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
 }
 
 /* --- FOOTER NAVIGAZIONE (RIGENERATO) --- */
 .flow-nav {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background: var(--card);
   padding: 15px 22px;
   /* Ombra più scura in alto */
   box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
   display: flex;
   gap: 10px;
   z-index: 110;
 }
 
 /* CLASSE BASE DEFINITIVA: STESSE PROPORZIONI, ALTEZZA E BORDO PER ENTRAMBI */
 .flow-nav .flow-button-base {
   padding: 16px 18px; 
   font-size: 16px; 
   border-radius: 10px;
   font-weight: 700;
   cursor: pointer;
   height: 54px; 
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity 0.2s, background 0.2s, border-color 0.2s;
   border: 1px solid transparent; 
 }
 
 /* SPECIFICHE COLORE E DIMENSIONE ANNULLA (1/3) - Aggiornato per Dark Mode */
 .flow-nav .btn-annulla {
   flex-grow: 1; 
   background: #333333; /* Sfondo scuro */
   color: var(--text-dark); 
   border-color: #444444; 
 }
 
 /* SPECIFICHE COLORE E DIMENSIONE AVANTI (2/3) */
 .flow-nav .btn-avanti {
   flex-grow: 2; 
   background:var(--main-color); 
   color:white; 
   border-color: var(--main-color);
 }
 /* --- FINE FOOTER NAVIGAZIONE --- */
 
 /* Nasconde le freccette del campo number (buona pratica) */
 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
 }
 input[type=number] { 
  -moz-appearance: textfield; 
 }
 
 /* --- STILI SELEZIONE DATA con Icona --- */
 .date-selection-container {
  position: relative;
  width: 100%;
  max-width: 350px; 
  margin: 0 auto 25px;
 }
 /* Icona Calendario */
 .calendar-icon {
  position: absolute;
  top: 50%;
  left: 15px; 
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--main-color);
  pointer-events: none; 
  z-index: 1; 
 }
 
 #selected-date-input {
   width: 100%;
   height: 55px;
   padding: 15px 15px 15px 45px; 
   font-size: 18px;
   font-weight: 700;
   color: var(--text-dark);
   background: var(--input-bg); /* Sfondo input scuro */
   border: 1px solid var(--stroke);
   border-radius: 12px;
   text-align: left; 
   cursor: pointer;
   transition: border-color 0.2s, box-shadow 0.2s;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: none;
 }
 /* Rende il testo grigio se il campo è vuoto o non compilato */
 #selected-date-input:invalid {
  color: var(--muted);
 }
 
 #selected-date-input:focus {
   border-color: var(--main-color);
   /* Ombra focus con trasparenza sulla tonalità principale */
   box-shadow: 0 0 0 3px rgba(245, 56, 96, 0.3);
 }
 /* Rimuove l'icona nativa della freccia/calendario per usare la nostra */
 #selected-date-input::-webkit-calendar-picker-indicator {
   opacity: 0;
   position: absolute;
   width: 100%;
   height: 100%;
   cursor: pointer;
   top: 0;
   left: 0;
 }
 /* Fine Nuovi Stili */
 
 
 /* Stepper Component */
 .stepper-input {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-width: 250px; 
   margin: 0 auto; 
   background: var(--input-bg); /* Sfondo stepper scuro */
   border: 1px solid var(--stroke);
   border-radius: 10px;
   overflow: hidden;
   height: 50px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 .stepper-btn {
   background: transparent;
   border: none;
   color: var(--main-color);
   font-size: 28px;
   font-weight: 300;
   width: 50px;
   height: 100%;
   cursor: pointer;
   transition: background-color 0.1s;
   outline: none;
   user-select: none;
 }
 .stepper-btn:hover:not(:disabled) {
   /* Hover con meno opacità per un effetto sottile */
   background: rgba(245, 56, 96, 0.15);
 }
 .stepper-input div {
   font-size: 20px;
   font-weight: 700;
   color: var(--text-dark);
   padding: 0 10px;
   min-width: 50px;
   text-align: center;
   flex-grow: 1;
 }
 .stepper-btn:disabled {
   color: var(--muted);
   cursor: default;
   background: transparent;
   opacity: 0.5;
 }
 /* Fine Stepper */
 
 /* Stili Specifici Button Flow */
 .btn-wp{ 
   background:#25D366; 
   color:white; 
   border: 1px solid #25D366; 
   padding: 16px 18px;
   border-radius: 10px;
   font-size: 16px;
   font-weight: 700;
   cursor: pointer;
   transition: opacity 0.2s;
 }
 
 .flow-button-base.btn-avanti.disabled {
   opacity: 0.6;
   pointer-events: none;
 }
 
 /* === NUOVI STILI PER IL RIEPILOGO PROFESSIONALE === */
 .summary-card {
   background: var(--card); /* Sfondo card scuro */
   border: 1px solid var(--stroke);
   border-radius: 12px;
   padding: 20px;
   box-shadow: var(--shadow);
 }
 .summary-title {
   font-weight: 800;
   font-size: 18px;
   margin: 0 0 15px;
   text-align: center;
   color: var(--main-color);
 }
 .summary-row {
   display: flex;
   justify-content: space-between;
   font-size: 15px;
   padding: 10px 0;
 }
 .summary-row span:first-child {
   color: var(--muted);
   font-weight: 500;
 }
 .summary-row span:last-child {
   color: var(--text-dark);
   font-weight: 700;
 }
 .summary-divider {
   /* Linea più sottile e scura */
   border-top: 1px dashed #444444; 
   margin: 10px 0;
 }
 .summary-total {
   font-weight: 800;
   font-size: 18px;
   color: var(--text-dark);
 }
 .summary-note {
   font-size: 13px;
   color: var(--muted);
   margin-top: 15px;
   text-align: center;
   line-height: 1.5;
 }
 
 /* MAP SCREEN STYLES */
 .map-header{
  display:flex;
  flex-direction: column; 
  align-items: flex-start; 
  padding: 10px 15px 20px; 
  position: relative; 
 } 
 .map-title{font-weight:700; font-size: 16px; color: var(--text-dark); margin-top: 5px;} 
 .map-sub{color:var(--muted); font-size:14px; margin-top: 5px;} 
 
 .back-btn {
  position: absolute;
  top: 50%;
  left: 18px; 
  transform: translateY(-50%);
  background: #333333; /* Sfondo bottone scuro */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  width: 38px; 
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50; 
  transition: background 0.2s, box-shadow 0.2s;
 }
 .map-header > div {
  margin-left: 48px; 
 }
 .back-btn svg {
  display: block;
  width: 20px; 
  height: 20px;
  fill: var(--text-dark); /* Icona chiara */
  stroke: none; 
  transition: fill 0.2s;
 }
 .back-btn:hover {
  background: #444444; /* Hover scuro */
 }
 
 svg{
  width:100%; 
  height:auto; 
  display:block; 
  border-radius:10px; 
  /* Sfondo SVG più scuro con gradiente sottile */
  background:linear-gradient(180deg,#2b2b2b,#252525);
 }
 
 .tbl {
  fill: #3a3a3a; /* Area cliccabile scura */
  stroke: #444444; /* Bordo scuro */
  stroke-width:3; 
  cursor:pointer;
  transition: transform .1s, fill .1s;
 }
 .tbl:hover{ 
  transform: translateY(-3px); 
  /* Hover con colore principale in trasparenza */
  fill: rgba(245, 56, 96, 0.2); 
 } 
 
 .tbl-label { 
  pointer-events:none; 
  fill:var(--text-dark); /* Etichetta chiara */
  font-size:35px; 
  font-weight:700; 
 } 
 
 .nonclick { 
  fill:#252525; /* Area non cliccabile molto scura */
  stroke:#333333; 
  stroke-width:2px; 
  cursor:default 
 }
 .nonclick .tbl-label { 
  opacity: 0.6; /* Testo leggermente meno visibile */
  font-size:30px; 
 } 
 
 /* Media Queries per la compattezza mobile */
 @media (max-width: 600px) {
  /* La Home deve essere compatta */
  #home-screen {
    padding: 10px 22px; 
  }
  
  /* Revert per schermi piccoli per evitare che sia troppo grande */
  .home-content { 
    padding: 20px 20px; 
    box-shadow: none; 
    border: none; 
    background: transparent; 
  }
  .home-content h2 { 
    font-size: 28px; 
    margin-bottom: 25px; 
  }
  .home-content .pre-title {
    font-size: 15px; 
  }
  .big-btn, .ghost-btn { 
    max-width: 100%; 
    font-size: 17px; 
    padding: 16px 18px; 
    margin-top: 10px; 
  }
  .button-subtext {
    font-size: 13px; 
  }
  
  /* Footer home mobile */
  .home-footer {
      margin-top: 15px;
  }
 
  /* Stili Mappa e Flow */
  #map-screen .center { padding: 0 0; margin: 0 auto; }
  .map-wrap { border-radius: 0; box-shadow: none; border: none; padding: 10px; margin: 0 auto 60px; }
  .flow-content {
    padding: 0 20px;
    margin-top: 10px;
    margin-bottom: 120px; 
  }
  .flow-header {
    padding: 15px 20px;
  }
  .flow-header .back-btn {
    left: 20px;
  }
  .flow-nav {
      padding: 15px 20px;
  }
  .date-selection-container {
      max-width: 100%; 
  }
 }