/*
 * Mobile Button, the sticky bar along the bottom of the screen.
 *
 * 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, focus,
 * pressed and per state properties chain back to the resting pair, which is what
 * makes "leave it blank to keep the normal color" true.
 *
 * The panel this bar opens is styled by buy-tickets.css, which the widget names
 * as a dependency. There is one panel per page and it belongs to that
 * stylesheet whichever button opened it.
 */

/*
 * THE DEFAULTS ARE ON :root AND NOT ON .wa-mbar, for the reason recorded at
 * length in buy-tickets.css. Elementor writes a control's value onto the
 * .elementor-element wrapper, and .wa-mbar is rendered inside it. Custom
 * properties resolve by proximity in the tree rather than by specificity, so
 * defaults sitting on .wa-mbar would be nearer than the wrapper and would beat
 * every color the editor sets.
 */
:root {
	--wamb-z: 9000;

	--wamb-bar-bg: transparent;
	--wamb-bar-pad-top: 12px;
	--wamb-bar-pad-right: 12px;
	--wamb-bar-pad-bottom: 12px;
	--wamb-bar-pad-left: 12px;
	--wamb-bar-width: 100%;
	--wamb-bar-justify: center;

	--wamb-btn-display: flex;
	--wamb-btn-width: 100%;
	--wamb-btn-justify: center;
	--wamb-btn-min-h: 48px;
	--wamb-btn-pad-top: 16px;
	--wamb-btn-pad-right: 20px;
	--wamb-btn-pad-bottom: 16px;
	--wamb-btn-pad-left: 20px;
	--wamb-btn-press: 98%;

	--wamb-btn-color: #fff;
	--wamb-btn-bg: #0a8350;
	--wamb-gone-color: #3f3f46;
	--wamb-gone-bg: #e4e4e7;
	--wamb-focus-ring: #fff;

	--wamb-icon-size: 18px;
	--wamb-icon-gap: 10px;

	--wamb-slide: 0.32s;
	--wamb-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---- the bar ------------------------------------------------------------- */

.wa-mbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--wamb-z);
	box-sizing: border-box;
	/*
	 * Hidden until the script says which breakpoint we are on. The bar is
	 * revealed by scrolling, so it has never been something a visitor with no
	 * JavaScript could see, and starting from display: none means it cannot flash
	 * across a desktop screen on the way to being switched off there.
	 */
	display: none;
	justify-content: var(--wamb-bar-justify);
	padding: var(--wamb-bar-pad-top) var(--wamb-bar-pad-right)
		calc(var(--wamb-bar-pad-bottom) + env(safe-area-inset-bottom, 0px))
		var(--wamb-bar-pad-left);
	background: var(--wamb-bar-bg);
	/*
	 * 110 percent rather than 100, so a box shadow under the bar clears the edge
	 * of the screen with it instead of hanging there as a gray line.
	 */
	transform: translateY(110%);
	/*
	 * visibility, not opacity, and this is the part that keeps the bar out of the
	 * way rather than merely out of sight. A parked element that is still visible
	 * to the browser stays in the tab order and in the accessibility tree, so
	 * somebody tabbing through the page would land on a button sitting below the
	 * bottom of the screen with no way to tell where focus had gone.
	 *
	 * visibility transitions discretely: going out it flips at the end of the
	 * slide, coming in it flips at the start, which is exactly what is wanted at
	 * both ends with no JavaScript timing anything.
	 */
	visibility: hidden;
	pointer-events: none;
	transition: transform var(--wamb-slide) var(--wamb-ease), visibility var(--wamb-slide);
}

/* This breakpoint is switched on, so the bar exists. */
.wa-mbar.is--live {
	display: flex;
}

/* Past the scroll distance, and moving down. */
.wa-mbar.is--in {
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
}

.wa-mbar__inner {
	width: var(--wamb-bar-width);
	max-width: var(--wamb-bar-max-width, none);
}

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

.wa-mbar__button {
	display: var(--wamb-btn-display);
	align-items: center;
	justify-content: var(--wamb-btn-justify);
	gap: var(--wamb-icon-gap);
	box-sizing: border-box;
	width: var(--wamb-btn-width);
	/* A floor, so a small type size and tight padding cannot produce a target
	   smaller than a thumb. */
	min-height: var(--wamb-btn-min-h);
	padding: var(--wamb-btn-pad-top) var(--wamb-btn-pad-right) var(--wamb-btn-pad-bottom) var(--wamb-btn-pad-left);
	color: var(--wamb-state-color, var(--wamb-btn-color));
	background: var(--wamb-state-bg, var(--wamb-btn-bg));
	border: 0;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, scale 0.12s ease;
}

