.ozzy-capacity-filter-form {
    --ozzy-range-thumb-radius: 10px;
}

.ozzy-range-slider {
    --ozzy-range-handle-half: 15px;
    position: relative;
    height: 20px;
    margin-block-start: 18px;
    cursor: pointer;
    z-index: 1;
}

.ozzy-range-slider-control {
    position: absolute;
    inset: 0 var(--ozzy-range-thumb-radius);
}

.ozzy-range-slider-control::before {
    content: "";
    position: absolute;
    inset: 0 calc(-1 * var(--ozzy-range-thumb-radius));
    padding-inline: var(--ozzy-range-thumb-radius);
    background: linear-gradient(var(--brdcolor-gray-300), var(--brdcolor-gray-300)) center / 100% 2px no-repeat content-box;
}

.ozzy-range-slider .ui-slider-range {
    position: absolute;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background-color: var(--wd-primary-color);
    pointer-events: none;
}

.ozzy-range-slider .ui-slider-handle {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: calc(2 * var(--ozzy-range-handle-half));
    height: calc(2 * var(--ozzy-range-handle-half));
    margin: calc(-1 * var(--ozzy-range-handle-half)) 0 0 calc(-1 * var(--ozzy-range-handle-half));
    border: 0;
    background: none;
    cursor: ew-resize;
}

.ozzy-range-slider .ui-slider-handle::after {
    content: "";
    box-sizing: border-box;
    width: calc(2 * var(--ozzy-range-thumb-radius));
    height: calc(2 * var(--ozzy-range-thumb-radius));
    border: 7px solid #fff;
    border-radius: 50%;
    background-color: var(--wd-primary-color);
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}

.ozzy-range-slider .ui-slider-handle:active {
    z-index: 3;
}

.ozzy-range-limits {
    display: flex;
    justify-content: space-between;
    margin-block-start: 6px;
    margin-inline: var(--ozzy-range-thumb-radius);
    color: var(--color-gray-500);
    font-size: 11px;
    line-height: 1.3;
}

.ozzy-range-slider[hidden] + .ozzy-range-limits {
    display: none;
}

.ozzy-capacity-filter-bounds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: var(--wd-form-brd-width, 2px) solid var(--wd-form-brd-color, var(--brdcolor-gray-300));
    border-radius: var(--wd-form-brd-radius, 5px);
    background-color: var(--wd-form-bg);
    overflow: hidden;
}

.ozzy-capacity-filter-bounds input[type="text"] {
    min-height: 42px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ozzy-capacity-filter-bounds [data-bound] + [data-bound] {
    border-inline-start: var(--wd-form-brd-width, 2px) solid var(--wd-form-brd-color, var(--brdcolor-gray-300));
}

.ozzy-capacity-filter-bounds input:focus-visible {
    outline: 1px solid var(--wd-primary-color);
    outline-offset: -3px;
}

.ozzy-range-error {
    margin: 8px 0 0;
    font-size: 12px;
}

.wd-sidebar.ozzy-mobile-filter-editing.wd-opened {
    z-index: 1512;
}

body:has(.ozzy-mobile-filter-editing.wd-opened) .wd-close-side.wd-close-side-opened {
    z-index: 1511;
}

.ozzy-mobile-filter-editing > .widget-area {
    min-height: 0;
}

.ozzy-mobile-filter-actions {
    display: flex;
    flex: none;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--brdcolor-gray-300);
    background: var(--bgcolor-white, #fff);
}

.ozzy-mobile-filter-actions .ozzy-mobile-filter-apply {
    flex: 1;
}

.ozzy-mobile-filter-actions .btn {
    border-radius: var(--wd-form-brd-radius, 5px);
}