/* ABOUTME: CSS variables, base reset, and grid layout for the booking wizard. */
/* ABOUTME: Shared input/checkbox/datepicker styles live in booking_base.css. */

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
	--general-padding: clamp(10px, 2vw, 24px);
}

/* ==========================================================================
   BASE / RESET STYLES
   ========================================================================== */

body {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	padding: 0;
	margin: 0;
	font-size: 15px;
}

*,
*:before,
*:after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}

h2 {
	margin-bottom: 1rem;
}

.form-section-heading {
	padding-top: 1.5rem;
	margin-top: 0.5rem;
	border-top: 1px solid var(--color-dark-blue);
	font-size: 1rem;
}

form {
	margin-bottom: 0px;
}

dialog {
	margin: auto;
}

/* Prevent iOS zoom on input/select/textarea focus (requires >= 16px) */
input,
select,
textarea {
	font-size: max(1rem, 16px);
}

/* Step-specific styles */

/* ==========================================================================
   LAYOUT (GRID, CONTAINERS)
   ========================================================================== */

main {
	width: calc(100% - 20px);
	max-width: 1250px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 130px auto;
	gap: 10px;
	margin: var(--general-padding) auto;
}

main .booking-form {
	flex-basis: 100%;
}

/* Mobile: single-column flex layout */
main .booking-form form {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 10px;
}

.top_header {
	display: flex;
	height: 90px;
	justify-content: space-between;
	align-items: center;
}

/* Languages */
.languages {
	display: flex;
	align-items: center;
	height: fit-content;
}

.languages a {
	text-decoration: none;
	color: currentColor;
}

.languages ul {
	display: flex;
	list-style: none;
}

.languages li {
	padding: 0 0.3rem;
	box-shadow: 0px 0px 2px #999;
	border-radius: 3px;
}

.languages .active {
	display: none;
}

/* --- Desktop (>=1024px) --- */

@media screen and (min-width: 1024px) {
	body {
		font-size: 1rem;
	}

	.form-section-heading {
		font-size: 1.1rem;
	}

	input,
	select,
	textarea {
		font-size: inherit;
	}

	.form-content {
		padding: var(--general-padding);
		border-radius: 5px;
		border: 1px solid;
	}

	form.step-start .form-content,
	form.step-data .form-content {
		padding: clamp(1rem, 3vw, 1.5rem);
	}

	main .booking-form form {
		display: grid;
		grid-template-columns: 7fr 5fr;
		grid-template-rows: 1fr auto;
	}
}

/* --- Narrow mobile (<=400px) --- */

@media screen and (max-width: 400px) {
	.form-content {
		row-gap: 1rem;
	}

}