/*
 * Instant Booking modal chrome. The wizard's own steps/forms are styled by
 * com_fencingevents's booking-wizard.css (shared with the standalone booking
 * page) — this file is only the <dialog> shell around it: sizing, backdrop,
 * header with a close button. Same teal/rounded vocabulary as the
 * calculator (see calculator.css) so the two feel like one surface.
 */

.few-bookingmodal {
	background: #fff;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	color: #1c1c1c;
	margin: auto;
	max-height: min(85vh, 720px);
	max-width: min(90vw, 34rem);
	padding: 0;
	position: relative;
	width: 100%;
}

.few-bookingmodal::backdrop {
	background: rgba(10, 20, 25, 0.55);
}

.few-bookingmodal[open] {
	display: flex;
	flex-direction: column;
}

/* The wizard body caps at 32rem while this modal is 34rem wide, so without an
   auto margin the content sits flush left and leaves the whole 2rem of slack
   on the right — visibly off-centre under the header, which is full width.
   Scoped to the modal: on the standalone booking page that same cap is a
   left-aligned reading column and is meant to stay there. */
.few-bookingmodal .fencingevents-wizard {
	margin-inline: auto;
	width: 100%;
}

.few-bookingmodal__head {
	align-items: center;
	background: linear-gradient(135deg, #0f6b99, #15789c);
	border-bottom: 0;
	border-radius: 20px 20px 0 0;
	display: flex;
	flex: 0 0 auto;
	justify-content: space-between;
	padding: 1.1rem 1.4rem;
}

.few-bookingmodal__head h2 {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: 1.1rem;
	font-weight: 700;
	gap: 0.6rem;
	margin: 0;
}

.few-hold-countdown {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	color: #fff;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	padding: 0.2rem 0.65rem;
}

.few-bookingmodal__close {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	height: 2.25rem;
	width: 2.25rem;
	align-items: center;
	justify-content: center;
}

.few-bookingmodal__close:hover {
	background: rgba(255, 255, 255, 0.18);
}

.few-bookingmodal__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.few-bookingmodal__body {
	overflow-y: auto;
	padding: 1.4rem;
}

/* In-dialog confirmation veil for "you're about to lose your held slot" —
   covers the whole shell (header included) rather than opening a second
   native <dialog>, which is awkward to layer/focus-trap correctly. Same
   backdrop tone as the dialog's own ::backdrop, same card/button
   vocabulary as the wizard steps behind it. */
.few-holdconfirm {
	align-items: center;
	background: rgba(10, 20, 25, 0.55);
	border-radius: 20px;
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	padding: 1.4rem;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 5;
}

.few-holdconfirm__card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
	max-width: 22rem;
	padding: 1.5rem;
}

.few-holdconfirm__message {
	color: #1c1c1c;
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0 0 1.25rem;
}

.few-holdconfirm__actions {
	display: flex;
	gap: 0.6rem;
	justify-content: flex-end;
}

@media (max-width: 640px) {
	.few-bookingmodal {
		border-radius: 16px;
		max-height: 90vh;
		max-width: 100vw;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.few-bookingmodal {
		animation: few-bookingmodal-in 0.18s ease-out;
	}
}

@keyframes few-bookingmodal-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}