.tm-test-drive {
	--tm-td-surface: #ffffff;
	--tm-td-surface-alt: #f8fafc;
	--tm-td-border: #e5e7eb;
	--tm-td-border-strong: #d1d5db;
	--tm-td-text: #0f172a;
	--tm-td-muted: #64748b;
	--tm-td-accent: var(--bde-brand-primary-color, #1d4ed8);
	--tm-td-accent-strong: var(--bde-brand-primary-color, #1d4ed8);

	display: flex;
	flex-direction: column;
	gap: 28px;
	font-family: var(--bde-body-font-family, inherit);
	color: var(--tm-td-text);
}

.tm-test-drive-header {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tm-test-drive-title {
	font-size: 32px;
	font-weight: 700;
	margin: 0;
	color: var(--tm-td-text);
}

.tm-test-drive-subtitle {
	margin: 0 auto;
	color: var(--tm-td-muted);
	max-width: 680px;
	font-size: 15px;
}

.tm-test-drive-section {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tm-test-drive-section-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tm-test-drive-section-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--tm-td-text);
}

.tm-test-drive-selection-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}

.tm-test-drive-selection-left {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tm-test-drive-selection-right {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tm-td-surface-alt);
}

.tm-test-drive-default-preview {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.tm-test-drive-default-image {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.tm-test-drive-default-placeholder {
	color: var(--tm-td-muted);
	font-size: 14px;
	font-weight: 600;
}

.tm-test-drive.has-selection .tm-test-drive-search {
	display: none;
}

.tm-test-drive:not(.has-selection) .tm-test-drive-selected {
	display: none;
}

.tm-test-drive.has-selection .tm-test-drive-default-preview {
	display: none;
}

.tm-test-drive-search {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tm-test-drive-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tm-td-muted);
}

.tm-test-drive-input {
	width: 100%;
	border-radius: 10px;
	border: 1px solid var(--tm-td-border-strong);
	padding: 12px 14px;
	font: inherit;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-test-drive-input:focus {
	border-color: var(--tm-td-accent);
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
	outline: none;
}

.tm-test-drive-results {
	margin-top: 12px;
	display: grid;
	gap: 10px;
}

.tm-test-drive-results.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

.tm-test-drive-results-list {
	display: grid;
	gap: 10px;
}

.tm-test-drive-results-empty {
	padding: 12px;
	border: 1px dashed var(--tm-td-border-strong);
	border-radius: 10px;
	background: var(--tm-td-surface-alt);
	color: var(--tm-td-muted);
	font-weight: 600;
}

.tm-test-drive-result {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 12px;
	align-items: center;
	border: 1px solid var(--tm-td-border);
	border-radius: 12px;
	padding: 10px;
	background: #fff;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.tm-test-drive-result:hover {
	border-color: var(--tm-td-accent);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
	transform: translateY(-1px);
}

.tm-test-drive-result img,
.tm-test-drive-result-placeholder {
	width: 88px;
	height: 70px;
	border-radius: 10px;
	object-fit: cover;
}

.tm-test-drive-result-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tm-td-surface-alt);
	color: var(--tm-td-muted);
	font-size: 12px;
}

.tm-test-drive-result-title {
	font-weight: 700;
	color: var(--tm-td-text);
}

.tm-test-drive-result-meta {
	margin-top: 4px;
	font-size: 12px;
	color: var(--tm-td-muted);
}

.tm-test-drive-result-price {
	margin-top: 6px;
	font-weight: 700;
	color: var(--tm-td-text);
}

.tm-test-drive-selected {
	padding: 0;
	background: transparent;
	border: none;
}

.tm-test-drive-empty {
	color: var(--tm-td-muted);
	font-weight: 600;
}

.tm-test-drive-selected-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tm-test-drive-selected-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tm-td-accent);
	font-weight: 700;
	margin-bottom: 4px;
}

.tm-test-drive-selected-content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tm-test-drive-selected-media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tm-td-surface-alt);
}

.tm-test-drive-swiper {
	width: 100%;
	height: 100%;
	border-radius: 12px;
}

.tm-test-drive-swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tm-td-surface-alt);
}

.tm-test-drive-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tm-test-drive-swiper .swiper-pagination {
	bottom: 12px;
}

.tm-test-drive-swiper .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.7;
	width: 8px;
	height: 8px;
}

