/* ---------- CONTENITORE ---------- */
#login__form__react, #reset__form__react, #register__form__react, #modifica__password__form__react {
    max-width: 680px !important;
    width: 100% !important;
    margin: 1rem auto 1rem auto !important;
    padding: 1.2rem !important;
    background-color: #E7F0FE !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ---------- FORM GROUP / LABEL / SPACING ---------- */
#login__form__react .form-group, #reset__form__react .form__group, #register__form__react .form-group, #modifica__password__form__react .form-group {
    display: block !important;
    width: 100% !important;
    margin-bottom: 1.5rem !important; /* maggiore spazio tra i campi */
}

#login__form__react label, #reset__form__react label, #register__form__react label, #modifica__password__form__react label {
    display: block !important;
    margin-bottom: 0.4rem !important;
    padding-left: 0 !important;
    font-weight: 700 !important; /* bold */
}

/* ---------- INPUT / TEXTFIELD ---------- */
#login__form__react input[type="email"],
#login__form__react input[type="password"],
#login__form__react input[type="text"],
#login__form__react .text-field input,
#reset__form__react input[type="email"],
#reset__form__react input[type="text"],
#reset__form__react .text-field input,
#register__form__react input[type="email"],
#register__form__react input[type="text"],
#register__form__react .text-field input,
#modifica__password__form__react input[type="email"],
#modifica__password__form__react input[type="password"],
#modifica__password__form__react input[type="text"],
#modifica__password__form__react .text-field input{
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    margin-bottom: 1rem !important; /* distanza tra input e label successiva */
}

/* ---------- PASSWORD HEADER (LABEL + LINK) ---------- */
#login__form__react .password-header{
    display: flex !important;
    justify-content: space-between !important; /* label a sinistra, link a destra */
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 0.25rem !important; /* distanza dal campo input */
}

/* label Password */
#login__form__react .password-header label {
    margin: 0 !important;
    font-weight: 700 !important;
}

/* link "Hai dimenticato la password?" */
#login__form__react .password-header .forgot-password-link {
    margin: 0 !important;
    font-size: 0.9rem !important;
    text-decoration: underline !important;
    color: #23293B !important;
    cursor: pointer !important;
}

/* ---------- CHECKBOX ---------- */
#login__form__react .checkbox-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    align-self: flex-start !important;
    margin-bottom: 1rem !important;
}

/* bottone del checkbox */
#login__form__react .checkbox-container button[role="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #555 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

/* stato selezionato */
#login__form__react .checkbox-container button[role="checkbox"][data-state="checked"] {
    background-color: #005aa7 !important;
    border-color: #005aa7 !important;
}

/* icona di spunta interna (se presente come span o svg) */
#login__form__react .checkbox-container button[role="checkbox"] .suic-peer,
#login__form__react .checkbox-container button[role="checkbox"]::after {
    color: white !important;
    width: 14px !important;
    height: 14px !important;
}

/* label del checkbox */
#login__form__react .checkbox-container label {
    font-weight: 700 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* ---------- SUBMIT BUTTON ---------- */
#login__form__react button[type="submit"],
#login__form__react .btn-submit,
#reset__form__react button[type="submit"],
#reset__form__react .btn-submit,
#register__form__react button[type="submit"],
#register__form__react .btn-submit,
#button__register__form__react button[type="submit"],
#button__register__form__react .btn-submit,
#button__reset__form__react button[type="submit"],
#button__reset__form__react .btn-submit,
#button__login__form__react button[type="submit"],
#button__login__form__react .btn-submit
{
    width: 100% !important;
    padding: 0.9rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    background-color: #005aa7 !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
}

/* hover del pulsante */
#login__form__react button[type="submit"]:hover,
#login__form__react .btn-submit:hover,
#reset__form__react button[type="submit"]:hover,
#reset__form__react .btn-submit:hover,
#register__form__react button[type="submit"]:hover,
#register__form__react .btn-submit:hover,
#button__register__form__react button[type="submit"]:hover,
#button__register__form__react .btn-submit:hover,
#button__reset__form__react button[type="submit"]:hover,
#button__reset__form__react .btn-submit:hover,
#button__login__form__react button[type="submit"]:hover,
#button__login__form__react .btn-submit:hover{
    background-color: #004080 !important;
    color: #23293B !important; /* testo blu al rollover */
}

/* ---------- UTILI ---------- */
/* evita che qualche regola parent sovrascriva dimensioni */
#login__form__react *,
#reset__form__react *,
#register__form__react *,
#modifica__password__form__react *{
    max-width: none !important;
}


/* Nasconde completamente la checkbox nativa gestita da JCF,
   lasciando visibile solo la checkbox grafica del componente React */
.checkbox-container .jcf-checkbox,
.checkbox-container .jcf-checkbox input[type="checkbox"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#page .sol-login .sol-logo {
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 425px) {
    #page .sol-login .sol-logo {
        margin-bottom: 15px !important;
    }
}