/*
 * Buy Tickets, and the panel behind it.
 *
 * Every control writes a custom property declared here, so a control left blank
 * falls through to a default rather than writing an empty rule. Hover and state
 * properties chain back to their normal counterpart, which is what makes
 * "leave it blank to keep the normal color" true.
 */
/*
 * WHY THE DEFAULTS ARE ON :root AND NOT ON THE WIDGET'S OWN ELEMENT
 * ----------------------------------------------------------------
 * They used to sit on .wa-buy, which reads better and silently killed every
 * control in the panel.
 *
 * Elementor writes a control's value onto {{WRAPPER}}, the .elementor-element
 * div. .wa-buy is rendered INSIDE that div. Custom properties resolve by
 * proximity in the tree rather than by selector specificity, so for anything
 * inside .wa-buy the nearest declaration wins, and that was this block. The
 * editor's color landed on an ancestor nobody was reading from.
 *
 * Nothing errored and the generated CSS looked correct in the file, which is why
 * this survived a check that only confirmed the declaration was emitted.
 * Measured in a browser: wrapper set #FF00FF, computed background came back
 * rgb(10,131,80), the default below.
 *
 * On :root the order comes out right: :root, then the wrapper the controls
 * write to, then the row or card a per-state color writes to. Each step is
 * nearer than the last, so the more specific intent wins.
 */
:root {
	--wabt-btn-display: block;
	--wabt-btn-align: center;
	--wabt-btn-pad-top: 20px;
	--wabt-btn-pad-right: 20px;
	--wabt-btn-pad-bottom: 20px;
	--wabt-btn-pad-left: 20px;
	--wabt-btn-width: 100%;
	--wabt-btn-color: #fff;
	--wabt-btn-bg: #0a8350;
	--wabt-btn-gone-color: #3f3f46;
	--wabt-btn-gone-bg: #e4e4e7;

	--wabt-note-color: rgba(255, 255, 255, 0.82);
	--wabt-note-gap: 14px;

	--wabt-price-name-color: #fff;
	--wabt-price-value-color: #fff;
	--wabt-price-rule: rgba(255, 255, 255, 0.35);
	--wabt-price-gap: 8px;

	--wabt-panel-width: 420px;
	/* The bottom sheet's height on a phone. dvh, for the reason given at the phone rule. */
	--wabt-panel-sheet-h: 95dvh;
	--wabt-panel-bg: #414199;
	--wabt-panel-backdrop: rgba(5, 5, 20, 0.55);
	--wabt-panel-title-color: #fff;
	--wabt-panel-pad-top: 28px;
	--wabt-panel-pad-right: 26px;
	--wabt-panel-pad-bottom: 28px;
	--wabt-panel-pad-left: 26px;

	--wabt-card-pad-top: 14px;
	--wabt-card-pad-right: 16px;
	--wabt-card-pad-bottom: 14px;
	--wabt-card-pad-left: 16px;
	--wabt-card-gap: 10px;
	--wabt-card-color: #fff;
	--wabt-card-bg: rgba(255, 255, 255, 0.1);
	--wabt-card-gone-color: rgba(255, 255, 255, 0.86);
	--wabt-card-gone-bg: rgba(255, 255, 255, 0.05);
	--wabt-card-action-color: #fff;

	/*
	 * The close button. Every one of these was a literal in the rule below, so
	 * the only way to resize it was custom CSS. --wabt-close-color deliberately
	 * has no value here: the rule falls back to the panel heading color, which is
	 * what it borrowed before, so adding the control changed nothing on a panel
	 * nobody has restyled.
	 */
	--wabt-close-w: 40px;
	--wabt-close-h: 40px;
	--wabt-close-glyph: 26px;
	--wabt-close-radius: 50%;
	--wabt-close-bg: transparent;
	--wabt-close-hover-bg: rgba(255, 255, 255, 0.14);
	--wabt-close-pad-top: 0px;
	--wabt-close-pad-right: 0px;
	--wabt-close-pad-bottom: 0px;
	--wabt-close-pad-left: 0px;

	/*
	 * The button icon, ported from the Kingdom Advisors pack's Button 009.
	 * Travel is derived rather than set, so the motion always clears exactly one
	 * icon plus its gap however those two are sized.
	 */
	--wabt-btn-icon-size: 18px;
	--wabt-btn-icon-gap: 10px;
	--wabt-btn-icon-travel: calc(var(--wabt-btn-icon-size) + var(--wabt-btn-icon-gap));
	--wabt-btn-icon-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--wabt-btn-icon-cycle: 0.5s;
	--wabt-btn-icon-fade: 0.3s;
}