.tm-test-drive-swiper .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--tm-td-accent);
}

.tm-test-drive-swiper .swiper-button-next,
.tm-test-drive-swiper .swiper-button-prev {
	color: #fff;
	width: 36px;
	height: 36px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	backdrop-filter: blur(4px);
}

.tm-test-drive-swiper .swiper-button-next:after,
.tm-test-drive-swiper .swiper-button-prev:after {
	font-size: 16px;
	font-weight: 700;
}

.tm-test-drive-selected-image,
.tm-test-drive-selected-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}

.tm-test-drive-selected-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tm-td-surface-alt);
	color: var(--tm-td-muted);
	font-size: 12px;
	height: 100%;
}

.tm-test-drive-selected-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}

.tm-test-drive-selected-title {
	font-family: var(--bde-heading-font-family, inherit);
	font-size: 22px;
	font-weight: 800;
	color: var(--tm-td-text);
	line-height: 1.3;
	flex: 1;
	min-width: 200px;
}

.tm-test-drive-selected-meta {
	margin-top: 2px;
	color: var(--tm-td-muted);
	font-size: 14px;
	line-height: 1.6;
}

.tm-test-drive-selected-list {
	margin: 16px 0 0;
	padding: 16px;
	list-style: none;
	display: grid;
	gap: 10px;

	border-radius: 10px;
}

.tm-test-drive-selected-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--tm-td-text);
	padding: 4px 0;
}

.tm-test-drive-selected-list li strong {
	color: var(--tm-td-text);
	font-weight: 700;
}

