body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 1rem;
    max-width: 500px;
    margin: 1rem;
}

/* Contenitore dello switch */
.switch-container {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 34px;
}

/* Checkbox nascosta */
.switch-checkbox {
    display: none;
}

/* Stile del background dello switch */
.switch-label {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ccc; /* Colore grigio di base (off) */
    border-radius: 34px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Stile della leva */
.switch-label::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Quando attivo, cambia colore per ciascun switch */
#redSwitch:checked + .switch-label {
    background-color: #EF4444; /* Rosso */
}

#switchOcra:checked + .switch-label {
    background-color: #D97706; /* Ocra */
}

#switchBlu:checked + .switch-label {
    background-color: #3B82F6; /* Blu */
}

#switchGiallo:checked + .switch-label {
    background-color: #F59E0B; /* Giallo */
}

#switchVerde:checked + .switch-label {
    background-color: #10B981; /* Verde */
}

#switchRubino:checked + .switch-label {
    background-color: #9B2226; /* Rubino */
}

#switchOro:checked + .switch-label {
    background-color: #EAB308; /* Oro */
}

#switchBordeaux:checked + .switch-label {
    background-color: #7D2B40; /* Bordeaux */
}

/* Posizione della leva quando è acceso */
.switch-checkbox:checked + .switch-label::after {
    top: 26px; /* Sposta la leva verso il basso quando è on */
}

#continueButton {
    display: none;
}