/* ---- the button ---------------------------------------------------------- */

.wa-buy__button {
	display: var(--wabt-btn-display);
	/* Was a hardcoded 100%, which meant the Full width switch could not have
	   worked even once its own values were fixed. */
	width: var(--wabt-btn-width);
	padding: var(--wabt-btn-pad-top) var(--wabt-btn-pad-right) var(--wabt-btn-pad-bottom) var(--wabt-btn-pad-left);
	color: var(--wabt-btn-state-color, var(--wabt-btn-color));
	background: var(--wabt-btn-state-bg, var(--wabt-btn-bg));
	border: 0;
	border-radius: 10px;
	text-align: var(--wabt-btn-align);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wa-buy__button:hover,
.wa-buy__button:focus-visible {
	/* This state's hover, the shared hover, this state's resting color, the shared one. */
	color: var(--wabt-btn-state-color-hover, var(--wabt-btn-hover-color, var(--wabt-btn-state-color, var(--wabt-btn-color))));
	background: var(--wabt-btn-state-bg-hover, var(--wabt-btn-hover-bg, var(--wabt-btn-state-bg, var(--wabt-btn-bg))));
}

/*
 * A state nobody can buy. It is a real disabled button rather than a link
 * styled to look inert, so the browser stops it being pressed and a screen
 * reader says so.
 */
.wa-buy__button--gone,
.wa-buy__button--gone:hover,
.wa-buy__button--gone:focus-visible {
	/*
	 * :focus-visible belongs here for the same reason :hover does, and was
	 * missing. The button is deliberately aria-disabled rather than disabled so
	 * it stays in the tab order, so it is reachable by keyboard and the
	 * .wa-buy__button:focus-visible rule above was repainting a Sold Out button
	 * in the on-sale colors the moment somebody tabbed to it.
	 */
	color: var(--wabt-btn-state-color, var(--wabt-btn-gone-color));
	background: var(--wabt-btn-state-bg, var(--wabt-btn-gone-bg));
	cursor: default;
}

/*
 * 0.42.1. BUTTON SIZES OVER THE SITE KIT, BEHIND A SWITCH.
 *
 * Site Settings writes padding, radius and a typeface onto every <button> as
 * .elementor-kit-N button, one class and one element, which beats the one-class
 * rules in this file. These have three classes. They match only when Use these
 * sizes over the site button style is on, because a page saved before 0.42.1
 * was drawn with the kit's values and has to stay that way.
 */
.wa-buy-own-yes .wa-buy .wa-buy__button {
	padding: var(--wabt-btn-pad-top) var(--wabt-btn-pad-right) var(--wabt-btn-pad-bottom) var(--wabt-btn-pad-left);
}

.wa-buy-own-yes .wa-panel .wa-panel__close {
	padding: var(--wabt-close-pad-top) var(--wabt-close-pad-right) var(--wabt-close-pad-bottom) var(--wabt-close-pad-left);
	border-radius: var(--wabt-close-radius);
	font-family: inherit;
	font-size: var(--wabt-close-glyph);
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

.wa-buy__presale {
	margin: 10px 0 0;
	color: var(--wabt-note-color);
}

.wa-buy__join {
	color: inherit;
	text-decoration: underline;
}

/* ---- prices -------------------------------------------------------------- */

.wa-buy__prices {
	margin: var(--wabt-note-gap) 0 0;
	display: grid;
	gap: var(--wabt-price-gap);
}

.wa-buy__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.wa-buy__price-name {
	color: var(--wabt-price-name-color);
	margin: 0;
}

/* The leader line takes the slack, so the amounts line up down the right
   however long the ticket names are. */
.wa-buy__price::after {
	content: "";
	order: 1;
	flex: 1 1 auto;
	border-bottom: 1px solid var(--wabt-price-rule);
	transform: translateY(-0.25em);
}

.wa-buy__price-value {
	order: 2;
	margin: 0;
	color: var(--wabt-price-value-color);
	white-space: nowrap;
}

.wa-buy__price-note {
	display: block;
	opacity: 0.75;
	font-size: 0.85em;
}

.wa-buy__note {
	margin-top: var(--wabt-note-gap);
	color: var(--wabt-note-color);
}

/* ---- 0.43.0, the status line and the link in the message ---------------- */
/*
 * Free Admission, This Event Has Ended and Sign Up Closed print here, in place
 * of the button. Unstyled, the line reads like the button nobody can press: the
 * same padding, the not on sale colors and the same corners, all from the
 * custom properties on :root above, so a page that has styled its button gets
 * a matching line for free. The Status line controls write the element itself,
 * at a higher weight, and win.
 *
 * A div rather than a p, because the site kit's custom CSS puts
 * margin-top: 0 !important on every p, which a margin control could not undo.
 */
.wa-buy__status {
	display: block;
	margin: 0;
	padding: var(--wabt-btn-pad-top) var(--wabt-btn-pad-right) var(--wabt-btn-pad-bottom) var(--wabt-btn-pad-left);
	color: var(--wabt-btn-gone-color);
	background-color: var(--wabt-btn-gone-bg);
	border-radius: 10px;
	text-align: var(--wabt-btn-align);
}

.wa-buy__note-link {
	color: inherit;
	text-decoration: underline;
}

/*
 * The link inside the message needs its own ring.
 *
 * The Keyboard focus ring width control writes one selector,
 * .wa-buy .wa-buy__button:focus-visible, so a link anywhere else in the box was
 * left with the browser default. Chrome draws that in its own blue, which
 * measures 1.44:1 on the Music panel this box uses, which is no indicator at
 * all. The ring color control writes --wabt-focus-ring on .wa-buy, so this
 * follows whatever the box is set to and falls back to the text color.
 */
.wa-buy__note-link:focus-visible {
	outline: 2px solid var(--wabt-focus-ring, currentColor);
	outline-offset: 2px;
}

/* ---- the button icon ----------------------------------------------------- */
/*
 * Ported from kingdom-advisors-elementor-widgets/assets/css/button.css, the Osmo
 * "Button 009" choreography. Pure CSS, no JavaScript, two motions.
 *
 * ONE DELIBERATE DIFFERENCE FROM THE ORIGINAL, AND WHY IT IS REQUIRED
 * -------------------------------------------------------------------
 * In the KA pack the padding lives on an inner element that is stretched to the
 * button by a grid, so every number in the motion is measured from that padded
 * box. That is why the KA label shift carries a "+ pad-right - pad-left" term.
 *
 * This button cannot do that. Its padding, radius, border and shadow are already
 * on .wa-buy__button and four shipped controls point at that element, and its
 * default is a full-width button with centred text. A centred flex row breaks
 * both motions: on a 100% wide button the incoming icon would land at the far
 * left edge while the label sat in the middle, opening a gulf on hover.
 *
 * So the inner row hugs its own content and is placed by the button's existing
 * text-align. That is exactly the KA non-stretch case, where the padding terms
 * fall out of the arithmetic and the label shift is simply icon + gap.
 *
 * ONLY A BUYABLE BUTTON HAS ANY OF THIS. render() emits no icon spans for a
 * state nobody can buy, so every rule below has nothing to match on a Sold Out
 * button and none of them needs a --gone exclusion.
 */
.wa-buy__button--icon {
	/* The label is a child now, so stop the button collapsing its own line box. */
	line-height: 1;
}

.wa-buy__btn-inner {
	/*
	 * inline-flex, so the button's own text-align places it. That is what keeps
	 * the Full width switch's centre and left settings working with no second
	 * alignment control to keep in step.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wabt-btn-icon-gap);
	position: relative;
	vertical-align: middle;
	/*
	 * The clip is what hides the incoming icon at rest, not opacity alone. It has
	 * to be here rather than on the button, because the button draws the focus
	 * ring and clipping there would swallow it.
	 */
	overflow: hidden;
	text-align: left;
}

/* Pinned: label left, icon hard right, for a full-width button. */
.wa-buy__button--pin .wa-buy__btn-inner {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.wa-buy__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wabt-btn-icon-size);
	height: var(--wabt-btn-icon-size);
	flex: none;
	/*
	 * currentColor is the fallback, not the value.
	 *
	 * Left alone, the icon follows the button's own color, which already carries
	 * the per-state text color and its hover. That is the right default and it is
	 * what shipped. The variable in front of it is what lets a design give the
	 * icon a color of its own without touching the label.
	 *
	 * `currentColor` on the `color` property itself resolves to the inherited
	 * color, so this is not circular.
	 */
	color: var(--wabt-btn-state-icon, var(--wabt-btn-icon-color, currentColor));
	transition: translate 0.5s var(--wabt-btn-icon-ease), opacity 0.15s ease-out, color var(--wabt-btn-icon-fade) ease;
}

/*
 * Five deep, most specific first: this state's hover, the hover set for every
 * state, this state's resting color, the resting color set for every state, then
 * the button's own color. All five blank and the icon simply follows the label on
 * hover, exactly as it did before any of this existed.
 *
 * The shared hover deliberately sits AHEAD of this state's resting color, which
 * is the same precedence the label chain uses a few rules above. A hover somebody
 * set for every state is a statement about hovering; a resting color set for one
 * state is a statement about that state at rest. When both are present the one
 * about hovering wins, and the two chains agree with each other.
 */
.wa-buy__button--icon:is( :hover, :focus-visible ) .wa-buy__btn-icon {
	color: var(--wabt-btn-state-icon-hover, var(--wabt-btn-icon-hover, var(--wabt-btn-state-icon, var(--wabt-btn-icon-color, currentColor))));
}

.wa-buy__btn-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.wa-buy__btn-icon i {
	font-size: var(--wabt-btn-icon-size);
	line-height: 1;
}

/* The incoming icon is out of flow and parked off the left edge, so at rest the
   button reads as label + one icon on the right. */
.wa-buy__btn-icon.is--left {
	position: absolute;
	left: 0;
	opacity: 0;
	translate: calc(-1 * var(--wabt-btn-icon-travel)) 0;
}

.wa-buy__btn-label {
	flex: none;
	transition: translate 0.5s var(--wabt-btn-icon-ease);
}

/*
 * 0.42.3. THE COPIES FADE THROUGH THE GAP, AND NOTHING IS CUT ON A HARD LINE.
 *
 * Up to 0.42.2 the window that hides the waiting copy was exactly as big as the
 * thing it framed, the row for Slide Across and the icon's own box for Cycle
 * Down, and each copy traveled right up to that edge. So on every frame of the
 * motion both copies were sliced along a straight line in the open middle of the
 * button. An arrow hides that, because a line cut through a straight stem looks
 * like the end of the stem. A diagonal icon does not. Tim's ticket lost its
 * corners, and a loose chip of the leaving copy hung under the arriving one.
 *
 * While the motion plays, the window is now one gap bigger on each side of the
 * motion, and a mask feathers that gap, so a copy fades out as it leaves and
 * fades in as it arrives. The window grows by padding against an equal negative
 * margin, which leaves the margin box, and so the layout, exactly where it was.
 * Every waiting copy parks one icon plus one gap away, outside the bigger window.
 *
 * None of it applies at rest. A mask puts the row on a layer of its own, and at
 * a device pixel ratio of 1 a clip edge that moves lets the icon's outermost
 * antialiased pixels through where 0.42.2 cut them, so a button nobody is
 * hovering keeps the 0.42.2 window and paints exactly as it did. Slide Across
 * plays backwards for up to 0.5s when the pointer leaves, so its window waits
 * that long before it shrinks. A browser without transition-behavior drops the
 * mask at once, and the way back is then cut hard at the edge of the window, as
 * 0.42.2 was both ways. A gap of 0 is the 0.42.2 motion.
 */
.wa-buy__button--icon:not(.wa-buy__button--down) .wa-buy__btn-inner {
	box-sizing: border-box;
}

/* Slide Across, the default. Gated on a real pointer and on reduced-motion, so a
   touch device gets the clean resting state and nothing animates for somebody who
   has asked for less movement. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.wa-buy__button--icon:not(.wa-buy__button--down) .wa-buy__btn-inner {
		transition: margin 0s linear 0.5s, padding 0s linear 0.5s, width 0s linear 0.5s, -webkit-mask-image 0s linear 0.5s, mask-image 0s linear 0.5s;
		transition-behavior: allow-discrete;
	}

	.wa-buy__button--icon:not(.wa-buy__button--down):is( :hover, :focus-visible ) .wa-buy__btn-inner {
		margin-inline: calc(-1 * var(--wabt-btn-icon-gap));
		padding-inline: var(--wabt-btn-icon-gap);
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--wabt-btn-icon-gap), #000 calc(100% - var(--wabt-btn-icon-gap)), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 var(--wabt-btn-icon-gap), #000 calc(100% - var(--wabt-btn-icon-gap)), transparent 100%);
		transition-delay: 0s;
	}

	.wa-buy__button--pin:not(.wa-buy__button--down):is( :hover, :focus-visible ) .wa-buy__btn-inner {
		width: calc(100% + 2 * var(--wabt-btn-icon-gap));
	}

	/* The same list as .wa-buy__btn-icon, plus the wait before the incoming copy
	   goes back to the row's own left edge. */
	.wa-buy__button--icon:not(.wa-buy__button--down) .wa-buy__btn-icon.is--left {
		transition: translate 0.5s var(--wabt-btn-icon-ease), opacity 0.15s ease-out, color var(--wabt-btn-icon-fade) ease, left 0s linear 0.5s;
	}

	.wa-buy__button--icon:not(.wa-buy__button--down):is( :hover, :focus-visible ) .wa-buy__btn-label {
		translate: var(--wabt-btn-icon-travel) 0;
		transition: translate 0.5s 0.075s var(--wabt-btn-icon-ease);
	}

	.wa-buy__button--icon:not(.wa-buy__button--down):is( :hover, :focus-visible ) .wa-buy__btn-icon.is--left {
		/* The row's padding edge while it is padded, which is where the label starts. */
		left: var(--wabt-btn-icon-gap);
		translate: 0 0;
		opacity: 1;
		transition: translate 0.5s 0.075s var(--wabt-btn-icon-ease), opacity 0.15s 0.075s ease-out;
	}

	.wa-buy__button--icon:not(.wa-buy__button--down):is( :hover, :focus-visible ) .wa-buy__btn-icon.is--right {
		translate: var(--wabt-btn-icon-travel) 0;
		opacity: 0;
		transition: translate 0.5s 0.05s var(--wabt-btn-icon-ease), opacity 0.15s 0.075s ease-out;
	}
}

