/* CoderStation Custom Toggle Switch */
.coderstation-switch {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 !important; /* Remove Bootstrap's default padding to fix the hit area */
}

/* Enhance the default Bootstrap form-switch input */
.coderstation-switch .form-check-input {
    width: 2.2rem !important;
    height: 1.1rem !important;
    margin: 0 !important; /* Remove negative margins so hitbox exactly matches the visual button */
    cursor: pointer;
    background-color: var(--primary-color, #062E52); /* False state color */
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4);
    
    /* Ensure the knob is white even in the unchecked state for a clean look */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    
    transition: background-color 0.25s ease-in-out, background-position 0.15s ease-in-out, border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

/* Hover Effect for Unchecked State */
.coderstation-switch .form-check-input:hover {
    background-color: #094073;
}

/* Focus Outline */
.coderstation-switch .form-check-input:focus {
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.4), 0 0 0 0.2rem rgba(255, 92, 10, 0.25);
    border-color: var(--secondary-color, #FF5C0A);
    outline: none;
}

/* Checked State */
.coderstation-switch .form-check-input:checked {
    background-color: var(--secondary-color, #FF5C0A); /* True state color */
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    
    /* Ensure the knob slides to the right and remains white */
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* Hover Effect for Checked State */
.coderstation-switch .form-check-input:checked:hover {
    background-color: #e65100;
}