/* ABOUTME: CSS overrides for booking wizard when rendered within site layout */
/* ABOUTME: Fixes conflicts between booking_wizard.css global styles and site styles */

/* Reset the body font override from booking_wizard.css - use site font instead */
/* Also restore margin-top that booking_wizard.css resets to 0 */
body.booking-form-page {
	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
	margin-top: 90px; /* Match fixed header height + spacing */
}

/* Scope the main grid layout to booking wizard page only */
.booking-wizard-page main.page-default,
main.booking-wizard-page {
	width: calc(100% - 20px);
	max-width: 1250px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	margin: var(--general-padding, 10px) auto;
}

/* Ensure header styling doesn't leak to site navbar */
.booking-wizard-page .booking-form header,
.booking-wizard-page header.form-header {
	/* Only style form headers, not the site header */
}

/* Add spacing below progress bar */
.booking-wizard-page #form-progress {
	/* margin-bottom: 20px; */
}

/* Add spacing below control buttons for footer clearance */
.booking-wizard-page .control-buttons {
	margin-bottom: 3rem;
}

/* Fix potential z-index conflict with site navbar dropdowns */
.booking-wizard-page wc-datepicker {
	z-index: 100;
}

/* Ensure booking form summary doesn't overlap site footer */
.booking-wizard-page #form-summary {
	position: relative;
	z-index: 1;
}

/* Finished-state confirmation panel */
.booking-wizard-page .finish-success {
	background: var(--color-light-turquoise);
	border: 1px solid var(--color-dark-blue);
	border-radius: 5px;
	color: var(--color-dark-blue);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.8rem, 2vw, 1.25rem);
	margin: clamp(1.5rem, 6vw, 4rem) auto 4rem;
	max-width: 760px;
	padding: clamp(1.5rem, 5vw, 3rem);
	text-align: center;
}

.booking-wizard-page .finish-success__icon {
	background: var(--color-regular-turquoise);
	border: 2px solid var(--color-dark-blue);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(4rem, 12vw, 5.5rem);
	height: clamp(4rem, 12vw, 5.5rem);
}

.booking-wizard-page .finish-success__icon img {
	width: clamp(1.75rem, 6vw, 2.5rem);
	height: clamp(1.75rem, 6vw, 2.5rem);
}

.booking-wizard-page .finish-success__status-label {
	color: var(--color-pink);
	font-size: var(--step--1);
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

.booking-wizard-page .finish-success h1 {
	font-family: "Inter Youth", "Inter", sans-serif;
	font-size: var(--step-5);
	line-height: 0.95;
	margin: 0;
	max-width: 11ch;
}

.booking-wizard-page .finish-success__intro {
	font-size: var(--step-0);
	line-height: 1.45;
	max-width: 34rem;
}

.booking-wizard-page .finish-success__email-status {
	background: white;
	border: 1px solid var(--color-regular-turquoise);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-weight: 700;
	line-height: 1.35;
	max-width: 100%;
	padding: 0.75rem 1rem;
}

.booking-wizard-page .finish-success__email-status img {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
}

.booking-wizard-page .finish-success__steps {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.booking-wizard-page .finish-success__step {
	background: white;
	border: 1px solid rgba(31, 39, 70, 0.22);
	border-radius: 5px;
	display: grid;
	grid-template-columns: 2rem 1fr;
	align-items: center;
	gap: 0.7rem;
	min-height: 3.5rem;
	padding: 0.65rem 0.8rem;
	text-align: left;
}

.booking-wizard-page .finish-success__step-marker {
	background: var(--color-dark-blue);
	border-radius: 50%;
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	width: 2rem;
	height: 2rem;
}

@media screen and (min-width: 768px) {
	.booking-wizard-page .finish-success__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.booking-wizard-page .finish-success__step {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
}