/* H-Lead Booking Form — Figma "booking-home" (desktop, 1260x258 outer,
 * fields row HORIZONTAL 16px gap) / "booking-home-mobile" (fields column,
 * VERTICAL 20px gap). Reuses .hl-field / .hl-toggle from form-field.css /
 * toggle.css and .hl-tabs-like tab styling for the Rent a car / Private
 * Transfer switcher. */

.hl-booking-form {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-24);
	width: 100%;
	/* max-width: 1260px; */
	padding: var(--hl-space-48) var(--hl-space-32);
	border-radius: var(--hl-radius-16);
	background-color: var(--hl-color-white);
	font-family: var(--hl-font-family);
	box-sizing: border-box;
	border: 1px solid var(--hl-color-grey-200);
	box-shadow: var(--hl-shadow-card);
}

.hl-booking-form__tabs {
	position: relative;
	display: flex;
	gap: var(--hl-space-24);
	align-items: center;
	justify-content: center;
}

.hl-booking-form__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--hl-space-8) var(--hl-space-4);
	border: none;
	background-color: transparent;
	font-family: var(--hl-font-family);
	font-weight: var(--hl-font-weight-medium);
	font-size: var(--hl-accordion-title-size);
	line-height: var(--hl-accordion-title-line-height);
	color: var(--hl-color-brand-800);
	cursor: pointer;
	transition: color 0.2s ease;
}

.hl-booking-form__tab:hover {
	color: var(--hl-color-brand-400);
	background: none !important;
}

.hl-booking-form__tab--active {
	color: var(--hl-color-brand-400);
	font-weight: var(--hl-font-weight-semibold);
}

.hl-booking-form__tab-indicator {
	position: absolute;
	left: 0;
	bottom: -3px;
	height: 4px;
	background-color: var(--hl-color-brand-400);
	transition: transform 0.25s ease, width 0.25s ease;
}

.hl-booking-form__panels {
	position: relative;
}

[data-tab-panel] {
	opacity: 1;
	transition: opacity 0.15s ease;
}

[data-tab-panel].hl-booking-form__panel--fade-in {
	opacity: 0;
}

[data-tab-panel].hl-booking-form__panel--fade-out {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
}

.hl-booking-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-24);
}

.hl-booking-form__toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--hl-space-16);
}

.hl-booking-form__fields {
	display: flex;
	flex-direction: column;
	gap: var(--hl-space-20);
}

.hl-booking-form__field {
	flex: 1 1 0;
	min-width: 0;
}

.hl-booking-form__field-group--passengers-luggage {
	display: flex;
	flex: 1 1 0;
	gap: var(--hl-space-16);
	min-width: 0;
}

.hl-booking-form__field-group--passengers-luggage .hl-booking-form__field {
	flex: 1 1 0;
	min-width: 0;
}

/* Slide + fade + width-expand when "Return car to a different location" is
 * switched on; overflow/white-space keep the label & input text from
 * spilling out while the field is still narrower than its final width. */
.hl-booking-form__field--dropoff-location {
	flex: 0 0 0%;
	min-width: 0;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	transform: translateX(24px);
	transition: opacity 0.3s ease, transform 0.3s ease, flex-grow 0.3s ease, flex-basis 0.3s ease, max-width 0.3s ease;
}

.hl-booking-form__field--dropoff-location.hl-booking-form__field--visible {
	flex: 1 1 0%;
	max-width: 100%;
	opacity: 1;
	transform: translateX(0);
}

/* Only let the location dropdown escape the field's bounds once the
 * expand animation has actually finished — otherwise the label/input
 * text would spill out mid-animation while the field is still narrow. */
.hl-booking-form__field--dropoff-location.hl-booking-form__field--expanded {
	overflow: visible;
}

.hl-booking-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* Figma "buttons" component: stackSpacing 10, no matching token */
	padding: var(--hl-space-12) var(--hl-space-32);
	border: none;
	border-radius: var(--hl-radius-8);
	background-color: var(--hl-btn-primary-surface);
	color: var(--hl-btn-primary-content);
	font-family: var(--hl-font-family);
	font-size: var(--hl-body-default-size);
	line-height: var(--hl-body-default-line-height);
	font-weight: var(--hl-font-weight-semibold);
	cursor: pointer;
	transition: background-color 0.15s ease;
	min-height: 50px;
}

.hl-booking-form__submit:hover {
	background-color: var(--hl-btn-primary-surface-hover);
}

.hl-booking-form__submit-icon {
	width: var(--hl-space-20);
	height: var(--hl-space-20);
	flex-shrink: 0;
}

.hl-booking-form__submit-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Mobile: fields already stack in a column (see .hl-booking-form__fields
 * above), so the dropoff field's reveal animates vertically instead —
 * max-height + translateY replace the desktop's max-width + translateX,
 * and white-space wraps normally instead of clipping to one line. */
@media (max-width: 991px) {
	.hl-booking-form__field--dropoff-location {
		flex: 0 0 auto;
		max-width: none;
		width: 100%;
		max-height: 0;
		white-space: normal;
		transform: translateY(24px);
		transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
	}

	.hl-booking-form__field--dropoff-location.hl-booking-form__field--visible {
		max-height: 96px;
		transform: translateY(0);
	}
}

/* Desktop: single horizontal row, 16px gap, per Figma "inputs" auto-layout frame */
@media (min-width: 992px) {
	.hl-booking-form__fields {
		flex-direction: row;
		align-items: flex-end;
		gap: var(--hl-space-16);
	}

	.hl-booking-form__submit {
		flex: 0 0 auto;
	}
}