/* =====================================================
   CUSTOM.CSS — Personalizzazione 3D Smart City
   Modifica i valori e ricarica sul server via FTP
   ===================================================== */


/* --- SFONDO (colore dietro il modello e durante il caricamento) --- */
html, body,
.animation-section {
  background: transparent;
}

/* --- SPINNER DI CARICAMENTO --- */
.spinner {
  background: transparent;
}

.spinner__ring {
  border-color: rgba(114, 183, 94, 0.25);
  border-top-color: #72B75E;
}


/* --- ALTEZZA SCENA ---
   L'altezza si controlla dall'attributo height dell'iframe in Elementor.
   Esempio: <iframe height="800"> oppure <iframe height="100vh">
   Non modificare questa regola. */


/* --- FONT GLOBALE --- */
body {
  font-family: 'Poppins', Arial, sans-serif;
}


/* --- POSIZIONE BARRA CONTROLLI (distanza dal basso) --- */
.animation-section__controls-container {
  bottom: 5vh;
  gap: 14px; /* spazio tra i pulsanti */
}


/* --- PULSANTI DI CONTROLLO --- */
.animation-section__control {
  background: rgba(114, 183, 94, 0.7);        /* #72B75E in semitrasparenza effetto vetro */
  backdrop-filter: blur(5px);                  /* sfocatura vetro */
  -webkit-backdrop-filter: blur(10px);          /* Safari */
  border: 1px solid rgba(185, 232, 168, 0.6);  /* bordo leggermente più chiaro dello sfondo */
  border-radius: 5px;                           /* arrotondamento angoli */
  color: #ffffff;                               /* testo bianco */
  height: 96px;                                 /* altezza pulsante */
  min-width: 120px;                             /* larghezza minima */
  padding: 14px 24px;                           /* spazio interno */
}


/* --- TESTO LABEL PICCOLA (Land Use, Sun Position...) --- */
.bodyM {
  font-size: 14px;
  font-weight: 500;
}


/* --- TESTO LABEL GRANDE (Share) --- */
.bodyL {
  font-size: 16px;
  font-weight: 500;
}


/* --- ICONA PRINCIPALE DEL PULSANTE --- */
.control-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1); /* rende l'icona bianca */
}


/* --- CERCHIETTO + / - (Plan Build e Comment) --- */
.control__icon-container {
  background: rgba(31, 61, 77, 0.15); /* sfondo cerchietto */
  border-radius: 10px;
  padding: 8px;
}

.control__icon-container img {
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1); /* rende le icone + e - bianche */
}


/* --- TOGGLE ON/OFF (Land Use) --- */
.slider {
  background: #609a4f; /* colore track quando OFF */
}

input:checked + .slider {
  background: #2d5023; /* colore track quando ON */
}


/* --- SLIDER SOLE (Sun Position) --- */
.control__range {
  width: 120px;
}


/* --- TOOLTIP COMMENTI (fumetto sui pin 3D) --- */
.animation-section__animation-area-scene_tooltip {
  background: rgba(0, 0, 0, 0.9); /* sfondo fumetto */
  color: #ffffff;                   /* colore testo */
  border-radius: 2px;
  padding: 10px 14px;
  max-width: 260px;                 /* larghezza massima */
}


/* --- PULSANTE CONDIVIDI (icona e testo centrati insieme) --- */
.share-image-scene {
  justify-content: center;
  gap: 10px;
}


/* --- NASCONDERE CONTROLLI (togli il commento per nascondere) --- */
/* .share-image-scene                  { display: none; } */ /* Share */
/* .animation-section__control:nth-child(1) { display: none; } */ /* Land Use */
/* .animation-section__control:nth-child(2) { display: none; } */ /* Sun Position */
/* .animation-section__control:nth-child(3) { display: none; } */ /* Plan / Build */
/* .animation-section__control:nth-child(4) { display: none; } */ /* Comment */