/* ═══════════════════════════════════════════════════════════
   GOFLEET Listing – Neo-Broker Design
   Inspired by Mercedes Configurator / Fintech interfaces
   ═══════════════════════════════════════════════════════════ */

:root {
	/* ── GoFleet CI – Design Tokens ── */
	--gofleet-bg: #F5F7FA;                /* Ice Grey */
	--gofleet-card-bg: #ffffff;
	--gofleet-text: #0E2240;              /* Deep Navy Blue */
	--gofleet-text-muted: #6b7c93;
	--gofleet-text-light: #8898aa;
	--gofleet-accent: #0E2240;            /* Deep Navy Blue */
	--gofleet-accent-hover: #162D4A;
	--gofleet-primary: #1DB954;           /* Match Green */
	--gofleet-primary-bg: #e8f8ef;
	--gofleet-success: #1DB954;           /* Match Green (Success) */
	--gofleet-success-bg: #e8f8ef;
	--gofleet-signal: #FFCE00;            /* Signal Yellow */
	--gofleet-signal-bg: #fff8e0;
	--gofleet-gray-badge: #64748b;
	--gofleet-gray-badge-bg: #f1f5f9;
	--gofleet-border: #e5e7eb;
	--gofleet-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
	--gofleet-shadow-hover: 0 10px 25px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04);
	--gofleet-glow: 0 0 20px rgba(29, 185, 84, 0.15);  /* Neon-Green Glow */
	--gofleet-radius: 12px;
	--gofleet-radius-sm: 8px;
	--gofleet-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--gofleet-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	--gofleet-transition: 0.2s cubic-bezier(.4,0,.2,1);

	/* Legacy aliases (backward compat) */
	--gofleet-green: var(--gofleet-success);
	--gofleet-green-bg: var(--gofleet-success-bg);
	--gofleet-blue: var(--gofleet-primary);
	--gofleet-blue-bg: var(--gofleet-primary-bg);
	--gofleet-orange: var(--gofleet-signal);
	--gofleet-orange-bg: var(--gofleet-signal-bg);
}

/* ── Layout (Sidebar + Main) ── */

.gofleet-listing {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: var(--gofleet-font);
	color: var(--gofleet-text);
}

/* Searchbar-Fix: Header (64px) + Astra-Container-Offset ausgleichen */
body:not(.home) .gofleet-listing {
	padding-top: calc(var(--gofleet-header-h, 72px) + 24px);
}

.gofleet-listing__body {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px;
	align-items: start;
}

.gofleet-listing__main {
	min-width: 0;
}

.gofleet-listing__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
	transition: opacity 0.2s ease;
}

.gofleet-listing__grid--loading {
	opacity: 0.4;
	pointer-events: none;
}

.gofleet-listing[data-columns="2"] .gofleet-listing__grid {
	grid-template-columns: repeat(2, 1fr);
}

.gofleet-listing[data-columns="4"] .gofleet-listing__grid {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
	.gofleet-listing__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.gofleet-listing__body {
		grid-template-columns: 1fr;
	}
	.gofleet-listing__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.gofleet-listing__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ═══════════════════════════════════════════════════════════
   Smart Search Bar
   ═══════════════════════════════════════════════════════════ */

.gofleet-search {
	position: relative;
	margin-bottom: 28px;
}

.gofleet-search__inner {
	display: flex;
	align-items: center;
	background: var(--gofleet-card-bg);
	border: 2px solid var(--gofleet-border);
	border-radius: 16px;
	padding: 0 20px 0 32px;
	box-shadow: 0 2px 8px rgba(10, 37, 64, 0.04), 0 8px 32px rgba(10, 37, 64, 0.06);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Wrapper für Input + Typewriter-Overlay */
.gofleet-search__input-wrap {
	flex: 1;
	position: relative;
	min-width: 0;
}

.gofleet-search__inner:hover {
	border-color: rgba(10, 37, 64, 0.15);
	box-shadow: 0 4px 16px rgba(10, 37, 64, 0.06), 0 12px 40px rgba(10, 37, 64, 0.08);
}

.gofleet-search__inner:focus-within {
	border-color: var(--gofleet-accent);
	box-shadow: 0 0 0 4px rgba(10, 37, 64, 0.06), 0 12px 40px rgba(10, 37, 64, 0.1);
	transform: translateY(-1px);
}

.gofleet-search__icon {
	flex-shrink: 0;
	color: var(--gofleet-text-muted);
	display: flex;
	align-items: center;
	margin-right: 14px;
	opacity: 0.5;
	transition: opacity 0.3s ease, color 0.3s ease;
}

.gofleet-search__inner:focus-within .gofleet-search__icon {
	color: var(--gofleet-accent);
	opacity: 1;
}

.gofleet-search__input {
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-size: 17px;
	font-weight: 500;
	font-family: var(--gofleet-font);
	color: var(--gofleet-text);
	padding: 16px 0;
	min-width: 0;
	letter-spacing: -0.01em;
	position: relative;
	z-index: 1; /* unter dem Typewriter; JS blendet Typewriter aus sobald getippt wird */
}

.gofleet-search__input::placeholder {
	color: transparent; /* Hidden: typewriter overlay handles this */
}

/* Typewriter overlay – liegt ÜBER dem Input (z-index: 2), pointer-events: none lässt Klicks durch */
/* JS blendet dieses Element aus (display:none) sobald der User tippt */
.gofleet-search__typewriter {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	font-size: 17px;
	font-weight: 500;
	font-family: var(--gofleet-font);
	color: var(--gofleet-text-light);
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	letter-spacing: -0.01em;
}

.gofleet-search__typewriter-cursor {
	display: inline-block;
	width: 2px;
	height: 1.1em;
	background: var(--gofleet-accent);
	margin-left: 1px;
	vertical-align: text-bottom;
	animation: mmhBlink 0.8s step-end infinite;
	opacity: 0.7;
}

@keyframes mmhBlink {
	50% { opacity: 0; }
}

.gofleet-search__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--gofleet-bg);
	color: var(--gofleet-text-muted);
	cursor: pointer;
	flex-shrink: 0;
	margin-left: 10px;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.gofleet-search__clear:hover {
	background: var(--gofleet-border);
	color: var(--gofleet-text);
	transform: scale(1.1);
}

@media (max-width: 640px) {
	.gofleet-search__input {
		font-size: 15px;
		padding: 14px 0 14px 6px;
	}
	.gofleet-search__typewriter {
		font-size: 15px;
		left: 58px;
	}
}

/* ── Autocomplete Dropdown ── */

.gofleet-search__autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--gofleet-card-bg);
	border: 1px solid var(--gofleet-border);
	border-radius: 0 0 var(--gofleet-radius) var(--gofleet-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-height: 320px;
	overflow-y: auto;
}

