/* BookTickets Events: embed wrapper and booking confirmation page. */

.bt-embed {
	margin: 0 0 1.5rem;
	position: relative;
}

.bt-embed__admin-note {
	background: #fff6d8;
	border: 1px solid #e6cf7a;
	border-radius: 6px;
	color: #6b5200;
	font-size: 14px;
	margin: 0 0 1rem;
	padding: 10px 14px;
}

.bt-embed__summary {
	margin: 0 0 1rem;
}

.bt-embed__summary-title {
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0 0 .35rem;
}

.bt-embed__summary-meta {
	color: #5b6472;
	font-size: 15px;
	margin: 0 0 .5rem;
}

.bt-embed__summary-price {
	margin: 0;
}

.bt-embed__pill {
	background: #f1f3f6;
	border-radius: 999px;
	color: #1f2733;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 12px;
}

.bt-embed__frame {
	position: relative;
	min-height: 480px;
}

.bt-embed iframe,
.bt-embed__iframe {
	display: block;
	min-height: 320px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.bt-embed__skeleton {
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 10px;
	inset: 0;
	padding: 0 0 18px;
	position: absolute;
	z-index: 2;
}

.bt-embed--ready .bt-embed__skeleton {
	display: none;
}

.bt-embed__skeleton-hero,
.bt-embed__skeleton-bar {
	background: #eef0f4;
}

.bt-embed__skeleton-hero {
	border-radius: 10px 10px 0 0;
	height: 210px;
}

.bt-embed__skeleton-bar {
	border-radius: 4px;
	height: 16px;
	margin: 18px 20px 0;
	width: 60%;
}

.bt-embed__skeleton-bar--wide {
	height: 24px;
	width: 80%;
}

.bt-embed__skeleton-bar--short {
	width: 35%;
}

.bt-embed__skeleton-hero,
.bt-embed__skeleton-bar {
	animation: bt-shimmer 1.6s ease-in-out infinite;
}

@keyframes bt-shimmer {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .55;
	}
}

@media (prefers-reduced-motion: reduce) {

	.bt-embed__skeleton-hero,
	.bt-embed__skeleton-bar {
		animation: none;
	}
}

.bt-embed__noscript {
	display: inline-block;
	font-weight: 600;
}

/* The panel shown over the embed while the buyer is paying in the popup window.

   It covers the frame rather than replacing it, so the moment the popup closes
   the ticket list is exactly where the buyer left it, with their quantities
   still chosen. Flat: one panel, one hairline, one accent on the primary action,
   and the dimming is a plain translucent white (or charcoal in dark mode), not a
   blur, so nothing behind it moves or reflows. */

.bt-embed__waiting {
	align-items: center;
	background: rgba(255, 255, 255, .88);
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 16px;
	position: absolute;
	z-index: 3;
}

.bt-embed__waiting[hidden] {
	display: none;
}

.bt-embed__waiting-card {
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 12px;
	max-width: 340px;
	padding: 18px 18px 16px;
	text-align: center;
	width: 100%;
}

.bt-embed p.bt-embed__waiting-title,
.bt-embed__waiting-title {
	color: #1f2733;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 6px;
}

.bt-embed p.bt-embed__waiting-body,
.bt-embed__waiting-body {
	color: #5b6472;
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 14px;
}

.bt-embed__waiting-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.bt-embed button.bt-embed__waiting-btn,
.bt-embed__waiting-btn {
	background: #1e2522;
	border: 1px solid #1e2522;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 10px 16px;
}

.bt-embed button.bt-embed__waiting-btn--ghost,
.bt-embed__waiting-btn--ghost {
	background: #fff;
	border-color: #ccd2db;
	color: #1f2733;
}