.tm-test-drive-selected-price {
	font-family: var(--bde-heading-font-family, inherit);
	font-weight: 800;
	font-size: 24px;
	color: var(--bde-brand-primary-color, #1d4ed8);
	text-align: right;
	flex-shrink: 0;
}

.tm-test-drive-selected-price-old {
	font-size: 16px;
	font-weight: 600;
	color: var(--tm-td-muted);
	text-decoration: line-through;
	margin-bottom: 4px;
}

.tm-test-drive-selected-actions {
	margin-top: 14px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.tm-test-drive-selected-actions a {
	color: var(--bde-brand-primary-color, var(--tm-td-accent));
	font-weight: 700;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.tm-test-drive-selected-actions a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

.tm-test-drive-change {
	border: 1px solid var(--tm-td-border-strong);
	border-radius: 8px;
	padding: 8px 16px;
	background: #fff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.tm-test-drive-change:hover {
	border-color: var(--tm-td-accent);
	color: var(--tm-td-accent);
}

.tm-test-drive-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 100%;
	width: 100%;
}

.tm-test-drive-form.is-disabled {
	opacity: 0.7;
}

.tm-test-drive-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

@media (min-width: 721px) {
	.tm-test-drive-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

.tm-test-drive-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tm-test-drive-field span {
	font-size: 13px;
	color: var(--tm-td-muted);
}

.tm-test-drive-field input,
.tm-test-drive-field select,
.tm-test-drive-field textarea {
	border: 1px solid var(--tm-td-border);
	border-radius: 6px;
	padding: 12px;
	font: inherit;
	background: var(--tm-td-surface-alt);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-test-drive-field input:focus,
.tm-test-drive-field select:focus,
.tm-test-drive-field textarea:focus {
	border-color: var(--tm-td-accent);
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
	outline: none;
}

.tm-test-drive-full {
	grid-column: 1 / -1;
}

.tm-test-drive-status {
	min-height: 20px;
	font-weight: 700;
	color: var(--tm-td-muted);
}

.tm-test-drive-status-info {
	color: var(--tm-td-muted);
}

.tm-test-drive-status-error {
	color: #b91c1c;
}

.tm-test-drive-status-success {
	color: #0f7b3e;
}

.tm-test-drive-submit,
.tm-test-drive-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 48px;
	border-radius: 8px;
	border: none;
	background: var(--bde-brand-primary-color, var(--tm-td-accent));
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	width: fit-content;
}

.tm-test-drive-submit:hover,
.tm-test-drive-button:hover {
	opacity: 0.9;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.tm-test-drive-submit.is-loading {
	opacity: 0.7;
	cursor: wait;
}

.tm-test-drive-floating-bar {
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 900;
	padding: 12px 20px;
	border-top: 1px solid #e5e7eb;
	background: #fff;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tm-test-drive-floating {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 48px;
	border-radius: 8px;
	background: var(--bde-brand-primary-color, var(--tm-td-accent)) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
}

.tm-test-drive-floating::before {
	content: '';
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23ffffff'%3E%3Cellipse cx='256' cy='258.35' rx='12.83' ry='12.87'/%3E%3Cpath d='m255.8 416.51c15.66 0 30.8-2.24 45.12-6.43v-28.58c0-22.2 9.25-43.18 26.73-60.67l.9-.9c17.48-17.48 38.46-26.72 60.67-26.72h23.24c2.94-12.14 4.5-24.82 4.5-37.86 0-14.62-1.96-28.79-5.62-42.26h-31.83c-22.87 0-45.11-9.55-59.47-25.5-16.46-18.52-39.31-28.72-64.34-28.72-24.26 0-47.66 10.08-64.18 27.64-15.51 16.32-37.24 25.68-59.64 25.68h-31.37c-3.82 13.74-5.87 28.22-5.87 43.16 0 13.04 1.56 25.72 4.5 37.86h22.66c22.21 0 43.19 9.24 60.67 26.72l.91.9c17.48 17.49 26.72 38.47 26.72 60.67v28.41c14.49 4.3 29.83 6.6 45.7 6.6zm.2-201.03c23.62 0 42.83 19.23 42.83 42.87s-19.21 42.87-42.83 42.87-42.83-19.23-42.83-42.87 19.21-42.87 42.83-42.87z'/%3E%3Cpath d='m255.696 64.486c24.976 0 48.851 4.807 70.748 13.542l48.736-48.735c-36.309-19.144-76.965-29.293-119.18-29.293-42.369 0-83.167 10.224-119.577 29.504l48.525 48.525c21.897-8.736 45.772-13.543 70.748-13.543z'/%3E%3Cpath d='m64.18 256c0-69.37 37.08-130.25 92.46-163.85l-46.57-46.57c-12.42 8.65-24.16 18.47-35.09 29.4-48.35 48.35-74.98 112.64-74.98 181.02s26.63 132.67 74.98 181.02c10.63 10.63 22.03 20.21 34.07 28.68l46.52-46.51c-54.79-33.73-91.39-94.27-91.39-163.19z'/%3E%3Cpath d='m255.7 447.51c-25.45 0-49.75-4.99-71.98-14.05l-48.42 48.43c36.69 19.67 77.89 30.11 120.7 30.11 42.66 0 83.72-10.36 120.31-29.9l-48.63-48.63c-22.23 9.05-46.53 14.04-71.98 14.04z'/%3E%3Cpath d='m437.02 74.98c-11.03-11.03-22.9-20.94-35.45-29.65l-46.82 46.82c55.38 33.6 92.46 94.48 92.46 163.85 0 68.92-36.6 129.46-91.38 163.2l46.75 46.75c12.18-8.53 23.7-18.19 34.44-28.93 48.35-48.35 74.98-112.64 74.98-181.02s-26.63-132.67-74.98-181.02z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

.tm-test-drive-floating:hover {
	opacity: 0.9;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.tm-test-drive-floating--left {
	margin-right: auto;
}
/* New Section 1: Mileage and title styling */
.tm-test-drive-selected-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--tm-td-text);
	margin-bottom: 4px;
}

.tm-test-drive-selected-mileage {
	font-size: 16px;
	font-weight: 600;
	color: var(--tm-td-muted);
	margin-bottom: 12px;
}

.tm-test-drive-selected-list {
	list-style: none;
	padding: 0;
	margin: 12px 0 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.tm-test-drive-selected-list li {
	padding: 10px 12px 10px 36px;
	background: #fff;
	border: 1px solid var(--tm-td-border);
	border-radius: 6px;
	font-size: 14px;
	color: var(--tm-td-text);
	position: relative;
}

.tm-test-drive-selected-list li::before {
	content: '✓';
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--bde-brand-primary-color, var(--tm-td-accent));
}

/* Section 2: Location and Map */
.tm-test-drive-section--location {
	margin-top: 24px;
}

.tm-test-drive-location-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.tm-test-drive-location-left {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tm-test-drive-location-selector {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tm-test-drive-location-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.tm-test-drive-location-display {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--tm-td-surface);
	border: 1px solid var(--tm-td-border);
	border-radius: 10px;
}

.tm-test-drive-location-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tm-td-accent);
	color: #fff;
	border-radius: 8px;
}

.tm-test-drive-location-icon svg {
	width: 20px;
	height: 20px;
}

.tm-test-drive-location-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tm-test-drive-location-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--tm-td-text);
}

.tm-test-drive-location-address {
	font-size: 14px;
	color: var(--tm-td-muted);
}

.tm-test-drive-location-right {
	position: relative;
	height: 500px;
}

.tm-test-drive-map-container {
	width: 100%;
	height: 400px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tm-td-surface-alt);
	border: 1px solid var(--tm-td-border);
}