.gofleet-search__suggestion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	cursor: pointer;
	transition: background var(--gofleet-transition);
}

.gofleet-search__suggestion:hover,
.gofleet-search__suggestion--active {
	background: var(--gofleet-bg);
}

.gofleet-search__suggestion-text {
	font-size: 14px;
	font-weight: 500;
	color: var(--gofleet-text);
}

.gofleet-search__suggestion-type {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gofleet-text-light);
	background: var(--gofleet-bg);
	padding: 2px 8px;
	border-radius: 100px;
}

/* ═══════════════════════════════════════════════════════════
   Sidebar Filters (Vertical)
   ═══════════════════════════════════════════════════════════ */

.gofleet-sidebar {
	position: sticky;
	top: 100px;
	background: var(--gofleet-card-bg);
	border-radius: var(--gofleet-radius);
	padding: 20px;
	box-shadow: var(--gofleet-shadow);
}

.gofleet-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gofleet-border);
}

.gofleet-sidebar__header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gofleet-sidebar__close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--gofleet-bg);
	color: var(--gofleet-text-muted);
	cursor: pointer;
	transition: background var(--gofleet-transition), color var(--gofleet-transition);
}

.gofleet-sidebar__close:hover {
	background: var(--gofleet-border);
	color: var(--gofleet-text);
}

@media (max-width: 768px) {
	.gofleet-sidebar__close {
		display: flex;
	}
}

.gofleet-sidebar__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--gofleet-text);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.gofleet-sidebar__reset {
	font-size: 12px;
	font-weight: 500;
	color: var(--gofleet-text-muted);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: color var(--gofleet-transition);
}

.gofleet-sidebar__reset:hover {
	color: var(--gofleet-accent);
}

.gofleet-sidebar__group {
	margin-bottom: 16px;
}

.gofleet-sidebar__group:last-of-type {
	margin-bottom: 0;
}

.gofleet-sidebar__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gofleet-text-muted);
	margin-bottom: 6px;
}

.gofleet-sidebar__select {
	width: 100%;
	padding: 8px 32px 8px 12px;
	font-size: 13px;
	font-family: var(--gofleet-font);
	border: 1px solid var(--gofleet-border);
	border-radius: var(--gofleet-radius-sm);
	background: var(--gofleet-bg);
	color: var(--gofleet-text);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b7c93' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
	transition: border-color var(--gofleet-transition), box-shadow var(--gofleet-transition);
}

.gofleet-sidebar__select:hover {
	border-color: var(--gofleet-text-muted);
}

.gofleet-sidebar__select:focus {
	outline: none;
	border-color: var(--gofleet-accent);
	box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1);
}

/* Flash when auto-synced from Smart Search */
.gofleet-sidebar__select--synced {
	border-color: var(--gofleet-blue);
	box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15);
}

/* Mobile sidebar toggle button */
.gofleet-sidebar__toggle {
	display: none;
}

@media (max-width: 768px) {
	.gofleet-sidebar {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		border-radius: 0;
		overflow-y: auto;
		padding-top: 60px;
	}

	.gofleet-sidebar--open {
		display: block;
	}

	.gofleet-sidebar__toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 8px 16px;
		font-size: 13px;
		font-weight: 600;
		font-family: var(--gofleet-font);
		color: var(--gofleet-text);
		background: var(--gofleet-card-bg);
		border: 1px solid var(--gofleet-border);
		border-radius: var(--gofleet-radius-sm);
		cursor: pointer;
		margin-bottom: 16px;
		transition: border-color var(--gofleet-transition);
	}

	.gofleet-sidebar__toggle:hover {
		border-color: var(--gofleet-text-muted);
	}
}

/* ═══════════════════════════════════════════════════════════
   Suchauftrag Micro-Conversion (Empty State)
   ═══════════════════════════════════════════════════════════ */

.gofleet-suchauftrag {
	max-width: 560px;
	margin: 24px auto 0;
	text-align: left;
}

.gofleet-suchauftrag__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.gofleet-suchauftrag__field {
	display: flex;
	flex-direction: column;
}

.gofleet-suchauftrag__field--small {
	max-width: 200px;
}

.gofleet-suchauftrag__row:first-child {
	grid-template-columns: 1fr 200px;
}

.gofleet-suchauftrag label {
	font-size: 12px;
	font-weight: 600;
	color: var(--gofleet-text-muted);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.gofleet-suchauftrag__optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.gofleet-suchauftrag__input,
.gofleet-suchauftrag__select {
	padding: 9px 12px;
	font-size: 14px;
	font-family: var(--gofleet-font);
	border: 1px solid var(--gofleet-border);
	border-radius: var(--gofleet-radius-sm);
	background: var(--gofleet-card-bg);
	color: var(--gofleet-text);
	transition: border-color var(--gofleet-transition);
}

.gofleet-suchauftrag__input:focus,
.gofleet-suchauftrag__select:focus {
	outline: none;
	border-color: var(--gofleet-accent);
	box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.08);
}

.gofleet-suchauftrag__select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b7c93' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 32px;
	cursor: pointer;
}

.gofleet-suchauftrag__checkboxes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

.gofleet-suchauftrag__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--gofleet-text-muted);
	cursor: pointer;
}

.gofleet-suchauftrag__check input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--gofleet-accent);
}

.gofleet-suchauftrag__check a {
	color: var(--gofleet-accent);
	text-decoration: underline;
}

.gofleet-suchauftrag__submit {
	display: block;
	width: 100%;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 700;
	font-family: var(--gofleet-font);
	color: #fff;
	background: var(--gofleet-accent);
	border: none;
	border-radius: var(--gofleet-radius-sm);
	cursor: pointer;
	transition: background var(--gofleet-transition);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.gofleet-suchauftrag__submit:hover {
	background: var(--gofleet-accent-hover);
}

.gofleet-suchauftrag__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.gofleet-suchauftrag__feedback {
	display: none;
	margin-top: 12px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--gofleet-radius-sm);
}

