/* WHA Rides booking request form — reads the theme's CSS variables when
   present (var(--wha-*, fallback)) so it looks correct even dropped onto a
   page built with a different theme. */

.wha-booking {
	--_bg: var(--wha-card, #181818);
	--_bg-2: var(--wha-background-secondary, #111111);
	--_fg: var(--wha-foreground, #fff);
	--_muted: var(--wha-muted-foreground, #bdbdbd);
	--_accent: var(--wha-accent, #c7a15a);
	--_border: var(--wha-border-strong, rgba(255,255,255,0.14));
	--_radius: var(--wha-radius-lg, 0.625rem);
	font-family: var(--wha-font-sans, ui-sans-serif, system-ui, sans-serif);
	max-width: 640px;
	margin-inline: auto;
	background: var(--_bg);
	border: 1px solid var(--_border);
	border-radius: var(--_radius);
	padding: 2rem;
	color: var(--_fg);
}

@media (max-width: 640px) {
	.wha-booking {
		padding: 1.25rem;
		border-radius: 0.5rem;
	}
}

.wha-field {
	margin-bottom: 1.25rem;
	position: relative;
}
.wha-field label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--_muted);
	margin-bottom: 0.5rem;
}
.wha-field input,
.wha-field select,
.wha-field textarea {
	width: 100%;
	background: var(--_bg-2);
	border: 1px solid var(--_border);
	border-radius: 0.375rem;
	color: var(--_fg);
	font-size: 1rem;
	padding: 0.85rem 1rem;
	font-family: inherit;
}
.wha-field input:focus,
.wha-field select:focus,
.wha-field textarea:focus {
	outline: none;
	border-color: var(--_accent);
}
.wha-field__hint {
	font-size: 0.75rem;
	color: var(--_muted);
	margin-top: 0.4rem;
}
.wha-field__error {
	font-size: 0.8125rem;
	color: #e0685a;
	margin-top: 0.4rem;
}
.wha-field__warning {
	font-size: 0.8125rem;
	color: var(--_accent);
	margin: 0.4rem 0 0;
	padding: 0.6rem 0.75rem;
	background: rgba(199, 161, 90, 0.1);
	border: 1px solid rgba(199, 161, 90, 0.3);
	border-radius: 0.375rem;
}

.wha-autocomplete {
	position: relative;
}
.wha-autocomplete__list {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.35rem;
	background: var(--_bg-2);
	border: 1px solid var(--_border);
	border-radius: 0.375rem;
	max-height: 240px;
	overflow-y: auto;
	list-style: none;
	padding: 0.35rem;
}
.wha-autocomplete__list li button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.6rem 0.75rem;
	border-radius: 0.25rem;
	color: var(--_fg);
	font-size: 0.9rem;
}
.wha-autocomplete__list li button:hover,
.wha-autocomplete__list li button.is-active {
	background: rgba(199, 161, 90, 0.12);
}
.wha-autocomplete__list li small {
	display: block;
	color: var(--_muted);
	font-size: 0.75rem;
}

.wha-inline-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* .wha-btn / .wha-btn--accent / .wha-btn--outline intentionally NOT
   redefined here — theme.css already provides them and always loads
   alongside this file on the static site, so duplicating them risked
   winning the cascade (equal specificity, later source order) over more
   specific component rules elsewhere, e.g. .wha-header__cta's
   `display: none` on mobile. */

.wha-booking__error {
	background: rgba(224, 104, 90, 0.12);
	border: 1px solid rgba(224, 104, 90, 0.4);
	color: #f2a89e;
	padding: 0.85rem 1rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	margin-bottom: 1.25rem;
}

.wha-confirmation {
	text-align: center;
	padding: 2rem 0;
}
.wha-confirmation__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--_accent);
	color: #050505;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
	font-size: 1.5rem;
}
.wha-confirmation h2 {
	font-family: var(--wha-font-display, Georgia, serif);
	font-size: 1.75rem;
	margin: 0 0 0.5rem;
}
.wha-confirmation__total {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--_accent);
	margin: 1rem 0 0;
}

@media (max-width: 560px) {
	.wha-inline-fields {
		grid-template-columns: 1fr;
	}
}