/*
 * Cycle Down, for a downward-pointing icon. The icon leaves through the bottom of
 * its own box while an identical one arrives from above and lands where the first
 * started, and the label does not move.
 *
 * @keyframes rather than a transition, deliberately, copied from the original. A
 * transition would run backwards on mouseout, and the whole point of this motion
 * is that it ends on the resting state and never rewinds.
 */
.wa-buy__button--down .wa-buy__btn-icon {
	overflow: hidden;
	overflow: clip;
}

.wa-buy__button--down .wa-buy__btn-icon.is--left {
	left: auto;
	right: 0;
	opacity: 1;
	translate: none;
}

/* The waiting copy parks one icon plus one gap below, outside the window both at
   rest and while hovered. 100% up to 0.42.2. */
.wa-buy__button--down .wa-buy__btn-icon.is--right > * { translate: 0 0; }
.wa-buy__button--down .wa-buy__btn-icon.is--left > *  { translate: 0 calc(100% + var(--wabt-btn-icon-gap)); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	/*
	 * 0.42.3. The window is the icon box plus one gap above and one below,
	 * feathered over that gap, for the reasons given above Slide Across. The box
	 * grows by padding against an equal negative margin, so it stays centered on
	 * the label exactly where it was and its content box is still one icon square.
	 * This motion never plays backwards, so all of it can go the moment the
	 * pointer does.
	 *
	 * The row stops clipping while hovered. Its only clip job is hiding the
	 * waiting copy of Slide Across, which this motion does not have, and it would
	 * cut the taller window flat at the top and bottom of the label.
	 */
	.wa-buy__button--down:is( :hover, :focus-visible ) .wa-buy__btn-inner {
		overflow: visible;
	}

	.wa-buy__button--down:is( :hover, :focus-visible ) .wa-buy__btn-icon {
		box-sizing: border-box;
		height: calc(var(--wabt-btn-icon-size) + 2 * var(--wabt-btn-icon-gap));
		margin-block: calc(-1 * var(--wabt-btn-icon-gap));
		padding-block: var(--wabt-btn-icon-gap);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--wabt-btn-icon-gap), #000 calc(100% - var(--wabt-btn-icon-gap)), transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 var(--wabt-btn-icon-gap), #000 calc(100% - var(--wabt-btn-icon-gap)), transparent 100%);
	}

	.wa-buy__button--down:is( :hover, :focus-visible ) .wa-buy__btn-icon.is--right > * {
		animation: wabt-btn-cycle-in var(--wabt-btn-icon-cycle) var(--wabt-btn-icon-ease);
	}

	.wa-buy__button--down:is( :hover, :focus-visible ) .wa-buy__btn-icon.is--left > * {
		animation: wabt-btn-cycle-out var(--wabt-btn-icon-cycle) var(--wabt-btn-icon-ease);
	}
}

