/**
 * The Book VIP button on a single event page.
 *
 * It reuses the theme's own .btn class, so shape, padding, radius, weight and
 * transitions all come from the site — only the colours are ours.
 *
 * Buy Tickets on these pages is a purple fill with white text, inverting to a white
 * fill with dark text on hover. Book VIP is the reverse of that: white with purple
 * text at rest, purple with white text on hover. Sitting side by side, the pair reads
 * as one control split in two, and each still obeys the site-wide rule that a button
 * swaps its fill and label rather than darkening.
 *
 * NOTE ON THE ACCENT. The purple on Buy Tickets is not declared in the parent theme,
 * the child theme, either YellowPencil stylesheet, vex-toolkit, or the theme's inline
 * output — it could not be read from the files. --vipx-book-accent below is the site
 * accent used everywhere else. If it does not match Buy Tickets exactly, this one
 * value is the only thing to change.
 */

.buttons-holder .vipx-book {
	--vipx-book-accent: #3c2078;
	--vipx-book-light: #ffffff;

	background-color: var(--vipx-book-light);
	color: var(--vipx-book-accent);
	border: 2px solid var(--vipx-book-accent);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.buttons-holder .vipx-book:hover,
.buttons-holder .vipx-book:focus-visible {
	background-color: var(--vipx-book-accent);
	color: var(--vipx-book-light);
	border-color: var(--vipx-book-accent);
}

/* The theme wraps some button labels in a span and colours it separately, which is
   what left an earlier button's text the wrong colour. Cover both. */
.buttons-holder .vipx-book span {
	color: inherit;
}

/* Sits beside Buy Tickets rather than under it. */
.buttons-holder .vipx-book {
	margin-left: 12px;
}

@media (max-width: 600px) {
	.buttons-holder .vipx-book {
		margin-left: 0;
		margin-top: 10px;
	}
}

/* Sold out is a label, not a link: no hover, visibly inactive. */
.buttons-holder .vipx-book--out {
	/*
	 * Red, from the site's own palette rather than an invented one: #a8443f is the
	 * warning / low-stock colour already used elsewhere on the site.
	 *
	 * The label uses a lighter tint of that same hue. #a8443f as text on this
	 * near-black page reaches only about 2.8:1, which is below the readable bar and
	 * would have made the label harder to read than the grey it replaces. A border
	 * does not have to clear a text-contrast bar, so it keeps the base colour.
	 *
	 * Two values, one hue — change --vipx-out-red and the tint follows it by eye.
	 */
	/* Solid red, white label — the same loud treatment as the booking page's card
	   (the owner's rule, 2026-09-03: every sold-out control is red, everywhere). */
	--vipx-out-red: #c8102e;

	background-color: var(--vipx-out-red);
	color: #ffffff;
	border-color: var(--vipx-out-red);
	font-weight: 700;
	cursor: not-allowed;
}

.buttons-holder .vipx-book--out:hover,
.buttons-holder .vipx-book--out:focus-visible {
	background-color: var(--vipx-out-red);
	color: #ffffff;
	border-color: var(--vipx-out-red);
}

@media (prefers-reduced-motion: reduce) {
	.buttons-holder .vipx-book {
		transition: none;
	}
}

/* Waiting to open.
   Deliberately NOT the red of Sold out: red says "you have missed it", and this says the
   opposite — come back. Uses the site's accent so it reads as information rather than a
   refusal, and keeps the not-allowed cursor because there is nothing to press yet. */
.buttons-holder .vipx-book--soon {
	--vipx-soon-accent: #3c2078;

	background-color: transparent;
	color: var(--vipx-soon-accent);
	border-color: var(--vipx-soon-accent);
	cursor: default;
	opacity: .85;
}

.buttons-holder .vipx-book--soon:hover,
.buttons-holder .vipx-book--soon:focus-visible {
	background-color: transparent;
	color: var(--vipx-soon-accent);
	border-color: var(--vipx-soon-accent);
}

/* Join the waitlist: sits beside the Sold Out label and is a real link, styled like
   Book VIP (white with the accent, inverting on hover) so it reads as the way forward
   rather than another dead end. */
.buttons-holder .vipx-book--wait {
	--vipx-book-accent: #3c2078;
	--vipx-book-light: #ffffff;
	background-color: var(--vipx-book-light);
	color: var(--vipx-book-accent);
	border-color: var(--vipx-book-accent);
	cursor: pointer;
}
.buttons-holder .vipx-book--wait:hover,
.buttons-holder .vipx-book--wait:focus-visible {
	background-color: var(--vipx-book-accent);
	color: var(--vipx-book-light);
}