/* ---------------------------------------------------------------------------
 * The waiting list on a fully booked trip.
 *
 * Two parts: what replaces the booking controls in the panel, and the modal the
 * button opens. The modal borrows the mailing list's shape so the two read as
 * the same site — see assets/css/subscribe.css.
 * ------------------------------------------------------------------------- */

.pickleball-waitlist__action {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pickleball-waitlist__status {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--alert);
}

/* The alert red above is right for "fully booked" — something the reader
 * wanted is gone. It is wrong for the two states added on 2026-10-14, which
 * are not bad news: a trip that has not opened yet is an invitation, and a
 * private-group trip is an offer. Red on those reads as a warning and makes
 * the waiting-list button look like damage control. */
.pickleball-waitlist__action[data-waitlist-state="coming-soon"] .pickleball-waitlist__status,
.pickleball-waitlist__action[data-waitlist-state="private-only"] .pickleball-waitlist__status {
	color: var(--wp--preset--color--calm, #1c5c46);
}

/* Full width, as asked. It is the only thing left to do on this panel, so it
 * takes the whole width rather than sitting at the size the Book button was. */
.pickleball-waitlist__open {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 15px 22px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--base);
	text-align: center;
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition: background-color var(--wp--custom--duration--press, 160ms) var(--wp--custom--ease--out, ease);
}

.pickleball-waitlist__open:hover,
.pickleball-waitlist__open:focus-visible {
	background-color: var(--wp--preset--color--success);
}

.pickleball-waitlist__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-muted);
}

/* --- The modal ------------------------------------------------------------ */

.pickleball-waitlist {
	position: fixed;
	inset: 0;

	/* 100001, the value subscribe.css already uses, and for the same reason:
	 * the cookie banner sits at 99999. At any lower value the banner covers the
	 * bottom of this panel — including the submit button — and the waiting list
	 * cannot be joined until consent is answered. The consent bar is not modal,
	 * so a panel the reader deliberately opened belongs above it. */
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--20);
}

.pickleball-waitlist[hidden] {
	display: none;
}

.pickleball-waitlist__scrim {
	position: absolute;
	inset: 0;
	background-color: color-mix( in oklab, var(--wp--preset--color--contrast) 55%, transparent );
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.pickleball-waitlist__panel {
	position: relative;
	box-sizing: border-box;
	width: min(520px, 100%);

	/* The form is taller than a phone in landscape. Cap the panel and let it
	 * scroll rather than letting the submit button fall off the screen. */
	max-height: calc(100vh - 2 * var(--wp--preset--spacing--20));
	overflow-y: auto;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--base-raised);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--lift);
}

.pickleball-waitlist__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--wp--preset--color--contrast-muted);
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

.pickleball-waitlist__close:hover,
.pickleball-waitlist__close:focus-visible {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base-sunken);
}

.pickleball-waitlist__eyebrow {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--success);
}

.pickleball-waitlist__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
}

.pickleball-waitlist__dates {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-waitlist__intro {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-waitlist__form {
	margin-top: var(--wp--preset--spacing--30);
}

/* The form itself is a Gravity Form and inherits assets/css/forms.css through
 * the .pickleball-form wrapper. Only the submit needs saying: it is the one
 * action in the panel, so it takes the full width. */
.pickleball-waitlist__form .gform_footer input[type="submit"] {
	width: 100%;
}

@media (max-width: 599px) {
	.pickleball-waitlist__panel {
		padding: var(--wp--preset--spacing--30);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pickleball-waitlist__open {
		transition: none;
	}
}