/*
 * Neither has a fill-mode, because landing back on the base state is the point.
 * Each copy travels one icon plus one gap, the distance Slide Across already
 * uses, so it starts and ends outside the feathered window. One icon up to 0.42.2.
 */
@keyframes wabt-btn-cycle-in {
	from { translate: 0 calc(-100% - var(--wabt-btn-icon-gap)); }
	to   { translate: 0 0; }
}

@keyframes wabt-btn-cycle-out {
	from { translate: 0 0; }
	to   { translate: 0 calc(100% + var(--wabt-btn-icon-gap)); }
}

/* ---- the panel ----------------------------------------------------------- */

.wa-panel {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
	/*
	 * A drag that starts on the panel's heading, or on the dim area beside it,
	 * has nothing inside the dialog to scroll, so the browser hands it on to the
	 * page. overflow: hidden on the body stops the page moving, and it does not
	 * stop the overscroll that follows, which on Android is pull to refresh and
	 * reloads the page in the middle of somebody choosing a night. The list below
	 * already contains its own. This contains the rest of the dialog.
	 *
	 * The smooth scroll stylesheet sets the same value on anything carrying
	 * data-lenis-prevent, which panel.js puts on this dialog, so a page with
	 * smooth scroll and a page without it now behave alike.
	 */
	overscroll-behavior: contain;
}