.tm-test-drive-map-container iframe {
	width: 100%;
	height: 500px;
	border: none;
}

.tm-test-drive-map-placeholder {
	width: 100%;
	height: 100%;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tm-td-muted);
	font-size: 14px;
	text-align: center;
	padding: 20px;
}

/* Section 3: Driver Details with Summary */
.tm-test-drive-driver-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.tm-test-drive-driver-left {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tm-test-drive-driver-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tm-test-drive-driver-fields-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.tm-test-drive-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 12px 0;
}

.tm-test-drive-checkbox input[type='checkbox'] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--tm-td-accent);
}

.tm-test-drive-checkbox span {
	font-size: 14px;
	color: var(--tm-td-text);
	cursor: pointer;
}

.tm-test-drive-driver-right {
	position: sticky;
	top: 20px;
}

.tm-test-drive-summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tm-test-drive-summary-image {
	width: 100%;
	overflow: hidden;
	background: var(--tm-td-surface-alt);
	border-radius: 12px;
	border: 1px solid var(--tm-td-border);
}

.tm-test-drive-summary-image img {
	width: 100%;
	height: auto !important;
	display: block;
	max-height: 400px;
	object-fit: cover;
}

.tm-test-drive-summary-address {
	font-size: 14px;
	color: var(--tm-td-muted);
	line-height: 1.5;
	padding: 0;
}

.tm-test-drive-summary-details {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tm-test-drive-summary-name {
	font-family: var(--bde-heading-font-family, inherit);
	font-size: 20px;
	font-weight: 700;
	color: var(--tm-td-text);
	line-height: 1.3;
}

.tm-test-drive-summary-info {
	font-size: 14px;
	color: var(--tm-td-muted);
	line-height: 1.6;
}

@media (max-width: 768px) {
	.tm-test-drive-title {
		font-size: 26px;
	}

	.tm-test-drive-selection-wrapper {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.tm-test-drive-selection-right {
		order: -1;
		min-height: 240px;
	}

	.tm-test-drive-selected-card {
		grid-template-columns: 1fr;
	}

	.tm-test-drive-selected-image,
	.tm-test-drive-selected-placeholder {
		height: 100%;
	}

	.tm-test-drive-selected-price {
		text-align: left;
	}

	.tm-test-drive-selected-list {
		grid-template-columns: 1fr;
	}

	.tm-test-drive-result {
		grid-template-columns: 88px 1fr;
	}

	.tm-test-drive-result img,
	.tm-test-drive-result-placeholder {
		width: 88px;
		height: 70px;
	}

	.tm-test-drive-grid {
		grid-template-columns: 1fr;
	}

	/* New responsive styles for sections 2 and 3 */
	.tm-test-drive-location-wrapper {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.tm-test-drive-location-fields {
		grid-template-columns: 1fr;
	}

	.tm-test-drive-location-right {
		min-height: 300px;
	}

	.tm-test-drive-map-container {
		min-height: 300px;
	}

	.tm-test-drive-driver-wrapper {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.tm-test-drive-driver-fields-grid {
		grid-template-columns: 1fr;
	}

	.tm-test-drive-driver-right {
		position: static;
		order: -1;
	}

	.tm-test-drive-submit,
	.tm-test-drive-button,
	.tm-test-drive-floating {
		font-size: 12px;
	}

	.tm-test-drive-field input,
	.tm-test-drive-field select,
	.tm-test-drive-field textarea,
	.tm-test-drive-input {
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.tm-test-drive-result {
		grid-template-columns: 1fr;
	}

	.tm-test-drive-result img,
	.tm-test-drive-result-placeholder {
		width: 100%;
		height: 140px;
	}
}
