/* ==========================================================================
   CUSTOM SWITCH (Premium Refined 2.0)
   ========================================================================== */
.custom-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    /* Decreased ~15% from 42px */
    min-width: 36px;
    /* Decreased ~15% from 42px */
    overflow: hidden;
    border-radius: 100px;
    /* Border moved to layer for dynamic coloring */
    /* border: 1px solid rgba(0, 0, 0, 0.25); */
    transition: var(--transition-normal);
    cursor: pointer;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0.05);
}

.custom-switch.custom-switch-sm {
    height: 27px;
}

.custom-switch-input {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.custom-switch-knobs {
    z-index: 2;
    position: relative;
    height: 100%;
    pointer-events: none;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

/* Ghost Sizer */
.custom-switch-knobs::before,
.custom-switch-knobs::after {
    content: attr(data-on);
    visibility: hidden;
    height: 0;
    padding: 0 14px;
    white-space: nowrap;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.custom-switch-knobs::after {
    content: attr(data-off);
}

.custom-switch-sm .custom-switch-knobs::before,
.custom-switch-sm .custom-switch-knobs::after {
    font-size: 8.5px;
    padding: 0 10px;
}

/* The Sliding Knob */
.custom-switch-knobs .knob-internal {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    min-width: 30px;
    height: calc(100% - 6px);
    color: #fff !important;
    font-size: 9.5px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6c757d;
    border-radius: 100px;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 5;
    padding: 0 8px;
}

.custom-switch-sm .custom-switch-knobs .knob-internal {
    min-width: 22px;
    font-size: 8.5px;
    padding: 0 5px;
}

.custom-switch-layer {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: var(--transition-normal);
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.05);
    /* Border moved here to allow dynamic override */
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}

/* Initial state (OFF) */
.custom-switch-knobs .knob-internal:after {
    content: attr(data-off);
}

/* Checked State - Precise Slide */
.custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    left: calc(100% - 3px);
    transform: translateX(-100%);
}

.custom-switch-input:checked+.custom-switch-knobs .knob-internal:after {
    content: attr(data-on);
}

/* ============================
   DYNAMIC COLOR MAPPING
   Based on data-onstyle and data-offstyle
   ============================ */

/* Primary */
.custom-switch[data-offstyle="primary"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="primary"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: #03045e;
}

.custom-switch[data-offstyle="primary"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="primary"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(3, 4, 94, 0.15);
    border-color: #03045e;
}

/* Secondary */
.custom-switch[data-offstyle="secondary"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="secondary"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: #6c757d;
}

.custom-switch[data-offstyle="secondary"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="secondary"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(108, 117, 125, 0.15);
    border-color: #6c757d;
}

/* Success */
.custom-switch[data-offstyle="success"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="success"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: #198754;
}

.custom-switch[data-offstyle="success"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="success"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: #198754;
}

/* Danger */
.custom-switch[data-offstyle="danger"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="danger"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: #dc3545;
}

.custom-switch[data-offstyle="danger"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="danger"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: #dc3545;
}

/* Warning */
.custom-switch[data-offstyle="warning"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="warning"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: #cc9a06;
}

.custom-switch[data-offstyle="warning"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="warning"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(204, 154, 6, 0.15);
    border-color: #cc9a06;
}

/* Info */
.custom-switch[data-offstyle="info"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="info"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: #0dcaf0;
}

.custom-switch[data-offstyle="info"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="info"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(13, 202, 240, 0.15);
    border-color: #0dcaf0;
}

/* Dark */
.custom-switch[data-offstyle="dark"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="dark"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: #212529;
}

.custom-switch[data-offstyle="dark"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="dark"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(33, 37, 41, 0.15);
    border-color: #212529;
}

/* Light */
.custom-switch[data-offstyle="light"] .custom-switch-input:not(:checked)+.custom-switch-knobs .knob-internal,
.custom-switch[data-onstyle="light"] .custom-switch-input:checked+.custom-switch-knobs .knob-internal {
    background-color: rgba(255, 255, 255, 0.9);
    color: #000 !important;
}

.custom-switch[data-offstyle="light"] .custom-switch-input:not(:checked)~.custom-switch-layer,
.custom-switch[data-onstyle="light"] .custom-switch-input:checked~.custom-switch-layer {
    background-color: rgba(255, 255, 255, 0.45);
    border-color: rgba(0, 0, 0, 0.1);
}