.wa-panel::backdrop {
	background: var(--wabt-panel-backdrop, rgba(5, 5, 20, 0.55));
}

/*
 * The dialog fills the viewport and the surface sits against one edge, so a
 * click anywhere on the dialog but outside the surface is a light dismiss.
 */
.wa-panel[open] {
	display: flex;
	justify-content: flex-end;
}

.wa-panel[data-side="left"][open] {
	justify-content: flex-start;
}

.wa-panel__surface {
	display: flex;
	flex-direction: column;
	width: min(var(--wabt-panel-width), 100vw);
	height: 100%;
	padding: var(--wabt-panel-pad-top) var(--wabt-panel-pad-right) var(--wabt-panel-pad-bottom) var(--wabt-panel-pad-left);
	background: var(--wabt-panel-bg);
	box-sizing: border-box;
	overflow: hidden;
}

.wa-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.wa-panel__title {
	margin: 0;
	color: var(--wabt-panel-title-color);
}

/* Focus lands here on open, and an outline on a heading looks like an error
   rather than a cue, so it is suppressed. Focus is still where it should be. */
.wa-panel__title:focus {
	outline: none;
}

.wa-panel__close {
	flex: 0 0 auto;
	/*
	 * grid + place-items, where this was a bare button relying on line-height to
	 * centre its glyph. A padding control on that shape pushes the glyph off
	 * centre instead of insetting it, and a width and height that disagree with
	 * the font size leave it sitting high. Centring it properly is what makes the
	 * four new controls behave the way their labels promise.
	 */
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--wabt-close-w);
	height: var(--wabt-close-h);
	padding: var(--wabt-close-pad-top) var(--wabt-close-pad-right) var(--wabt-close-pad-bottom) var(--wabt-close-pad-left);
	color: var(--wabt-close-color, var(--wabt-panel-title-color));
	background: var(--wabt-close-bg);
	border: 0;
	border-radius: var(--wabt-close-radius);
	font-size: var(--wabt-close-glyph);
	line-height: 1;
	/* The size controls are independent, so an X larger than its button is one
	   slider drag away. Clip rather than let it spill past a rounded edge. */
	overflow: hidden;
	cursor: pointer;
}

