/**
 * PPX Vehica Search
 *
 * These containers reuse Vehica's own class names, so most styling comes from
 * the theme for free. Everything here either fills a gap Vehica left, or undoes
 * a Vehica rule that assumed a Vue component we no longer load.
 */

/* ----------------------------------------------------------- search page */

/* Vehica drew this hairline on .vehica-inventory-v1__top, which went away with
   the filter bar. Full width, as it was. */
.ppx-app .ppx-rule { border-top: 1px solid #292a31; }

/* Align the tab bar with the content below it. */
.ppx-app .vehica-inventory-v1__bar {
	max-width: 1468px;
	margin: 0 auto;
	padding-left: 30px;
	padding-right: 30px;
}
@media (max-width: 1023px) {
	.ppx-app .vehica-inventory-v1__bar { padding-left: 15px; padding-right: 15px; }
}
.ppx-app .vehica-inventory-v1__bar__left { min-width: 0; flex: 1 1 auto; }

/* Vehica clips the tab row (overflow:hidden + nowrap) and relies on a drag
   scroll directive we do not load, so later tabs were unreachable on narrow
   screens. Make it a normal touch-scrollable strip. */
.ppx-app .ppx-tabs {
	overflow-x: auto !important;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	max-width: 100%;
}
.ppx-app .ppx-tabs::-webkit-scrollbar { display: none; }
.ppx-app .ppx-tabs .vehica-search-v1__tab { flex: 0 0 auto; cursor: pointer; }

/* .vehica-button sets an explicit display, which beats [hidden]'s display:none. */
.ppx-app .ppx-more[hidden] { display: none !important; }
.ppx-app .ppx-more-wrap { display: flex; justify-content: center; padding: 10px 0 60px; }

/* Keyword box. Vehica already positions the magnifier and the clear button; the
   only thing missing is the font, because inputs do not inherit font-family and
   the theme sets no rule that reaches this one. */
.ppx-app .vehica-inventory-v1__keyword input {
	font-family: 'Work Sans', Arial, Helvetica, sans-serif !important;
	font-weight: 400;
}

/* Filters arriving by URL with no visible control. */
.ppx-app .ppx-chips {
	max-width: 1468px;
	margin: 0 auto;
	padding: 18px 30px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
@media (max-width: 1023px) {
	.ppx-app .ppx-chips { padding-left: 15px; padding-right: 15px; }
}
.ppx-app .ppx-chips[hidden] { display: none !important; }
.ppx-app .ppx-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #1f252e;
	color: #fff;
	border: 1px solid #343b4a;
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
}
.ppx-app .ppx-chip:hover { border-color: #8b93a5; }
.ppx-app .ppx-chip span { color: #8b93a5; }
.ppx-app .ppx-chip i { font-size: 11px; }

.ppx-app .ppx-empty { color: #8b93a5; padding: 60px 0; text-align: center; width: 100%; }

/* Sort control. Sits on the dark bar, so it stays transparent. */
.ppx-app .ppx-sort-wrap .ppx-vs .vs__selected,
.ppx-app .ppx-sort-wrap .ppx-vs .vs__dropdown-option {
	font-family: 'Work Sans', Arial, Helvetica, sans-serif;
}
.ppx-app .ppx-sort-wrap .ppx-vs .vs__selected { white-space: nowrap; }

/* ------------------------------------------------------- homepage form */

/* These controls sit on a white panel. The Customizer paints v-select text
   near-white (#fdfdfd) and the theme paints the label with --primary (#F30000),
   neither of which reads on white, so set it all explicitly. */
.ppx-form .ppx-vs.v-select .vs__dropdown-toggle {
	background: #fff !important;
	border-radius: 10px;
}
.ppx-form .ppx-vs.v-select .vs__selected,
.ppx-form .ppx-vs.v-select .vs__selected:hover,
.ppx-form .ppx-vs.v-select input.vs__search,
.ppx-form .ppx-vs.v-select .vs__dropdown-option {
	color: #2f3b48 !important;
	font-family: 'Work Sans', Arial, Helvetica, sans-serif !important;
}
.ppx-form .ppx-vs.v-select .vs__selected { font-weight: 600 !important; }
.ppx-form .ppx-vs.v-select .vs__open-indicator { fill: rgba(60, 60, 60, .55); }

/* Option rows: name left, count hard right so the two never run together. */
.ppx-form .ppx-vs .vs__dropdown-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.ppx-form .ppx-vs .vehica-checkbox__count {
	margin-left: auto;
	padding-left: 16px;
	color: #8b93a5 !important;
	font-weight: 400 !important;
	flex: 0 0 auto;
}

/* ---------------------------------------------------- homepage featured */

.ppx-featured .vehica-tabs {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.ppx-featured .vehica-tabs::-webkit-scrollbar { display: none; }
.ppx-featured .vehica-tab { flex: 0 0 auto; cursor: pointer; }

/* Centre the strip, but let it scroll inside itself once the tabs no longer
   fit. The wrapper's own overflow:hidden would otherwise clip them. */
@media (max-width: 1199px) {
	.ppx-featured .vehica-tabs-wrapper {
		overflow-x: visible !important;
		justify-content: center !important;
	}
	.ppx-featured .vehica-tabs {
		margin-left: auto !important;
		margin-right: auto !important;
		justify-content: flex-start !important;
		max-width: 100%;
	}
	.ppx-featured .vehica-tabs-top-v1 { justify-content: center; }
}

/* ------------------------------------------------------------ shared vs */

.ppx-vs { cursor: pointer; user-select: none; position: relative; }
.ppx-vs .vs__dropdown-menu { background: #fff; max-height: 320px; }
.ppx-vs .vs__dropdown-option--selected { font-weight: 600; }
.ppx-vs:focus-visible { outline: 2px solid rgba(255, 255, 255, .35); outline-offset: 2px; }