/* Ortak switch görünümü; normal checkbox ve radio alanlarını kapsamaz. */
@layer arttime-switches {
    :root {
        --arttime-switch-width: 35px;
        --arttime-switch-height: 19.6px;
        --arttime-switch-thumb-size: contain;
        --arttime-switch-label-size: 15.5px;
        --arttime-switch-label-weight: 900;
        --arttime-switch-label-line-height: 1.5;
        --arttime-switch-gap: 7.29px;
        --arttime-switch-active: #16a34a;
        --arttime-switch-inactive: #cbd5e1;
        --arttime-switch-inactive-text: #7b8799;
    }

    :is(.form-switch, .fp-store-switch, .dc-active-switch, .kt-switch-line, .fp-permission-toggle, .switch-row) {
        display: flex !important;
        align-items: center !important;
        gap: var(--arttime-switch-gap) !important;
        min-height: var(--arttime-switch-height) !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--arttime-switch-inactive-text) !important;
        -webkit-text-fill-color: var(--arttime-switch-inactive-text) !important;
        font-size: var(--arttime-switch-label-size) !important;
        font-weight: var(--arttime-switch-label-weight) !important;
        line-height: var(--arttime-switch-label-line-height) !important;
        cursor: pointer;
    }

    :is(.fp-permission-toggle, .switch-row) {
        justify-content: space-between;
    }

    .fp-category-active-v93 {
        margin: 0 !important;
    }

    .fp-category-switch-column-v133 {
        align-items: center !important;
        padding-top: calc(var(--arttime-label-size, 14px) * 1.5 + var(--arttime-label-input-gap, 2px)) !important;
    }

    :is(.form-switch, .fp-store-switch, .dc-active-switch, .kt-switch-line, .fp-permission-toggle, .switch-row, .cc-switch) input[type="checkbox"],
    input[type="checkbox"][role="switch"] {
        appearance: none !important;
        -webkit-appearance: none !important;
        display: inline-block !important;
        position: relative !important;
        top: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
        flex: 0 0 var(--arttime-switch-width) !important;
        width: var(--arttime-switch-width) !important;
        min-width: var(--arttime-switch-width) !important;
        max-width: var(--arttime-switch-width) !important;
        inline-size: var(--arttime-switch-width) !important;
        height: var(--arttime-switch-height) !important;
        min-height: var(--arttime-switch-height) !important;
        max-height: var(--arttime-switch-height) !important;
        block-size: var(--arttime-switch-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--arttime-switch-inactive) !important;
        border-radius: 999px !important;
        background-color: var(--arttime-switch-inactive) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27rgba%28108,117,125,0.55%29%27/%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-size: var(--arttime-switch-thumb-size) !important;
        background-position: left center !important;
        box-shadow: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        vertical-align: middle !important;
        cursor: pointer !important;
        transition: background-position .15s ease-in-out, background-color .15s ease-in-out !important;
    }

    :is(.form-switch, .fp-store-switch, .dc-active-switch, .kt-switch-line, .fp-permission-toggle, .switch-row, .cc-switch) input[type="checkbox"]:checked,
    input[type="checkbox"][role="switch"]:checked {
        border-color: var(--arttime-switch-active) !important;
        background-color: var(--arttime-switch-active) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e") !important;
        background-position: right center !important;
    }

    :is(.form-switch, .fp-store-switch, .dc-active-switch, .kt-switch-line, .fp-permission-toggle, .switch-row, .cc-switch) input[type="checkbox"]:focus-visible,
    input[type="checkbox"][role="switch"]:focus-visible {
        outline: 2px solid var(--arttime-switch-active) !important;
        outline-offset: 2px !important;
    }

    :is(.form-switch, .fp-store-switch, .dc-active-switch, .kt-switch-line, .fp-permission-toggle, .switch-row, .cc-switch) input[type="checkbox"]:disabled,
    input[type="checkbox"][role="switch"]:disabled {
        opacity: .55 !important;
        cursor: not-allowed !important;
    }

    :is(.form-switch, .fp-store-switch, .dc-active-switch, .kt-switch-line, .fp-permission-toggle, .switch-row) > :is(label, span):not(.fp-permission-switch) {
        display: inline-flex !important;
        align-items: center !important;
        min-height: var(--arttime-switch-height) !important;
        margin: 0 !important;
        color: var(--arttime-switch-inactive-text) !important;
        -webkit-text-fill-color: var(--arttime-switch-inactive-text) !important;
        font-size: var(--arttime-switch-label-size) !important;
        font-weight: var(--arttime-switch-label-weight) !important;
        line-height: var(--arttime-switch-label-line-height) !important;
    }

    :is(.form-switch, .fp-store-switch, .dc-active-switch, .kt-switch-line, .fp-permission-toggle, .switch-row):has(input[type="checkbox"]:checked),
    :is(.form-switch, .fp-store-switch, .dc-active-switch, .kt-switch-line, .fp-permission-toggle, .switch-row):has(input[type="checkbox"]:checked) > :is(label, span):not(.fp-permission-switch) {
        color: var(--arttime-switch-active) !important;
        -webkit-text-fill-color: var(--arttime-switch-active) !important;
    }

    /* Eski dekoratif izler yerine tüm yapılarda gerçek input çizilir. */
    .cc-switch > span,
    .fp-permission-switch {
        display: none !important;
    }

    .cc-switch {
        flex: 0 0 auto;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        cursor: pointer;
    }

    .cc-switch.is-locked {
        cursor: default;
    }

    .cc-switch small {
        font-size: 10.5px;
        font-weight: 750;
        color: var(--muted);
        white-space: nowrap;
    }

    @media (max-width: 575.98px) {
        :root {
            --arttime-switch-width: 43.74px;
            --arttime-switch-height: 24.786px;
            --arttime-switch-thumb-size: 20.412px 20.412px;
            --arttime-switch-label-line-height: 1;
        }
    }
}