/* Container for alignment */
.resolution-toggle {
    display: inline-block;
    margin-left: 10px;
}

/* Hide the default checkbox */
#resToggle {
    display: none;
}

/* Base style for the toggle track */
.toggle-switch {
    position: relative;
    display: block;
    width: 100px; /* Width of the entire switch */
    height: 30px; /* Height of the entire switch */
    border-radius: 15px;
    background-color: #ccc; /* Default (LO) background */
    cursor: pointer;
    overflow: hidden;
}

/* Style for the sliding knob */
.slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Half the width of the track */
    height: 100%;
    background-color: #007bff; /* Blue color for 'LO' state */
    border-radius: 15px;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    z-index: 1;
}

/* Style for the LO and HI text */
.toggle-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: bold;
    font-size: 14px;
    z-index: 2; /* Ensure text is above the slider */
}

/* Positioning the 'LO' text */
.toggle-text.lo {
    left: 10px;
    color: #333; /* Dark text for contrast on light background */
}

/* Positioning the 'HI' text */
.toggle-text.hi {
    right: 15px;
    color: white; /* Light text for contrast on dark slider (when active) */
}

/* --- STATE CHANGE: When the checkbox is CHECKED (HI Resolution) --- */

/* Move the slider to the right */
#resToggle:checked ~ .toggle-switch .slider {
    transform: translateX(100%);
    background-color: #28a745; /* Green color for 'HI' state */
}

/* Change the background color of the track for a full color change */
#resToggle:checked ~ .toggle-switch {
    background-color: #28a745;
}

/* Change the text colors when checked */
#resToggle:checked ~ .toggle-switch .toggle-text.lo {
    /* slightly darker green for the LO text */
    color: #1f9030; /* LO text on the green track */
}

#resToggle:checked ~ .toggle-switch .toggle-text.hi {
    color: white; /* White HI text on the green track */
}