/**
 * Owner-approved B / Soft spring. Opt-in only: search, amenities, selection
 * and one-time action checkboxes keep their existing presentation.
 * The real checkbox owns state, validation, keyboard input and submission.
 */
input.dl-ui-switch[type="checkbox"] {
    --dl-switch-travel: 14px;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    vertical-align: middle;
    cursor: pointer;
    opacity: 1;
}

input.dl-ui-switch[type="checkbox"]::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    inset: 13px 6px auto;
    width: 32px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid #c7bbb0;
    border-radius: 999px;
    background: #e8ddd4;
    transition: background-color 180ms ease;
}

input.dl-ui-switch[type="checkbox"]::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    inset: 15px auto auto;
    inset-inline-start: 8px;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
    transform: translateX(0);
    transition: transform 500ms cubic-bezier(.2, 1.6, .35, 1), background-color 180ms ease;
}

input.dl-ui-switch[type="checkbox"]:checked::before {
    background: #fff0e3;
    border-color: #e7c5a7;
}

input.dl-ui-switch[type="checkbox"]:checked::after {
    background: #ff7900;
    transform: translateX(var(--dl-switch-travel));
}

/* RTL: attribute fallbacks first, each in its own rule, so an engine without :dir() (Safari < 16.4,
   Chromium < 120) still reverses the travel; the :dir() rules then win where supported. */
[dir="rtl"] input.dl-ui-switch[type="checkbox"] {
    --dl-switch-travel: -14px;
}

[dir="rtl"] [dir="ltr"] input.dl-ui-switch[type="checkbox"] {
    --dl-switch-travel: 14px;
}

input.dl-ui-switch[type="checkbox"]:dir(rtl) {
    --dl-switch-travel: -14px;
}

input.dl-ui-switch[type="checkbox"]:dir(ltr) {
    --dl-switch-travel: 14px;
}

input.dl-ui-switch[type="checkbox"]:active:not(:disabled)::after {
    transform: translateX(0) scale(1.06, .96);
}

input.dl-ui-switch[type="checkbox"]:checked:active:not(:disabled)::after {
    transform: translateX(var(--dl-switch-travel)) scale(1.06, .96);
}

input.dl-ui-switch[type="checkbox"]:focus-visible {
    outline: 2px solid #1f2933;
    outline-offset: 3px;
}

input.dl-ui-switch[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .55;
}

input.dl-ui-switch[type="checkbox"][aria-invalid="true"]::before {
    border-color: #b91c1c;
}

/* Existing buyer rows reserve only 17/18px. Widen only opted-in rows: the class works everywhere,
   :has() (its own rule, so older engines drop only it) covers rows without the class. */
.dl-buyer-check.dl-buyer-check--switch,
.dl-buyer-profile__field label.dl-buyer-check.dl-buyer-check--switch {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px;
}

.dl-buyer-check:has(> input.dl-ui-switch[type="checkbox"]),
.dl-buyer-profile__field label.dl-buyer-check:has(> input.dl-ui-switch[type="checkbox"]) {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px;
}

.dl-ui-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    cursor: pointer;
}

/* A switch beside a sentence, in a top-aligned row: draw the track on the FIRST text line rather than in the
   middle of the 44px (touch) / 32px (fine pointer) box, which sat it 5-12px below the line (owner 2026-10-10).
   Only the drawing moves: the box, which is the touch target, keeps its size and place, so neighbouring
   targets never overlap. Switch-only cells (named by aria-label) and centred rows keep the centred track.
   The em values are the fallback for engines without the lh unit. */
:is(.dl-ui-check-row, .dl-listing-declarations__row label, .dl-buyer-check, .dl-gate-check, .dl-availability-declaration) > input.dl-ui-switch[type="checkbox"]:not([aria-label]) {
    font-size: inherit;
    line-height: inherit;
}

:is(.dl-ui-check-row, .dl-listing-declarations__row label, .dl-buyer-check, .dl-gate-check, .dl-availability-declaration) > input.dl-ui-switch[type="checkbox"]:not([aria-label])::before {
    top: max(0px, calc((1.5em - 18px) / 2));
    top: max(0px, calc((1lh - 18px) / 2));
}

:is(.dl-ui-check-row, .dl-listing-declarations__row label, .dl-buyer-check, .dl-gate-check, .dl-availability-declaration) > input.dl-ui-switch[type="checkbox"]:not([aria-label])::after {
    top: max(2px, calc((1.5em - 14px) / 2));
    top: max(2px, calc((1lh - 14px) / 2));
}

/* Damp the owner-approved bounce without letting the thumb leave its track. */
@supports (transition-timing-function: linear(0, 1)) {
    input.dl-ui-switch[type="checkbox"]::after {
        transition-timing-function: linear(0, .65 20%, 1.12 42%, .96 64%, 1.02 82%, 1), ease;
    }
}

/* Touch keeps 44 x 44; only larger screens with a fine pointer tighten space. */
@media (min-width: 600px) and (hover: hover) and (pointer: fine) {
    input.dl-ui-switch[type="checkbox"] {
        flex-basis: 36px;
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        height: 32px;
        min-height: 32px;
    }
    input.dl-ui-switch[type="checkbox"]::before { inset: 7px 2px auto; }
    input.dl-ui-switch[type="checkbox"]::after { top: 9px; inset-inline-start: 4px; }
    .dl-ui-switch-label { min-height: 32px; }
    .dl-buyer-check.dl-buyer-check--switch,
    .dl-buyer-profile__field label.dl-buyer-check.dl-buyer-check--switch {
        grid-template-columns: 36px minmax(0, 1fr);
    }
    .dl-buyer-check:has(> input.dl-ui-switch[type="checkbox"]),
    .dl-buyer-profile__field label.dl-buyer-check:has(> input.dl-ui-switch[type="checkbox"]) {
        grid-template-columns: 36px minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    input.dl-ui-switch[type="checkbox"]::before,
    input.dl-ui-switch[type="checkbox"]::after {
        transition: none;
    }
    input.dl-ui-switch[type="checkbox"]:active:not(:disabled)::after {
        transform: translateX(0);
    }
    input.dl-ui-switch[type="checkbox"]:checked:active:not(:disabled)::after {
        transform: translateX(var(--dl-switch-travel));
    }
}

@media (forced-colors: active) {
    /* Let the browser draw the state in the user's high-contrast palette. */
    input.dl-ui-switch[type="checkbox"] {
        appearance: auto;
        -webkit-appearance: checkbox;
        flex-basis: 44px;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        min-height: 44px;
        opacity: 1;
    }
    .dl-buyer-check.dl-buyer-check--switch,
    .dl-buyer-profile__field label.dl-buyer-check.dl-buyer-check--switch {
        grid-template-columns: 44px minmax(0, 1fr);
    }
    .dl-buyer-check:has(> input.dl-ui-switch[type="checkbox"]),
    .dl-buyer-profile__field label.dl-buyer-check:has(> input.dl-ui-switch[type="checkbox"]) {
        grid-template-columns: 44px minmax(0, 1fr);
    }
    input.dl-ui-switch[type="checkbox"]::before,
    input.dl-ui-switch[type="checkbox"]::after {
        display: none;
    }
}