/* =====================================================
   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 (quadrati animati) --- */
.spinner {
  background: transparent;
}

.spinner__squares span {
  background: #FDC901; /* colore dei quadrati */
}


/* --- 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(0, 0, 0, 0.7) !important;              /* sfondo nero semitrasparente */
    backdrop-filter: blur(5px) !important;                  /* sfocatura vetro */
    -webkit-backdrop-filter: blur(10px) !important;         /* Safari */
    border: 1px solid rgb(47, 47, 47) !important;           /* bordo grigio scuro */
    border-radius: 15px !important;                         /* arrotondamento angoli */
    color: #ffffff !important;                              /* testo bianco */
    height: 96px !important;                                /* altezza pulsante */
    min-width: 120px !important;                            /* larghezza minima */
    padding: 24px 24px !important;                          /* spazio interno */
    font-size: 14px !important;
    font-family: 'Roboto Condensed' !important;
    text-transform: uppercase !important;
    justify-content: flex-start !important;                 /* icona + titolo in alto */
    gap: 10px;                                              /* stessa distanza icona-titolo per tutte le card */
}

/* Spinge il controllo (toggle / slider / +- ) in fondo alla card,
   lasciando la distanza icona-titolo uguale ovunque */
.control__toggle,
.control__range,
.crements {
  margin-top: auto;
}


/* --- TESTO LABEL PICCOLA (Land Use, Sun Position...) --- */
.bodyM {
  font-family: 'Roboto Mono', monospace !important; /* titoli card in Roboto Mono */
  font-size: 14px;
  font-weight: 300 !important;
}


/* --- TESTO LABEL GRANDE (Share) --- */
.bodyL {
  font-family: 'Roboto Mono', monospace !important; /* titoli card in Roboto Mono */
  font-size: 14px;
  font-weight: 300 !important;
}


/* --- ICONA PRINCIPALE DEL PULSANTE --- */
.control-icon {
  width: auto;
  height: 19px; /* icone alte 19px, larghezza in proporzione */
  /* filtro bianco rimosso: le icone nuove sono gialle (#FDC901) */
}


/* --- CERCHIETTO + / - (Plan Build e Comment) --- */
.control__icon-container {
  background: rgb(156 175 185 / 15%); /* sfondo cerchietto */
  border-radius: 5px;
  padding: 8px;
}

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


/* --- TOGGLE ON/OFF (Uso del Suolo) --- */
.slider {
  background: #3a3a3a; /* grigio scuro quando OFF */
}

input:checked + .slider {
  background: #FDC901; /* giallo quando ON */
}


/* --- BARRA DI PROGRESSIONE (Posizione Sole) --- */
.control__range {
  width: 120px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;           /* la barra e disegnata sulla track */
  outline: none;
  cursor: pointer;
}
/* Barra (Chrome / Safari / Edge) */
.control__range::-webkit-slider-runnable-track {
  height: 3px;                       /* barra piu fina */
  border-radius: 3px;
  background:
    linear-gradient(#FDC901, #FDC901) left / var(--range-fill, 50%) 100% no-repeat,
    #3a3a3a;                          /* completamento giallo su sfondo grigio scuro */
}
/* Pallino (Chrome / Safari / Edge) */
.control__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;                  /* (3px track - 13px pallino) / 2 = -5px -> centrato */
  border-radius: 50%;
  border: none;
  background: #FDC901;
  cursor: pointer;
}
/* Firefox */
.control__range::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: #3a3a3a;
}
.control__range::-moz-range-progress {
  height: 3px;
  border-radius: 3px;
  background: #FDC901;
}
.control__range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: #FDC901;
  cursor: pointer;
}


/* --- 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 */
  font-family: 'Roboto', Arial, sans-serif; /* font Roboto */
  font-size: 13px;                  /* leggermente piu piccolo */
  border-radius: 20px;              /* angoli arrotondati */
  padding: 10px 14px;
  max-width: 260px;                 /* larghezza massima */
}


/* --- PULSANTE CONDIVIDI ---
   Eredita da .animation-section__control: icona + testo a 10px come le altre card. */


/* --- 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 */