/*
 * Monster Bookings picker.
 * Colours are CSS variables so a theme can restyle without touching the plugin:
 *   .mb-picker { --mb-tier0: #12617f; --mb-good: #35c24a; ... }
 * Text colours inherit from the theme, so it works on dark and light sites.
 * Settings > Appearance > Style adds the mb-picker--panel-*, --corners-*, --status-*,
 * --size-*, --font, --text and --shadow classes (picker.js, from data.style).
 */
.mb-picker {
	--mb-tier0: #12617f;
	--mb-tier1: #ff6a00;
	--mb-tier2: #f5333f;
	--mb-tier3: #8e44ad;
	--mb-good: #2fb344;
	--mb-low: #f59f00;
	--mb-out: #d63939;
	--mb-line: rgba(128, 128, 128, 0.35);
	--mb-soft: rgba(128, 128, 128, 0.12);
	--mb-date-text: #fff;
	--mb-radius: 10px;
	--mb-radius-sm: 8px;
	--mb-panel-bg: transparent;
	--mb-shadow: none;
	--mb-accent: var(--mb-selected, var(--mb-tier0));
	display: block;
	line-height: 1.45;
	margin: 0 0 24px;
	max-width: 100%;
}

.mb-picker *,
.mb-picker *::before,
.mb-picker *::after {
	box-sizing: border-box;
}

/* Themes style every <button>. The picker's own buttons (dates, times, steppers) should not
   pick that up; "Select" and "Add to basket" carry .button and follow the theme on purpose. */
.mb-picker :where(button:not(.button)) {
	background-image: none;
	box-shadow: none;
	font-family: inherit;
	letter-spacing: normal;
	line-height: 1.25;
	text-shadow: none;
	text-transform: none;
}

.mb-picker__empty {
	font-style: italic;
}

/* Tickets off sale: a message or a countdown, and the "notify me" box (SalesNotify.php) */
.mb-offsale {
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	padding: 20px;
	text-align: center;
}

.mb-offsale p {
	margin: 0 0 14px;
}

.mb-offsale__when {
	font-weight: 700;
}

.mb-offsale__count {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 0 16px;
}

.mb-offsale__unit {
	background: var(--mb-soft);
	border-radius: var(--mb-radius-sm);
	font-size: 0.8em;
	min-width: 72px;
	padding: 10px 8px;
}

.mb-offsale__unit strong {
	display: block;
	font-size: 2em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.mb-offsale__form {
	margin: 0 auto;
	max-width: 460px;
}

.mb-offsale__label {
	display: block;
	font-weight: 700;
	margin: 0 0 8px;
}

.mb-offsale__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mb-offsale__row input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
}

.mb-offsale__trap {
	height: 1px;
	left: -9999px;
	position: absolute;
	width: 1px;
}

.mb-offsale .mb-offsale__small {
	font-size: 0.8em;
	margin: 10px 0 0;
	opacity: 0.8;
}

.mb-offsale .mb-offsale__done {
	color: var(--mb-good);
	font-weight: 700;
	margin: 0;
}

.mb-offsale__error {
	color: var(--mb-out);
}

/* A date or time was chosen while off sale: draw the eye to the message. */
.mb-offsale.is-nudged {
	animation: mb-offsale-nudge 1.2s ease-out;
}

@keyframes mb-offsale-nudge {
	0% { box-shadow: 0 0 0 0 var(--mb-accent); }
	30% { box-shadow: 0 0 0 4px var(--mb-accent); }
	100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.mb-offsale.is-nudged {
		animation: none;
		outline: 3px solid var(--mb-accent);
	}
}

/* Availability wording */
.mb-level {
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mb-level--good { color: var(--mb-good); }
.mb-level--low { color: var(--mb-low); }
.mb-level--sold_out,
.mb-level--unavailable { color: var(--mb-out); }

/* ---------------------------------------------------------------- calendar */

.mb-cal {
	border: 1px solid var(--mb-line);
	border-bottom: 0;
	border-right: 0;
}

.mb-cal__row {
	display: grid;
	grid-template-columns: repeat(var(--mb-cols, 7), minmax(0, 1fr));
}

.mb-cal__head {
	background: var(--mb-soft);
	border-bottom: 1px solid var(--mb-line);
	border-right: 1px solid var(--mb-line);
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 8px 4px;
	text-align: center;
	text-transform: uppercase;
}

.mb-cal__month {
	background: var(--mb-soft);
	border-bottom: 1px solid var(--mb-line);
	border-right: 1px solid var(--mb-line);
	font-weight: 700;
	padding: 6px 10px;
}

.mb-cal__cell {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--mb-line);
	border-right: 1px solid var(--mb-line);
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	margin: 0;
	min-height: 84px;
	padding: 0;
	text-align: center;
	width: 100%;
}

.mb-cal__cell--empty {
	cursor: default;
}

