/**
 * Tempo Book It Box Office buyer styles. Reads ONLY the --tbo-* token layer; type
 * inherits the active theme's font families. No brand hex anywhere here.
 */

.tbo-scope {
	color: var(--tbo-text);
	font-size: 16px;
	line-height: 24px;
	/* Themes decide the content width, not the viewport, so every layout
	   breakpoint below queries this container rather than the screen. */
	container-type: inline-size;
}

.tbo-scope *,
.tbo-scope *::before,
.tbo-scope *::after {
	box-sizing: border-box;
}

.tbo-scope h1,
.tbo-scope h2,
.tbo-scope h3 {
	color: var(--tbo-heading);
	margin: 0;
}

/* Generic links only: buttons are excluded inside :where() (which adds no
   specificity) so .tbo-btn--* colour rules can win. */
.tbo-scope a:where(:not(.tbo-btn)) {
	color: var(--tbo-brand-secondary);
	text-decoration: none;
}

.tbo-scope a:where(:not(.tbo-btn)):hover {
	color: var(--tbo-brand-primary);
}


/* The hidden attribute always wins, even over class display values
   (inline-flex buttons, flex/grid overlays and pills). */
.tbo-scope [hidden] {
	display: none !important;
}

.tbo-scope :focus-visible {
	outline: 2px solid var(--tbo-brand-primary);
	outline-offset: 2px;
}

/* Type scale */
.tbo-page-title { font-size: 28px; line-height: 36px; font-weight: 600; }
.tbo-section-title { font-size: 20px; line-height: 28px; font-weight: 600; }
.tbo-card-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.tbo-label { font-size: 14px; line-height: 20px; font-weight: 600; }
.tbo-supporting { font-size: 13px; line-height: 19px; }
.tbo-small { font-size: 12px; line-height: 17px; }
.tbo-muted { color: var(--tbo-muted); }

.tbo-eyebrow {
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tbo-muted);
}

.tbo-num {
	font-variant-numeric: tabular-nums;
}

/* Layout */
.tbo-shell {
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 20px 40px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Buttons */
.tbo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.15s ease, background 0.15s ease;
}

.tbo-btn--primary {
	background: var(--tbo-brand-primary);
	color: var(--tbo-on-primary);
	border: 0;
}

.tbo-btn--primary:hover { filter: brightness(0.92); color: var(--tbo-on-primary); }

.tbo-btn--secondary {
	background: var(--tbo-surface);
	color: var(--tbo-brand-secondary);
	border: 1.5px solid var(--tbo-brand-secondary);
}

.tbo-btn--secondary:hover { background: var(--tbo-tint-secondary); color: var(--tbo-brand-secondary); }

/* Armour anchor buttons against theme link styling (themes commonly set
   .entry-content a colours and underlines at higher specificity). */
.tbo-scope a.tbo-btn { text-decoration: none; }
.tbo-scope a.tbo-btn--primary,
.tbo-scope a.tbo-btn--primary:visited,
.tbo-scope a.tbo-btn--primary:hover { color: var(--tbo-on-primary); }
.tbo-scope a.tbo-btn--secondary,
.tbo-scope a.tbo-btn--secondary:visited,
.tbo-scope a.tbo-btn--secondary:hover { color: var(--tbo-brand-secondary); }

.tbo-btn--lg { min-height: 48px; padding: 0 22px; }
.tbo-btn--block { width: 100%; }
.tbo-btn[disabled],
.tbo-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; }

/* Cards and panels */
.tbo-card {
	background: var(--tbo-surface);
	border: 1px solid var(--tbo-border);
	border-radius: 16px;
}

.tbo-card--raised {
	box-shadow: 0 2px 8px rgba(16, 33, 47, 0.08);
	padding: 20px;
}

.tbo-panel {
	background: var(--tbo-tint-secondary);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13px;
	line-height: 19px;
	text-align: left;
}

/* Badges */
.tbo-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 13px;
	line-height: 19px;
	font-weight: 600;
	white-space: nowrap;
}

.tbo-badge--sm { padding: 4px 12px; font-size: 12px; line-height: 16px; }
.tbo-badge--danger { background: var(--tbo-danger-bg); color: var(--tbo-danger-fg); }
.tbo-badge--warning { background: var(--tbo-warning-bg); color: var(--tbo-warning-fg); }
.tbo-badge--success { background: var(--tbo-success-bg); color: var(--tbo-success-fg); }
.tbo-badge--info { background: var(--tbo-info-bg); color: var(--tbo-info-fg); }
.tbo-badge--neutral { background: var(--tbo-neutral-bg); color: var(--tbo-neutral-fg); }

/* Trust rows */
.tbo-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 13px;
	line-height: 19px;
	color: var(--tbo-muted);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tbo-trust--stack { flex-direction: column; }

.tbo-trust .tbo-tick {
	color: var(--tbo-success-fg);
	font-weight: 600;
	margin-right: 6px;
}

/* Event page hero */
.tbo-hero {
	display: grid;
	grid-template-columns: 460px 1fr;
	gap: 28px;
	align-items: start;
}

.tbo-hero__media img {
	width: 100%;
	border-radius: 16px;
	display: block;
}

.tbo-hero__body { display: flex; flex-direction: column; gap: 10px; }
.tbo-hero__body h1 { font-size: 32px; line-height: 40px; font-weight: 600; }
.tbo-hero__meta { font-size: 14px; line-height: 20px; color: var(--tbo-muted); }
.tbo-hero__desc { max-width: 560px; margin: 0; }

/* Event body grid */
.tbo-event-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 24px;
	align-items: start;
}