.wa-panel__close:hover,
.wa-panel__close:focus-visible {
	color: var(--wabt-close-hover-color, var(--wabt-close-color, var(--wabt-panel-title-color)));
	background: var(--wabt-close-hover-bg);
}

.wa-panel__list {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wabt-card-gap);
	align-content: start;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.wa-panel__card {
	/* The anchor below stretches an overlay across this box, so it needs to be
	   the containing block. */
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 14px;
	padding: var(--wabt-card-pad-top) var(--wabt-card-pad-right) var(--wabt-card-pad-bottom) var(--wabt-card-pad-left);
	color: var(--wabt-card-state-color, var(--wabt-card-color));
	background: var(--wabt-card-state-bg, var(--wabt-card-bg));
	border-radius: 10px;
	transition: background-color 0.18s ease;
}

.wa-panel__card:hover {
	color: var(--wabt-card-state-color-hover, var(--wabt-card-hover-color, var(--wabt-card-state-color, var(--wabt-card-color))));
	background: var(--wabt-card-state-bg-hover, var(--wabt-card-hover-bg, var(--wabt-card-state-bg, var(--wabt-card-bg))));
}

/* Same rule in the panel: no hover response where there is nothing to press. */
.wa-panel__card--gone,
.wa-panel__card--gone:hover {
	color: var(--wabt-card-state-color, var(--wabt-card-gone-color));
	background: var(--wabt-card-state-bg, var(--wabt-card-gone-bg));
}