/* This state's color, then the shared one. Set neither and the button keeps its
   resting pair, which is what makes every box on the Hover tab optional. */
.wa-mbar__button:hover {
	color: var(--wamb-hover-color, var(--wamb-state-color, var(--wamb-btn-color)));
	background: var(--wamb-hover-bg, var(--wamb-state-bg, var(--wamb-btn-bg)));
}

/* Focus falls back through the hover pair before the resting one, so a design
   that only sets hover still answers a keyboard. */
.wa-mbar__button:focus-visible {
	color: var(--wamb-focus-color, var(--wamb-hover-color, var(--wamb-state-color, var(--wamb-btn-color))));
	background: var(--wamb-focus-bg, var(--wamb-hover-bg, var(--wamb-state-bg, var(--wamb-btn-bg))));
}

.wa-mbar__button:active {
	color: var(--wamb-active-color, var(--wamb-hover-color, var(--wamb-state-color, var(--wamb-btn-color))));
	background: var(--wamb-active-bg, var(--wamb-hover-bg, var(--wamb-state-bg, var(--wamb-btn-bg))));
	scale: var(--wamb-btn-press);
}

/*
 * The ring is in a rule of its own, after the color rules and before the
 * not-on-sale block, so that block can repaint a Sold Out button without
 * taking the focus indicator with it. A white ring with a dark halo reads on a
 * light page and on a dark one, which currentColor on a filled button does not.
 */
.wa-mbar__button:focus-visible {
	outline: 2px solid var(--wamb-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55);
}

/*
 * A state nobody can buy holds its color through hover, focus and press, and
 * the squeeze is dropped with them. Answering a finger with movement is how a
 * button says it did something, and this one did nothing.
 *
 * :focus-visible is in this list deliberately. The button is aria-disabled
 * rather than disabled so it stays reachable, which means it does take focus,
 * and without this line the focus rule above was repainting a Sold Out bar in
 * the on sale colors the moment somebody tabbed to it.
 */
.wa-mbar__button--gone,
.wa-mbar__button--gone:hover,
.wa-mbar__button--gone:focus-visible,
.wa-mbar__button--gone:active {
	color: var(--wamb-state-color, var(--wamb-gone-color));
	background: var(--wamb-state-bg, var(--wamb-gone-bg));
	scale: 1;
	cursor: default;
}

/* 0.42.1. Three classes beat the site kit's .elementor-kit-N button, only behind the switch. See buy-tickets.css. */
.wa-mbar-own-yes .wa-mbar .wa-mbar__button {
	padding: var(--wamb-btn-pad-top) var(--wamb-btn-pad-right) var(--wamb-btn-pad-bottom) var(--wamb-btn-pad-left);
}

.wa-mbar__label {
	/* The words do not shrink when the icon is pinned to the far edge. */
	flex: 0 1 auto;
}

/* ---- the icon ------------------------------------------------------------ */
/*
 * No motion here at all, which is the one thing this button does not take from
 * its sibling on the page. That icon slides across on hover; a thumb has no
 * hover, and animating on tap competes with the panel already sliding up.
 */

.wa-mbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--wamb-icon-size);
	height: var(--wamb-icon-size);
	/* currentColor is the fallback, not the value, so an untouched icon follows
	   the label through every state. */
	color: var(--wamb-icon-color, currentColor);
}

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

.wa-mbar__icon i {
	font-size: var(--wamb-icon-size);
	line-height: 1;
}

/* ---- reduced motion ------------------------------------------------------ */
/*
 * The bar appears and disappears instead of sliding. The transform still moves
 * it off the screen, which is what keeps it out of the tab order, it simply
 * arrives there in one step.
 */
@media (prefers-reduced-motion: reduce) {
	.wa-mbar,
	.wa-mbar__button {
		transition: none;
	}

	.wa-mbar__button:active {
		scale: 1;
	}
}

/* ---- the editing canvas -------------------------------------------------- */
/*
 * With Elementor open the bar sits in the flow where it was placed, visible and
 * still. Fixed, hidden and waiting for a scroll event is a widget that cannot be
 * seen or selected, and a widget that cannot be selected cannot be styled. The
 * script also leaves an editing bar alone, so nothing fights over these.
 *
 * After the rules above, so equal specificity resolves in favor of this one.
 */
.wa-mbar--editing {
	position: relative;
	right: auto;
	bottom: auto;
	left: auto;
	display: flex;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	transition: none;
}

/* Said only on the editing canvas, where an empty widget is almost impossible
   to select. */
.wa-mbar-hint {
	display: block;
	padding: 10px 12px;
	border: 1px dashed currentColor;
	border-radius: 6px;
	opacity: 0.7;
	font-size: 13px;
	line-height: 1.4;
}