.gofleet-suchauftrag__feedback--success {
	background: var(--gofleet-green-bg);
	color: var(--gofleet-green);
}

.gofleet-suchauftrag__feedback--error {
	background: var(--gofleet-orange-bg);
	color: var(--gofleet-orange);
}

@media (max-width: 640px) {
	.gofleet-suchauftrag__row {
		grid-template-columns: 1fr;
	}
	.gofleet-suchauftrag__row:first-child {
		grid-template-columns: 1fr;
	}
	.gofleet-suchauftrag__field--small {
		max-width: none;
	}
}

/* ── Legacy Filter Bar (kept for [gofleet_listing_filter] shortcode backward compat) ── */

/* ── Card ── */

.gofleet-card {
	background: var(--gofleet-card-bg);
	border-radius: var(--gofleet-radius-lg, 16px);
	border: 1px solid transparent;
	box-shadow: var(--gofleet-shadow);
	overflow: hidden;
	transition:
		box-shadow var(--gofleet-transition, 0.2s ease),
		transform var(--gofleet-transition, 0.2s ease),
		border-color var(--gofleet-transition, 0.2s ease);
	display: flex;
	flex-direction: column;
}

.gofleet-card:hover {
	box-shadow: var(--gofleet-shadow-hover), var(--gofleet-glow, 0 0 20px rgba(29,185,84,.08));
	transform: translateY(-4px);
	border-color: rgba(29, 185, 84, 0.2);
}

.gofleet-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.gofleet-card__link:hover,
.gofleet-card__link:focus {
	text-decoration: none;
	color: inherit;
}

/* ── Card Header ── */

.gofleet-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20px 20px 12px;
	gap: 12px;
}

.gofleet-card__title-block {
	flex: 1;
	min-width: 0;
}

.gofleet-card__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 2px;
	color: var(--gofleet-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gofleet-card__subtitle {
	font-size: 13px;
	color: var(--gofleet-text-muted);
	margin: 0;
	line-height: 1.3;
}

.gofleet-card__price-block {
	text-align: right;
	flex-shrink: 0;
}

.gofleet-card__price {
	display: block;
	font-size: 18px;
	font-weight: 800;
	color: var(--gofleet-text);
	white-space: nowrap;
	line-height: 1.2;
	background: linear-gradient(transparent 60%, rgba(10, 37, 64, 0.08) 60%);
	padding: 0 4px;
}

.gofleet-card__price--request {
	font-size: 13px;
	font-weight: 600;
	background: none;
	color: var(--gofleet-text-muted);
}

.gofleet-card__price-sub {
	display: block;
	font-size: 11px;
	color: var(--gofleet-text-light);
	margin-top: 2px;
}

/* ── Card Image ── */

.gofleet-card__image {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 62.5%; /* 16:10 ratio */
	overflow: hidden;
	background: rgba(205, 222, 240, 0.9);
}

.gofleet-card__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	padding: 0;
	box-sizing: border-box;
	transition: transform 0.4s ease;
}

.gofleet-card:hover .gofleet-card__image img {
	transform: scale(1.06);
}

.gofleet-card__image-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--gofleet-text-light);
}

/* ── Badges ── */

.gofleet-card__badges {
	display: flex;
	gap: 6px;
	padding: 12px 20px 0;
	flex-wrap: wrap;
}

.gofleet-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	white-space: nowrap;
}

.gofleet-badge svg {
	flex-shrink: 0;
}

.gofleet-badge--electric {
	background: var(--gofleet-green-bg);
	color: var(--gofleet-green);
}

.gofleet-badge--phev {
	background: var(--gofleet-blue-bg);
	color: var(--gofleet-blue);
}

.gofleet-badge--hybrid {
	background: var(--gofleet-blue-bg);
	color: var(--gofleet-blue);
}

.gofleet-badge--diesel {
	background: var(--gofleet-gray-badge-bg);
	color: var(--gofleet-gray-badge);
}

.gofleet-badge--petrol {
	background: var(--gofleet-gray-badge-bg);
	color: var(--gofleet-gray-badge);
}

.gofleet-badge--body {
	background: var(--gofleet-gray-badge-bg);
	color: var(--gofleet-gray-badge);
}

.gofleet-badge--dual {
	background: rgba(29, 119, 201, 0.1);
	color: #1d77c9;
	font-size: 10px;
}

/* ── Specs ── */

.gofleet-card__specs {
	padding: 10px 20px 0;
}

.gofleet-card__specs-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--gofleet-text);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

.gofleet-sep {
	display: inline-block;
	margin: 0 6px;
	color: var(--gofleet-text-light);
	font-weight: 400;
}

/* ── Environment data ── */

.gofleet-card__env {
	padding: 8px 20px 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
}

.gofleet-card__env-line {
	display: block;
	font-size: 11.5px;
	color: var(--gofleet-text-muted);
	line-height: 1.5;
}

/* ── CTA Button ── */

.gofleet-card__cta {
	padding: 16px 20px 28px;
	margin-top: auto;
}

.gofleet-card__button {
	display: block;
	width: 100%;
	padding: 10px 16px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	background: var(--gofleet-accent);
	border-radius: var(--gofleet-radius, 12px);
	transition: background var(--gofleet-transition), transform 150ms ease, box-shadow 150ms ease;
}

.gofleet-card:hover .gofleet-card__button {
	background: var(--gofleet-accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(14, 34, 64, 0.25);
}

/* ── CTA Card (micro-conversion) ── */

.gofleet-card--cta {
	background: var(--gofleet-cta-color, var(--gofleet-accent));
	color: #fff;
}

.gofleet-card--cta:hover {
	transform: translateY(-2px);
}

.gofleet-card__link--cta {
	color: #fff;
	justify-content: center;
}

.gofleet-card__link--cta:hover,
.gofleet-card__link--cta:focus {
	color: #fff;
}

.gofleet-card__cta-content {
	padding: 40px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	min-height: 300px;
}

.gofleet-card__cta-title {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 8px;
	color: #fff;
}

.gofleet-card__cta-text {
	font-size: 14px;
	opacity: 0.85;
	margin: 0 0 24px;
	max-width: 280px;
	line-height: 1.5;
}

.gofleet-card__button--cta {
	display: inline-block;
	width: auto;
	padding: 10px 28px;
	background: rgba(255,255,255,.15);
	border: 2px solid rgba(255,255,255,.5);
	backdrop-filter: blur(4px);
	transition: background var(--gofleet-transition), border-color var(--gofleet-transition);
}

.gofleet-card--cta:hover .gofleet-card__button--cta {
	background: rgba(255,255,255,.25);
	border-color: rgba(255,255,255,.8);
}

/* ── Filter Bar ── */

.gofleet-filter {
	background: var(--gofleet-card-bg);
	border-radius: var(--gofleet-radius);
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: var(--gofleet-shadow);
}

.gofleet-filter__row {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	flex-wrap: wrap;
}

.gofleet-filter__group {
	flex: 1;
	min-width: 140px;
}

.gofleet-filter__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--gofleet-text-muted);
	margin-bottom: 4px;
}

