/* SearchEV Archive Listing — matches the Electric Cars archive design */

:root {
	/* Single source of truth for the site's brand green, used everywhere
	   it should show up consistently: the card CTA arrow, the mobile
	   "Filters" button, active pagination accents, etc. */
	--seval-brand-green: #7ed321;
}

.seval-archive {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	font-family: inherit;
	color: #111;
	background: #f8f6f2;
}

/* ---------- Sidebar ---------- */
/* Sticky on desktop: the grid column stays put while the results scroll.
   (Mobile turns the sidebar into an off-canvas drawer further below.) */
@media (min-width: 781px) {
	.seval-archive__sidebar {
		position: -webkit-sticky;
		position: sticky;
		top: 20px;
		align-self: start;
		overflow-anchor: none; /* expanding a list must grow downward, not shift the page */
	}
	body.admin-bar .seval-archive__sidebar {
		top: 52px;
	}
}
/* Leaves room for a sticky site header when jumping back to the results. */
.seval-archive__main {
	scroll-margin-top: 90px;
}

.seval-sidebar {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 20px;
}

.seval-search {
	position: relative;
	display: block;
}
.seval-search__icon {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	color: #999;
	pointer-events: none;
}
.seval-search__input {
	width: 100%;
	padding: 10px 36px 10px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

.seval-filter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 18px 0 12px;
}
.seval-filter-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}
.seval-reset-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.seval-reset-btn:hover {
	background: #111;
	border-color: #111;
	color: #fff;
}

.seval-filter-block {
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid #eee;
}
.seval-filter-block:last-child {
	border-bottom: none;
}
/* .seval-price-block-wrap and .seval-range-block-wrap each only have one
   child (their own .seval-filter-block), so :last-child above would
   otherwise strip its divider even though it's not actually the last
   block in the sidebar — restore it explicitly for both. */
.seval-price-block-wrap .seval-filter-block:last-child,
.seval-range-block-wrap .seval-filter-block:last-child {
	border-bottom: 1px solid #eee;
}

.seval-filter-label {
	font-weight: 600;
	font-size: 14px;
	margin: 0 0 10px;
	color: #333;
}

.seval-price-slider {
	position: relative;
	height: 28px;
}
.seval-price-slider input[type="range"] {
	position: absolute;
	width: 100%;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	top: 10px;
}
.seval-price-slider input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #111;
	cursor: pointer;
	margin-top: -6px;
}
.seval-price-slider input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	background: #ddd;
	border-radius: 2px;
}
.seval-price-display {
	font-size: 13px;
	color: #555;
	margin-top: 6px;
}

.seval-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.seval-checklist li {
	margin-bottom: 8px;
}
.seval-facet-link {
	color: inherit;
	text-decoration: none;
}
.seval-checklist label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

/* Only the first 5 options in a facet show by default; "See N more"
   reveals the rest without another server round trip. */
.seval-facet-item--hidden {
	display: none;
}
.seval-filter-block.is-expanded .seval-facet-item--hidden {
	display: block;
}
.seval-see-more {
	background: none;
	border: none;
	padding: 2px 0 0;
	color: #1a7f37;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.seval-see-more:hover {
	text-decoration: underline;
}

/* ---------- Main column ---------- */
.seval-archive__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}
.seval-archive__heading {
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 4px;
}
.seval-archive__count {
	font-size: 14px;
	color: #666;
	margin: 0;
}
.seval-archive__titlebox {
	flex: 1 1 320px;
	min-width: 0;
}
.seval-archive__header {
	align-items: flex-start;
}

/* ---------- Header tab buttons (electric-vehicle-sort-by) ---------- */
.seval-archive__tabs:empty {
	display: none;
}
.seval-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.seval-tab {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid #bfe3d0;
	border-radius: 999px;
	background: #f2faf6;
	color: #16794a;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.seval-tab:hover {
	border-color: #16794a;
	background: #e6f6ee;
}
.seval-tab.is-active {
	background: #16794a;
	border-color: #16794a;
	color: #fff;
}
.seval-archive__sort {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 0 0 auto;
	gap: 10px;
	white-space: nowrap;
}
.seval-archive__sort label {
	display: inline-block;
	margin: 0;
	font-size: 14px;
}
.seval-archive__sort select {
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
}

/* ---------- Active filter chips ---------- */
.seval-active-filters-wrap:empty {
	display: none;
}
.seval-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.seval-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f3f3f3;
	border: 1px solid #e2e2e2;
	border-radius: 999px;
	padding: 6px 8px 6px 14px;
	font-size: 13px;
	color: #333;
}
.seval-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #c0392b;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.seval-chip__remove:hover {
	background: #e6e6e6;
}

