/* TRASFORMAZIONE RADIOBUTTONLIST IN SWITCH/TOGGLE */
.radio-switch {
    display: inline-flex;
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem; /* Standard Bootstrap radius */
    overflow: hidden;
    background-color: white;
}

    /* Nascondiamo il vero input radio (il pallino) ma lo lasciamo accessibile */
    .radio-switch input[type="radio"] {
        position: absolute;
        clip: rect(0,0,0,0);
        pointer-events: none;
    }

    /* Stile delle etichette (che diventano i bottoni) */
    .radio-switch label {
        flex: 1; /* Si dividono lo spazio equamente */
        text-align: center;
        padding: 0.6rem 1rem;
        cursor: pointer;
        margin-bottom: 0;
        font-weight: 500;
        color: #6c757d; /* Grigio spento */
        transition: all 0.2s ease-in-out;
        border-left: 1px solid #dee2e6; /* Separatore */
    }

    /* Rimuovo il bordo al primo elemento */
    .radio-switch input[type="radio"]:first-child + label {
        border-left: none;
    }

    /* STATO ATTIVO (Quando il radio è checkato) */
    .radio-switch input[type="radio"]:checked + label {
        background-color: #0d6efd; /* Bootstrap Primary Blue */
        color: white;
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); /* Effetto premuto */
    }

    /* Hover effect */
    .radio-switch label:hover {
        background-color: #f8f9fa;
    }

    .radio-switch input[type="radio"]:checked + label:hover {
        background-color: #0b5ed7; /* Darker blue on hover active */
    }