.tbo-event-grid__side { display: flex; flex-direction: column; gap: 16px; }

/* Performance rows */
.tbo-perf-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--tbo-border);
}

.tbo-perf-row:last-child { border-bottom: 0; }

.tbo-perf-row__when { width: 170px; flex: none; }
.tbo-perf-row__date { font-size: 15px; font-weight: 600; color: var(--tbo-heading); }
.tbo-perf-row__time { font-size: 13px; line-height: 19px; color: var(--tbo-muted); }
.tbo-perf-row__action { margin-left: auto; text-align: right; }
.tbo-perf-row__note { font-size: 13px; line-height: 19px; color: var(--tbo-muted); }

/* Expired-hold overlay, shared by the seat picker (absolute, over the map)
   and checkout (fixed, whole viewport via .tbo-checkout__overlay). */
.tbo-map-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.55);
	z-index: 6;
}

.tbo-map-overlay__card {
	background: var(--tbo-surface);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(16, 33, 47, 0.18);
	max-width: 320px;
	padding: 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

/* Back link */
.tbo-back {
	font-size: 13px;
	line-height: 19px;
	font-weight: 600;
}

/* Listing */
.tbo-events-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.tbo-event-card { overflow: hidden; display: flex; flex-direction: column; }
.tbo-event-card__media img { width: 100%; height: 150px; object-fit: cover; display: block; }
.tbo-event-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.tbo-event-card__title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--tbo-heading); }
.tbo-event-card__meta { font-size: 13px; line-height: 19px; color: var(--tbo-muted); }
.tbo-event-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}
.tbo-event-card__link { font-size: 13px; font-weight: 600; }

/* Empty state */
.tbo-empty {
	background: var(--tbo-surface);
	border: 1px dashed var(--tbo-border-strong);
	border-radius: 16px;
	padding: 28px 24px;
	text-align: center;
}

.tbo-empty__title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--tbo-heading); }
.tbo-empty__hint { font-size: 13px; line-height: 19px; color: var(--tbo-muted); margin: 4px 0 0; }

/* Countdown page */
.tbo-countdown-page {
	max-width: 480px;
	margin: 0 auto;
	padding: 24px 20px 40px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	text-align: center;
	align-items: center;
}

.tbo-countdown-page h1 { font-size: 24px; line-height: 32px; font-weight: 600; }

.tbo-countdown {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.tbo-countdown__tile {
	width: 72px;
	background: var(--tbo-surface);
	border: 1px solid var(--tbo-border);
	border-radius: 12px;
	padding: 12px 0;
	text-align: center;
}

.tbo-countdown__num {
	font-size: 26px;
	line-height: 32px;
	font-weight: 600;
	color: var(--tbo-heading);
	font-variant-numeric: tabular-nums;
}

.tbo-countdown__label {
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--tbo-muted);
}

/* Responsive. The @container blocks are the real breakpoints (they follow
   the theme's content column); the @media block mirrors them as a fallback
   for browsers without container queries, where narrow viewports are the
   only narrow case we can detect. */
.tbo-perf-row .tbo-btn { white-space: nowrap; }

/* The performance list queries its own column, not the page. */
.tbo-event-grid__main { container-type: inline-size; }

@container (max-width: 900px) {
	.tbo-hero { grid-template-columns: 1fr; gap: 16px; }
	.tbo-event-grid { grid-template-columns: 1fr; }
	.tbo-events-grid { grid-template-columns: 1fr; }
}

@container (max-width: 560px) {
	.tbo-perf-row { flex-wrap: wrap; }
	.tbo-perf-row__when { width: auto; min-width: 130px; }
	.tbo-perf-row__action { flex-basis: 100%; margin-left: 0; text-align: left; }
	.tbo-perf-row__action .tbo-btn { width: 100%; }
}

@media (max-width: 900px) {
	.tbo-hero { grid-template-columns: 1fr; gap: 16px; }
	.tbo-event-grid { grid-template-columns: 1fr; }
	.tbo-events-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.tbo-perf-row { flex-wrap: wrap; }
	.tbo-perf-row__when { width: auto; min-width: 130px; }
	.tbo-perf-row__action { flex-basis: 100%; margin-left: 0; text-align: left; }
	.tbo-perf-row__action .tbo-btn { width: 100%; }
}

/* GA ticket steppers (B6) */
.tbo-ga-page { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.tbo-ga-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tbo-type-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--tbo-border); }
.tbo-type-row:last-of-type { border-bottom: 0; }
.tbo-type-row__name { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--tbo-heading); }
.tbo-type-row__price { font-size: 13px; line-height: 19px; color: var(--tbo-muted); }
.tbo-stepper { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tbo-stepper__btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--tbo-border); background: var(--tbo-surface); color: var(--tbo-text); font-size: 18px; font-weight: 600; cursor: pointer; }
.tbo-stepper__btn[data-floor="1"] { opacity: 0.4; }
.tbo-stepper__qty { min-width: 22px; text-align: center; font-size: 16px; font-weight: 600; color: var(--tbo-heading); font-variant-numeric: tabular-nums; }
.tbo-ga-footnote { padding: 12px 16px; font-size: 12px; line-height: 17px; color: var(--tbo-muted); border-top: 1px solid var(--tbo-border); }
.tbo-ga-bar { position: sticky; bottom: 0; background: var(--tbo-surface); border-top: 1px solid var(--tbo-border); box-shadow: 0 -2px 8px rgba(16,33,47,0.06); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -16px; }
.tbo-ga-bar__line { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tbo-heading); }
.tbo-ga-bar__sub { font-size: 12px; line-height: 16px; color: var(--tbo-muted); }