/* Stili Generali */

:root {
  /* Definizione delle variabili colore */
  --colore-simulatore: #c0ce00;
}

.container-simulatore {
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: var(--colore-simulatore);
}

h2 {
    color: var(--colore-simulatore);
    margin-bottom: 10px;
}

h3 {
    color: var(--colore-simulatore);
}

h3 span{
	color: #000;
}

.card {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-group {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    border: 1px solid var(--colore-simulatore);
}

.green-border {
    border-color: #c0ce00; /* Un bordo leggermente verde */
}

@media (max-width: 600px) {
    
    /* 1. Disabilita il Flexbox sul contenitore della riga */
    .form-row {
        display: block; /* Torna al normale flusso di blocco, incolonnando gli elementi */
    }

    /* 2. Assicura che ogni gruppo di form occupi l'intera larghezza */
    .form-group {
        width: 100%;
        /* Rimuoviamo il flex: 1; che non è più necessario */
    }

    /* 3. Assicura che le 'righe' abbiano una spaziatura adeguata se non usano già margin-bottom */
    .form-group {
        margin-bottom: 15px;
    }
}

@media (min-width: 600px) {

	/* Form Styling */
	.form-row {
		display: flex;
		gap: 20px;
		margin-bottom: 15px;
	}

	.form-group {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
}

.form-group{
	justify-content: end;
}

.form-group.full-width {
    flex: 0 0 100%; /* Pieno larghezza */
}

label {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.9em;
}

input[type="text"],
input[type="number"],
input[type="email"],
select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
}

/* Shape Selector (Radio Buttons for Tetto/Forma) */
.shape-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.shape-selector input[type="radio"] {
    display: none;
}

.shape-selector label, .div-form-aiuto {
    display: grid;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    width: 140px; /* Larghezza fissa per le opzioni */
    text-align: center;
}

.div-form-aiuto{
	background-color: var(--colore-simulatore);
	color: #fff;
	width: 350px;
	font-size: 16px;
	font-weight: bold;
}

.div-form-aiuto strong{
	font-size: 20px;
	color: #fff;	
}

.shape-selector label img {
    width: 130px;
    margin-bottom: 5px;
    border: 0px solid #e0e0e0; /* Placeholder per le immagini */
}

.shape-selector input[type="radio"]:checked + label {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
    background-color: #e8f5e9;
}

/* Button Styling (Calcola) */
.calculate-button-container {
    text-align: center;
    margin-top: 30px;
}

.calculate-button {
    background-color: #cddc39; /* Giallo/Verde chiaro */
    color: #333;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
}

.calculate-button:hover {
    background-color: #afb42b;
}

/* --- Risultato Simulazione (calcola.php) --- */

/* Stile per il container che tiene il titolo e la descrizione */
.simulazione-result-header {
    /* Sfondo: Sfumatura da un verde chiaro/giallo a un verde medio */
    background: linear-gradient(to right, #cddc39, #4caf50); 
    
    /* Spaziatura interna */
    padding: 20px; 
    
    /* Bordi arrotondati solo in alto */
    border-radius: 8px 8px 0 0;
    
    /* Centra il testo */
    text-align: center; 
    
    /* Ombra (opzionale, ma aiuta a separare il box) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Stile per il titolo "Risultato della Simulazione" */
.simulazione-result-header h2 {
    /* Colore del testo (un viola scuro/blu navy come nell'immagine) */
    color: #rgb(31 41 55 / var(--tw-text-opacity, 1))
    
    /* Dimensione e peso del font */
    font-size: 1.8em;
    font-weight: bold;
    
    /* Rimuove i margini predefiniti */
    margin: 0; 
    
    /* Spaziatura tra titolo e sottotitolo */
    margin-bottom: 5px; 
}

/* Stile per la descrizione "Ecco la valutazione..." */
.simulazione-result-header p {
    /* Colore leggermente più chiaro per il sottotitolo */
    color: #333; 
    
    /* Dimensione del font */
    font-size: 1.1em;
    
    /* Rimuove i margini */
    margin: 0; 
}

.result-card {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.result-summary {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* Container principale che allinea gli elementi */
.classe-energetica-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 20px; /* Spazio intorno, se necessario */
}

/* Stile del cerchio (il box verde) */
.classe-energetica-circle {
    /* Dimensioni e forma */
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Essenziale per creare un cerchio */

    /* Allineamento interno */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Sfondo e bordo - IL COLORE DEVE ESSERE DINAMICO */
    /* Usiamo un colore di default qui, ma il PHP lo sovrascrive */
    background-color: #4CAF50; 
    border: 15px solid #E8F5E9; /* Bordo esterno chiaro (come nell'immagine precedente) */

    /* Ombra esterna (per l'effetto 3D/rilievo) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombra leggera ma visibile */
}

/* Stile per la lettera della classe (es. "B") */
.classe-letter {
    color: white; /* Lettera Bianca */
    font-size: 4.5em; /* Dimensione grande */
    font-weight: 700; /* Molto spesso */
    line-height: 1;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); /* Piccola ombra sul testo per farlo risaltare */
    /* NOTA: nell'immagine fornita, l'ombra è più chiara, potresti preferire: */
    /* text-shadow: 0 2px 0 white, 0 4px 0 #AAA; */
}

/* Stile per l'etichetta "Classe Energetica" */
.classe-label {
    color: white; /* Testo Bianco */
    font-size: 0.9em;
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* Piccola ombra sul testo */
    margin-top: 5px; /* Spazio dalla lettera */
}

.classe-letter {
    font-size: 4em;
    font-weight: bold;
    line-height: 1;
}

.kwh-value {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

.prestazione {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}

/* Scala Energetica */
.scala-energetica-container {
    width: 450px;
    text-align: center;
}

.scala-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.scala-energetica {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    height: 30px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.classe-scala-item {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
}

/* Colori statici della scala (sovrascritti dinamicamente nel PHP) */
.classe-scala-item:nth-child(1) { background-color: #009933; } /* A+ */
.classe-scala-item:nth-child(2) { background-color: #33CC33; } /* A */
.classe-scala-item:nth-child(3) { background-color: #66CC66; } /* B */
.classe-scala-item:nth-child(4) { background-color: #FFCC00; } /* C */
.classe-scala-item:nth-child(5) { background-color: #FF9933; } /* D */
.classe-scala-item:nth-child(6) { background-color: #FF6600; } /* E */
.classe-scala-item:nth-child(7) { background-color: #FF3300; } /* F */
.classe-scala-item:nth-child(8) { background-color: #CC0000; } /* G */


/* Puntatore Freccia */
.scala-label-container {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
}

.scala-label-pointer-wrapper {
    position: absolute;
    width: 100%;
    height: 10px;
    top: -10px; /* Allinea sopra la scala */
}

.scala-energetica-pointer {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #333; /* Colore della freccia */
    /* left è dinamico tramite style nel PHP */
    transform: translateX(-50%); /* Centra la freccia sul suo punto di ancoraggio */
}

.scala-label-item {
    font-size: 0.8em;
    color: #666;
}

.scala-label-item.right {
    text-align: right;
}

/* ID Simulazione */
.simulazione-id {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
    color: #999;
}

.simulazione-id span:last-child {
    font-weight: bold;
    color: #666;
    margin-left: 10px;
}

/* Bottoni aggiuntivi */
.button-group {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn {
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.btn-secondary {
    background-color: #f0f0f0;
    color: #333;
}

.btn-secondary:hover {
    background-color: #e0e0e0;
}

.btn-primary {
    background-color: #00796b;
    color: white;
}

.btn-primary:hover {
    background-color: #004d40;
}

/* CTA Report */
.cta-report {
    background-color: #e8f5e9; /* Sfondo verde chiaro per risalto */
    text-align: center;
}

.cta-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-cta-secondary {
    background-color: #66BB6A;
    color: white;
}

.btn-cta-primary {
    background-color: #aed581;
    color: #333;
}


/* --- NUOVI STILI PER IL BOX RISULTATO (Replicando Tailwind) --- */

/* Contenitore principale (rounded-lg, overflow-hidden, shadow-2xl, border-2) */
.result-box-container {
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    overflow: hidden; /* overflow-hidden */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-2xl */
    color: #0a0a0a; /* text-gray-950 */
    margin-bottom: 30px;
}

/* Header (bg-gradient, text-center, p-6 sm:p-8) */
.result-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* space-y-1.5 */
    background: linear-gradient(to bottom right, #4CAF50, #CDDC39); /* from-primary-green to-lime-500 */
    text-align: center;
    padding: 1.5rem; /* p-6 */
}
/* Media Query per p-8 (schermi sm/md) */
@media (min-width: 640px) {
    .result-header-content {
        padding: 2rem; /* sm:p-8 */
    }
}

.result-header-content h3 {
    color: #000;
    font-size: 1.5rem; /* text-2xl */
    letter-spacing: -0.025em; /* tracking-tight */
    margin: 0;
}
@media (min-width: 640px) {
    .result-header-content h3 {
        font-size: 1.875rem; /* sm:text-3xl */
    }
}

.result-header-content p {
    color: #374151; /* text-gray-700 */
    font-size: 1rem; /* text-base */
    margin: 0;
}
@media (min-width: 640px) {
    .result-header-content p {
        font-size: 1.125rem; /* sm:text-lg */
    }
}


/* Corpo Principale (p-4 sm:p-6 md:p-8) */
.result-body {
    padding: 1rem; /* p-4 */
}
@media (min-width: 640px) {
    .result-body {
        padding: 1.5rem; /* sm:p-6 */
    }
}
@media (min-width: 768px) {
    .result-body {
        padding: 2rem; /* md:p-8 */
    }
}

/* Grid (grid, md:grid-cols-2, gap-6 sm:gap-8) */
.result-grid {
    display: grid;
    gap: 1.5rem; /* gap-6 */
    align-items: center; /* items-center */
    grid-template-columns: 1fr; /* Default a 1 colonna */
}
@media (min-width: 640px) {
    .result-grid {
        gap: 2rem; /* sm:gap-8 */
    }
}
@media (min-width: 768px) {
    .result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

/* Colonna Classe Energetica (flex-col, items-center, justify-center, space-y-4) */
.class-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* space-y-4 */
    text-align: center;
}

/* Cerchio Energetico (w-40 h-40, rounded-full, shadow-lg) */
.class-circle {
    width: 13rem; /* w-40 */
    height: 13rem; /* h-40 */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
    /* Background DINAMICO (gestito dal PHP) */
}
@media (min-width: 640px) {
    .class-circle {
        width: 13rem; /* sm:w-48 */
        height: 13rem; /* sm:h-48 */
    }
}

/* Lettera (text-5xl, font-extrabold, tracking-tighter) */
.class-letter {
    font-size: 3rem; /* text-5xl */
    font-weight: 600; /* font-extrabold */
    letter-spacing: -0.05em; /* tracking-tighter */
}
@media (min-width: 640px) {
    .class-letter {
        font-size: 3.75rem; /* sm:text-6xl */
    }
}

/* Etichetta Classe Energetica (text-base, font-semibold) */
.class-label-text {
    font-size: 1rem; /* text-base */
    font-weight: 400; /* font-semibold */
}
@media (min-width: 640px) {
    .class-label-text {
        font-size: 1.125rem; /* sm:text-lg */
    }
}

/* Valore kWh */
.kwh-value-large {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-bold */
    color: #1f2937; /* text-gray-800 */
}
@media (min-width: 640px) {
    .kwh-value-large {
        font-size: 2.25rem; /* sm:text-4xl */
    }
}

.kwh-unit {
    font-size: 1.125rem; /* text-lg */
    font-weight: 400; /* font-normal */
    color: #6b7280; /* text-gray-500 */
}
@media (min-width: 640px) {
    .kwh-unit {
        font-size: 1.25rem; /* sm:text-xl */
    }
}

/* Prestazione */
.performance-text {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    margin: 0;
}
@media (min-width: 640px) {
    .performance-text {
        font-size: 1rem; /* sm:text-base */
    }
}

/* Scala Energetica */
.energy-scale-container {
    gap: 1rem; /* space-y-4 */
}

.scale-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 500; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    text-align: center;
}
@media (min-width: 768px) {
    .scale-title {
        text-align: left; /* md:text-left */
    }
}

.scale-bar-wrapper {
    position: relative;
    padding: 0.5rem; /* p-2 */
    background-color: #f3f4f6; /* bg-gray-100 */
    border-radius: 0.5rem; /* rounded-lg */
}

.energy-scale-gradient {
    height: 1.5rem; /* h-6 */
    width: 100%;
    border-radius: 0.375rem; /* rounded-md */
    display: flex;
    overflow: hidden;
}

.scale-item {
    flex: 1 1 0%; /* flex-1 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600; /* font-bold */
    font-size: 0.75rem; /* text-xs */
}

/* Freccia Puntatore */
.pointer-wrapper {
    position: absolute;
    top: 100%; /* top-full */
    margin-top: 0.25rem; /* mt-1 */
    left: 0;
    width: 100%;
    /* transform: translateX è gestito dinamicamente dal PHP */
    opacity: 1; 
}

.pointer-arrow {
    position: relative;
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    transform: translateX(-50%); /* -translate-x-1/2 */
}

.arrow-shape {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #1f2937; /* border-b-gray-800 */
    transform: translateY(-0.25rem); /* -translate-y-1 */
}

.scale-labels {
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* text-gray-500 */
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem; /* px-1 */
}

/* Sezione ID Simulazione */
.id-simulazione-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 1rem; /* p-4 */
}

.id-simulazione-value-text-container {
    text-align: center;
}

.id-simulazione-value-label {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-gray-500 */
}

.id-simulazione-value-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
}

.id-simulazione-value {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
}

/* Stile per l'icona di copia */
.copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Altre classi Tailwind convertite */
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 2rem; /* w-8 */
    height: 2rem; /* h-8 */
}

/* --- STILI PER LA GRIGLIA DI MISURE (Replicando Tailwind) --- */

/* Contenitore della griglia */
.misure-grid-container {
    /* Mantiene la separazione con il blocco superiore (border-t border-gray-200) */
    border-top: 1px solid #e5e7eb; 
    padding: 1rem; /* p-4 */
    margin-top: 1rem; /* mt-4 */
    
    /* Griglia base (grid grid-cols-2) */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; /* gap-4 */
}

/* Media query per schermi più grandi (md:grid-cols-4) */
@media (min-width: 768px) {
    .misure-grid-container {
        grid-template-columns: repeat(4, 1fr);
        /* Usato per fare in modo che la griglia occupi 2 colonne 
           se fosse all'interno di un grid principale, se la togli, 
           semplicemente occuperà tutta la larghezza. */
        /* grid-column: span 2; */ 
    }
}

/* Stile per un singolo campo (space-y-2) */
.input-group-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 */
}

/* Stile per l'etichetta (label) */
.input-group-stack label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    line-height: 1.5; /* leading-none */
    color: #374151; /* Colore scuro */
}

/* Stile per il campo di input numerico (l'aspetto è cruciale) */
.styled-number-input {
    /* Dimensione e forma (flex h-10 w-full rounded-md) */
    display: flex;
    height: 2.5rem; /* h-10 */
    width: 100%;
    border-radius: 0.375rem; /* rounded-md */

    /* Bordo e Sfondo (border border-gray-300 bg-white) */
    border: 1px solid #d1d5db; /* gray-300 */
    background-color: white;

    /* Spaziatura del testo */
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    font-size: 0.875rem; /* text-sm */
    
    /* Placeholder e focus */
    color: #1f2937; /* Colore testo */
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s; 
}

/* Stato Focus (focus-visible:ring-2 focus-visible:ring-primary-green) */
.styled-number-input:focus {
    border-color: #4CAF50; /* primary-green */
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5); 
}

/* Stato Disabled (disabled:opacity-50) */
.styled-number-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.color-black{
	color: black !important;
}


#risultato-simulazione{
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: relative; /* Importante per posizionare l'overlay correttamente */
}

/* Stili per l'overlay del loader */
.loader-dots {
	
	display: flex; 
    justify-content: center;
    align-items: center;
    height: 100px; /* Altezza per visualizzare l'animazione */
	z-index: -1;
  
}

.loader-dots div {
  width: 10px;
  height: 10px;
  margin: 0 5px; /* Spazio tra i puntini */
  background-color: #cddc39; /* Colore dei puntini */
  border-radius: 50%; /* Rende i div dei cerchi */
  animation: bounce 1.2s infinite ease-in-out both; /* Applica l'animazione */
}

/* Ritarda l'animazione per creare l'effetto onda */
.loader-dots div:nth-child(1) {
  animation-delay: -0.4s;
}

.loader-dots div:nth-child(2) {
  animation-delay: -0.2s;
}

.loader-dots div:nth-child(3) {
  animation-delay: 0s;
}

/* Definizione dell'animazione di "rimbalzo" (bounce) */
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0); /* Inizia e finisce rimpicciolito */
  }
  40% {
    transform: scale(1); /* Al 40% è della dimensione normale */
  }
}

.loading-overlay-simulatore {
    position: absolute; /* Posizionamento assoluto rispetto al genitore */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Sfondo semi-trasparente bianco/grigio */
    z-index: 10; /* Assicura che sia sopra gli altri contenuti */
    
    /* Per centrare il loader al suo interno */
    display: flex;
    justify-content: center;
    align-items: center;
}

label[for="checkbox_id"] a {
	color: white; 
}

label[for="checkbox_id"] a:hover {
	color: white; 
}