/**
 * TWC Trailer Inventory — filter sidebar, chips, and layout (Sprint 4.3).
 *
 * Loads on the archive and on pages with inventory shortcodes. Inherits brand
 * variables from inventory.css (shared .lrti-archive / .lrti-single scope).
 * All selectors are plugin-prefixed; no global theme form/button styling.
 */

.lrti-inventory-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	align-items: start;
	padding-bottom: 56px;
}

.lrti-inventory-layout--nofilters {
	grid-template-columns: 1fr;
}

.lrti-inventory-main {
	min-width: 0;
}

/* ---- Grid column counts ------------------------------------------------- */

.lrti-grid--cols-1 {
	grid-template-columns: 1fr;
}

.lrti-grid--cols-2 {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.lrti-grid--cols-3 {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.lrti-grid--cols-4 {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

/* ---- Sidebar ------------------------------------------------------------ */

.lrti-inventory .lrti-sidebar {
	position: sticky;
	top: 20px;
}

.lrti-filter-form {
	background: var( --lrti-white );
	border: 1px solid var( --lrti-border );
	border-radius: var( --lrti-radius );
	padding: 18px;
	box-shadow: var( --lrti-shadow );
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lrti-filter-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
}

.lrti-filter-label {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var( --lrti-navy );
	padding: 0;
}

.lrti-input,
.lrti-select {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var( --lrti-border );
	border-radius: 8px;
	background: var( --lrti-white );
	font-size: 0.92rem;
	color: var( --lrti-dark );
}

.lrti-filter-range {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.lrti-filter-range .lrti-filter-label {
	flex: 0 0 100%;
}

.lrti-input--sm {
	flex: 1 1 0;
	min-width: 0;
}

.lrti-range-sep {
	color: var( --lrti-muted );
}

.lrti-filter-checks {
	gap: 10px;
}

.lrti-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var( --lrti-dark );
	cursor: pointer;
}

.lrti-filter-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.lrti-filter-actions .lrti-btn {
	flex: 1 1 auto;
}

/* Mobile filter toggle (hidden on large screens).
   v2.15.5: intended behaviour is mobile-drawer-trigger only — the desktop
   sidebar is always visible and the JS drawer code is deliberately inert
   there. The old bare (0,1,0) selector could be outranked by theme/Elementor
   button rules, re-displaying the toggle on desktop where clicking it has no
   visible effect. Desktop-hidden is now enforced with a scoped selector plus
   !important (documented exception: the winning external rule is unknown, so
   importance is the only reliable guard); the matching mobile rule inside the
   782px media query carries the same weight and wins there by source order. */
.lrti-filter-toggle,
.trailer-inventory button.lrti-filter-toggle {
	display: none !important;
	width: 100%;
	margin-bottom: 12px;
}

/* ---- Results header ----------------------------------------------------- */

.lrti-results-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.lrti-results-count {
	margin: 0;
	font-weight: 700;
}

.lrti-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lrti-sort-label {
	font-size: 0.85rem;
	color: var( --lrti-muted );
}

.lrti-sort-select {
	padding: 8px 10px;
	border: 1px solid var( --lrti-border );
	border-radius: 8px;
	background: var( --lrti-white );
	font-size: 0.88rem;
	max-width: 220px;
}

/* ---- Active filter chips ------------------------------------------------ */

.lrti-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.lrti-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --lrti-light );
	border: 1px solid var( --lrti-border );
	border-radius: 999px;
	padding: 5px 6px 5px 12px;
	font-size: 0.85rem;
	font-weight: 600;
}

.lrti-chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: var( --lrti-navy );
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.lrti-chip-remove:hover,
.lrti-chip-remove:focus {
	background: var( --lrti-primary );
}

.lrti-chip-clear {
	background: none;
	border: 0;
	color: var( --lrti-primary );
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	text-decoration: underline;
	padding: 4px 6px;
}

/* ---- Loading state ------------------------------------------------------ */

.lrti-results {
	position: relative;
	min-height: 120px;
}

.lrti-results.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.lrti-results.is-loading::after {
	content: "";
	position: absolute;
	top: 40px;
	left: 50%;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border: 3px solid var( --lrti-border );
	border-top-color: var( --lrti-primary );
	border-radius: 50%;
	animation: lrti-spin 0.8s linear infinite;
}

@keyframes lrti-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lrti-results.is-loading::after {
		animation: none;
	}
}

