/*
 * Shared horizontal scrolling standard.
 * JavaScript adds .ui-scroll-x to every element that can scroll horizontally.
 * Use data-drag-scroll to opt in before overflow appears and
 * data-drag-scroll="off" (or .ui-scroll-x-disabled) to opt out.
 */
:root {
    --ui-scroll-track: #edf4f8;
    --ui-scroll-thumb: #78a8c5;
    --ui-scroll-thumb-hover: #2d79a9;
}

.ui-scroll-x {
    max-width: 100%;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin !important;
    scrollbar-color: #168ac2 #dceaf3 !important;
}

.ui-scroll-x[data-drag-scroll-ready="1"] {
    cursor: grab;
}

.ui-scroll-x.is-dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
}

.ui-scroll-x::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.ui-scroll-x::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.ui-scroll-x::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #dceaf3;
}

.ui-scroll-x::-webkit-scrollbar-thumb {
    min-width: 44px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(90deg, #167dbb, #25a6ca);
    background-clip: padding-box;
}

.ui-scroll-x::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #126a9f, #168fba);
    background-clip: padding-box;
}

/* A compact progress bar replaces the native horizontal scrollbar wherever
 * the shared controller can add a bar without changing the host layout. */
.ui-scroll-x.ui-scroll-progress-track {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}

.ui-scroll-x.ui-scroll-progress-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.site-listing-block--slider .site-listing-slider__track[data-ui-slider-track],
.site-listing-block--slider .site-listing-slider__track[data-ui-slider-track].ui-scroll-x {
    scrollbar-width: none !important;
    -ms-overflow-style: none;
}

.site-listing-block--slider .site-listing-slider__track[data-ui-slider-track]::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.ui-scroll-x.is-progress-dragging,
.site-listing-slider__track.is-progress-dragging {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
}

.ui-slider-progress {
    position: relative;
    display: block;
    width: min(275px, 58%);
    height: 24px;
    margin: 0 auto;
    border-radius: 999px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.ui-slider-progress--grid {
    grid-column: 1 / -1;
}

.ui-slider-progress[hidden] {
    display: none;
}

.ui-slider-progress::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    left: 0;
    height: 4px;
    border-radius: 999px;
    background: #dceaf3;
}

.ui-slider-progress > span {
    position: absolute;
    top: 10px;
    left: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #167dbb, #25a6ca);
    cursor: grab;
    transition: left .12s ease, width .12s ease, transform .12s ease;
}

.ui-slider-progress.is-dragging > span {
    cursor: grabbing;
    transition: none;
}

.ui-slider-progress:focus-visible {
    outline: 2px solid #167dbb;
    outline-offset: 2px;
}

body.ui-scroll-dragging,
body.ui-scroll-dragging * {
    cursor: grabbing !important;
    user-select: none !important;
}

@media (pointer: coarse) {
    .ui-scroll-x[data-drag-scroll-ready="1"] {
        cursor: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-scroll-x {
        scroll-behavior: auto !important;
    }
}