.bt-embed__waiting-btn:focus-visible {
	outline: 2px solid #1e2522;
	outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {

	.bt-embed__waiting {
		background: rgba(30, 37, 34, .88);
	}

	.bt-embed__waiting-card {
		background: #283533;
		border-color: #3a4744;
	}

	.bt-embed p.bt-embed__waiting-title,
	.bt-embed__waiting-title {
		color: #eceae6;
	}

	.bt-embed p.bt-embed__waiting-body,
	.bt-embed__waiting-body {
		color: #a8b0ac;
	}

	.bt-embed button.bt-embed__waiting-btn,
	.bt-embed__waiting-btn {
		background: #eceae6;
		border-color: #eceae6;
		color: #1e2522;
	}

	.bt-embed button.bt-embed__waiting-btn--ghost,
	.bt-embed__waiting-btn--ghost {
		background: transparent;
		border-color: #3a4744;
		color: #eceae6;
	}
}

/* Booking confirmation page. Selectors are scoped and specific so host themes do not win. */

.bt-thanks {
	--bt-accent: #ed7464;
	--bt-accent-ink: #1e2522;
	--bt-accent-link: #1e2522;
	color: #1f2733;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	margin: 0 auto;
	max-width: 720px;
	padding: 8px 0 32px;
	text-align: left;
}

.bt-thanks h1,
.bt-thanks h2,
.bt-thanks h3 {
	color: #1e2522;
	font-style: normal;
	letter-spacing: normal;
	text-align: left;
	text-decoration: none;
	text-transform: none;
}

.bt-thanks p,
.bt-thanks th,
.bt-thanks td {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.bt-thanks a {
	box-shadow: none;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* Shown for the split second the confirmation spends inside the popup, before
   the opener takes over and this window closes. */
.bt-thanks p.bt-thanks__handback {
	background: #f1f3f6;
	border-radius: 8px;
	color: #4a5361;
	font-size: 14px;
	margin: 0 0 18px;
	padding: 10px 14px;
	text-align: center;
}

.bt-thanks__check {
	align-items: center;
	background: var(--bt-accent);
	border-radius: 50%;
	color: var(--bt-accent-ink, #1e2522);
	display: flex;
	height: 56px;
	justify-content: center;
	margin: 0 0 18px;
	width: 56px;
}

.bt-thanks h1.bt-thanks__heading {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.2;
	margin: 0 0 8px;
}

.bt-thanks p.bt-thanks__lead {
	color: #4a5361;
	font-size: 16px;
	margin: 0 0 24px;
}

.bt-thanks__card {
	background: #fff;
	border: 1px solid #e7e9ee;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
	display: flex;
	gap: 18px;
	margin: 0 0 20px;
	overflow: hidden;
}

.bt-thanks__card-media {
	flex: 0 0 200px;
}

.bt-thanks__card-media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bt-thanks__card-body {
	padding: 16px 18px 16px 0;
}

.bt-thanks h2.bt-thanks__card-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
	margin: 0 0 6px;
}

.bt-thanks h2.bt-thanks__card-title a,
.bt-thanks h2.bt-thanks__card-title a:visited,
.bt-thanks h2.bt-thanks__card-title a:hover,
.bt-thanks h2.bt-thanks__card-title a:focus {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none;
	text-transform: none;
}

.bt-thanks p.bt-thanks__card-meta {
	color: #5b6472;
	font-size: 15px;
	line-height: 1.45;
	margin: 0 0 4px;
}

.bt-thanks p.bt-thanks__order {
	color: #5b6472;
	font-size: 14px;
	margin: 0 0 12px;
}

.bt-thanks__table {
	border-collapse: collapse;
	font-size: 15px;
	margin: 0 0 24px;
	width: 100%;
}

.bt-thanks__table th,
.bt-thanks__table td {
	border-bottom: 1px solid #e7e9ee;
	color: #1f2733;
	font-size: 15px;
	padding: 10px 8px;
	text-align: left;
}

.bt-thanks__table thead th {
	color: #5b6472;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.bt-thanks__table th.bt-thanks__num,
.bt-thanks__table td.bt-thanks__num {
	text-align: right;
}

.bt-thanks__fee td {
	color: #5b6472;
}

.bt-thanks__table tfoot th {
	text-align: right;
}

.bt-thanks__table tfoot th,
.bt-thanks__table .bt-thanks__total {
	border-bottom: 0;
	font-size: 17px;
	font-weight: 700;
}

.bt-thanks__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 28px;
}

.bt-thanks a.bt-thanks__btn,
.bt-thanks a.bt-thanks__btn:link,
.bt-thanks a.bt-thanks__btn:visited,
.bt-thanks a.bt-thanks__btn:hover,
.bt-thanks a.bt-thanks__btn:focus,
.bt-thanks a.bt-thanks__btn:active {
	border-radius: 8px;
	box-shadow: none;
	display: inline-block;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.2;
	padding: 12px 18px;
	text-decoration: none;
	text-transform: none;
}

.bt-thanks a.bt-thanks__btn--primary,
.bt-thanks a.bt-thanks__btn--primary:link,
.bt-thanks a.bt-thanks__btn--primary:visited,
.bt-thanks a.bt-thanks__btn--primary:hover,
.bt-thanks a.bt-thanks__btn--primary:focus,
.bt-thanks a.bt-thanks__btn--primary:active {
	background: var(--bt-accent);
	border: 1px solid var(--bt-accent);
	color: var(--bt-accent-ink, #1e2522);
}

.bt-thanks a.bt-thanks__btn--ghost,
.bt-thanks a.bt-thanks__btn--ghost:link,
.bt-thanks a.bt-thanks__btn--ghost:visited,
.bt-thanks a.bt-thanks__btn--ghost:hover,
.bt-thanks a.bt-thanks__btn--ghost:focus,
.bt-thanks a.bt-thanks__btn--ghost:active {
	background: #fff;
	border: 1px solid #ccd2db;
	color: #1f2733;
}

.bt-thanks a.bt-thanks__btn--ghost:hover,
.bt-thanks a.bt-thanks__btn--ghost:focus {
	border-color: #1e2522;
}

.bt-thanks a.bt-thanks__btn:focus-visible {
	outline: 2px solid #1e2522;
	outline-offset: 2px;
}

.bt-thanks a.bt-thanks__link,
.bt-thanks a.bt-thanks__link:link,
.bt-thanks a.bt-thanks__link:visited,
.bt-thanks a.bt-thanks__link:hover,
.bt-thanks a.bt-thanks__link:focus {
	color: var(--bt-accent-link, #1e2522);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	text-decoration: underline;
	text-transform: none;
}

.bt-thanks p.bt-thanks__footer {
	color: #7a828e;
	font-size: 13px;
	margin: 32px 0 0;
	text-align: center;
}

.bt-thanks p.bt-thanks__footer a,
.bt-thanks p.bt-thanks__footer a:link,
.bt-thanks p.bt-thanks__footer a:visited,
.bt-thanks p.bt-thanks__footer a:hover,
.bt-thanks p.bt-thanks__footer a:focus {
	color: inherit;
	font-size: 13px;
	font-weight: 400;
	text-decoration: underline;
}

@media (max-width: 560px) {

	.bt-thanks__card {
		display: block;
	}

	.bt-thanks__card-media {
		height: 180px;
	}

	.bt-thanks__card-body {
		padding: 16px 18px;
	}

	.bt-thanks h1.bt-thanks__heading {
		font-size: 26px;
		letter-spacing: normal;
	}

	.bt-thanks__table th,
	.bt-thanks__table td {
		padding: 10px 4px;
	}

	.bt-thanks a.bt-thanks__btn {
		text-align: center;
		width: 100%;
	}
}