/* ---- Standalone [trailer_filters] --------------------------------------- */

.lrti-filters-standalone {
	margin-bottom: 24px;
}

.lrti-search-shortcode {
	display: flex;
	gap: 8px;
	max-width: 520px;
}

.lrti-search-shortcode .lrti-input {
	flex: 1 1 auto;
}

/* ---- Responsive --------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.lrti-inventory-layout {
		grid-template-columns: 240px 1fr;
		gap: 24px;
	}
}

@media ( max-width: 782px ) {
	.lrti-inventory-layout {
		grid-template-columns: 1fr;
	}

	.lrti-inventory .lrti-sidebar {
		position: static;
	}

	.lrti-filter-toggle,
	.trailer-inventory button.lrti-filter-toggle {
		display: block !important;
	}

	/* Collapsed by default on mobile; JS toggles .is-open */
	.lrti-filter-form {
		display: none;
	}

	.lrti-filter-form.is-open {
		display: flex;
	}

	.lrti-grid--cols-3,
	.lrti-grid--cols-4 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 560px ) {
	.lrti-grid--cols-2,
	.lrti-grid--cols-3,
	.lrti-grid--cols-4 {
		grid-template-columns: 1fr;
	}

	.lrti-results-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- Sprint 4.4: grouped filter sections -------------------------------- */

.lrti-filter-section {
	border: 0;
	border-top: 1px solid var( --lrti-border );
	margin: 0;
	padding: 14px 0 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lrti-filter-section:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.lrti-filter-legend {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --lrti-primary );
	padding: 0;
	margin: 0;
}

/* On mobile, allow tapping a legend to collapse its group. */
@media ( max-width: 782px ) {
	.lrti-filter-section .lrti-filter-legend {
		cursor: pointer;
		width: 100%;
		position: relative;
		padding-right: 20px;
	}

	.lrti-filter-section .lrti-filter-legend::after {
		content: "−";
		position: absolute;
		right: 0;
		top: 0;
	}

	.lrti-filter-section.is-collapsed .lrti-filter-legend::after {
		content: "+";
	}

	.lrti-filter-section.is-collapsed > *:not( .lrti-filter-legend ) {
		display: none;
	}
}

/* ==========================================================================
   Phase 4 — mobile off-canvas filter drawer + white-label filter styling.
   Uses only --trailer-* variables so it inherits the host site's colors.
   ========================================================================== */

.trailer-filter__legend {
	color: var( --trailer-text, #222 );
}

.trailer-filter__label {
	color: var( --trailer-muted, #6b7280 );
}

/* The toggle is desktop-hidden by the existing rules; style it on brand here. */
.trailer-filter__toggle {
	background: var( --trailer-primary, #2271b1 );
	border-color: var( --trailer-primary, #2271b1 );
	color: var( --trailer-background, #fff );
}

.trailer-filter__toggle:hover,
.trailer-filter__toggle:focus-visible {
	background: var( --trailer-primary-dark, #1c5d91 );
	border-color: var( --trailer-primary-dark, #1c5d91 );
}

/* Visible keyboard focus for every filter control. */
.trailer-filter input:focus-visible,
.trailer-filter select:focus-visible,
.trailer-filter button:focus-visible {
	outline: 2px solid var( --trailer-primary, #2271b1 );
	outline-offset: 1px;
}

@media ( max-width: 782px ) {
	/* Slide-in drawer. */
	.lrti-inventory .trailer-filter.lrti-filter-form.is-open,
	.lrti-inventory .lrti-filter-form.is-open {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 10000;
		width: min( 88vw, 340px );
		max-width: 100%;
		overflow-y: auto;
		background: var( --trailer-background, #fff );
		border-right: 1px solid var( --trailer-border, #ddd );
		box-shadow: 0 0 24px rgba( 0, 0, 0, 0.18 );
		padding: 16px;
		animation: trailer-filter-in 0.2s ease;
	}

	.trailer-filter__overlay {
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: rgba( 0, 0, 0, 0.45 );
	}

	/* Body scroll lock while the drawer is open. */
	body.trailer-filter-open {
		overflow: hidden;
	}

	/* Comfortable touch targets. */
	.trailer-filter input,
	.trailer-filter select,
	.trailer-filter button {
		min-height: 40px;
	}
}

@keyframes trailer-filter-in {
	from { transform: translateX( -100% ); }
	to   { transform: translateX( 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.lrti-inventory .lrti-filter-form.is-open {
		animation: none;
	}
}

/* ==========================================================================
   Phase 6.2 — compact filter rail: radio lists, scrollable long lists,
   dual-handle range controls. Archive-scoped; colors from --trailer-*.
   ========================================================================== */

.trailer-inventory__sidebar {
	padding: 10px;
	border-radius: 2px;
	box-shadow: none;
}

/* Sections: 12px rhythm, 1px separators. */
.trailer-inventory .trailer-filter__group,
.trailer-inventory .lrti-filter-section {
	margin: 0 0 12px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var( --trailer-border, #ddd );
}

.trailer-inventory .trailer-filter__legend {
	font-size: 11.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 6px !important;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 6px;
	width: 100%;
}

.trailer-filter__unit {
	font-weight: 400;
	text-transform: none;
	color: var( --trailer-muted, #6b7280 );
	font-size: 10.5px;
}

/* ---- Categorical radio lists --------------------------------------------- */
.trailer-filter__list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.trailer-filter__list--scroll {
	max-height: 200px;
	overflow-y: auto;
	padding-right: 4px;
}

.trailer-filter__option {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	font-size: 12.5px;
	line-height: 1.35;
	cursor: pointer;
	color: var( --trailer-ink, #17212b );
}

.trailer-filter__option input {
	margin: 0;
	flex: 0 0 auto;
}

.trailer-filter__option:hover {
	color: var( --trailer-button-background, #2271b1 );
}

.trailer-filter__search {
	width: 100%;
	min-height: 28px !important;
	margin-bottom: 6px;
	font-size: 12px !important;
	padding: 3px 7px !important;
}

/* ---- Range groups --------------------------------------------------------- */
.trailer-filter__range-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
}

.trailer-filter__range-inputs input {
	flex: 1 1 0;
	min-width: 0;
	min-height: 30px !important;
	font-size: 12px !important;
}

.trailer-filter__range-sep {
	color: var( --trailer-muted, #6b7280 );
	flex: 0 0 auto;
}

/* Dual-handle track: two stacked native range inputs. */







/* Per-range Clear / Apply. */
.trailer-filter__range-actions {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}

.trailer-filter__range-clear,
.trailer-filter__range-apply {
	flex: 1 1 0;
	min-height: 26px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: 2px;
	cursor: pointer;
}

.trailer-filter__range-clear {
	background: transparent;
	border: 1px solid var( --trailer-border, #ddd );
	color: var( --trailer-ink, #17212b );
}

.trailer-filter__range-apply {
	background: var( --trailer-button-background, #2271b1 ) !important;
	border: 1px solid var( --trailer-button-background, #2271b1 ) !important;
	color: var( --trailer-button-text, #fff ) !important;
}

/* ---- Compact specification accordion ------------------------------------- */
.trailer-inventory .lrti-spec-filter-toggle {
	min-height: 32px !important;
	padding: 6px 8px !important;
	font-size: 12px !important;
	border-radius: 2px;
}

/* ---- Global actions stay secondary --------------------------------------- */
.trailer-inventory .lrti-filter-actions {
	display: flex;
	gap: 6px;
}

.trailer-inventory .lrti-filter-actions .lrti-btn {
	flex: 1 1 0;
	min-height: 30px !important;
	font-size: 11.5px !important;
	padding: 5px 8px !important;
}

/* ---- Focus visibility ----------------------------------------------------- */
.trailer-filter__option input:focus-visible,

/* ==========================================================================
   Final density + range-control geometry.
   Root cause of the "skateboard" look: a 4px track with 14px handles. The
   track is now a 2px line and the handles are 11px markers, aligned to the
   line's centre and given an invisible larger hit area for usability.
   ========================================================================== */

/* ---- Track: thin line ----------------------------------------------------- */


/* ---- Handles: small circular markers ------------------------------------- */



/* Keep both engines aligned on the 2px line. */

/* The max handle sits above so crossed handles stay grabbable without
   enlarging the visible marker. */


/* ---- Compact range fields ------------------------------------------------- */
.trailer-inventory .trailer-filter__range-inputs input {
	min-height: 30px !important;
	font-size: 11px !important;
	padding: 2px 5px !important;
	border-radius: 2px;
}

.trailer-inventory .trailer-filter__range-actions {
	margin-top: 0;
	gap: 5px;
}

.trailer-inventory .trailer-filter__range-clear,
.trailer-inventory .trailer-filter__range-apply {
	min-height: 28px;
	border-radius: 2px;
	font-size: 10px;
}

/* ---- Density: sections, labels, rows -------------------------------------- */
.trailer-inventory .trailer-filter__group,
.trailer-inventory .lrti-filter-section {
	margin: 0 0 8px !important;
	padding: 0 0 8px !important;
}

.trailer-inventory .trailer-filter__heading {
	font-size: 15px;
}

.trailer-inventory .trailer-filter__legend,
.trailer-inventory .lrti-filter-legend {
	font-size: 10.5px !important;
	margin: 0 0 4px !important;
	line-height: 1.3;
}

.trailer-inventory .trailer-filter__option,
.trailer-inventory .lrti-check {
	font-size: 11px !important;
	min-height: 20px;
	gap: 5px;
	line-height: 1.3;
}

.trailer-inventory .trailer-filter__option input[type="radio"],
.trailer-inventory .lrti-check input[type="checkbox"] {
	width: 13px;
	height: 13px;
}

.trailer-inventory .trailer-filter__state {
	font-size: 10px;
	margin: 2px 0 7px;
}

.trailer-inventory__sidebar input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
.trailer-inventory__sidebar select {
	min-height: 30px !important;
	font-size: 11.5px !important;
}

.trailer-inventory .lrti-spec-filter-toggle {
	min-height: 28px !important;
	font-size: 10.5px !important;
	padding: 4px 6px !important;
	border-radius: 2px;
}

.trailer-inventory .lrti-filter-actions .lrti-btn {
	min-height: 32px !important;
	font-size: 11px !important;
	border-radius: 2px;
}

/* ---- Button roles: active buttons must never read as disabled ------------- */
.trailer-inventory .lrti-btn--primary,
.trailer-inventory .trailer-card__cta,
.trailer-inventory .trailer-filter__range-apply,
.trailer-inventory .lrti-apply {
	background-color: var( --trailer-button-background, #2271b1 ) !important;
	border-color: var( --trailer-button-background, #2271b1 ) !important;
	color: var( --trailer-primary-contrast, #fff ) !important;
	opacity: 1 !important;
	filter: none !important;
}

.trailer-inventory .lrti-btn--outline,
.trailer-inventory .trailer-filter__range-clear,
.trailer-inventory .lrti-reset {
	background-color: transparent !important;
	border: 1px solid var( --trailer-button-background, #2271b1 ) !important;
	color: var( --trailer-secondary-contrast, #17212b ) !important;
	opacity: 1 !important;
}

/* Gray ONLY when genuinely disabled. */
.trailer-inventory button[disabled],
.trailer-inventory .lrti-btn[disabled],
.trailer-inventory [aria-disabled="true"] {
	background-color: var( --trailer-disabled-bg, #e6e8ea ) !important;
	border-color: var( --trailer-disabled-bg, #e6e8ea ) !important;
	color: var( --trailer-disabled-text, #8a9199 ) !important;
	cursor: not-allowed;
}

/* ---- Touch: slightly larger handles on small screens --------------------- */
@media ( max-width: 782px ) {
}

/* ==========================================================================
   Phase 6.5 — Show Filters button + visible slider handles.
   ROOT CAUSE (Show Filters): the archive primary-button rule did not include
   the toggle's classes, so the theme's generic grey button style won on
   specificity. The button was never disabled. Fixed by scoping it into the
   primary role rather than blanket !important.
   ========================================================================== */

.trailer-inventory .lrti-filter-toggle,
.trailer-inventory .trailer-filter__toggle,
.trailer-inventory button.lrti-filter-toggle {
	background-color: var( --trailer-primary, #2271b1 );
	border: 1px solid var( --trailer-primary, #2271b1 );
	color: var( --trailer-primary-contrast, #fff );
	opacity: 1;
	filter: none;
	border-radius: 2px;
	min-height: 32px;
	font-weight: 600;
	cursor: pointer;
}

.trailer-inventory .lrti-filter-toggle:hover,
.trailer-inventory .lrti-filter-toggle:focus-visible,
.trailer-inventory .trailer-filter__toggle:hover,
.trailer-inventory .trailer-filter__toggle:focus-visible {
	background-color: var( --trailer-primary-hover, #1c5d91 );
	border-color: var( --trailer-primary-hover, #1c5d91 );
	color: var( --trailer-primary-contrast, #fff );
}

.trailer-inventory .lrti-filter-toggle:focus-visible {
	outline: 2px solid var( --trailer-primary, #2271b1 );
	outline-offset: 2px;
}

/* Primary role now covers every active primary action on the archive. */
.trailer-inventory .lrti-btn--primary,
.trailer-inventory .trailer-card__cta,
.trailer-inventory .trailer-filter__range-apply,
.trailer-inventory .lrti-apply,
.trailer-inventory .lrti-filter-toggle {
	background-color: var( --trailer-primary, #2271b1 );
	border-color: var( --trailer-primary, #2271b1 );
	color: var( --trailer-primary-contrast, #fff );
}

/* Secondary role. */
.trailer-inventory .lrti-btn--outline,
.trailer-inventory .trailer-filter__range-clear,
.trailer-inventory .lrti-reset {
	background-color: transparent;
	border: 1px solid var( --trailer-secondary, #1f2937 );
	color: var( --trailer-secondary-contrast, #17212b );
}

.trailer-inventory .lrti-btn--outline:hover,
.trailer-inventory .trailer-filter__range-clear:hover,
.trailer-inventory .lrti-reset:hover {
	background-color: var( --trailer-secondary-hover, #f5f5f5 );
}

/* Disabled only when genuinely disabled. */
.trailer-inventory button:disabled,
.trailer-inventory .lrti-btn:disabled,
.trailer-inventory [aria-disabled="true"] {
	background-color: var( --trailer-disabled-bg, #e6e8ea );
	border-color: var( --trailer-disabled-bg, #e6e8ea );
	color: var( --trailer-disabled-text, #8a9199 );
	cursor: not-allowed;
}

/* ---- Slider: 3px track, clearly visible 16px handles -------------------- */




/* WebKit: 16px marker centred on the 3px line ((18-16)/2 offset handled by
   the flex-free absolute track, so margin-top keeps engines identical). */


/* Firefox: identical geometry, native chrome removed. */


/* Keyboard focus only; resting handles have no glow. */


/* ---- Range fields inherit the plugin surface, not theme chrome ---------- */
.trailer-inventory .trailer-filter__range-inputs input {
	background: var( --trailer-surface, #fff );
	color: var( --trailer-text, #222 );
	border: 1px solid var( --trailer-border, #ddd );
}

/* ==========================================================================
   Phase 6.7 — semantic colour architecture.

   The pale "Show Filters" button was caused by `.lrti-btn--small` setting a
   `background` shorthand. That class is now SIZE-ONLY (see inventory.css), so
   the role classes below win normally and no !important is needed for buttons.
   `--lrti-navy` was left untouched: it has 19 legacy uses (single/inventory
   heroes, badges) and remapping it would have changed unrelated components.
   ========================================================================== */

/* Primary role. */
.trailer-inventory .lrti-filter-toggle,
.trailer-inventory .trailer-filter__toggle,
.trailer-inventory .lrti-btn--primary,
.trailer-inventory .trailer-card__cta,
.trailer-inventory .trailer-filter__range-apply,
.trailer-inventory .lrti-apply,
.trailer-inventory .lrti-sort-submit {
	background-color: var( --trailer-primary, #2271b1 );
	background-image: none;
	border: 1px solid var( --trailer-primary, #2271b1 );
	color: var( --trailer-primary-contrast, #ffffff );
	opacity: 1;
}

.trailer-inventory .lrti-filter-toggle:hover,
.trailer-inventory .lrti-filter-toggle:focus-visible,
.trailer-inventory .lrti-btn--primary:hover,
.trailer-inventory .trailer-card__cta:hover,
.trailer-inventory .trailer-filter__range-apply:hover,
.trailer-inventory .lrti-apply:hover {
	background-color: var( --trailer-primary-hover, #1c5d91 );
	border-color: var( --trailer-primary-hover, #1c5d91 );
	color: var( --trailer-primary-contrast, #ffffff );
}

/* Secondary role - outlined, never disabled-looking. */
.trailer-inventory .lrti-btn--outline,
.trailer-inventory .trailer-filter__range-clear,
.trailer-inventory .lrti-reset {
	background-color: var( --trailer-surface, #f5f5f5 );
	background-image: none;
	border: 1px solid var( --trailer-secondary, #1f2937 );
	color: var( --trailer-secondary-contrast, #17212b );
	opacity: 1;
}

.trailer-inventory .lrti-btn--outline:hover,
.trailer-inventory .trailer-filter__range-clear:hover,
.trailer-inventory .lrti-reset:hover {
	background-color: var( --trailer-secondary-hover, #eceff2 );
}

/* Disabled state ONLY from real disabled attributes. */
.trailer-inventory button:disabled,
.trailer-inventory .lrti-btn:disabled,
.trailer-inventory [aria-disabled="true"] {
	background-color: var( --trailer-disabled-bg, #e6e8ea );
	border-color: var( --trailer-disabled-bg, #e6e8ea );
	color: var( --trailer-disabled-text, #8a9199 );
	cursor: not-allowed;
}

/* ---- Range slider: single 3px rail, 16px handles ------------------------
   Architecture: two overlapping native <input type="range"> elements. Their
   native rails are made transparent so only the custom ::before/::after rail
   shows (no double track); pointer-events are re-enabled on the thumbs only so
   both handles stay draggable. */









.trailer-inventory .trailer-filter__range-inputs input {
	background: var( --trailer-surface, #ffffff );
	color: var( --trailer-text, #222222 );
	border: 1px solid var( --trailer-border, #dddddd );
}

/* ==========================================================================
   Phase 6.9 — AUTHORITATIVE range-control geometry (supersedes earlier blocks).

   WHY THE THUMB WAS OFF-CENTRE: the visible rail is a pseudo-element centred in
   the wrapper, while the WebKit thumb was positioned against a 3px native
   runnable track and then nudged with margin-top:-6.5px. Two independent
   vertical systems can never stay aligned.

   FIX: one centreline. The native runnable track is stretched to the FULL
   wrapper height and made transparent, so each browser centres the 16px thumb
   inside that same box automatically. margin-top is removed entirely - no magic
   offsets. The visible 3px rail is centred in the identical box via
   top:50% + translateY(-50%). Thumb centre and rail centre are therefore the
   same wrapper midpoint in every horizontal position.
   ========================================================================== */


/* Visible rail: centred on the wrapper midpoint. */



/* Both inputs occupy the identical box as the rail. */

/* WebKit: full-height transparent track means the browser centres the thumb
   for us, so no margin-top offset is required. */


/* Firefox: identical box, identical thumb; Firefox centres in the track too. */



/* Min handle above max so both stay grabbable at the ends. */


/* ==========================================================================
   Phase 7.0 — handles visually attached to the rail at every position.

   At the extremes a native range thumb is centred on the track's first/last
   pixel, so half the marker sits outside the rail's painted area and reads as
   "floating off the ends". Insetting the inputs by half a thumb width means the
   thumb's travel matches the rail's painted span exactly, so a handle at min or
   max still sits ON the line.
   ========================================================================== */


/* Rail spans the same inset region the thumbs travel within. */


/* Inputs occupy the identical inset box, so thumb centres map onto the rail. */

/* Rail thickness and handle size stay locked together. */


/* ==========================================================================
   v2.15.3 — AUTHORITATIVE range-slider geometry (single source of truth).
   All 57 earlier slider rule blocks were DELETED, not overridden.

   ROOT CAUSE OF THE VERTICAL OFFSET
   WebKit does not centre a thumb inside a tall runnable track. With
   -webkit-appearance:none the thumb's TOP edge is placed at the runnable
   track's top edge plus margin-top. v2.15.1 set the track to the full 20px
   input height with margin-top:0, so:
        thumb centre = 0 + (16 / 2)      =  8px
        rail  centre = 20 * 50%          = 10px
   a 2px upward offset - the rail crossed above the circle's centre, leaving
   more circle below the line.

   DERIVED FIX (not a nudge)
   To centre a thumb in a WebKit runnable track:
        margin-top = (trackHeight - thumbHeight) / 2
                   = (20 - 16) / 2 = 2px
        thumb centre = 2 + 8 = 10px = rail centre  ✔
   Firefox centres ::-moz-range-thumb in ::-moz-range-track automatically, so
   the same 20px track and 16px thumb give a 10px centre with no margin.

   Y-AXIS CONTRACT (one reference box: the 20px wrapper)
        wrapper height ........ 20px
        rail top/height ....... 50% + translateY(-50%), 4px  -> centre 10px
        input top/height ...... 0 / 20px
        native track height ... 20px (transparent)
        thumb height .......... 16px, border 3px, box-sizing border-box
        WebKit margin-top ..... 2px  (derived above)
        thumb centre .......... 10px  == rail centre  ✔
   ========================================================================== */

.trailer-inventory .trailer-filter__track {
	position: relative;
	height: 20px;
	margin: 5px 0 3px;
	padding: 0 8px;                 /* preserves 2.15.2 endpoint inset */
	box-sizing: border-box;
}

/* Visible rail: centred on the wrapper's vertical midpoint (10px). */
.trailer-inventory .trailer-filter__track::before,
.trailer-inventory .trailer-filter__track::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	height: 4px;
	border-radius: 2px;
	pointer-events: none;
}

.trailer-inventory .trailer-filter__track::before {
	left: 8px;
	right: 8px;
	background: var( --trailer-border, #dddddd );
}

.trailer-inventory .trailer-filter__track::after {
	left: calc( 8px + ( 100% - 16px ) * ( var( --lrti-range-start-num, 0 ) / 100 ) );
	right: calc( 8px + ( 100% - 16px ) * ( 1 - var( --lrti-range-end-num, 100 ) / 100 ) );
	background: var( --trailer-slider-track, var( --trailer-primary, #2271b1 ) );
}

/* Inputs share the wrapper's exact vertical box and the 2.15.2 inset.
   v2.15.4 ROOT CAUSE FIX: generic theme form resets (e.g. `input {
   min-height: 30px; }`) beat `height: 20px` in box resolution regardless
   of specificity, stretching the input to 30px while it stayed anchored at
   top: 0. Chromium centres the 20px runnable track inside the taller input,
   so the track top dropped 5px and the thumb followed — rail through the
   UPPER part of the circle (runtime-measured +5px on staging).
   Fix: (a) clamp min/max-height so theme min-heights cannot resize the box
   (same-property conflict, plugin selector wins on specificity — no
   !important needed); (b) centre the input on the wrapper midline with
   top: 50% + translateY(-50%) so even a forced input height keeps the
   thumb's centreline on the rail's centreline. */
.trailer-inventory .trailer-filter__slider {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	left: 8px;
	width: calc( 100% - 16px );
	height: 20px;
	min-height: 20px;
	max-height: 20px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	pointer-events: none;
	box-sizing: border-box;
}

.trailer-inventory .trailer-filter__slider--min { z-index: 3; }
.trailer-inventory .trailer-filter__slider--max { z-index: 2; }

/* ---- WebKit ---- */
.trailer-inventory .trailer-filter__slider::-webkit-slider-runnable-track {
	height: 20px;
	background: transparent;
	border: none;
	box-shadow: none;
}

.trailer-inventory .trailer-filter__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin-top: 2px;                /* (20 - 16) / 2 — centres on the 10px line */
	border-radius: 50%;
	background: var( --trailer-slider-handle-bg, #ffffff );
	border: 3px solid var( --trailer-slider-handle-border, var( --trailer-primary, #2271b1 ) );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
	opacity: 1;
	cursor: pointer;
}

/* ---- Firefox (auto-centres the thumb in the track; no margin) ---- */
.trailer-inventory .trailer-filter__slider::-moz-range-track {
	height: 20px;
	background: transparent;
	border: none;
}

.trailer-inventory .trailer-filter__slider::-moz-range-thumb {
	pointer-events: auto;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var( --trailer-slider-handle-bg, #ffffff );
	border: 3px solid var( --trailer-slider-handle-border, var( --trailer-primary, #2271b1 ) );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
	opacity: 1;
	cursor: pointer;
}

.trailer-inventory .trailer-filter__slider::-moz-focus-outer {
	border: 0;
}

.trailer-inventory .trailer-filter__slider:focus-visible::-webkit-slider-thumb,
.trailer-inventory .trailer-filter__slider:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px var( --trailer-slider-handle-border, #2271b1 );
}

/* ---------------------------------------------------------------------------
 * Location group (Sprint 2.16).
 *
 * ZIP and radius sit at the top of the sidebar with their own Apply button, so
 * entering a ZIP is one deliberate action rather than something that fires on
 * every keystroke.
 * ------------------------------------------------------------------------- */

.trailer-filter__location .trailer-filter__field + .trailer-filter__field {
	margin-top: 8px;
}

.trailer-filter__location .trailer-filter__range-actions {
	justify-content: flex-end;
	margin-top: 10px;
}