.mb-cal__date {
	align-items: center;
	color: var(--mb-date-text, #fff);
	display: flex;
	flex: 1;
	font-size: 1.15em;
	font-weight: 700;
	justify-content: center;
	padding: 12px 4px;
	width: 100%;
}

.mb-cal__cell--tier0 .mb-cal__date { background: var(--mb-tier0); }
.mb-cal__cell--tier1 .mb-cal__date { background: var(--mb-tier1); }
.mb-cal__cell--tier2 .mb-cal__date { background: var(--mb-tier2); }
.mb-cal__cell--tier3 .mb-cal__date { background: var(--mb-tier3); }

.mb-cal__status {
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 8px 2px;
	text-transform: uppercase;
	width: 100%;
}

.mb-cal__cell--good .mb-cal__status { color: var(--mb-good); }
.mb-cal__cell--low .mb-cal__status { color: var(--mb-low); }
.mb-cal__cell--sold_out .mb-cal__status,
.mb-cal__cell--unavailable .mb-cal__status { color: var(--mb-out); }

.mb-cal__cell[disabled] {
	cursor: not-allowed;
}

.mb-cal__cell[disabled] .mb-cal__date {
	filter: grayscale(1);
	opacity: 0.45;
	text-decoration: line-through;
}

.mb-cal__cell:not([disabled]):hover .mb-cal__date,
.mb-cal__cell:focus-visible .mb-cal__date {
	filter: brightness(1.15);
}

.mb-cal__cell {
	position: relative;
}

.mb-cal__cell.is-selected::after {
	border: 4px solid var(--mb-selected, currentColor);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.mb-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}

.mb-legend__item {
	color: var(--mb-date-text, #fff);
	font-size: 0.85em;
	font-weight: 600;
	padding: 6px 12px;
}

.mb-legend__item--tier0 { background: var(--mb-tier0); }
.mb-legend__item--tier1 { background: var(--mb-tier1); }
.mb-legend__item--tier2 { background: var(--mb-tier2); }
.mb-legend__item--tier3 { background: var(--mb-tier3); }

/* Buttons only take the plugin's colour when one has been chosen in Settings. */
.mb-picker--buttons .mb-row__select:not([disabled]),
.mb-picker--buttons .mb-tickets__submit:not([disabled]) {
	background: var(--mb-btn-bg) !important;
	border-color: var(--mb-btn-bg) !important;
	color: var(--mb-btn-text, #fff) !important;
}

.mb-picker--buttons .mb-row__select[disabled] {
	background: transparent !important;
	border: 1px solid var(--mb-out) !important;
	color: var(--mb-out) !important;
}

/* ------------------------------------------------------------------- times */

.mb-times {
	margin-top: 20px;
}

.mb-times__title {
	font-size: 1.1em;
	font-weight: 700;
	margin-bottom: 10px;
}

.mb-times__title small {
	display: block;
	font-size: 0.75em;
	font-weight: 400;
	opacity: 0.75;
}

.mb-times__grid {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.mb-time {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 2px solid var(--mb-line);
	border-radius: 8px;
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 2px;
	min-height: 58px;
	justify-content: center;
	padding: 8px 6px;
}

.mb-time__label {
	font-size: 1.05em;
	font-weight: 700;
}

.mb-time:not([disabled]):hover,
.mb-time:focus-visible {
	border-color: currentColor;
}

.mb-time.is-selected {
	background: var(--mb-soft);
	border-color: var(--mb-good);
}

.mb-time[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.mb-time[disabled] .mb-time__label {
	text-decoration: line-through;
}

/* -------------------------------------------------------------------- list */

.mb-list__year {
	font-size: 1.4em;
	font-weight: 700;
	margin: 24px 0 0;
}

.mb-list__month {
	border-bottom: 2px solid var(--mb-line);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 18px 0 0;
	padding: 0 0 6px 8px;
	text-transform: uppercase;
}

.mb-row {
	border-bottom: 1px solid var(--mb-line);
}

.mb-row__main {
	align-items: center;
	display: grid;
	gap: 8px 14px;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	padding: 12px 8px;
}

.mb-row__when small {
	display: block;
	opacity: 0.75;
}

.mb-row__price {
	font-weight: 700;
	white-space: nowrap;
}

.mb-row .mb-level {
	min-width: 96px;
	text-align: right;
}

.mb-row__select {
	min-height: 44px;
	min-width: 104px;
}

.mb-row--sold_out .mb-row__when,
.mb-row--sold_out .mb-row__price,
.mb-row--unavailable .mb-row__when,
.mb-row--unavailable .mb-row__price {
	opacity: 0.5;
}

.mb-row.is-selected {
	background: var(--mb-soft);
}

.mb-row__mount:empty {
	display: none;
}

.mb-row__mount {
	padding: 0 8px 12px;
}

.mb-passes {
	margin-top: 24px;
}

.mb-passes__title {
	border-bottom: 2px solid var(--mb-line);
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0 0 6px 8px;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- timetable */

/* A row per date, a column per show time. Same colours as the calendar. */
.mb-tt {
	border: 1px solid var(--mb-line);
	border-bottom: 0;
	border-right: 0;
}

.mb-tt__row {
	display: grid;
	grid-template-columns: minmax(7.5em, 1.2fr) repeat(var(--mb-cols, 2), minmax(0, 1fr));
}

/* Times keep their own case ("10:00am"), unlike the calendar's weekday heads. */
.mb-tt__head {
	background: var(--mb-soft);
	border-bottom: 1px solid var(--mb-line);
	border-right: 1px solid var(--mb-line);
	font-size: 1.05em;
	font-weight: 700;
	padding: 8px 4px;
	text-align: center;
}

.mb-tt__head--date {
	padding-left: 14px;
	text-align: left;
}

.mb-tt__month {
	background: var(--mb-soft);
	border-bottom: 1px solid var(--mb-line);
	border-right: 1px solid var(--mb-line);
	font-weight: 700;
	padding: 6px 14px;
}

.mb-tt__date {
	align-items: center;
	border-bottom: 1px solid var(--mb-line);
	border-right: 1px solid var(--mb-line);
	color: var(--mb-date-text, #fff);
	display: flex;
	flex-wrap: wrap;
	font-size: 1.05em;
	font-weight: 700;
	gap: 0 0.3em;
	min-height: 60px;
	padding: 10px 14px;
}

.mb-tt__date--tier0 { background: var(--mb-tier0); }
.mb-tt__date--tier1 { background: var(--mb-tier1); }
.mb-tt__date--tier2 { background: var(--mb-tier2); }
.mb-tt__date--tier3 { background: var(--mb-tier3); }

.mb-tt__day--sold_out .mb-tt__date,
.mb-tt__day--unavailable .mb-tt__date {
	filter: grayscale(1);
	opacity: 0.45;
	text-decoration: line-through;
}

.mb-tt__wd--short {
	display: none;
}

.mb-tt__cell {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--mb-line);
	border-radius: 0;
	border-right: 1px solid var(--mb-line);
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 2px;
	justify-content: center;
	margin: 0;
	min-height: 60px;
	padding: 6px 4px;
	position: relative;
	text-align: center;
	width: 100%;
}

.mb-tt__time {
	display: none;
	font-weight: 700;
}

.mb-tt__status {
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mb-tt__cell--good .mb-tt__status { color: var(--mb-good); }
.mb-tt__cell--low .mb-tt__status { color: var(--mb-low); }
.mb-tt__cell--sold_out .mb-tt__status,
.mb-tt__cell--unavailable .mb-tt__status { color: var(--mb-out); }

.mb-tt__cell--none {
	cursor: default;
	opacity: 0.4;
}

.mb-tt__cell[disabled] {
	cursor: not-allowed;
}

.mb-tt__cell[disabled] .mb-tt__time {
	opacity: 0.5;
	text-decoration: line-through;
}

.mb-tt__cell:not([disabled]):not(.mb-tt__cell--none):hover,
.mb-tt__cell:focus-visible {
	background: var(--mb-soft);
}

.mb-tt__cell.is-selected {
	background: var(--mb-soft);
}

.mb-tt__cell.is-selected::after {
	border: 4px solid var(--mb-accent);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.mb-tt__day.is-selected .mb-tt__mount {
	background: var(--mb-soft);
}

.mb-tt .mb-tt__mount {
	border-bottom: 1px solid var(--mb-line);
	border-right: 1px solid var(--mb-line);
	padding: 0 12px 12px;
}

.mb-tt .mb-tt__mount:empty {
	display: none;
}

/* Many times a day: each date's times wrap underneath it as buttons. */
.mb-tt--stack .mb-tt__row--head {
	display: none;
}

.mb-tt--stack .mb-tt__row {
	border-bottom: 1px solid var(--mb-line);
	border-right: 1px solid var(--mb-line);
	gap: 8px;
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	padding: 0 8px 8px;
}

.mb-tt--stack .mb-tt__date {
	border: 0;
	grid-column: 1 / -1;
	margin: 0 -8px;
	min-height: 0;
}

.mb-tt--stack .mb-tt__cell {
	border: 2px solid var(--mb-line);
	border-radius: 8px;
	min-height: 58px;
}

.mb-tt--stack .mb-tt__cell--none {
	display: none;
}

.mb-tt--stack .mb-tt__time {
	display: block;
}

.mb-tt--stack .mb-tt__cell.is-selected {
	border-color: var(--mb-accent);
}

.mb-tt--stack .mb-tt__cell.is-selected::after {
	display: none;
}

@media (max-width: 600px) {
	.mb-tt__row {
		grid-template-columns: minmax(5.5em, 1.1fr) repeat(var(--mb-cols, 2), minmax(0, 1fr));
	}

	.mb-tt__head {
		font-size: 0.9em;
	}

	.mb-tt__head--date {
		padding-left: 10px;
	}

	.mb-tt__date {
		font-size: 1em;
		padding: 8px 10px;
	}

	.mb-tt__wd {
		display: none;
	}

	.mb-tt__wd--short {
		display: inline;
	}

	.mb-tt__status {
		font-size: 0.62em;
		letter-spacing: 0;
	}

	.mb-tt .mb-tt__mount {
		padding: 0 8px 8px;
	}

	.mb-tt--many .mb-tt__row--head {
		display: none;
	}

	.mb-tt--many .mb-tt__row {
		border-bottom: 1px solid var(--mb-line);
		border-right: 1px solid var(--mb-line);
		gap: 8px;
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		padding: 0 8px 8px;
	}

	.mb-tt--many .mb-tt__date {
		border: 0;
		grid-column: 1 / -1;
		margin: 0 -8px;
		min-height: 0;
	}

	.mb-tt--many .mb-tt__cell {
		border: 2px solid var(--mb-line);
		border-radius: 8px;
		min-height: 58px;
	}

	.mb-tt--many .mb-tt__cell--none {
		display: none;
	}

	.mb-tt--many .mb-tt__time {
		display: block;
	}

	.mb-tt--many .mb-tt__status {
		font-size: 0.7em;
	}

	.mb-tt--many .mb-tt__cell.is-selected {
		border-color: var(--mb-accent);
	}

	.mb-tt--many .mb-tt__cell.is-selected::after {
		display: none;
	}
}

/* --------------------------------------------------- tickets and steppers */

.mb-tickets {
	border: 2px solid var(--mb-line);
	border-radius: 10px;
	margin-top: 16px;
	padding: 14px;
}

.mb-tickets__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.mb-tickets__when {
	font-size: 1.05em;
	font-weight: 700;
}

.mb-type {
	align-items: center;
	border-top: 1px solid var(--mb-line);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 10px 0;
}

.mb-type__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mb-type__name {
	font-size: 1.05em;
	font-weight: 700;
}

.mb-type__price {
	opacity: 0.85;
}

.mb-type__left {
	color: var(--mb-out);
	font-size: 0.85em;
	font-weight: 600;
}

.mb-stepper {
	align-items: stretch;
	display: flex;
	flex: 0 0 auto;
}

.mb-stepper__btn {
	appearance: none;
	background: var(--mb-soft);
	border: 2px solid var(--mb-line);
	color: inherit;
	cursor: pointer;
	font-size: 26px;
	font-weight: 700;
	height: 52px;
	line-height: 1;
	margin: 0;
	padding: 0;
	touch-action: manipulation;
	user-select: none;
	width: 52px;
}

.mb-stepper__btn--minus { border-radius: var(--mb-radius-sm) 0 0 var(--mb-radius-sm); }
.mb-stepper__btn--plus { border-radius: 0 var(--mb-radius-sm) var(--mb-radius-sm) 0; }

.mb-stepper__btn:not([disabled]):hover,
.mb-stepper__btn:focus-visible {
	border-color: currentColor;
}

.mb-stepper__btn:not([disabled]):active {
	transform: scale(0.96);
}

.mb-stepper__btn[disabled] {
	cursor: not-allowed;
	opacity: 0.35;
}

.mb-picker input.mb-stepper__input {
	appearance: textfield;
	-moz-appearance: textfield;
	background: transparent;
	border: 2px solid var(--mb-line);
	border-left: 0;
	border-radius: 0;
	border-right: 0;
	color: inherit;
	font-size: 20px;
	font-weight: 700;
	height: 52px;
	margin: 0;
	min-height: 0;
	padding: 0;
	text-align: center;
	width: 56px;
}

.mb-stepper__input::-webkit-outer-spin-button,
.mb-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mb-type.is-active .mb-stepper__input {
	border-color: var(--mb-good);
}

/* Booking fee: a line with the tickets, and a note under the dates. */
.mb-fee {
	align-items: center;
	border-top: 1px solid var(--mb-line);
	display: flex;
	font-size: 0.9em;
	gap: 12px;
	justify-content: space-between;
	margin: 0;
	padding: 8px 0;
}

.mb-fee__label {
	font-weight: 600;
}

.mb-fee__amount {
	opacity: 0.85;
	text-align: right;
}

.mb-fee--note {
	display: block;
	font-size: 0.9em;
	opacity: 0.85;
}

.mb-fee-note {
	font-size: 0.9em;
	margin: 10px 0 0;
	opacity: 0.85;
}

.mb-tickets__note {
	color: var(--mb-out);
	font-size: 0.9em;
	margin: 8px 0 0;
}

.mb-attendees {
	border-top: 1px solid var(--mb-line);
	display: grid;
	gap: 8px;
	padding-top: 10px;
}

.mb-attendees__field {
	display: grid;
	font-size: 0.9em;
	gap: 4px;
}

.mb-attendees__field input {
	min-height: 44px;
	width: 100%;
}

.mb-tickets__foot {
	align-items: center;
	border-top: 1px solid var(--mb-line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding-top: 12px;
}

.mb-tickets__total {
	font-size: 1.2em;
	font-weight: 700;
}

.mb-tickets__submit {
	min-height: 52px;
	min-width: 180px;
}

.mb-cart-type {
	display: inline-block;
	font-size: 0.85em;
	opacity: 0.8;
}

.mb-cart-type::before {
	content: "\2014";
	margin: 0 6px;
}

@media (max-width: 600px) {
	.mb-cal__cell {
		min-height: 70px;
	}

	.mb-cal__date {
		font-size: 1em;
		padding: 10px 2px;
	}

	.mb-cal__status {
		font-size: 0.6em;
		letter-spacing: 0;
		padding: 6px 1px;
	}

	.mb-cal__head {
		font-size: 0.8em;
	}

	.mb-times__grid {
		grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	}

	.mb-row__main {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.mb-row .mb-level {
		min-width: 0;
		text-align: left;
	}

	.mb-row__select {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.mb-tickets__submit {
		width: 100%;
	}

	.mb-stepper__btn {
		height: 56px;
		width: 56px;
	}

	.mb-picker input.mb-stepper__input {
		height: 56px;
	}
}

/* List grouped by date: one row per date, its times as buttons underneath. */
.mb-row__main--group {
	grid-template-columns: minmax(0, 1fr) auto auto;
	padding-bottom: 6px;
}

.mb-row__main--group.mb-row__main--nostatus {
	grid-template-columns: minmax(0, 1fr) auto;
}

.mb-row__times {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	padding: 0 8px 12px;
}

.mb-row .mb-time .mb-level {
	min-width: 0;
	text-align: center;
}

.mb-picker__title {
	margin: 0 0 12px;
}

/*
 * WooCommerce product page overrides (Monster Bookings > Settings > WooCommerce).
 * The hooks are removed in PHP; these cover themes that build the page their own way.
 */
.product.mb-hide-image .woocommerce-product-gallery,
.product.mb-hide-image div.images,
.product.mb-hide-image .onsale {
	display: none !important;
}

.product.mb-hide-image div.summary,
.product.mb-hide-image .summary.entry-summary {
	float: none !important;
	max-width: 100% !important;
	width: 100% !important;
}

.product.mb-hide-price .summary > .price,
.product.mb-hide-price .summary p.price {
	display: none !important;
}

.product.mb-hide-title .summary .product_title { display: none !important; }
.product.mb-hide-meta .summary .product_meta { display: none !important; }
.product.mb-hide-tabs .woocommerce-tabs { display: none !important; }
.product.mb-hide-related .related.products,
.product.mb-hide-related .upsells.products { display: none !important; }

/* A wide ticket panel: tickets and add-ons on the left, the booking summary with the total and
   Add to basket on the right, letters side by side. Narrow panels keep one column. */
.mb-tickets {
	container: mb-tickets / inline-size;
}

.mb-tickets__summary {
	display: none;
}

.mb-tickets__sumtitle {
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 10px;
	opacity: 0.8;
	text-transform: uppercase;
}

.mb-picker ul.mb-tickets__lines {
	display: grid;
	font-size: 0.95em;
	gap: 8px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.mb-picker ul.mb-tickets__lines li {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-picker ul.mb-tickets__lines li::before {
	content: none;
}

.mb-tickets__lines li span:last-child {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mb-tickets__lines[hidden],
.mb-tickets__empty[hidden] {
	display: none;
}

.mb-tickets__empty {
	font-size: 0.9em;
	margin: 0 0 14px;
	opacity: 0.75;
}

@container mb-tickets (min-width: 760px) {
	.mb-tickets__body {
		align-items: start;
		display: grid;
		gap: 0 28px;
		grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
	}

	.mb-tickets__side {
		background: var(--mb-soft);
		border-radius: var(--mb-radius-sm);
		margin-top: 10px;
		padding: 16px;
		position: sticky;
		top: 24px;
	}

	.mb-tickets__summary {
		display: block;
	}

	.mb-tickets__foot {
		align-items: stretch;
		flex-direction: column;
	}

	.mb-tickets__submit {
		min-width: 0;
		width: 100%;
	}

	.mb-tickets .mb-addon {
		align-items: center;
		column-gap: 12px;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.mb-tickets .mb-addon__main {
		display: contents;
	}

	.mb-tickets .mb-addon__img {
		grid-column: 1;
	}

	.mb-tickets .mb-addon__info {
		grid-column: 2;
	}

	.mb-tickets .mb-addon__main > .mb-stepper,
	.mb-tickets .mb-addon__main > .mb-level {
		grid-column: 3;
	}

	/* Two or more letters share the row, out to the edge of the +; one sits under the words. */
	.mb-tickets .mb-addon__sets {
		align-items: start;
		grid-column: 1 / -1;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}

	.mb-tickets .mb-addon__sets:has(> .mb-ao-set:only-child) {
		grid-column: 2;
	}
}

/* ------------------------------------------------------ personalised add-ons */

.mb-addons {
	border-top: 1px solid var(--mb-line);
	margin-top: 4px;
	padding-top: 12px;
}

.mb-addons__title {
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	opacity: 0.8;
	text-transform: uppercase;
}

.mb-addon {
	padding: 10px 0;
}

.mb-addon + .mb-addon {
	border-top: 1px solid var(--mb-line);
}

.mb-addon__main {
	align-items: center;
	display: flex;
	gap: 12px;
}

.mb-addon__img {
	border-radius: 6px;
	flex: 0 0 auto;
	height: 56px;
	object-fit: cover;
	width: 56px;
}

.mb-addon__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.mb-addon__name {
	font-weight: 700;
}

.mb-addon__pitch {
	font-size: 0.9em;
	opacity: 0.85;
}

.mb-addon__price {
	font-size: 0.9em;
}

.mb-addon__what {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

.mb-addon--out {
	opacity: 0.6;
}

.mb-addon__limit {
	font-size: 0.85em;
	font-weight: 600;
}

.mb-addon[hidden],
.mb-addons[hidden] {
	display: none;
}

/* Product Add-Ons fields drawn inside the booking form, once per item. */
.mb-ao-set--pao .wc-pao-addon-container {
	margin: 0 0 12px;
}

.mb-ao-set--pao .wc-pao-addon-name,
.mb-ao-set--pao .wc-pao-addon-heading,
.mb-ao-set--pao .wc-pao-legend {
	margin: 0 0 4px;
	padding: 0;
}

.mb-ao-set--pao .wc-pao-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.mb-ao-set--pao .wc-pao-addon-description,
.mb-ao-set--pao .wc-pao-addon-description p {
	margin: 0 0 6px;
}

/* "Match the booking form" (an add-on's default): the fields' titles, help text, choices and
   required mark take the form's own type, not the fonts and sizes the theme gives the product
   page. "As on the product page" leaves them to the theme. */
.mb-picker .mb-ao-set--fit .wc-pao-addon-name,
.mb-picker .mb-ao-set--fit .wc-pao-addon-heading,
.mb-picker .mb-ao-set--fit .wc-pao-legend {
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	font-style: normal;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.4;
	text-transform: none;
}

.mb-picker .mb-ao-set--fit .wc-pao-addon-description,
.mb-picker .mb-ao-set--fit .wc-pao-addon-description p {
	color: inherit;
	font-family: inherit;
	font-size: 0.9em;
	font-style: normal;
	letter-spacing: normal;
	line-height: 1.5;
	opacity: 0.85;
	text-transform: none;
}

.mb-picker .mb-ao-set--fit label:not(.wc-pao-addon-name) {
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.mb-picker .mb-ao-set--fit input,
.mb-picker .mb-ao-set--fit textarea,
.mb-picker .mb-ao-set--fit select {
	font-family: inherit;
	letter-spacing: normal;
}

/* The required mark, the same on Product Add-Ons fields and the form's own questions. */
.mb-picker .mb-ao-set--fit .required,
.mb-picker .mb-ao-field__label abbr {
	border: 0;
	font-style: normal;
	font-weight: inherit;
	text-decoration: none;
}

/* Never red, in either look: it takes the text colour. */
.mb-picker .mb-ao-set .required,
.mb-picker .mb-ao-field__label abbr {
	color: inherit !important;
}

.mb-ao-set--pao input[type="text"],
.mb-ao-set--pao textarea,
.mb-ao-set--pao select {
	box-sizing: border-box;
	font-size: 16px; /* Stops iOS zooming the page on focus. */
	min-height: 44px;
	width: 100%;
}

.mb-ao-set--pao .form-row {
	margin: 0;
	padding: 0;
}

.mb-ao-set--pao label {
	cursor: pointer;
}

.mb-ao-set--pao label.wc-pao-addon-name {
	display: block;
}

.mb-ao-set--pao input[type="radio"] + label {
	display: inline;
	margin-left: 4px;
}

.mb-addon__sets:empty {
	display: none;
}

.mb-addon__sets,
.mb-addon-fields__sets {
	display: grid;
	gap: 10px;
	margin-top: 10px;
}

.mb-ao-set {
	border: 1px solid var(--mb-line, rgba(128, 128, 128, 0.35));
	border-radius: 8px;
	display: grid;
	gap: 10px;
	margin: 0;
	min-width: 0;
	padding: 12px;
}

.mb-ao-set legend {
	font-weight: 700;
	padding: 0 6px;
}

.mb-ao-field {
	display: grid;
	gap: 4px;
}

.mb-ao-field__label {
	font-size: 0.9em;
	font-weight: 600;
}

.mb-ao-field input[type="text"],
.mb-ao-field textarea,
.mb-ao-field select {
	box-sizing: border-box;
	font-size: 16px; /* Stops iOS zooming the page on focus. */
	min-height: 44px;
	width: 100%;
}

.mb-ao-field__help {
	font-size: 0.85em;
	opacity: 0.8;
}

.mb-addon-fields {
	margin: 0 0 16px;
}

.mb-addon-closed {
	font-weight: 700;
}

.mb-ao-modal__img {
	border-radius: 8px;
	display: block;
	margin: 0 auto 12px;
	max-height: 220px;
	max-width: 100%;
}

.mb-ao-modal__price {
	font-weight: 700;
}

.mb-addon-qty {
	font-weight: 700;
}

@media (max-width: 600px) {
	.mb-addon__main {
		flex-wrap: wrap;
	}

	.mb-addon .mb-stepper {
		margin-left: auto;
	}

}

/* Basket flag pop-up */
.mb-flag-overlay {
	align-items: center;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 16px;
	position: fixed;
	z-index: 100000;
}

.mb-flag-modal {
	background: #fff;
	border-radius: 8px;
	color: #222;
	max-height: 90vh;
	max-width: 520px;
	overflow: auto;
	padding: 24px;
	width: 100%;
}

.mb-flag-modal h2 {
	margin-top: 0;
}

.mb-flag {
	border-top: 1px solid #e5e5e5;
	padding: 12px 0;
}

.mb-flag__ack {
	display: block;
	font-weight: 600;
	margin-top: 8px;
}

.mb-flag-modal__actions {
	margin: 12px 0 0;
	text-align: right;
}

/* My Account and thank-you ticket lists */
.mb-ticket-list {
	border-collapse: collapse;
	width: 100%;
}

.mb-ticket-list th,
.mb-ticket-list td {
	padding: 8px;
	text-align: left;
}


/* Pop-ups sit outside the picker, so they set their own box model. */
.mb-flag-overlay,
.mb-flag-overlay * {
	box-sizing: border-box;
}

.mb-flag-modal .button {
	min-height: 44px;
	min-width: 120px;
}

.mb-ao-modal {
	display: flex;
	flex-direction: column;
}

/* Pop-ups from the booking form use the form's type, not the theme's heading or button fonts. */
.mb-flag-overlay .mb-switch-modal h2,
.mb-flag-overlay .mb-ao-modal h2 {
	font-family: inherit;
	font-size: 1.3em;
	font-style: normal;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
	text-transform: none;
}

.mb-flag-overlay .mb-switch-modal p,
.mb-flag-overlay .mb-ao-modal p,
.mb-flag-overlay .mb-switch-modal .button,
.mb-flag-overlay .mb-ao-modal .button {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.mb-flag-overlay .mb-switch-modal .button {
	font-size: 0.95em;
}

/* The basket's hold countdown. */
.mb-hold-timer__left {
	font-variant-numeric: tabular-nums;
}

.mb-switch-modal .mb-flag-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

/* Keep is the quiet choice (and has the focus); Change is the solid button. */
.mb-flag-overlay .mb-switch-modal button.mb-switch-keep {
	background: transparent;
	border: 2px solid currentColor;
	box-shadow: none;
	color: inherit;
}

@media (max-width: 600px) {
	.mb-switch-modal .mb-flag-modal__actions .button {
		width: 100%;
	}
}

.mb-ao-modal__body {
	flex: 1 1 auto;
}

/* The add-on description fills the screen on phones. */
@media (max-width: 600px) {
	.mb-flag-overlay.mb-ao-overlay {
		align-items: stretch;
		padding: 0;
	}

	.mb-flag-overlay.mb-ao-overlay .mb-ao-modal {
		border-radius: 0;
		max-height: none;
		max-width: none;
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
	}

	.mb-flag-overlay.mb-ao-overlay .mb-flag-modal__actions .button {
		width: 100%;
	}
}

/* ------------------------------------------------------------ style options */

/* Background behind the dates: none, a light tint of the text colour, or a solid panel. */
.mb-picker--panel-tint {
	--mb-panel-bg: rgba(128, 128, 128, 0.07);
}

@supports (background: color-mix(in srgb, red 5%, transparent)) {
	.mb-picker--panel-tint {
		--mb-panel-bg: color-mix(in srgb, currentColor 5%, transparent);
	}
}

.mb-picker--panel-solid {
	--mb-panel-bg: var(--mb-surface, #fff);
}

.mb-picker--shadow {
	--mb-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px -14px rgba(0, 0, 0, 0.28);
}

.mb-picker--corners-square {
	--mb-radius: 0px;
	--mb-radius-sm: 0px;
}

.mb-picker--corners-round {
	--mb-radius: 18px;
	--mb-radius-sm: 999px;
}

.mb-picker--text {
	color: var(--mb-text);
}

.mb-picker--font,
.mb-picker--font :where(button:not(.button), input, select, textarea) {
	font-family: var(--mb-font);
}

.mb-picker--size-small {
	font-size: 0.875em;
}

.mb-picker--size-large {
	font-size: 1.125em;
}

/* Calendar and timetable: one outlined panel, lines only between cells. */
.mb-cal,
.mb-tt {
	background: var(--mb-panel-bg);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	box-shadow: var(--mb-shadow);
	overflow: hidden;
}

.mb-cal__row > :last-child,
.mb-tt__row > :last-child,
.mb-cal__month,
.mb-tt__month,
.mb-picker .mb-tt__row,
.mb-tt .mb-tt__mount {
	border-right: 0;
}

.mb-cal > :last-child > *,
.mb-cal > .mb-cal__month:last-child,
.mb-tt > .mb-tt__day:last-child > .mb-tt__row,
.mb-tt > .mb-tt__day:last-child > .mb-tt__row > *,
.mb-tt > .mb-tt__day:last-child > .mb-tt__mount {
	border-bottom: 0;
}

.mb-tt__cell.is-selected {
	background: color-mix(in srgb, var(--mb-accent) 10%, transparent);
}

/* List, times, passes and the ticket panel sit on the same background. */
.mb-picker:not(.mb-picker--panel-none) .mb-list,
.mb-picker:not(.mb-picker--panel-none) .mb-passes,
.mb-picker:not(.mb-picker--panel-none) .mb-times:not([hidden]) {
	background: var(--mb-panel-bg);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	box-shadow: var(--mb-shadow);
	padding: 8px 18px 12px;
}

.mb-picker:not(.mb-picker--panel-none) .mb-times:not([hidden]) {
	padding: 16px 18px;
}

.mb-list > .mb-row:last-child {
	border-bottom: 0;
}

.mb-list > .mb-list__month:first-child,
.mb-list > .mb-list__year:first-child {
	margin-top: 8px;
}

.mb-tickets {
	background: var(--mb-panel-bg);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius);
	box-shadow: var(--mb-shadow);
}

/* In the timetable and the list the ticket panel opens flat under its row, as part of the
   table: no card, no shadow, no tinted strip behind it (the chosen time keeps its own
   highlight). Under the calendar it keeps its card. */
.mb-tt .mb-tt__mount .mb-tickets,
.mb-list .mb-row__mount .mb-tickets,
.mb-passes .mb-row__mount .mb-tickets {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin-top: 0;
	padding: 12px 4px 4px;
}

.mb-tt__day.is-selected .mb-tt__mount,
.mb-list .mb-row.is-selected,
.mb-passes .mb-row.is-selected {
	background: none;
}

.mb-row.is-selected {
	background: color-mix(in srgb, var(--mb-accent) 6%, transparent);
}

/* Dates in the list wear the calendar's price colours. */
.mb-row__date {
	background: var(--mb-tier0);
	border-radius: var(--mb-radius-sm);
	color: var(--mb-date-text, #fff);
	display: inline-block;
	font-weight: 700;
	line-height: 1.3;
	margin-right: 0.35em;
	padding: 0.25em 0.7em;
}

.mb-row__date--tier1 { background: var(--mb-tier1); }
.mb-row__date--tier2 { background: var(--mb-tier2); }
.mb-row__date--tier3 { background: var(--mb-tier3); }

/* Time buttons: the accent shows on hover and when chosen. */
.mb-time {
	border-radius: var(--mb-radius-sm);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mb-time:not([disabled]):hover,
.mb-time:focus-visible {
	border-color: var(--mb-accent);
}

.mb-time.is-selected {
	background: var(--mb-soft);
	background: color-mix(in srgb, var(--mb-accent) 14%, transparent);
	border-color: var(--mb-accent);
}

.mb-legend__item {
	border-radius: var(--mb-radius-sm);
}

/* Availability labels: small capitals (default), plain words, or soft pills. */
.mb-picker--status-plain .mb-level,
.mb-picker--status-plain .mb-cal__status,
.mb-picker--status-plain .mb-tt__status {
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.mb-picker--status-pill .mb-level,
.mb-picker--status-pill .mb-cal__status,
.mb-picker--status-pill .mb-tt__status {
	background: rgba(128, 128, 128, 0.14);
	background: color-mix(in srgb, currentColor 13%, transparent);
	border-radius: 999px;
	display: inline-block;
	font-weight: 600;
	letter-spacing: 0;
	padding: 0.2em 0.75em;
	text-transform: none;
	width: auto;
}

.mb-picker--status-pill .mb-cal__status {
	align-self: center;
	margin: 6px 4px;
}

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

/* ------------------------------------------------------------ waiting list */
/* waitlist.js: a box for a sold-out time (where its tickets would open), one above the dates
   when every date is sold out, and one on its own when an event has no dates on sale. */

.mb-time.is-wait,
.mb-tt__cell.is-wait,
.mb-cal__cell.is-wait {
	cursor: pointer;
}

.mb-time.is-wait {
	opacity: 1;
}

.mb-time.is-wait .mb-time__label,
.mb-tt__cell.is-wait .mb-tt__time {
	opacity: 0.6;
	text-decoration: line-through;
}

.mb-cal__cell.is-wait .mb-cal__date {
	opacity: 0.55;
	text-decoration: line-through;
}

.mb-wait-hint {
	display: block;
	font-size: 0.8em;
	font-weight: 700;
	margin-top: 2px;
	text-decoration: underline;
}

.mb-wait {
	border: 2px solid var(--mb-line);
	border-radius: 10px;
	margin-top: 16px;
	padding: 14px 16px;
	position: relative;
}

.mb-wait-top .mb-wait {
	margin: 0 0 16px;
}

.mb-wait-standalone .mb-wait {
	margin: 0;
}

.mb-wait p {
	margin: 0 0 10px;
}

.mb-wait__title {
	font-size: 1.05em;
	font-weight: 700;
	padding-right: 32px;
}

.mb-wait__close {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 1.6em;
	line-height: 1;
	padding: 4px 8px;
	position: absolute;
	right: 6px;
	top: 6px;
}

.mb-wait__label {
	display: block;
	font-weight: 700;
	margin: 0 0 6px;
}

.mb-wait__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mb-wait__row input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
}

.mb-wait__mailing {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 8px;
	margin: 12px 0 0;
}

.mb-wait__mailing input {
	flex: none;
	margin-top: 3px;
}

.mb-wait .mb-wait__small {
	font-size: 0.8em;
	margin: 10px 0 0;
	opacity: 0.8;
}

.mb-wait .mb-wait__msg {
	margin: 8px 0 0;
}

.mb-wait .mb-wait__msg:empty {
	display: none;
}

.mb-wait__msg.is-bad {
	color: var(--mb-out);
	font-weight: 700;
}

.mb-wait .mb-wait__done {
	color: var(--mb-good);
	font-weight: 700;
	margin: 0;
}

.mb-offsale__mailing {
	justify-content: center;
	text-align: left;
}