/* Zeekr — Test-drive page styles (/test-drive/). Enqueued only on that page
   (inc/Assets.php). Relies on design tokens and base rules from main.css. */

/* -------------------------------------------------------------------------
 * Test-drive page (/test-drive/) — styled Contact Form 7 booking form.
 * Autop is disabled for this page (functions.php) so the CF7 markup keeps the
 * .td-* wrappers below; fields are the plain CF7 control classes.
 * ------------------------------------------------------------------------- */
.test-drive .container {
	padding-top: calc(var(--header-h) + 56px);
	padding-bottom: 96px;
}

.td-layout {
	display: grid;
	grid-template-columns: minmax(0, 620px);
	justify-content: center;
}

.td-title {
	margin: 0 0 40px;
	font-size: clamp(34px, 5vw, 52px);
}

.td-block {
	margin-bottom: 36px;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--gray-400);
}

.td-consents {
	border-bottom: 0;
}

.td-subhead {
	margin: 0 0 22px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 20px;
}

/* Model selector (radios + preview injected from the DB — see functions.php) */
.td-models {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
}

.td-models .td-model {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-size: 16px;
}

.td-models input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid var(--gray-500);
	border-radius: 50%;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.td-models input[type="radio"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--black);
	transform: scale(0);
	transition: transform 0.15s ease;
}

.td-models input[type="radio"]:checked {
	border-color: var(--black);
}

.td-models input[type="radio"]:checked::before {
	transform: scale(1);
}

/* Model preview card */
.td-preview {
	margin-top: 24px;
	padding: 24px;
	min-height: 230px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--orange);
	border-radius: 10px;
	background: var(--gray-200);
}

.td-preview__img {
	width: auto;
	max-height: 200px;
	object-fit: contain;
}

/* Contact fields */
.td-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.td-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.test-drive .wpcf7-form-control-wrap {
	display: block;
}

.test-drive input[type="text"],
.test-drive input[type="tel"],
.test-drive input[type="email"] {
	width: 100%;
	height: 64px;
	/* Extra top padding leaves room for the floating label to sit above the text. */
	padding: 24px 20px 6px;
	border: 1px solid var(--gray-500);
	border-radius: 8px;
	background: var(--white);
	font-family: var(--font-text);
	font-size: 16px;
	color: var(--black);
	transition: border-color 0.2s ease;
}

.test-drive input:focus {
	outline: none;
	border-color: var(--black);
}

.test-drive ::placeholder {
	color: transparent;
}

/* Floating label: sits centered like a placeholder, then rises to a small
 * caption on focus or once the field has a value (placeholder is a single space
 * so :placeholder-shown tracks emptiness). */
.td-float {
	position: relative;
	display: block;
}

.td-float__label {
	position: absolute;
	left: 21px;
	/* Anchor to the input's centre (half of its 64px height), NOT top:50% —
	 * a CF7 validation tip is appended inside .td-float and would otherwise
	 * grow the box and drag a percentage-based label downward. */
	top: 32px;
	transform: translateY(-50%);
	color: var(--gray-700);
	font-size: 16px;
	pointer-events: none;
	transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease;
}

.td-float.is-active .td-float__label {
	top: 13px;
	transform: none;
	font-size: 12px;
}

/* No-JS fallback: a filled field still floats its label. Kept as a separate
 * rule so its :has() can't invalidate the class-based rule above. */
.td-float:has(input:not(:placeholder-shown)) .td-float__label {
	top: 13px;
	transform: none;
	font-size: 12px;
}

/* Invalid field: red border to match the CF7 validation tip below it.
 * `input.` keeps specificity ahead of the base input rule. */
.test-drive input.wpcf7-not-valid {
	border-color: var(--orange);
}

/* Consent checkboxes */
.td-consents .wpcf7-form-control-wrap {
	margin-bottom: 20px;
}

.td-consents .wpcf7-list-item {
	margin: 0;
}

.td-consents label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gray-700);
}

.td-consents input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	margin: 2px 0 0;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--gray-500);
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.td-consents input[type="checkbox"]:checked {
	border-color: var(--black);
	background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center no-repeat;
}

.td-consents a {
	color: var(--black);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.td-consents a:hover {
	color: var(--orange);
}

/* Submit */
.test-drive .wpcf7-submit.td-submit {
	width: 100%;
	height: 60px;
	margin-top: 8px;
	border: 0;
	border-radius: 999px;
	background: var(--black);
	color: var(--white);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.test-drive .wpcf7-submit.td-submit:hover {
	background: var(--dark);
}

/* CF7 messages */
.test-drive .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--orange);
	font-size: 13px;
}

.test-drive .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14px;
}

.test-drive .wpcf7-spinner {
	margin: 0 0 0 12px;
}

@media (max-width: 768px) {
	.test-drive .container {
		padding-top: calc(var(--header-h) + 32px);
	}

	.td-row {
		grid-template-columns: 1fr;
	}
}