.seval-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	min-height: 200px;
}

.seval-card {
	background: #fff;
	border: 1px solid #f0ece6;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 10px;
	box-sizing: border-box;
}

.seval-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.seval-card__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	line-height: 1.25;
	color: #111;
}
.seval-card__title a {
	color: #111;
	text-decoration: none;
}
.seval-card__rating {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	background: #eeebff;
	border: 1px solid #d9d4fb;
	color: #4f46e5;
	border-radius: 6px;
	padding: 5px 10px;
	white-space: nowrap;
}

.seval-card__image {
	display: block;
	width: 100%;
	padding: 10px 0 14px;
}
.seval-card__image img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
}

/* Grey spec box: the three stats on top, feature pills underneath. */
.seval-card__specs {
	background: #efefef;
	border-radius: 10px;
	padding: 12px 14px;
}
.seval-card__stats {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap; /* always one line */
}
.seval-card__stats span {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-size: 18px;
	font-weight: 500;
	color: #111;
	white-space: nowrap;
	min-width: 0;
}
.seval-card__stats .seval-stat-icon {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex: 0 0 auto;
	display: inline-block;
	align-self: center;
}
.seval-card__stats small {
	font-size: 14px;
	font-weight: 400;
	color: #333;
	margin-left: 0;
}

.seval-card__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	padding: 0;
}
.seval-pill {
	background: #fff;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.3;
	padding: 6px 12px;
	color: #333;
}
.seval-pill--more {
	background: #fff;
	color: #333;
}

.seval-card__price {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #000;
	color: #fff;
	padding: 10px 10px 10px 14px;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 700;
	font-size: 20px;
}
.seval-card__specs {
	margin-bottom: 12px;
}
.seval-card__arrow {
	background: #0f7a45;
	color: #fff;
	width: 52px;
	height: 38px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
}

.seval-empty {
	grid-column: 1 / -1;
	text-align: center;
	color: #777;
	padding: 40px 0;
}

/* ---------- Pagination ---------- */
.seval-pagination {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	margin-top: 24px;
}
.seval-page-link,
.seval-page-next {
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: #475569;
	line-height: 1;
}
.seval-page-link:hover,
.seval-page-next:hover {
	color: #111;
}
.seval-page-link.is-active {
	color: #111;
	font-weight: 700;
}
.seval-page-next {
	font-weight: 600;
}
.seval-page-ellipsis {
	color: #94a3b8;
	font-size: 15px;
}

/* ---------- Loading state ---------- */
.seval-grid.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.seval-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 780px) {
	.seval-archive {
		grid-template-columns: 1fr;
	}
	.seval-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Mobile filter drawer + bottom bar ---------- */
.seval-sidebar-close {
	display: none;
}
.seval-sidebar-apply {
	display: none;
}
.seval-sidebar-backdrop {
	display: none;
}
.seval-mobile-bar {
	display: none;
}
.seval-mobile-sort-sheet {
	display: none;
}

@media (max-width: 780px) {
	.seval-archive {
		padding-bottom: 88px; /* clears the fixed bottom bar */
		position: relative;
	}

	/* The sidebar becomes an off-canvas drawer, matching the reference
	   screenshot: hidden off-screen to the left until "Filters" is
	   tapped, then it slides in over a dimmed backdrop, exactly like the
	   filters shown in the desktop sidebar. */
	.seval-archive__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 86%;
		max-width: 340px;
		z-index: 1001;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
		background: #fff;
	}
	.seval-archive__sidebar.is-open {
		transform: translateX(0);
	}
	.seval-sidebar {
		border: none;
		border-radius: 0;
		min-height: 100%;
		padding-bottom: 24px;
	}
	.seval-sidebar-close {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		width: 36px;
		height: 36px;
		border: none;
		background: #f3f3f3;
		border-radius: 50%;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
		color: #333;
	}
	.seval-sidebar-apply {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}
	.seval-sidebar-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		z-index: 1000;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}
	.seval-sidebar-backdrop.is-visible {
		opacity: 1;
		pointer-events: auto;
	}

	/* Tabs scroll sideways instead of wrapping onto several rows. */
	.seval-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.seval-tabs::-webkit-scrollbar {
		display: none;
	}
	.seval-tab {
		white-space: nowrap;
		flex: 0 0 auto;
	}

	/* Desktop's inline sort dropdown is replaced by the "Best Match"
	   button + slide-up sheet on mobile. */
	.seval-archive__sort {
		display: none;
	}

	.seval-mobile-bar {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		padding: 10px 14px;
		background: #111;
	}
	.seval-mobile-sort-btn,
	.seval-mobile-filters-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		border: none;
		border-radius: 8px;
		padding: 12px 10px;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
	}
	.seval-mobile-sort-btn {
		background: #111;
		color: #fff;
		border: 1px solid #444;
	}
	.seval-mobile-filters-btn {
		background: var(--seval-brand-green);
		color: #111;
		position: relative;
	}
	.seval-filters-badge {
		position: absolute;
		top: -8px;
		right: -8px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border-radius: 999px;
		background: #f0603c;
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		box-shadow: 0 0 0 2px #fff;
	}

	/* Sticky "N Cars Found" button pinned to the bottom of the mobile
	   filter drawer; also closes the drawer back to the (now filtered) list. */
	.seval-sidebar-apply {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin: 20px -20px -24px;
		width: calc(100% + 40px);
		padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
		border: none;
		background: #f0603c;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		cursor: pointer;
	}

	.seval-mobile-sort-sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1002;
		background: #fff;
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
		padding: 6px 0 max(12px, env(safe-area-inset-bottom));
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}
	.seval-mobile-sort-sheet.is-open {
		display: block;
		transform: translateY(0);
	}
	.seval-mobile-sort-sheet ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.seval-mobile-sort-sheet li {
		padding: 14px 20px;
		font-size: 15px;
		border-bottom: 1px solid #f0f0f0;
		cursor: pointer;
	}
	.seval-mobile-sort-sheet li.is-active {
		font-weight: 700;
		color: var(--seval-brand-green);
	}

	body.seval-no-scroll {
		overflow: hidden;
	}
}