.wa-panel__action--gone {
	cursor: default;
	pointer-events: none;
}

.wa-buy__button--gone {
	pointer-events: auto;
}

.wa-panel__when {
	display: flex;
	flex-direction: column;
}

.wa-panel__day {
	font-weight: 600;
}

.wa-panel__hour {
	opacity: 0.8;
	font-size: 0.9em;
}

.wa-panel__note {
	grid-column: 1 / -1;
	margin: 2px 0 0;
	opacity: 0.85;
	font-size: 0.9em;
}

.wa-panel__action {
	color: var(--wabt-card-state-color, var(--wabt-card-action-color));
	text-decoration: none;
	white-space: nowrap;
}

/*
 * THE WHOLE CARD IS THE CLICK TARGET.
 *
 * The card already lit up on hover while only the small link at its right end
 * could be pressed, which is a hover promising something the rest of the row
 * could not keep. This stretches the link's own hit area across the card.
 *
 * Done with a pseudo-element on the EXISTING anchor rather than by wrapping the
 * card in a second link or by adding a click handler. That keeps exactly one
 * link per card in the accessibility tree, so a screen reader still announces
 * one target per night and the tab order is unchanged, and it stays a real
 * anchor, so middle-click and cmd-click still open a new tab.
 *
 * Scoped to a[...] deliberately. A card nobody can buy renders a <span>, not an
 * anchor, so it gets no overlay and stays exactly as unclickable as it was.
 */
a.wa-panel__action::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/*
 * No opacity here. It used to be 0.8, which stacked on an already-translucent
 * color and took the words "Sold Out" to 3.85:1 against a 4.5:1 requirement.
 * The state is the only thing on the card a low-vision reader needs, so it was
 * the hardest thing to read.
 */
/*
 * :not(--gone) is load-bearing.
 *
 * Without it this selector scores (0,3,0) against .wa-panel__action--gone at
 * (0,1,0) and wins wherever it sits in the file, so hovering a sold-out card
 * repainted the words "Sold Out" in the on-sale color. pointer-events: none is
 * on the action, not the card, so a gone card does still take :hover.
 *
 * That undid the contrast fix those words exist for, and it did it only while
 * the pointer was over them, which is the hardest kind of fault to catch.
 */
.wa-panel__card:hover .wa-panel__action:not(.wa-panel__action--gone) {
	color: var(--wabt-card-state-color-hover, var(--wabt-card-hover-color, var(--wabt-card-state-color, var(--wabt-card-action-color))));
}

