/**
 * Vehicle search results page.
 *
 * Ported byte-for-byte from header-footer/search-results.html lines 442-839.
 * The .hero-search and .rental-hero rules that open that file's <style> block
 * are deliberately absent: they are a strict subset of assets/css/hero-search.css
 * (verified line by line), which this file is enqueued after.
 *
 * Two rules at the bottom are new — the mockup ships no filter JavaScript, so
 * it never needed them.
 *
 * @package Vehicle_Rent
 */

	/* ---------------------------------------------------------------
	   Search results: the shortlist.
	   A dark recap strip carries the same booking panel from the hero —
	   the search stays editable in place — and the white cabin below
	   holds the vehicles that fit. No prices exist in the fleet data,
	   so the right column of every row asks for a quote instead of
	   pretending to a rate.
	   --------------------------------------------------------------- */

	.recap {
		background: var(--foreground);
		color: white;
	}

	.recap__inner {
		width: min(calc(100% - 2rem), 72rem);
		margin-inline: auto;
		padding-block: 2rem 2.25rem;
	}

	.recap__crumb {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.62);
	}

	.recap__crumb a { transition: color 160ms ease; }
	.recap__crumb svg { width: 0.875rem; height: 0.875rem; }

	.recap__title {
		margin: 0.9rem 0 0;
		font-size: clamp(1.75rem, 3.2vw, 2.5rem);
		font-weight: 800;
		line-height: 1.08;
		letter-spacing: -0.03em;
		text-wrap: balance;
	}

	.recap__trip {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.55rem 1rem;
		margin-top: 0.85rem;
		font-size: 1rem;
		color: rgba(255, 255, 255, 0.86);
	}

	.recap__trip-item { display: flex; align-items: center; gap: 0.45rem; }
	.recap__trip-item svg { width: 1rem; height: 1rem; color: rgba(255, 255, 255, 0.5); }
	.recap__trip-item strong { font-weight: 700; }

	.recap .hero-search { margin-top: 1.75rem; }

	/* ---- results shell ---- */

	.results {
		width: min(calc(100% - 2rem), 72rem);
		margin-inline: auto;
		padding-block: 2.5rem 4rem;
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}

	.filters { position: sticky; top: 5.5rem; }

	.filters__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		padding-bottom: 0.9rem;
		border-bottom: 1px solid var(--border);
	}

	.filters__head h2 {
		margin: 0;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.filters__reset {
		border: 0;
		background: none;
		padding: 0;
		font: inherit;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--muted-foreground);
		cursor: pointer;
		transition: color 160ms ease;
	}

	.filters__reset:disabled { opacity: 0.4; cursor: default; }

	.filter-group { padding-block: 1.25rem; border-bottom: 1px solid var(--border); }

	.filter-group__title {
		margin: 0 0 0.6rem;
		font-size: 0.875rem;
		font-weight: 600;
	}

	.filter-option {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding-block: 0.3rem;
		font-size: 0.875rem;
		color: var(--muted-foreground);
		cursor: pointer;
		transition: color 160ms ease;
	}

	.filter-option input {
		flex: none;
		width: 1rem;
		height: 1rem;
		margin: 0;
		accent-color: var(--primary);
		cursor: pointer;
	}

	.filter-option__count { margin-left: auto; font-variant-numeric: tabular-nums; }
	.filter-option:has(input:checked) { color: var(--foreground); font-weight: 600; }
	.filter-option:has(:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 0.375rem; }

	.filters__note {
		margin: 1.25rem 0 0;
		font-size: 0.8125rem;
		line-height: 1.5;
		color: var(--muted-foreground);
	}

	/* ---- results list ---- */

	.results__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding-bottom: 1.1rem;
		border-bottom: 1px solid var(--border);
	}

	.results__count { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
	.results__count span { color: var(--muted-foreground); font-weight: 500; }

	.results__sort { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

	.results__sort select {
		appearance: none;
		padding: 0.45rem 1.6rem 0.45rem 0.7rem;
		border: 1px solid var(--border);
		border-radius: 0.5rem;
		background: var(--background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.5rem center / 0.9rem;
		font: inherit;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--foreground);
		cursor: pointer;
	}

	.results__sort select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

	.results__included {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		margin-top: 1.1rem;
		font-size: 0.875rem;
		color: var(--muted-foreground);
	}

	.results__included svg { flex: none; width: 1rem; height: 1rem; color: var(--primary-strong, oklch(0.43 0.14 131.684)); }

	.results__list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

	/* ---- one vehicle row ---- */

	.vcard {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr) 14rem;
		border: 1px solid var(--border);
		border-radius: 1.5rem;
		background: var(--card, var(--background));
		overflow: hidden;
		transition: border-color 200ms ease, box-shadow 200ms ease;
	}

	.vcard__media { position: relative; background: var(--muted); }

	.vcard__media img {
		display: block;
		width: 100%;
		height: 100%;
		min-height: 12.5rem;
		object-fit: cover;
		transition: transform 600ms var(--hero-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
	}

	.vcard__flag {
		position: absolute;
		left: 0.85rem;
		top: 0.85rem;
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		padding: 0.4rem 0.7rem;
		border-radius: 9999px;
		background: color-mix(in oklab, white 95%, transparent);
		backdrop-filter: blur(8px);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.02em;
		color: var(--primary-strong, oklch(0.43 0.14 131.684));
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 8px 10px -1px rgba(0, 0, 0, 0.1);
	}

	.vcard__flag svg { width: 0.875rem; height: 0.875rem; }

	.vcard__body { padding: 1.4rem 1.5rem; }

	.vcard__name { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
	.vcard__name a { transition: color 160ms ease; }
	.vcard__make { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }

	.vcard__specs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.35rem;
		margin-top: 1.1rem;
		padding-top: 1.1rem;
		border-top: 1px solid var(--border);
	}

	.vcard__spec {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--foreground);
	}

	.vcard__spec svg { flex: none; width: 1rem; height: 1rem; color: var(--muted-foreground); }
	.vcard__spec span { color: var(--muted-foreground); font-weight: 400; }

	.vcard__aside {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding: 1.4rem 1.5rem;
		border-left: 1px solid var(--border);
		background: color-mix(in oklab, var(--muted) 45%, var(--background));
	}

	.vcard__rating { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; }
	.vcard__rating svg { width: 0.9375rem; height: 0.9375rem; color: var(--primary); }
	.vcard__rating--none { color: var(--muted-foreground); font-weight: 500; }

	.vcard__quote { margin-top: auto; }

	.vcard__quote-label { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
	.vcard__quote-note { margin: 0.3rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--muted-foreground); }

	.vcard__actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }

	.vcard__cta,
	.vcard__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.4rem;
		min-height: 2.75rem;
		padding-inline: 1.1rem;
		border: 1px solid transparent;
		border-radius: 9999px;
		font-size: 0.875rem;
		font-weight: 700;
		transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 160ms ease;
	}

	.vcard__cta { background: var(--primary); color: var(--primary-foreground); }
	.vcard__link { border-color: var(--border); color: var(--foreground); }
	.vcard__cta:active, .vcard__link:active { transform: scale(0.97); }

	.vcard__cta:focus-visible,
	.vcard__link:focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px var(--background), 0 0 0 4px color-mix(in oklab, var(--primary) 50%, transparent);
	}

	/* ---- empty state ---- */

	.results__empty {
		display: none;
		padding: 3.5rem 2rem;
		border: 1px solid var(--border);
		border-radius: 1.5rem;
		text-align: center;
	}

	.results__empty[data-visible="true"] { display: block; }
	.results__empty svg { width: 2rem; height: 2rem; color: var(--muted-foreground); }
	.results__empty h3 { margin: 1rem 0 0; font-size: 1.25rem; font-weight: 700; }
	.results__empty p { margin: 0.5rem auto 0; max-width: 26rem; color: var(--muted-foreground); line-height: 1.55; }

	.results__empty button {
		margin-top: 1.5rem;
		min-height: 2.75rem;
		padding-inline: 1.4rem;
		border: 0;
		border-radius: 9999px;
		background: var(--primary);
		color: var(--primary-foreground);
		font: inherit;
		font-weight: 700;
		cursor: pointer;
	}

	/* ---- closing help ---- */

	.results__help {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1.25rem;
		margin-top: 2.5rem;
		padding: 1.75rem 2rem;
		border-radius: 1.5rem;
		background: var(--muted);
	}

	.results__help h3 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
	.results__help p { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }

	.results__help a {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		min-height: 3rem;
		padding-inline: 1.5rem;
		border-radius: 9999px;
		background: var(--foreground);
		color: var(--background);
		font-size: 0.875rem;
		font-weight: 700;
		transition: background-color 180ms ease;
	}

	.results__help a svg { width: 1.1rem; height: 1.1rem; }

	@media (hover: hover) and (pointer: fine) {
		.recap__crumb a:hover { color: white; }
		.filters__reset:not(:disabled):hover { color: var(--primary-strong, oklch(0.43 0.14 131.684)); }
		.filter-option:hover { color: var(--foreground); }
		.vcard:hover { border-color: color-mix(in oklab, var(--foreground) 22%, transparent); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); }
		.vcard:hover .vcard__media img { transform: scale(1.04); }
		.vcard__name a:hover { color: var(--primary-strong, oklch(0.43 0.14 131.684)); }
		.vcard__cta:hover { background: color-mix(in oklab, var(--primary) 88%, black); }
		.vcard__link:hover { border-color: var(--foreground); background: var(--muted); }
		.results__help a:hover { background: color-mix(in oklab, var(--foreground) 85%, white); }
	}

	@media (max-width: 63.999rem) {
		.results { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2rem 3rem; }
		.filters { position: static; }
		.filters__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 2rem; }
		.filter-group:last-of-type { border-bottom: 0; }
		.vcard { grid-template-columns: 13rem minmax(0, 1fr); }
		.vcard__aside { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
		.vcard__quote { margin-top: 0; }
		.vcard__actions { flex-direction: row; margin-top: 0; margin-left: auto; }
	}

	@media (max-width: 39.999rem) {
		.vcard { grid-template-columns: minmax(0, 1fr); }
		.vcard__media img { min-height: 11rem; max-height: 13rem; }
		.vcard__aside { flex-direction: column; align-items: stretch; }
		.vcard__actions { margin-left: 0; }
		.vcard__cta, .vcard__link { flex: 1; }
		.results__help a { width: 100%; justify-content: center; }
	}

	@media (prefers-reduced-motion: reduce) {
		.vcard__media img { transition: none; }
		.vcard:hover .vcard__media img { transform: none; }
	}

	/* ---- filter behaviour (not in the mockup) ---- */

	/* The filter script hides rows rather than removing them, so the sort
	   order and the URL state survive a filter change. */
	.vcard.is-hidden { display: none; }

	/* Without JavaScript the filter panel and the sort control do nothing.
	   Hide them rather than leave dead controls on screen. The `js` class is
	   set in wp_head at priority 0, before this stylesheet loads. */
	html:not(.js) .no-js-hidden { display: none; }

	/* .results__list sets display:flex, which outranks the browser's own
	   [hidden] rule, so the empty state needs this to actually replace it. */
	.results__list[hidden] { display: none; }

	/* The count's noun is rewritten between singular and plural by the filter
	   script. Only the trailing route phrase is meant to be muted. */
	.results__count .results__noun { color: inherit; font-weight: inherit; }