.gofleet-filter__select {
	width: 100%;
	padding: 8px 32px 8px 12px;
	font-size: 13px;
	font-family: var(--gofleet-font);
	border: 1px solid var(--gofleet-border);
	border-radius: var(--gofleet-radius-sm);
	background: var(--gofleet-bg);
	color: var(--gofleet-text);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b7c93' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
	transition: border-color var(--gofleet-transition);
}

.gofleet-filter__select:hover {
	border-color: var(--gofleet-text-muted);
}

.gofleet-filter__select:focus {
	outline: none;
	border-color: var(--gofleet-accent);
	box-shadow: 0 0 0 3px rgba(10,37,64,.1);
}

.gofleet-filter__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}

.gofleet-filter__btn {
	padding: 8px 20px;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--gofleet-font);
	border-radius: var(--gofleet-radius-sm);
	cursor: pointer;
	transition: background var(--gofleet-transition);
	white-space: nowrap;
	text-decoration: none;
}

.gofleet-filter__btn--submit {
	background: var(--gofleet-accent);
	color: #fff;
	border: none;
}

.gofleet-filter__btn--submit:hover {
	background: var(--gofleet-accent-hover);
}

.gofleet-filter__btn--reset {
	background: transparent;
	color: var(--gofleet-text-muted);
	border: 1px solid var(--gofleet-border);
}

.gofleet-filter__btn--reset:hover {
	color: var(--gofleet-text);
	border-color: var(--gofleet-text-muted);
	text-decoration: none;
}

@media (max-width: 768px) {
	.gofleet-filter__row {
		flex-direction: column;
	}

	.gofleet-filter__group {
		min-width: 100%;
	}

	.gofleet-filter__actions {
		width: 100%;
		justify-content: stretch;
	}

	.gofleet-filter__btn {
		flex: 1;
		text-align: center;
	}
}

/* ── Sort Bar ── */

.gofleet-listing__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid var(--gofleet-border);
	margin-bottom: 16px;
}

.gofleet-listing__sort-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--gofleet-text-muted);
	margin-right: 4px;
}

.gofleet-listing__sort-btn {
	font-size: 12px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 100px;
	text-decoration: none;
	color: var(--gofleet-text);
	background: var(--gofleet-bg);
	border: 1px solid var(--gofleet-border);
	cursor: pointer;
	font-family: var(--gofleet-font);
	transition: all var(--gofleet-transition);
}

.gofleet-listing__sort-btn:hover {
	color: var(--gofleet-text);
	background: var(--gofleet-border);
	border-color: var(--gofleet-text-muted);
	text-decoration: none;
}

.gofleet-listing__sort-btn--active {
	color: #fff;
	background: var(--gofleet-accent);
	border-color: var(--gofleet-accent);
	font-weight: 700;
}

.gofleet-listing__sort-btn--active:hover {
	background: var(--gofleet-accent-hover);
	border-color: var(--gofleet-accent-hover);
	color: #fff;
}

/* ── Pagination ── */

.gofleet-listing__pagination {
	padding: 32px 0 16px;
	display: flex;
	justify-content: center;
}

.gofleet-listing__pagination ul {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gofleet-listing__pagination li {
	margin: 0;
}

.gofleet-listing__pagination a,
.gofleet-listing__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--gofleet-radius-sm);
	text-decoration: none;
	color: var(--gofleet-text-muted);
	transition: all var(--gofleet-transition);
}

.gofleet-listing__pagination a:hover {
	background: var(--gofleet-bg);
	color: var(--gofleet-text);
	text-decoration: none;
}

.gofleet-listing__pagination .current {
	background: var(--gofleet-accent);
	color: #fff;
	font-weight: 700;
}

/* ── Empty state ── */

.gofleet-listing__empty {
	grid-column: 1 / -1;
	text-align: center;
	width: min(100%, 720px);
	margin: 24px auto 8px;
	padding: clamp(34px, 6vw, 56px) clamp(22px, 5vw, 44px);
	border: 1px solid rgba(120, 218, 255, 0.22);
	border-radius: 20px;
	background:
		radial-gradient(circle at 50% 0%, rgba(72, 163, 255, 0.14), transparent 38%),
		linear-gradient(145deg, rgba(12, 25, 46, 0.98), rgba(7, 15, 30, 0.98));
	color: var(--gofleet-text-muted);
	box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24);
}

.gofleet-listing__empty svg {
	margin-bottom: 16px;
	opacity: 0.65;
	color: #78daff;
}

.gofleet-listing__empty h3 {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	color: var(--gofleet-text);
	margin: 0 0 10px;
}

.gofleet-listing__empty p {
	max-width: 48ch;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.65;
}

/* ── Disclaimer ── */

.gofleet-listing__disclaimer {
	padding: 24px 0 8px;
	border-top: 1px solid var(--gofleet-border);
	margin-top: 32px;
}

.gofleet-listing__disclaimer p {
	font-size: 10.5px;
	color: var(--gofleet-text-light);
	line-height: 1.6;
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   Toolbar (Sort + Count + Layout Toggle)
   ═══════════════════════════════════════════════════════════ */

.gofleet-listing__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--gofleet-border);
	margin-bottom: 20px;
	gap: 12px;
	flex-wrap: wrap;
}

.gofleet-listing__toolbar-left {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.gofleet-listing__count-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--gofleet-text);
}

.gofleet-listing__sort-sep {
	color: var(--gofleet-text-light);
	font-size: 14px;
}

.gofleet-listing__toolbar-right {
	display: flex;
	gap: 4px;
}

.gofleet-layout-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--gofleet-border);
	border-radius: var(--gofleet-radius-sm);
	background: transparent;
	color: var(--gofleet-text-light);
	cursor: pointer;
	transition: all var(--gofleet-transition);
}