.wa-panel__action--gone {
	color: var(--wabt-card-state-color, var(--wabt-card-gone-color));
}

/*
 * An explicit light ring, NOT currentColor.
 *
 * currentColor on a filled control is the label color, which contrasts with
 * the control rather than with what is behind it. On the purple panel that
 * produced a ring at 1.38:1, which is no indicator at all. White measures
 * 8.6:1 on this panel, and the two-tone version below covers a light panel too.
 */
.wa-panel__action:focus-visible,
.wa-panel__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
}

/*
 * With the whole card clickable, a ring around the two words at its right end
 * no longer shows what pressing Enter will hit. Move it to the card.
 *
 * Gated on :has() rather than assumed. Where it is unsupported the rule above
 * still draws the ring on the link, which is smaller than it should be but is
 * never missing. The colors are the ones measured in the accessibility pass:
 * white at 8.6:1 on this panel, with a dark outer ring so it also reads on a
 * light one.
 */
@supports selector(:has(*)) {
	.wa-panel__card:has(a.wa-panel__action:focus-visible) {
		outline: 2px solid #fff;
		outline-offset: 2px;
		box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
	}

	.wa-panel__card a.wa-panel__action:focus-visible {
		outline: none;
		box-shadow: none;
	}
}

/*
 * On a phone a side drawer leaves a useless sliver of page behind it, so it
 * becomes a bottom sheet. The safe-area inset keeps the last card clear of the
 * home indicator.
 */
@media (max-width: 767px) {
	/*
	 * THE DIALOG IS HELD TO THE VISIBLE SCREEN HERE, AND THE SHEET'S HEADING
	 * DEPENDS ON IT.
	 *
	 * A modal dialog sits in the top layer as a fixed box with top: 0, and its
	 * height: 100% resolves against the box fixed elements are sized from. Phone
	 * browsers have not agreed on whether that box includes the strip a toolbar is
	 * covering at the moment. Where it does, the dialog is taller than what can be
	 * seen, and the sheet is anchored to the dialog's bottom edge, so the extra
	 * height lands on top of the sheet and lifts its heading and close button past
	 * the top of the screen.
	 *
	 * 100dvh is the visible height whatever the toolbars are doing. With the top
	 * at 0 and that height, the dialog's bottom edge is the bottom of the screen,
	 * and a sheet capped at 100% of the dialog cannot reach higher than its top.
	 * Phone widths only, because a desktop browser has no toolbar that comes and
	 * goes and the side drawer there fills the dialog anyway. A browser with no
	 * dvh drops the second line and keeps the first.
	 */
	.wa-panel {
		height: 100%;
		height: 100dvh;
	}

	.wa-panel[open],
	.wa-panel[data-side="left"][open] {
		align-items: flex-end;
		justify-content: stretch;
	}

	/*
	 * Measured in dvh. On a phone vh is the height of the screen as if the
	 * browser's toolbars were hidden, so a 95vh sheet with the address bar showing
	 * is taller than the space it has, which pushes its own title and close
	 * button up under the bar where nobody can tap them. dvh tracks what is
	 * actually visible.
	 *
	 * The cap subtracts the top safe area, which is zero unless the theme opts in
	 * to drawing under a notch, and on a theme that does, a full height sheet
	 * would otherwise put the close button behind the status bar.
	 *
	 * The first height is for a browser with no dvh. A custom property holding
	 * 95dvh is valid anywhere, and the height built from it only fails once it is
	 * computed, which leaves height at auto rather than falling back to an earlier
	 * line. The panel list would then grow past the screen and stop scrolling, so
	 * the dvh version sits behind @supports and the vh line is what such a browser
	 * keeps.
	 */
	.wa-panel__surface {
		width: 100%;
		height: min(95vh, calc(100% - env(safe-area-inset-top, 0px)));
		padding-bottom: calc(var(--wabt-panel-pad-bottom) + env(safe-area-inset-bottom, 0px));
		border-radius: 18px 18px 0 0;
	}

	@supports (height: 1dvh) {
		.wa-panel__surface {
			height: min(var(--wabt-panel-sheet-h, 95dvh), calc(100% - env(safe-area-inset-top, 0px)));
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa-buy__button,
	.wa-panel__card {
		transition: none;
	}
}

.wa-buy .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}