/* Custom Mobile Toggle Styles - Redesigned */
.header-sidebar .toggle-btn {
    width: 44px !important;
    /* Slightly wider for better touch target */
    height: 24px !important;
    /* Standard height */
    background-color: #ffffff;
    /* Always White Background */
    border-radius: 50px;
    border: 1px solid #e0e0e0 !important;
    /* Subtle border for definition */
    padding: 2px !important;
    /* Padding for the "floating" knob effect */
    position: relative;
    overflow: hidden;
    box-sizing: border-box !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Inner shadow for depth */
}

/* The Layer is now just the background, we keep it subtle */
.header-sidebar .toggle-btn .layer {
    background-color: transparent !important;
    width: 100%;
    height: 100%;
    transition: 0.3s ease all;
}

.header-sidebar .toggle-btn .knobs {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through */
}

/* The Knob (Circle) */
.header-sidebar .toggle-btn .knobs span {
    width: 18px !important;
    /* 24px height - 2px padding*2 - 2px border = ~18px */
    height: 18px !important;
    border-radius: 50%;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 3px;
    /* Starting position */
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) all;
    /* Bouncy effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Default Off Color (Gray) */
    background: #bdc3c7;
}

/* Remove any pseudo-elements */
.header-sidebar .toggle-btn .knobs:before,
.header-sidebar .toggle-btn .knobs:after,
.header-sidebar .toggle-btn .knobs span:before,
.header-sidebar .toggle-btn .knobs span:after {
    display: none !important;
}

/* Checked State (Active) */
.header-sidebar .toggle-btn .checkbox:checked+.knobs span {
    left: calc(100% - 21px);
    /* Move to right */
    background-color: #00d084;
    /* Bright Green */
    box-shadow: 0 2px 8px rgba(0, 208, 132, 0.4);
    /* Green Glow */
}

/* Unchecked State (Inactive) */
.header-sidebar .toggle-btn .checkbox:not(:checked)~.layer {
    background-color: transparent !important;
}