/* Used Vehicles Search Results (template-used-vehicles-search.php) —
   dedicated per-type (Buses/Coaches/Minibuses) results page, modelled on
   screenshots of the legacy coachandbusmarket.com equivalent. */

.cbm-uvs { padding-block: 0 56px; position: relative; }
/* "Sell My Vehicle" pulled out of .cbm-uvs__sidebar (the sticky/scrolling
   filter box) so it stays visible while the filters scroll underneath —
   per the user (2026-08-29): "SELL MY VEHICLE should be above the top of
   the side scroll bar" / "should sit more separated from SEARCH" / "box
   top can line with the top of BUSES FOR SALE". Positioned against
   .cbm-uvs itself (not the results/sidebar grid row) so it can sit higher
   than that row without restructuring the breadcrumb/h1/hint block above
   it; 92px lines this box's top with the BOTTOM of the h1 "Buses For Sale"
   heading, per the user (2026-08-29): "the top of the SELL MY VEHICLE box
   lined with the bottom of buses for sale" — an earlier version used 50px
   to line up with the h1's TOP instead. Like right (below), this offset
   is measured from .cbm-uvs's border-box edge, BEFORE its own
   padding-block:24px is applied, not from the padded content edge the h1
   itself sits within. Measured live. */
.cbm-uv-sell-btn--float { position: absolute; top: 92px; right: 32px; width: 300px; z-index: 2; }
/* right:32px, not 0 — .cbm-container (the positioning ancestor here, via
   .cbm-uvs) carries its own 32px padding-right, and an absolutely
   positioned child's right:0 anchors to that padding (border) box, not
   the content edge h1/hint/sidebar actually sit flush with — right:0
   overflowed the true right margin by exactly that 32px, confirmed live. */
.cbm-uvs__breadcrumb { font-size: 12px; color: var(--cbm-muted-grey); margin-bottom: 8px; }
.cbm-uvs__breadcrumb a { color: var(--cbm-muted-grey); }
.cbm-uvs__breadcrumb a:hover { color: var(--cbm-red); }
.cbm-uvs__breadcrumb span:first-of-type { margin: 0 6px; }

.cbm-uvs__hint { font-size: 13px; color: var(--cbm-body-grey); font-style: italic; margin: 12px 0 24px; line-height: 1.6; }
.cbm-uvs__sort-note {
	font-family: var(--cbm-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--cbm-muted-grey); margin: 0 0 14px;
}

.cbm-uvs__layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
@media (max-width: 1024px) { .cbm-uvs__layout { grid-template-columns: 1fr; } }

/* Switch row echoes .cbm-uvs__layout's own 1fr/300px split, so the Find
   Buses/Coaches/Minibuses buttons line up with (and match the width of)
   the results column below, and the search box lines up with the sidebar
   column — per Jonathan: the Find buttons were spanning the full page
   width before, wider than the vehicle cards beneath them. */
.cbm-uvs__switch-row { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; margin-bottom: 24px; }
@media (max-width: 1024px) { .cbm-uvs__switch-row { grid-template-columns: 1fr; } }
.cbm-uvs__switch { margin-bottom: 0; }

.cbm-uvs__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cbm-uvs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cbm-uvs__grid { grid-template-columns: 1fr; } }

/* Sidebar — a long faceted filter form (price, manufacturer, body, chassis,
   axles, transmission, year, four range sliders, euro standard and
   features checkboxes...) that easily runs taller than the viewport,
   especially once the left results column is short (few matching
   vehicles). Sticky positioning alone doesn't fix that: with `align-items:
   start` on the parent grid (see .cbm-uvs__layout), the shared row is only
   as tall as the taller of the two columns, so whether the page has enough
   scroll range to reveal the sidebar's own lower fields depends on how
   that comparison shakes out — in practice, per the user (2026-08-28):
   "The column does not scroll, so it is impossible to complete." Fixed by
   giving the sidebar its own independent scroll region instead of relying
   on page-level scroll to reach its lower fields — it now scrolls within
   itself, capped to the visible viewport height below the sticky header,
   while the results column keeps scrolling with the page as normal. */
.cbm-uvs__sidebar {
	display: flex; flex-direction: column; gap: 14px; position: sticky; top: 90px;
	max-height: calc(100vh - 90px - 24px); overflow-y: auto; overscroll-behavior: contain;
	padding-right: 4px; /* clears the scrollbar so it doesn't sit flush against field edges */
	margin-top: 32.5px; /* drops the Search button's own top edge level with the
	   top of the first vehicle image in the results grid, now that "Sell My
	   Vehicle" (see .cbm-uv-sell-btn--float) no longer sits above it inside
	   this box — per the user (2026-08-29): "SEARCH box top can line with
	   the top of the adjacent image". Measured live. */
}
.cbm-uvs__find-btn {
	display: block; width: 100%; background: var(--cbm-red); color: #fff; border: none; border-radius: 2px;
	padding: 14px; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer;
	font-family: var(--cbm-font-body);
}
.cbm-uvs__find-btn:hover { background: var(--cbm-red-hover); }
.cbm-uvs__find-btn--top { margin-top: -2px; }
.cbm-uvs__reset-btn {
	display: block; width: 100%; text-align: center; background: #fff; color: var(--cbm-near-black-alt);
	border: 1px solid var(--cbm-hairline); border-radius: 2px; padding: 12px; font-weight: 700; font-size: 13px;
	text-transform: uppercase; letter-spacing: 0.02em; box-sizing: border-box;
}
.cbm-uvs__reset-btn:hover { background: var(--cbm-fill-light); color: var(--cbm-near-black-alt); }

.cbm-uvs__field { display: flex; flex-direction: column; gap: 6px; }
.cbm-uvs__field-label {
	background: var(--cbm-fill-light); color: #4b4c4d; font-weight: 700; font-size: 12px; text-transform: uppercase;
	letter-spacing: 0.04em; padding: 6px 10px; border-radius: 2px;
}
.cbm-uvs__field select, .cbm-uvs__field input[type="text"], .cbm-uvs__field input[type="number"] {
	width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--cbm-hairline);
	border-radius: 2px; font-size: 13px; background: #fff; color: #333;
}
.cbm-uvs__year-older { margin-top: 6px; }
.cbm-uvs__checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cbm-near-black-alt); cursor: pointer; }
.cbm-uvs__checkbox input { flex-shrink: 0; }

/* Dual-handle range slider — two overlapping <input type=range>, painted
   track segment between them shows the selected band. */
.cbm-uvs-slider__track { position: relative; height: 20px; }
.cbm-uvs-slider__track::before {
	content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px;
	background: var(--cbm-hairline); border-radius: 2px;
}
.cbm-uvs-slider__range { position: absolute; top: 50%; height: 4px; margin-top: -2px; background: var(--cbm-red); border-radius: 2px; }
.cbm-uvs-slider__input {
	position: absolute; top: 0; left: 0; width: 100%; margin: 0; height: 20px; background: none;
	pointer-events: none; -webkit-appearance: none; appearance: none;
}
.cbm-uvs-slider__input::-webkit-slider-thumb {
	pointer-events: auto; -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
	background: #fff; border: 2px solid var(--cbm-red); cursor: pointer; margin-top: 0;
}
.cbm-uvs-slider__input::-moz-range-thumb {
	pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--cbm-red); cursor: pointer;
}
.cbm-uvs-slider__input::-webkit-slider-runnable-track { background: none; }
.cbm-uvs-slider__input::-moz-range-track { background: none; }
.cbm-uvs-slider__values { display: flex; justify-content: space-between; font-size: 11px; color: var(--cbm-muted-grey); }