.gofleet-layout-toggle:hover {
	color: var(--gofleet-text);
	border-color: var(--gofleet-text-muted);
}

.gofleet-layout-toggle--active {
	background: var(--gofleet-accent);
	color: #fff;
	border-color: var(--gofleet-accent);
}

.gofleet-layout-toggle--active:hover {
	color: #fff;
	background: var(--gofleet-accent-hover);
}

/* Hide toggle on mobile (always grid) */
@media (max-width: 768px) {
	.gofleet-listing__toolbar-right {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════
   List Layout (Horizontal Cards)
   ═══════════════════════════════════════════════════════════ */

.gofleet-listing[data-layout="list"] .gofleet-listing__grid {
	grid-template-columns: 1fr;
	gap: 16px;
}

.gofleet-listing[data-layout="list"] .gofleet-card {
	flex-direction: row;
	height: 240px;
	min-height: 240px;
}

.gofleet-listing[data-layout="list"] .gofleet-card__link {
	flex-direction: row;
	height: 100%;
	width: 100%;
	min-width: 0;
}

.gofleet-listing[data-layout="list"] .gofleet-card__image {
	aspect-ratio: auto;
	border-radius: var(--gofleet-radius) 0 0 var(--gofleet-radius);
}

.gofleet-listing[data-layout="list"] .gofleet-card__image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.gofleet-listing[data-layout="list"] .gofleet-card__header {
	order: -1;
	padding: 16px 20px 8px;
}

.gofleet-listing[data-layout="list"] .gofleet-card__link {
	flex-wrap: wrap;
}

/* Restructure: image left, content right */
.gofleet-listing[data-layout="list"] .gofleet-card__link {
	display: grid;
	grid-template-columns: 280px 1fr;
	grid-template-rows: auto auto auto auto 1fr;
	height: 100%;
	align-items: start;
}

.gofleet-listing[data-layout="list"] .gofleet-card__image {
	grid-row: 1 / -1;
	grid-column: 1;
	/* Override the height:0 + padding-bottom aspect-ratio trick */
	height: 240px;
	min-height: 240px;
	padding-bottom: 0 !important;
	position: relative;
	width: 100%;
	min-width: unset;
	overflow: hidden;
}

/* Right content column: wrap all column-2 items in flex via the link's sub-structure */
.gofleet-listing[data-layout="list"] .gofleet-card__header {
	grid-column: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	column-gap: 20px;
	width: 100%;
	box-sizing: border-box;
	order: unset;
	align-self: start;
}

.gofleet-listing[data-layout="list"] .gofleet-card__price-block {
	justify-self: end;
	min-width: 142px;
}

.gofleet-listing[data-layout="list"] .gofleet-card__badges {
	grid-column: 2;
	padding: 0 20px;
	align-self: start;
}

.gofleet-listing[data-layout="list"] .gofleet-card__specs {
	grid-column: 2;
	padding: 6px 20px 0;
	align-self: start;
}

.gofleet-listing[data-layout="list"] .gofleet-card__env {
	grid-column: 2;
	padding: 4px 20px 0;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 16px;
	align-self: start;
}

.gofleet-listing[data-layout="list"] .gofleet-card__env-line {
	font-size: 11px;
}

.gofleet-listing[data-layout="list"] .gofleet-card__cta {
	grid-column: 2;
	padding: 12px 20px 24px;
	align-self: end;
}

.gofleet-listing[data-layout="list"] .gofleet-card__button {
	width: auto;
	display: inline-block;
}

/* Price styling in list mode: more prominent */
.gofleet-listing[data-layout="list"] .gofleet-card__price {
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* CTA cards in list mode */
.gofleet-listing[data-layout="list"] .gofleet-card--cta {
	max-height: none;
}

.gofleet-listing[data-layout="list"] .gofleet-card--cta .gofleet-card__link--cta {
	display: flex;
	grid-template-columns: unset;
}

.gofleet-listing[data-layout="list"] .gofleet-card__cta-content {
	flex-direction: row;
	padding: 24px 32px;
	gap: 24px;
	min-height: auto;
	text-align: left;
}

.gofleet-listing[data-layout="list"] .gofleet-card__cta-text {
	margin: 0;
}

/* Responsive: below 1024px list image shrinks */
@media (max-width: 1024px) {
	.gofleet-listing[data-layout="list"] .gofleet-card__link {
		grid-template-columns: 220px 1fr;
	}
}

/* Mobile: force back to grid layout */
@media (max-width: 768px) {
	.gofleet-listing[data-layout="list"] .gofleet-listing__grid {
		grid-template-columns: 1fr;
	}

	.gofleet-listing[data-layout="list"] .gofleet-card {
		flex-direction: column;
		max-height: none;
	}

	.gofleet-listing[data-layout="list"] .gofleet-card__link {
		display: flex;
		flex-direction: column;
		grid-template-columns: unset;
	}

	.gofleet-listing[data-layout="list"] .gofleet-card__image {
		width: 100%;
		height: 0;
		padding-bottom: 62.5%;
		border-radius: var(--gofleet-radius) var(--gofleet-radius) 0 0;
	}
}

/* ════════════════════════════════════════════════════════════
   Micro-Conversion CTA Cards (inline_form, social_proof, beratung)
   ════════════════════════════════════════════════════════════ */

.gofleet-card--cta-form {
    border: 2px dashed rgba(29, 185, 84, 0.25);
    background: linear-gradient(135deg, rgba(14, 34, 64, 0.03) 0%, rgba(29, 185, 84, 0.04) 100%);
}

[data-theme="dark"] .gofleet-card--cta-form {
    background: linear-gradient(135deg, rgba(14, 34, 64, 0.4) 0%, rgba(29, 185, 84, 0.08) 100%);
    border-color: rgba(29, 185, 84, 0.2);
}

/* ── Social Proof CTA – Cinematic Photo Background ── */

/**
 * Card: photo background via CSS variable, dark fallback colour.
 * min-height ensures all content (pill + title + text + button + padding)
 * fits without being clipped by overflow:hidden from the base .gofleet-card rule.
 */
.gofleet-card--cta-social {
    position: relative;
    overflow: hidden;
    border: none !important;
    background: #080f1e var(--gofleet-social-bg) center / cover no-repeat;
    min-height: 340px;
}

/**
 * Left-to-right gradient overlay.
 * Left ~60% is kept very dark (text readable), right side opens for the photo.
 */
.gofleet-card--cta-social::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(6, 12, 30, 0.96) 0%,
        rgba(6, 12, 30, 0.82) 38%,
        rgba(6, 12, 30, 0.30) 65%,
        rgba(6, 12, 30, 0.00) 100%
    );
    z-index: 1;
}

[data-theme="dark"] .gofleet-card--cta-social {
    background-color: #040810;
    border: none !important;
}

[data-theme="dark"] .gofleet-card--cta-social::before {
    background: linear-gradient(
        to right,
        rgba(3, 7, 18, 0.98) 0%,
        rgba(3, 7, 18, 0.88) 38%,
        rgba(3, 7, 18, 0.38) 65%,
        rgba(3, 7, 18, 0.00) 100%
    );
}

/**
 * Link wrapper: override the base height:100% which creates a circular dependency
 * (card min-height → link 100% of card → content clips at card height).
 * With height:auto the link grows with its content; the content's own min-height
 * then drives the card height instead of the other way around.
 */
.gofleet-card--cta-social .gofleet-card__link--cta {
    position: relative;
    z-index: 2;
    display: flex;
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
}

.gofleet-card--cta-social .gofleet-card__link--cta,
.gofleet-card--cta-social .gofleet-card__link--cta * {
    text-decoration: none !important;
}

/**
 * Content block: column layout, left-aligned, max 52% wide.
 * min-height: 320px guarantees the card is always tall enough for all elements
 * (pill + title + text + button + padding ≈ 300px).
 * Hard overrides cancel the list-view rule that forces flex-direction: row.
 */
.gofleet-card__cta-content--social {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 32px 36px !important;
    max-width: 52%;
    min-height: 320px !important;
    gap: 0;
}

/**
 * List-view banner: [Text-Block (title+text stacked)] → grows → [Button right].
 * Pill is hidden to keep the row clean.
 */
.gofleet-listing[data-layout="list"] .gofleet-card--cta-social .gofleet-card__cta-content--social {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 40px !important;
    max-width: 100% !important;
    min-height: 110px !important;
    padding: 24px 40px !important;
}

/* Pill hidden in banner row */
.gofleet-listing[data-layout="list"] .gofleet-card--cta-social .gofleet-card__cta-social-tag {
    display: none !important;
}

/* Text-block: grows to fill available space; keeps title+text stacked */
.gofleet-card__cta-text-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gofleet-listing[data-layout="list"] .gofleet-card--cta-social .gofleet-card__cta-text-block {
    flex: 1 1 auto;
}

/* Title in list-view: slightly larger, no bottom margin (gap handles spacing) */
.gofleet-listing[data-layout="list"] .gofleet-card--cta-social .gofleet-card__cta-title {
    font-size: 22px !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Text in list-view: single line if possible, no bottom margin */
.gofleet-listing[data-layout="list"] .gofleet-card--cta-social .gofleet-card__cta-text {
    margin: 0 !important;
    max-width: none !important;
    font-size: 14px;
    opacity: 0.78;
}

/* Button: pinned to the right, no-shrink */
.gofleet-listing[data-layout="list"] .gofleet-card--cta-social .gofleet-card__button--green {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    white-space: nowrap;
}

/**
 * Pill tag: frost-white so it complements the warm amber photo palette.
 * Replaced the harsh green that clashed with the golden/orange tones.
 */
.gofleet-card__cta-social-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    margin-bottom: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    flex-shrink: 0;
}

.gofleet-card--cta-social .gofleet-card__cta-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.gofleet-card--cta-social .gofleet-card__cta-text {
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.85;
    margin: 0 0 22px;
    max-width: 240px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/**
 * Button: Signal Yellow (--gofleet-yellow #FFCE00) instead of brand green.
 * Yellow harmonises with the warm amber photo palette.
 * Dark navy text (#0a2540) required – yellow has poor contrast with white.
 * More specific selector overrides the .gofleet-card__button--green !important rules.
 */
.gofleet-card--cta-social .gofleet-card__button--green {
    display: inline-block !important;
    width: auto !important;
    flex-shrink: 0;
    padding: 11px 24px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #FFCE00, #E6B900) !important;
    color: #0a2540 !important;
    box-shadow: 0 4px 18px rgba(255, 206, 0, 0.40);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gofleet-card--cta-social:hover .gofleet-card__button--green {
    box-shadow: 0 6px 24px rgba(255, 206, 0, 0.65);
    transform: translateY(-1px);
}

/* Mobile: full-width content block, stronger overlay, tighter padding */
@media (max-width: 600px) {
    .gofleet-card--cta-social {
        min-height: 380px;
    }

    .gofleet-card__cta-content--social {
        max-width: 100% !important;
        padding: 24px 22px !important;
    }

    .gofleet-card--cta-social::before {
        background: linear-gradient(
            to right,
            rgba(6, 12, 30, 0.90) 0%,
            rgba(6, 12, 30, 0.70) 60%,
            rgba(6, 12, 30, 0.20) 100%
        ) !important;
    }
}

/* Badge */
.gofleet-card__cta-badge {
    display: inline-block;
    background: linear-gradient(135deg, #1DB954, #17a04a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Inline Form */
.gofleet-card__cta-form {
    display: flex;
    gap: 0;
    margin-top: 16px;
}

.gofleet-card__cta-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-right: none;
    border-radius: 10px 0 0 10px;
    font-size: 14px;
    background: var(--gofleet-card-bg, #fff);
    color: var(--gofleet-text, #334155);
    outline: none;
    transition: border-color 0.15s;
}

.gofleet-card__cta-input:focus {
    border-color: #1DB954;
}

[data-theme="dark"] .gofleet-card__cta-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.gofleet-card__cta-submit {
    padding: 10px 16px;
    background: linear-gradient(135deg, #1DB954, #17a04a);
    color: #fff;
    border: none;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
}

.gofleet-card__cta-submit:hover {
    background: linear-gradient(135deg, #17a04a, #128a3d);
}

.gofleet-card__cta-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--gofleet-text-muted, #94a3b8);
}

.gofleet-card__cta-feedback {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    min-height: 20px;
}

.gofleet-card__cta-feedback--success { color: #1DB954; }
.gofleet-card__cta-feedback--error { color: #ef4444; }

/* Social Proof Icon */
.gofleet-card__cta-proof-icon {
    color: #1DB954;
    margin-bottom: 8px;
}

/* Green Button */
.gofleet-card__button--green {
    background: linear-gradient(135deg, #1DB954, #17a04a) !important;
    color: #fff !important;
}

/* Beratung Avatar */
.gofleet-card__cta-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1DB954, #17a04a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(29, 185, 84, 0.3);
}

.gofleet-card__cta-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR – Accordion + Checkbox Filter (Redesign)
   ════════════════════════════════════════════════════════════ */

/* Versteckte Select-Elemente (JS-Datenquelle, visuell unsichtbar) */
.gofleet-f--hidden {
    display: none !important;
}

/* ── Accordion-Sektion ── */
.gofleet-sidebar__section {
    border-top: 1px solid var(--gofleet-border);
    padding: 0;
}

.gofleet-sidebar__section:first-of-type {
    border-top: none;
}

.gofleet-sidebar__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--gofleet-text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 8px;
    font-family: var(--gofleet-font);
}

.gofleet-sidebar__section-head:hover {
    color: var(--gofleet-accent);
}

/* Chevron dreht sich beim Öffnen */
.gofleet-sidebar__chevron {
    flex-shrink: 0;
    transition: transform 0.22s ease;
    color: var(--gofleet-text-muted);
}

.gofleet-sidebar__section--open .gofleet-sidebar__chevron {
    transform: rotate(180deg);
}

/* Body: beim Schließen ausgeblendet */
.gofleet-sidebar__section-body {
    display: none;
    padding-bottom: 12px;
}

.gofleet-sidebar__section--open .gofleet-sidebar__section-body {
    display: block;
}

/* Padded variant (für Select-Elemente inside accordion) */
.gofleet-sidebar__section-body--padded {
    padding-left: 0;
    padding-right: 0;
}

/* ── Checkbox-Reihe ── */
.gofleet-sidebar__check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
    outline: none;
}

.gofleet-sidebar__check-row:hover {
    background: var(--gofleet-bg, #f5f7fa);
}

.gofleet-sidebar__check-row:focus-visible {
    box-shadow: 0 0 0 2px var(--gofleet-accent);
}

/* Checkmark-Box */
.gofleet-sidebar__check-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--gofleet-border);
    border-radius: 5px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.gofleet-sidebar__check-icon {
    display: none;
    color: #fff;
    pointer-events: none;
}

/* Aktiver Zustand */
.gofleet-sidebar__check-row.is-active .gofleet-sidebar__check-box {
    background: var(--gofleet-accent, #0a2540);
    border-color: var(--gofleet-accent, #0a2540);
}

.gofleet-sidebar__check-row.is-active .gofleet-sidebar__check-icon {
    display: block;
}

/* Label-Text */
.gofleet-sidebar__check-label {
    flex: 1;
    font-size: 13px;
    color: var(--gofleet-text);
    line-height: 1.3;
}

.gofleet-sidebar__check-row.is-active .gofleet-sidebar__check-label {
    font-weight: 600;
}

/* ── Brand-Logo Thumbnail (rechts in der Reihe) ── */
.gofleet-sidebar__brand-thumb {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f2f5;
    overflow: hidden;
    padding: 4px;
}

.gofleet-sidebar__brand-thumb svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Versteckte Reihen (erst nach "Alle anzeigen") ── */
.gofleet-sidebar__check-row--hidden {
    display: none;
}

/* ── "Alle anzeigen" Button ── */
.gofleet-sidebar__show-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gofleet-accent, #0a2540);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: var(--gofleet-font);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gofleet-sidebar__show-more:hover {
    color: var(--gofleet-accent-hover);
}

/* ── Select innerhalb Accordion (Max. Rate) ── */
.gofleet-sidebar__section-body--padded .gofleet-sidebar__select {
    width: 100%;
    margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════
   Privatkunde / Geschäftskunde Toggle
   ═══════════════════════════════════════════════════════════ */

.gofleet-customer-toggle {
    display: inline-flex;
    align-items: stretch;
    background: var(--gofleet-card-bg, #fff);
    border: 2px solid var(--gofleet-border, rgba(10, 37, 64, 0.12));
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(10, 37, 64, 0.06);
}

.gofleet-customer-toggle__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--gofleet-text-muted, #6b7891);
    font-family: var(--gofleet-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.gofleet-customer-toggle__icon {
    display: block;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    stroke: currentColor;
}

.gofleet-customer-toggle__label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.gofleet-customer-toggle__btn--active .gofleet-customer-toggle__icon {
    opacity: 1;
}

.gofleet-customer-toggle__btn:hover:not(.gofleet-customer-toggle__btn--active) {
    background: rgba(10, 37, 64, 0.05);
    color: var(--gofleet-text, #0a2540);
}

.gofleet-customer-toggle__btn--active {
    background: var(--gofleet-accent, #0a2540);
    color: #fff;
    box-shadow: 0 2px 8px rgba(10, 37, 64, 0.2);
}

.gofleet-customer-toggle__sub {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.75;
    letter-spacing: 0;
}

.gofleet-customer-toggle__btn--active .gofleet-customer-toggle__sub {
    opacity: 0.85;
}

@media (max-width: 640px) {
    .gofleet-customer-toggle {
        width: 100%;
        display: flex;
    }

    .gofleet-customer-toggle__btn {
        flex: 1;
        padding: 10px 12px;
    }
}


/* ════════════════════════════════════════════════════════════
   Suchauftrag Modal
   ════════════════════════════════════════════════════════════ */

/**
 * Full-screen backdrop + centred card.
 * [hidden] attribute controls visibility; JS toggles it.
 */
.gofleet-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.gofleet-modal[hidden] {
    display: none;
}

.gofleet-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 16, 36, 0.72);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.gofleet-modal__card {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(8, 16, 36, 0.30);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 36px 40px 32px;
}

[data-theme="dark"] .gofleet-modal__card {
    background: #112133;
    color: #e2e8f0;
}

/* Close button – !important overrides theme's global "button { padding: 15px 30px }" */
.gofleet-modal__close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: #e2e8f0 !important;
    color: #334155 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    line-height: 1;
    font-size: 0;
}

.gofleet-modal__close:hover {
    background: #cbd5e1;
    color: #0a2540;
}

[data-theme="dark"] .gofleet-modal__close {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
}

[data-theme="dark"] .gofleet-modal__close:hover {
    background: rgba(255, 255, 255, 0.20);
}

/* Header */
.gofleet-modal__header {
    margin-bottom: 28px;
}

.gofleet-modal__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 206, 0, 0.15), rgba(255, 206, 0, 0.25));
    color: #c49b00;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.gofleet-modal__title {
    font-size: 22px;
    font-weight: 800;
    color: #0a2540;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

[data-theme="dark"] .gofleet-modal__title {
    color: #f1f5f9;
}

.gofleet-modal__subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

[data-theme="dark"] .gofleet-modal__subtitle {
    color: #94a3b8;
}

/* Form layout */
.gofleet-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gofleet-modal__row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gofleet-modal__row--two {
    flex-direction: row;
    gap: 14px;
}

.gofleet-modal__row--two .gofleet-modal__field {
    flex: 1;
}

.gofleet-modal__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gofleet-modal__field label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

[data-theme="dark"] .gofleet-modal__field label {
    color: #cbd5e1;
}

.gofleet-modal__field label span {
    color: #e11d48;
}

.gofleet-modal__field input,
.gofleet-modal__field select {
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #0a2540;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.gofleet-modal__field input:focus,
.gofleet-modal__field select:focus {
    border-color: #FFCE00;
    box-shadow: 0 0 0 3px rgba(255, 206, 0, 0.18);
    background: #fff;
}

[data-theme="dark"] .gofleet-modal__field input,
[data-theme="dark"] .gofleet-modal__field select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

/* Consent */
.gofleet-modal__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.gofleet-modal__consent input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #FFCE00;
}

.gofleet-modal__consent a {
    color: #0a2540;
    text-decoration: underline;
}

[data-theme="dark"] .gofleet-modal__consent a {
    color: #93c5fd;
}

/* Feedback */
.gofleet-modal__feedback {
    font-size: 13px;
    font-weight: 600;
    min-height: 0;
}

.gofleet-modal__feedback--error  { color: #ef4444; }
.gofleet-modal__feedback--success { color: #1DB954; }

.gofleet-modal__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 0;
}

.gofleet-modal__success p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0a2540;
}

.gofleet-modal__success-sub {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #64748b !important;
}

[data-theme="dark"] .gofleet-modal__success p { color: #f1f5f9; }

/* Submit button – Signal Yellow */
.gofleet-modal__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 28px;
    background: linear-gradient(135deg, #FFCE00, #E6B900);
    color: #0a2540;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(255, 206, 0, 0.35);
    width: 100%;
    margin-top: 4px;
}

.gofleet-modal__submit:hover {
    box-shadow: 0 6px 22px rgba(255, 206, 0, 0.55);
    transform: translateY(-1px);
}

.gofleet-modal__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Trust line below submit button */
.gofleet-modal__trust {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin: 4px 0 0;
}

/* Mobile: full-width card, tighter padding */
@media (max-width: 560px) {
    .gofleet-modal__card {
        padding: 28px 22px 24px;
        border-radius: 16px;
    }

    .gofleet-modal__row--two {
        flex-direction: column;
    }
}

.gofleet-listing__empty-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 18px;
	padding: 11px 20px;
	border: 1px solid rgba(120, 218, 255, 0.34);
	border-radius: 999px;
	background: linear-gradient(135deg, #075bdc, #00a8ff);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 12px 34px rgba(0, 132, 255, 0.22);
}

.gofleet-listing__empty-reset:hover,
.gofleet-listing__empty-reset:focus-visible {
	background: linear-gradient(135deg, #086eff, #00c7ff);
	box-shadow: 0 16px 42px rgba(0, 161, 255, 0.28);
	outline: none;
}

/* GoFleet list cards: integrate vehicle imagery with the dark card surface. */
body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card {
	height: 226px;
	min-height: 226px;
}

body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__link {
	grid-template-columns: minmax(212px, 252px) minmax(0, 1fr);
	align-items: stretch;
}

body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__image {
	height: calc(100% - 28px);
	min-height: 0;
	width: auto;
	margin: 14px 0 14px 14px;
	padding: 0 !important;
	border-radius: 10px;
	background:
		radial-gradient(circle at 50% 45%, rgba(74, 163, 255, 0.18), transparent 48%),
		linear-gradient(145deg, rgba(9, 23, 43, 0.98), rgba(5, 13, 27, 0.98)) !important;
	border: 1px solid rgba(116, 183, 255, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__image img {
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0 !important;
	object-fit: cover;
	object-position: center;
	filter: saturate(1.05) contrast(1.04) brightness(1.04);
	mix-blend-mode: normal;
}

body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card:hover .gofleet-card__image img {
	transform: scale(1.035);
}

@media (max-width: 1024px) {
	body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__link {
		grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card {
		height: auto;
		min-height: 0;
	}
	body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__image {
		width: calc(100% - 28px);
		height: 0;
		margin: 14px;
		padding-bottom: 62.5% !important;
	}
	body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__image img {
		inset: 0;
	}
}


/* GoFleet listing legal note: keep mandatory copy visually secondary. */
body.gofleet-site .gofleet-listing .gofleet-listing__disclaimer {
    padding: 18px 0 4px;
    margin-top: 28px;
}

body.gofleet-site .gofleet-listing .gofleet-listing__disclaimer p {
    max-width: 720px;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: rgba(138, 153, 182, 0.82);
}

@media (max-width: 640px) {
    body.gofleet-site .gofleet-listing .gofleet-listing__disclaimer p {
        font-size: 11.5px !important;
    }
}

/* GoFleet list cards: align primary CTA with the price column. */
body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__cta {
    justify-self: end;
    text-align: right;
}

body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__button {
    min-width: 176px;
}

@media (max-width: 768px) {
    body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__cta {
        justify-self: stretch;
        text-align: left;
    }

    body.gofleet-site .gofleet-listing[data-layout="list"] .gofleet-card__button {
        width: 100%;
        min-width: 0;
    }
}

/* GoFleet real vehicle photos: fill grid-card image stages without inner letterboxing. */
body.gofleet-site .gofleet-listing[data-layout="grid"] .gofleet-card__image,
body.gofleet-site .gofleet-listing:not([data-layout="list"]) .gofleet-card__image {
	background: #071120 !important;
	aspect-ratio: 16 / 10 !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}

body.gofleet-site .gofleet-listing[data-layout="grid"] .gofleet-card__image img,
body.gofleet-site .gofleet-listing:not([data-layout="list"]) .gofleet-card__image img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	padding: 0 !important;
	object-fit: cover !important;
	object-position: center center !important;
}