/* Quando il BODY ha questa classe, lo sfondo di Bootstrap diventa nerissimo */
body.modal-login-active .modal-backdrop {
    opacity: 0.70 !important;   /* Opacità quasi totale (0.98 su 1) */
    background-color: #000 !important; /* Nero puro */
    z-index: 1050 !important;   /* Livello standard backdrop */
}

/* Assicura che la modale sia sopra lo sfondo nerissimo */
#modal_reset_password {
    z-index: 1060 !important; /* Deve essere > del backdrop */
}

/* Rimuove i bordi default e aggiunge ombra morbida */
#modal_reset_password .modal-content {
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border-radius: 0.5rem;
}

/* Stile Input: Toglie ombra blu default di Bootstrap e usa bordo blu */
.form-control:focus {
    box-shadow: none;
    border-color: #007bff;
    z-index: 2; /* Porta l'input sopra per non coprire il bordo */
}

/* Quando l'input ha il focus, colora anche il bordo dell'icona vicina */
.input-group:focus-within .input-group-text {
    border-color: #007bff;
}

/* Colore icona lucchetto/occhio a riposo */
.input-group-text {
    color: #6c757d;
    background-color: #fff; /* Sfondo bianco per fondersi con l'input */
}

/* Utilità per il cursore sull'occhio */
.cursor-pointer {
    cursor: pointer;
}

/* Transizione fluida quando il testo cambia colore */
#password-criteria li {
    transition: color 0.3s ease, font-weight 0.3s ease;
    margin-bottom: 4px;
}

/* Icone nella lista */
#password-criteria i {
    width: 15px; /* Allinea verticalmente le icone */
    text-align: center;
}