.um-field-area {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spazio tra i bottoni */
}

/* Stile per il gruppo di opzioni */
.options-group {
    margin-bottom: 30px;
}

/* Nascondi i radio button */
.radio-button {
    display: none !important;
}

/* Stile per i bottoni personalizzati */
.custom-radio {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 2px solid #ddd;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%; /* Larghezza al 100% */
    justify-content: center;
    text-align: center;
    box-sizing: border-box; /* Include il padding e il bordo nella larghezza totale */
}

    /* Colori per generi diversi */
    .custom-radio.maschio {
        border-color: #3498db; /* Blu chiaro */
    }

    .custom-radio.femmina {
        border-color: #e91e63; /* Rosa acceso */
    }

    .custom-radio.trans {
        border-color: #9b59b6; /* Viola */
    }

    /* Stile per le icone nei bottoni */
    .custom-radio i {
        margin-right: 10px;
    }

/* Stile per i bottoni selezionati */
.radio-button:checked + .custom-radio.maschio {
    background-color: #3498db;
    color: white;
    border-color: #3498db;
}

.radio-button:checked + .custom-radio.femmina {
    background-color: #e91e63;
    color: white;
    border-color: #e91e63;
}

.radio-button:checked + .custom-radio.trans {
    background-color: #9b59b6;
    color: white;
    border-color: #9b59b6;
}

/* Hover effect per i bottoni */
.custom-radio:hover.maschio {
    background-color: #eaf3fc;
    border-color: #3498db;
}

.custom-radio:hover.femmina {
    background-color: #fce4ec; /* Rosa pallido */
    border-color: #e91e63;
}

.custom-radio:hover.trans {
    background-color: #f2eaf7;
    border-color: #9b59b6;
}

/* Stile per i bottoni del gruppo */
.options-group label {
    display: block;
    width: 100%; /* Assicura che le etichette occupino l'intera larghezza del contenitore */
}




/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    margin-right: 8px;
    cursor: pointer;
}

    .switch input {
        display: none;
    }


.switch-container {
    display: flex;
    align-items: center; /* allinea verticalmente switch + label */
    gap: 8px; /* spazio tra switch e testo */
}

.slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 28px;
    transition: .3s;
    cursor: pointer;
}

    .slider:before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: 4px;
        top: 4px;
        background: #fff;
        border-radius: 50%;
        transition: .3s;
    }

input:checked + .slider {
    background: #2196f3;
}

    input:checked + .slider:before {
        transform: translateX(22px);
    }

.switch-label {
    vertical-align: middle;
    user-select: none;
    transform: translateY(-4px);
}

/* Campo città */
#cityFieldContainer {
    position: relative;
    margin-bottom: 15px;
}

.autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

/* Bottone salva */
.save-button {
    background: #007bff;
    color: #fff !important;
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

    .save-button:hover {
        background: #fdad15 !important;
    }


.clear-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #999;
    display: none !important; 
}

.um-field-area input:focus + label + .clear-icon,
.um-field-area input:not(:placeholder-shown) + label + .clear-icon {
    display: inline !important; /* appare quando c’è testo o focus */
}