/* Selector de vehículo — medidas del XD (barra del Home). */
.ct-vs {
	--ct-vs-btn: #1C2329;
	--ct-vs-accent: #00FF95;
	--ct-vs-field: rgba(255, 255, 255, .056);
	--ct-vs-key: rgba(255, 255, 255, .148);
	position: relative;
	font-family: Poppins, sans-serif;
	color: #fff;
}
.ct-vs__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}
.ct-vs__make, .ct-vs__pick, .ct-vs__quick { position: relative; }

.ct-vs .ct-vs__btn,
.ct-vs .ct-vs__btn:hover,
.ct-vs .ct-vs__btn:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	margin: 0;
	border: 0;
	border-radius: 10px;
	background: var(--ct-vs-btn);
	color: #fff;
	font: 500 16px/1 Poppins, sans-serif;
	cursor: pointer;
	transition: box-shadow .2s, background .2s;
}
.ct-vs .ct-vs__btn:hover, .ct-vs .ct-vs__btn:focus-visible { box-shadow: inset 0 0 0 1px var(--ct-vs-accent); outline: none; }
.ct-vs svg { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* Make */
.ct-vs .ct-vs__select {
	width: 187px;
	padding: 0 44px 0 24px;
	appearance: none;
	-webkit-appearance: none;
	text-align: left;
}
.ct-vs__select option { background: var(--ct-vs-btn); color: #fff; }
.ct-vs__make > svg {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 20px;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Botón "Select your vehicle" */
.ct-vs .ct-vs__toggle { width: 225px; padding: 0 16px; }
.ct-vs__toggle-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-vs__toggle svg { width: 14px; }

/* Panel en cascada */
.ct-vs__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 30;
	display: grid;
	gap: 12px;
	width: 320px;
	padding: 20px;
	border-radius: 10px;
	background: var(--ct-vs-btn);
	box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}
.ct-vs__panel[hidden] { display: none; }
.ct-vs__panel.is-up, .ct-vs__results.is-up { top: auto; bottom: calc(100% + 10px); }
.ct-vs__panel label { display: grid; gap: 6px; margin: 0; font: 500 13px/1 Poppins, sans-serif; color: #A3A3A3; }
.ct-vs .ct-vs__panel select {
	height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 7px;
	background: var(--ct-vs-field);
	color: #fff;
	font: 500 15px/1 Poppins, sans-serif;
}
.ct-vs__panel select:disabled { opacity: .45; }
.ct-vs__panel select option { background: var(--ct-vs-btn); }
.ct-vs .ct-vs__find,
.ct-vs .ct-vs__find:hover {
	height: 44px;
	margin-top: 4px;
	border: 0;
	border-radius: 12px;
	background: var(--ct-vs-accent);
	color: #272E36;
	font: 600 16px/1 Poppins, sans-serif;
	cursor: pointer;
}
.ct-vs__find:disabled { opacity: .4; cursor: not-allowed; }

/* Búsqueda rápida */
.ct-vs .ct-vs__input[type="search"] {
	width: 453px;
	height: 48px;
	padding: 0 56px 0 39px;
	border: 0;
	border-radius: 7px;
	background: var(--ct-vs-field);
	color: #fff;
	font: 500 var(--ct-fs-input-lg, 20px)/1 Poppins, sans-serif;
	box-shadow: none;
}
.ct-vs__input::placeholder { color: #fff; opacity: 1; }
.ct-vs__input:focus { outline: 1px solid var(--ct-vs-accent); background: rgba(255, 255, 255, .09); }
.ct-vs__input::-webkit-search-cancel-button { display: none; }
.ct-vs__key {
	position: absolute;
	top: 10px;
	right: 9px;
	width: 31px;
	height: 29px;
	border-radius: 7px;
	background: var(--ct-vs-key);
	color: #ddd;
	font: 500 14px/29px Poppins, sans-serif;
	text-align: center;
	pointer-events: none;
}
.ct-vs__results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 360px;
	margin: 0;
	padding: 6px;
	overflow: auto;
	list-style: none;
	border-radius: 10px;
	background: var(--ct-vs-btn);
	box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
}
.ct-vs__results li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 7px; cursor: pointer; }
.ct-vs__results li strong { font-weight: 500; font-size: 15px; }
.ct-vs__results li span { font-size: 13px; color: #A3A3A3; }
.ct-vs__results li[aria-selected="true"], .ct-vs__results li:hover { background: rgba(255, 255, 255, .07); }
.ct-vs__results .ct-vs__empty { color: #A3A3A3; cursor: default; font-size: 14px; }

/* Buscar */
.ct-vs .ct-vs__submit,
.ct-vs .ct-vs__submit:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 11px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: 500 var(--ct-fs-input-lg, 20px)/1 Poppins, sans-serif;
	cursor: pointer;
}
.ct-vs__submit svg { width: 14px; }
.ct-vs .ct-vs__submit:hover { background: none; color: var(--ct-vs-accent); }

.ct-vs.is-loading { opacity: .6; pointer-events: none; }

@media (max-width: 1100px) {
	.ct-vs .ct-vs__input[type="search"] { width: 340px; font-size: 17px; }
}
@media (max-width: 900px) {
	.ct-vs__bar { flex-wrap: wrap; justify-content: center; }
	.ct-vs__make, .ct-vs__pick { flex: 1 1 calc(50% - 8px); }
	.ct-vs .ct-vs__select, .ct-vs .ct-vs__toggle { width: 100%; }
	.ct-vs__quick { flex: 1 1 100%; }
	.ct-vs .ct-vs__input[type="search"] { width: 100%; font-size: 16px; }
	.ct-vs .ct-vs__submit,
	.ct-vs .ct-vs__submit:hover {
		flex: 1 1 100%;
		justify-content: center;
		height: 48px;
		margin: 0;
		border-radius: 12px;
		background: var(--ct-vs-accent);
		color: #272E36;
		font-size: 16px;
		font-weight: 600;
	}
	.ct-vs__panel { width: min(320px, calc(100vw - 32px)); }
}
@media (max-width: 480px) {
	.ct-vs__make, .ct-vs__pick { flex-basis: 100%; }
	.ct-vs__select { padding-left: 18px; }
}