/* ---------- Responsive hardening (v1.2.4) ----------
   Root cause of the sideways overflow on phones: grid columns default to
   "minmax(auto, 1fr)", so one wide child (the scrolling tab row, a long
   pill) stretched the whole column past the screen. minmax(0, 1fr) +
   min-width: 0 lets every column shrink to the viewport. */
.seval-archive__main,
.seval-grid > *,
.seval-card,
.seval-card__specs,
.seval-card__head > * {
	min-width: 0;
}
.seval-card__title {
	overflow-wrap: anywhere;
}
.seval-pill {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Tablets: sidebar + two cards per row */
@media (min-width: 781px) and (max-width: 1024px) {
	.seval-archive {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 20px;
	}
	.seval-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.seval-card__stats span {
		font-size: 15px;
	}
	.seval-card__stats small {
		font-size: 12px;
	}
	.seval-card__price {
		font-size: 18px;
	}
}

/* Phones */
@media (max-width: 780px) {
	.seval-archive {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 16px 12px 88px;
		overflow-x: clip;
	}
	.seval-archive__header {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-bottom: 14px;
	}
	.seval-archive__titlebox {
		flex: 1 1 auto;
		width: 100%;
	}
	.seval-archive__heading {
		font-size: 26px;
	}
	.seval-tabs {
		margin-top: 12px;
		margin-right: -12px; /* lets the tab row scroll to the screen edge */
		padding-right: 12px;
	}
	.seval-tab {
		padding: 8px 16px;
		font-size: 13px;
	}

	.seval-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		min-height: 0;
	}
	.seval-card {
		padding: 10px;
		border-radius: 12px;
	}
	.seval-card__title {
		font-size: 18px;
	}
	.seval-card__rating {
		font-size: 13px;
		padding: 4px 8px;
	}
	.seval-card__image {
		padding: 8px 0 12px;
	}
	.seval-card__image img {
		height: 190px;
	}
	.seval-card__specs {
		padding: 10px 12px;
	}
	.seval-card__stats {
		gap: 6px;
	}
	.seval-card__stats span {
		font-size: 16px;
		gap: 3px;
	}
	.seval-card__stats .seval-stat-icon {
		width: 18px;
		height: 18px;
	}
	.seval-card__stats small {
		font-size: 12px;
	}
	.seval-pill {
		font-size: 13px;
		padding: 5px 10px;
	}
	.seval-card__price {
		font-size: 18px;
		padding: 8px 8px 8px 12px;
	}
	.seval-card__arrow {
		width: 46px;
		height: 34px;
	}

	.seval-active-filters {
		flex-wrap: wrap;
	}
	.seval-pagination {
		flex-wrap: wrap;
		justify-content: center;
		gap: 14px;
	}
}

/* Very small phones */
@media (max-width: 360px) {
	.seval-card__stats span {
		font-size: 15px;
	}
	.seval-card__stats small {
		font-size: 11px;
	}
}