/* Container for the toggle switch and label */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Hide the default checkbox */
.toggle-button {
    display: none;
}

/* Style the label to look like the track of the toggle */
.toggle-label {
    position: relative;
    display: inline-block;
    width: 45px; /* Shorter length */
    height: 24px; /* Shorter height */
    background-color: #ccc; /* Default color (grey) */
    border-radius: 24px; /* Matches the new height for a pill shape */
    cursor: pointer;
    transition: background-color 0.4s;
}

/* Create the inner circle (the thumb of the toggle) */
.toggle-label::after {
    content: '';
    position: absolute;
    top: 2px; /* Adjusted to center the circle vertically */
    left: 2px;
    width: 20px; /* Smaller size of the circle */
    height: 20px; /* Smaller size of the circle */
    background-color: #fff; /* Color of the circle */
    border-radius: 50%; /* Makes it a perfect circle */
    transition: transform 0.4s;
    z-index: 1;
}

/* Style for the text inside the toggle */
.toggle-label .toggle-text {
    position: relative;
    z-index: 2;
    color: #1a1a2e;
    font-size: 12px; /* Smaller font size to fit */
    line-height: 24px; /* Adjusted to match the new height for vertical centering */
    text-align: center;
    width: 100%;
    height: 100%;
    display: block;
}

/* Style for when the checkbox is checked */
.toggle-button:checked + .toggle-label {
    background-color: #2196F3;
}

/* Move the circle to the right when checked */
.toggle-button:checked + .toggle-label::after {
    transform: translateX(21px); /* Recalculated for the new dimensions */
}