/* =========================================
   2. LAYOUT PAGINA TEST (Struttura)
   ========================================= */

/* Header ridotto specifico per il test */
.page-header-slim {
    min-height: 45vh !important; 
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

/* Sezione che si sovrappone all'header */
.test-section {
    width: 100%;
    position: relative;
    z-index: 10;
}

/* La "Console" di vetro */
.test-console-card {
    background-color: rgba(11, 25, 127, 0.3) !important;
    border: 1px solid rgba(111, 202, 255, 0.2);
}

.question-number {
    font-weight: 200;
    color: #6fcaff;
    letter-spacing: 2px;
}

/* Progress Bar */
.progress-hex {
    height: 6px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 10px;
    overflow: hidden;
}
.progress-bar-hex-fill {
    background-image: linear-gradient(310deg,#6fcaff,#009ace);
}

/* Testo Domanda */
.domanda-text {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
    
}

/* Separatore tra le domande */
.domanda-separator {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 1.5rem !important;
    margin-bottom: 4rem !important;
}

/* =========================================
   3. SCALA DI RISPOSTA (Custom Radio)
   ========================================= */

/* Contenitore generale della scala */
.scale-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 10px 0;
}

/* Linea di sfondo (Track) */
/* .scale-track {
    position: absolute;
    top: 50%;
    left: 60px;
    right: 60px;
    height: 2px;
    background: linear-gradient(to right, #009ace, #5e2375);
    z-index: 0;
    transform: translateY(-50%);
    opacity: 0.5;
} */

/* Etichette testuali (Approvo/Disapprovo) */
.scale-label-text {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.text-approvo { color: #009ace; }
.text-disapprovo { color: #cf542f; }

/* Gruppo dei pulsanti (Flex container) */
.scale-radio-group {
    /* Fondamentale per allineare cerchi di dimensioni diverse */
    align-items: center !important; 
}

/* Nascondiamo i radio button nativi */
.scale-radio-group input[type="radio"] {
    display: none;
}

/* --- STILE CERCHI (LABEL) --- */

/* Stile Base (senza dimensioni fisse) */
.scale-radio-group label {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* Dimensioni Variabili (LG, MD, SM) */
.scale-radio-group label.size-lg { width: 55px; height: 55px; }
.scale-radio-group label.size-md { width: 45px; height: 45px; }
.scale-radio-group label.size-sm { width: 35px; height: 35px; }

/* Mobile adjustments per i cerchi */
@media (max-width: 768px) {
    .scale-radio-group label.size-lg { width: 45px; height: 45px; }
    .scale-radio-group label.size-md { width: 38px; height: 38px; }
    .scale-radio-group label.size-sm { width: 30px; height: 30px; }
}

/* Hover effect */
.scale-radio-group label:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* --- STATI ATTIVI (CHECKED) --- */

/* SI/Approvo (Blu) */
.scale-radio-group input[type="radio"].radio-si:checked + label {
    background: #009ace;
    border-color: #6fcaff;
    box-shadow: 0 0 20px #009ace, inset 0 0 10px rgba(255,255,255,0.5);
}

/* NO/Disapprovo (Arancione) */
.scale-radio-group input[type="radio"].radio-no:checked + label {
    background: #d14a45;
    border-color: #ff816b;
    box-shadow: 0 0 20px #d17645, inset 0 0 10px rgba(255,255,255,0.5);
}



/* =========================================
   4. NAVIGAZIONE (Bottoni Next/Prev)
   ========================================= */
.test-nav-buttons-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.test-btn-nav { 
    min-width: 150px; 
}

/* --- STILE PALLINO NEUTRO (CENTRALE) --- */

/* 1. Nascondiamo il radio button vero e proprio per il neutro 
   (così usiamo solo la label stilizzata) */
.radio-neutral {
    display: none; 
}

/* 2. Stile della Label (il pallino visibile) */
label.size-xs {
    display: inline-block;      /* FONDAMENTALE: Senza questo collassa */
    width: 16px;                /* Larghezza fissa */
    height: 16px;               /* Altezza fissa */
    border-radius: 50%;         /* Cerchio perfetto */
    
    border: 2px solid rgba(255, 255, 255, 0.3); /* Bordo grigio chiaro */
    background-color: transparent; /* Vuoto dentro di default */
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animazione rimbalzo */
    
    margin: 0 auto; /* Centrato */
    position: relative;
    top: 2px; /* Piccolo aggiustamento per allinearlo otticamente agli altri */
}

/* 3. Effetto Hover */
label.size-xs:hover {
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

/* 4. STATO ATTIVO (Quando selezionato) */
/* Seleziona la label che viene subito dopo l'input checked */
input.radio-neutral:checked + label.size-xs {
    background-color: #6c757d;  /* Diventa Grigio Pieno */
    border-color: #fff;         /* Bordo Bianco */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); /* Alone luminoso */
    transform: scale(1.3);      /* Diventa un po' più grande */
}