/**
 * Booking dialog (template-parts/booking-dialog.php). Phones: the whole
 * screen. Wide screens: intro and steps beside the fields, sized to fit a
 * 1280×720 laptop without scrolling.
 */

.booking-dialog {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--color-surface);
	color: var(--color-text);
	overscroll-behavior: contain;
}

.booking-dialog::backdrop {
	background: var(--color-backdrop);
}

html:has(.booking-dialog[open]) {
	overflow: hidden;
}

.booking-dialog__aside {
	padding: var(--space-5) var(--space-4) var(--space-4);
	background: var(--color-surface-accent);
}

.booking-dialog__title {
	margin: 0 var(--space-9) var(--space-2) 0;
	font-size: var(--step-1);
}

.booking-dialog__intro {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--step--1);
}

.booking-dialog__steps {
	display: none;
}

.booking-dialog__main {
	padding: var(--space-5) var(--space-4) var(--space-6);
}

/* Fixed on phones, so it stays in reach while the form scrolls. */
.booking-dialog__close {
	position: fixed;
	z-index: 1;
	top: var(--space-3);
	right: var(--space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	background: var(--color-surface);
	color: var(--color-navy);
	cursor: pointer;
}

.booking-dialog__close:hover {
	border-color: var(--color-border-strong);
}

.booking-dialog .booking-form {
	max-width: none;
}

@media (min-width: 56rem) {

	.booking-dialog {
		width: min(100% - 2 * var(--space-6), 64rem);
		height: min-content;
		max-height: calc(100dvh - 2 * var(--space-4));
		margin: auto;
		border-radius: var(--radius-card);
		box-shadow: var(--shadow-raised);
	}

	.booking-dialog__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
	}

	.booking-dialog__aside {
		padding: var(--space-7) var(--space-6);
	}

	.booking-dialog__title {
		margin: 0 0 var(--space-4);
		font-size: var(--step-2);
	}

	.booking-dialog__intro {
		font-size: var(--step-0);
	}

	.booking-dialog__steps {
		display: grid;
		gap: var(--space-3);
		margin: var(--space-6) 0 0;
		padding: 0;
		list-style: none;
		counter-reset: step;
		font-weight: 600;
	}

	.booking-dialog__steps li {
		display: flex;
		gap: var(--space-3);
		align-items: center;
		counter-increment: step;
	}

	.booking-dialog__steps li::before {
		display: inline-flex;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		color: var(--color-navy);
		font-family: var(--font-heading);
		font-size: var(--step--1);
		content: counter(step);
	}

	.booking-dialog__main {
		position: relative;
		padding: var(--space-7) var(--space-6) var(--space-6);
	}

	.booking-dialog__close {
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
	}
}

/*
 * Opening: the dialog fades in and rises 8px, the backdrop fades (250ms);
 * closing is quicker (150ms; Chrome and Edge, elsewhere it closes at once).
 * It ends at `translate: none`, so the fixed close button keeps to the
 * screen, not the dialog.
 */
@media (prefers-reduced-motion: no-preference) {

	.booking-dialog,
	.booking-dialog::backdrop {
		transition:
			opacity var(--duration-fast) var(--ease),
			translate var(--duration-fast) var(--ease),
			overlay var(--duration-fast) allow-discrete,
			display var(--duration-fast) allow-discrete;
	}

	.booking-dialog {
		opacity: 0;
		translate: 0 8px;
	}

	.booking-dialog::backdrop {
		opacity: 0;
	}

	.booking-dialog[open],
	.booking-dialog[open]::backdrop {
		opacity: 1;
		translate: none;
		transition-duration: var(--duration-base);
	}

	@starting-style {

		.booking-dialog[open] {
			opacity: 0;
			translate: 0 8px;
		}

		.booking-dialog[open]::backdrop {
			opacity: 0;
		}
	}
}