/* ============================================================
   account-forms.css
   Stili condivisi tra Login.cshtml e Register.cshtml
   ============================================================ */

/* ---------- Wrapper sezione ---------- */
.login-form {
    padding-block: 5%;
    padding-inline: 5%;
    background-color: rgb(246, 246, 246);
}

/* ---------- Card (ex stile inline sulle col) ---------- */
.form-card {
    border-radius: 10px;
    overflow: hidden;
    background-color: white;
    padding: 0;
}

/* ---------- Header card ---------- */
.form-card-title {
    background-color: #707070;
    width: 100%;
}

    .form-card-title h3 {
        padding: 27px 40px 31px 40px;
        font-size: 26px;
        line-height: 32px;
        color: #fff;
        font-weight: 700;
        margin: 0;
    }

/* ---------- Body card ---------- */
.form-body {
    padding: 35px 40px;
}

/* ---------- Label ---------- */
label {
    display: block;
    padding-bottom: 5px;
}

    label .required-mark {
        color: #56B3E4;
    }

/* ---------- Input ---------- */
input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #e5e7ec;
}

    input:not([type="checkbox"]):not([type="radio"]):focus {
        outline: 1px solid #56B3E4;
    }

/* ---------- Singolo campo form ---------- */
.form-field {
    margin-bottom: 23px;
}

/* ---------- Pulsante submit ---------- */
.btn-submit {
    display: block;
    width: 100%;
    cursor: pointer;
    background: #56B3E4;
    padding: 17px 40px;
    border-radius: 30px;
    border: 0;
    box-shadow: 0 10px 15px #cccccc;
    color: white;
}

.btn-submit-small {
    cursor: pointer;
    background: #56B3E4;
    border-radius: 30px;
    border: 0;
    padding: 17px 40px;
    box-shadow: 0 10px 15px #cccccc;
    color: white;
}

/* ---------- Pulsante generico trasparente ---------- */
.btn-transparent {
    cursor: pointer;
    background: transparent;
    border: 0;
}

/* ---------- Colore accent (ex style="color: #56B3E4") ---------- */


/* ---------- Testo "Non hai ancora un account?" ---------- */
.form-secondary-text {
    font-family: 'Poppins', sans-serif;
    color: #808080;
    font-weight: 400;
    margin: 0 0 10px 0;
}

/* ---------- Nota campi obbligatori ---------- */
.form-mandatory-note {
    font-family: 'Poppins', sans-serif;
    color: #56B3E4;
    font-weight: 400;
    font-size: 10px;
    margin: 22px 0 0 0;
}

/* ---------- Footer azioni sotto il bottone ---------- */
.form-footer-actions {
    margin-top: 22px;
    text-align: center;
}

/* ---------- Logo Pharmaroom / immagini nelle card ---------- */
.form-card-img {
    display: block;
    margin: 50px auto 0 auto;
    max-width: 80%;
}

.modal-dialog {
    max-width: 90% !important;
}

.modal-body {
    padding-inline: 40px !important;
}

.form-modal h3 {
    line-height: 27px;
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    color: black;
}

.form-modal-p {
    font-family: 'Poppins', sans-serif;
    color: #808080;
    font-weight: 400;
    font-size: 15px;
}

.form-modal .subtitle {
    font-size: 15px;
    font-weight: bolder;
    color: #56B3E4;
}

/* ---------- Aggiunto da Claude: gruppo radio "pill" (es. selettore genere) ---------- */
/* Titolo della sezione radio, coerente con le altre label del form. */
.form-radio-title {
    display: block;
    padding-bottom: 5px;
    margin: 0;
}

/* Container in flex: le pill stanno su una riga, wrappano su schermi molto stretti. */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    /* Radio nativi nascosti visivamente ma raggiungibili da tastiera e screen reader. */
    .radio-group input[type="radio"] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    /* Pill = label cliccabile, stile coerente con gli input del form. */
    .radio-group .radio-pill {
        flex: 1 1 0;
        min-width: 100px;
        margin: 0;
        padding: 10px 16px;
        text-align: center;
        border: 1px solid #e5e7ec;
        border-radius: 10px;
        background-color: #fff;
        cursor: pointer;
        user-select: none;
        transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    }

        .radio-group .radio-pill:hover {
            border-color: #56B3E4;
        }

    /* Stato selezionato: sfondo accent + testo bianco. */
    .radio-group input[type="radio"]:checked + .radio-pill {
        background-color: #56B3E4;
        border-color: #56B3E4;
        color: #fff;
    }

    /* Focus da tastiera (TAB): outline accent visibile attorno alla pill. */
    .radio-group input[type="radio"]:focus-visible + .radio-pill {
        outline: 2px solid #56B3E4;
        outline-offset: 2px;
    }

/* Mobile molto stretto: ogni pill occupa l'intera larghezza. */
@media (max-width: 380px) {
    .radio-group .radio-pill {
        flex: 1 1 100%;
    }
}

/* ---------- Aggiunto da Claude: campo telefono con prefisso integrato ---------- */
/* Container che simula un singolo input: bordo esterno unico, contenuto in flex. */
.phone-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid #e5e7ec;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}

    .phone-group:focus-within {
        outline: 1px solid #56B3E4;
    }

    /* Cella sinistra con il lookup prefisso: nessun bordo proprio, solo separatore verticale */
    .phone-group .phone-group-prefix {
        display: flex;
        align-items: center;
        border-right: 1px solid #e5e7ec;
        padding: 0 4px 0 8px;
        background-color: #fff;
    }

    /* Input numerico interno: niente bordo (il bordo è quello del container) */
    .phone-group input.phone-group-number {
        flex: 1 1 auto;
        width: auto;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 10px 20px;
        background: transparent;
    }

        .phone-group input.phone-group-number:focus {
            outline: none !important;
        }

    /* Reset bordi/sfondo del DevExtreme Lookup interno per fonderlo nel container */
    .phone-group .dx-lookup,
    .phone-group .dx-lookup-field,
    .phone-group .dx-texteditor {
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .phone-group .dx-lookup-field {
        padding: 0 4px;
    }

    /* Aggiunto da Claude: nasconde la freccetta nativa del Lookup DevExtreme che si sovrapponeva
       alla bandiera nel field template. In DevExtreme 25.x può essere renderizzata con più classi
       diverse a seconda del tema (dx-lookup-arrow per il Lookup mobile-style,
       dx-dropdowneditor-icon / dx-dropdowneditor-button per il dropdown editor desktop) o come
       pseudo-element del field. Si coprono tutti i casi. */
    .phone-group .dx-lookup-arrow,
    .phone-group .dx-dropdowneditor-icon,
    .phone-group .dx-dropdowneditor-button,
    .phone-group .dx-texteditor-buttons-container {
        display: none !important;
    }

        .phone-group .dx-lookup-field::before,
        .phone-group .dx-lookup-field::after {
            content: none !important;
            display: none !important;
        }