/**
 * Seat picker (B5). Tokens only; no brand hex. Seat/band data colours come
 * from the plugin-owned --tbo-band-* / --tbo-seat-taken tokens.
 */

.tbo-picker {
	--tbo-seat-selected: var(--tbo-brand-primary);
	--tbo-seat-selected-glyph: var(--tbo-on-primary);
	--tbo-focus: var(--tbo-brand-primary);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tbo-picker__head { display: flex; flex-direction: column; gap: 6px; }
.tbo-picker__title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.tbo-picker__grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 24px;
	align-items: start;
}

.tbo-picker__rail {
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Map card */
.tbo-map-card { position: relative; overflow: hidden; }

.tbo-map-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--tbo-border);
	flex-wrap: wrap;
}

.tbo-map-tool {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid var(--tbo-border);
	background: var(--tbo-surface);
	color: var(--tbo-text);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.tbo-map-tool--text { width: auto; padding: 0 10px; font-size: 13px; }

/* The scroll-zoom switch reads as a toggle: solid when on, quiet when off. */
[data-tbo-scroll-zoom][aria-pressed="true"] { background: var(--tbo-text); color: var(--tbo-surface); border-color: var(--tbo-text); }
[data-tbo-scroll-zoom][aria-pressed="false"] { color: var(--tbo-muted); }

.tbo-seat-legend {
	display: flex;
	align-items: center;
	gap: 8px 14px;
	flex-wrap: wrap;
	margin-left: auto;
	font-size: 12px;
	line-height: 16px;
	color: var(--tbo-muted);
}

.tbo-seat-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.tbo-seat-legend__item svg { width: 14px; height: 14px; display: block; }

.tbo-list-toggle {
	height: 32px;
	padding: 0 12px;
	white-space: nowrap;
	border-radius: 8px;
	border: 1.5px solid var(--tbo-brand-secondary);
	background: var(--tbo-surface);
	color: var(--tbo-brand-secondary);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.tbo-list-toggle:hover { background: var(--tbo-tint-secondary); }

/* Per the design the list toggle lives in the footer beside the band
   legend, moving up into the toolbar only on phone screens. */
.tbo-map-toolbar .tbo-list-toggle { display: none; }
.tbo-list-toggle--footer { margin-left: auto; }

@media (max-width: 600px) {
	.tbo-map-toolbar .tbo-list-toggle { display: inline-block; margin-left: auto; }
	.tbo-list-toggle--footer { display: none; }
}

.tbo-map-notice {
	margin: 12px 16px 0;
	background: var(--tbo-neutral-bg);
	color: var(--tbo-neutral-fg);
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.tbo-map-notice a { font-size: 13px; font-weight: 600; margin-left: 8px; }

.tbo-map-viewport {
	height: 472px;
	overflow: hidden;
	touch-action: none;
	cursor: grab;
	position: relative;
}

.tbo-map-tooltip {
	position: absolute;
	background: var(--tbo-brand-secondary);
	color: var(--tbo-on-secondary);
	border-radius: 6px;
	padding: 3px 9px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	pointer-events: none;
	transform: translate(-50%, -100%);
	white-space: nowrap;
	z-index: 5;
}

.tbo-map-viewport.is-list { overflow-y: auto; touch-action: auto; cursor: default; }

.tbo-map-content {
	transform-origin: 50% 0;
	padding: 20px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.tbo-stage {
	background: var(--tbo-brand-secondary);
	color: var(--tbo-on-secondary);
	border-radius: 8px;
	letter-spacing: 0.2em;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	padding: 6px 64px;
}

.tbo-map-section { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.tbo-map-section__label {
	font-size: 11px;
	line-height: 15px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--tbo-muted);
	margin-bottom: 2px;
}

.tbo-map-row { display: flex; align-items: center; gap: 5px; }

.tbo-map-row__label {
	width: 18px;
	font-size: 11px;
	line-height: 15px;
	font-weight: 600;
	color: var(--tbo-muted);
}

.tbo-map-row__label--left { text-align: right; }

.tbo-seat {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	/* Outlines (ours and any theme's focus ring) follow the seat's curve.
	   Slightly under the seat's own ~7px visual radius: the ring sits 2px
	   outside, and browsers add the offset to the curve, so a smaller
	   radius here keeps the ring concentric instead of over-round. */
	border-radius: 6px;
}

.tbo-seat svg { width: 30px; height: 30px; display: block; }
.tbo-seat[data-state="taken"] { cursor: default; }
.tbo-seat[data-state="pending"] { cursor: progress; }
.tbo-seat:focus-visible { outline: 2px solid var(--tbo-focus); outline-offset: 2px; }
/* A mouse click focuses the button too; the tick already shows the seat is
   yours, so no ring then (themes such as Twenty Twenty-Five outline every
   :focus otherwise). Keyboard focus keeps the ring above. */
.tbo-seat:focus:not(:focus-visible) { outline: none; }

.tbo-seat-spin {
	animation: tboSeatSpin 0.7s linear infinite;
	transform-origin: 50% 50%;
}

@keyframes tboSeatSpin {
	to { transform: rotate(360deg); }
}

.tbo-chip[disabled] { opacity: 0.55; cursor: progress; }

.tbo-aisle { flex: none; }

/* Map footer: band legend left, list toggle right; the legend wraps
   internally so the two always sit as columns of one row. */
.tbo-map-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-top: 1px solid var(--tbo-border);
}

.tbo-map-footer .tbo-band-legend { flex: 1 1 auto; min-width: 0; }

.tbo-band-legend {
	display: flex;
	align-items: center;
	gap: 6px 16px;
	flex-wrap: wrap;
	font-size: 12px;
	line-height: 16px;
	color: var(--tbo-muted);
}

.tbo-band-legend__item { display: inline-flex; align-items: center; gap: 6px; }

.tbo-band-swatch {
	width: 12px;
	height: 12px;
	border-radius: 4px;
	border-width: 2px;
	border-style: solid;
	flex: none;
}

/* Skeleton */
.tbo-map-skeleton { padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; }

.tbo-map-skeleton span {
	display: block;
	height: 16px;
	border-radius: 8px;
	background: var(--tbo-border);
	animation: ttSkeleton 1.8s ease-in-out infinite;
}

.tbo-map-skeleton span:nth-child(1) { width: 45%; }
.tbo-map-skeleton span:nth-child(2) { width: 85%; }
.tbo-map-skeleton span:nth-child(3) { width: 75%; }
.tbo-map-skeleton span:nth-child(4) { width: 85%; }
.tbo-map-skeleton span:nth-child(5) { width: 60%; }

@keyframes ttSkeleton {
	0%, 100% { opacity: 0.9; }
	50% { opacity: 0.5; }
}

/* List view */
.tbo-list-view { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tbo-list-row__head { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 19px; }
.tbo-list-row__title { font-weight: 600; color: var(--tbo-heading); }
.tbo-list-row__meta { color: var(--tbo-muted); }
.tbo-list-row__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.tbo-chip {
	min-width: 44px;
	height: 36px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid var(--tbo-border);
	background: var(--tbo-surface);
	color: var(--tbo-text);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.tbo-chip[aria-pressed="true"] {
	background: var(--tbo-seat-selected);
	color: var(--tbo-seat-selected-glyph);
	border-color: var(--tbo-seat-selected);
}

/* Toast */
.tbo-toast {
	position: absolute;
	left: 16px;
	bottom: 16px;
	max-width: 420px;
	background: var(--tbo-info-bg);
	color: var(--tbo-info-fg);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(16, 33, 47, 0.15);
	padding: 12px 40px 12px 14px;
	z-index: 5;
}

.tbo-toast__title { font-size: 13px; line-height: 19px; font-weight: 600; }
.tbo-toast__body { font-size: 12px; line-height: 17px; }

.tbo-toast__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 14px;
	cursor: pointer;
}

/* Expired overlay */
/* .tbo-map-overlay and its card live in buyer.css: the checkout page uses
   the same expired-hold overlay without loading this stylesheet. */

.is-expired .tbo-map-content { opacity: 0.3; }

/* Timer pill */
.tbo-timer-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	background: var(--tbo-brand-secondary);
	color: var(--tbo-on-secondary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tbo-timer-pill.is-warning {
	background: var(--tbo-warning-bg);
	color: var(--tbo-warning-fg);
	animation: ttSoftPulse 2.4s ease-in-out infinite;
}

@keyframes ttSoftPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.72; }
}

/* Your seats card */
.tbo-yourseats-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.tbo-seat-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--tbo-border);
	font-size: 14px;
	line-height: 20px;
}

.tbo-seat-row__id { font-weight: 600; color: var(--tbo-heading); min-width: 34px; }
.tbo-seat-row__meta { color: var(--tbo-muted); font-size: 13px; }

.tbo-seat-row__remove {
	margin-left: auto;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--tbo-muted);
	font-size: 16px;
	cursor: pointer;
}

.tbo-seat-row__remove:hover { background: var(--tbo-neutral-bg); color: var(--tbo-text); }

.tbo-totals {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 10px 0;
	font-size: 14px;
}

.tbo-totals__amount { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--tbo-heading); }

.tbo-basket-empty { font-size: 13px; line-height: 19px; color: var(--tbo-muted); margin: 0 0 12px; }
.tbo-types-note { font-size: 12px; line-height: 17px; color: var(--tbo-muted); margin: 0 0 12px; }

/* Mobile bottom bar */
.tbo-picker__bar {
	display: none;
	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;
	margin: 0 -16px;
}

.tbo-picker__bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tbo-picker__bar-timer { margin-bottom: 6px; }

/* Compact mode. The @container block follows the theme's content column
   (the real constraint); the @media block is the fallback for browsers
   without container queries. */
@container (max-width: 900px) {
	.tbo-picker__grid { grid-template-columns: 1fr; }
	.tbo-picker__rail { display: none; }
	.tbo-picker__bar { display: block; }
	.tbo-map-viewport { height: 352px; }
	.tbo-seat svg { width: 20px; height: 20px; }
	.tbo-map-content { padding: 14px 8px; gap: 10px; }
	.tbo-map-row { gap: 3px; }
	.tbo-map-row__label { width: 14px; font-size: 9px; }
	.tbo-stage { font-size: 11px; padding: 5px 44px; }
	.tbo-toast { left: 10px; right: 10px; bottom: 10px; max-width: none; }
	.tbo-seat-legend { margin-left: 0; flex-basis: 100%; order: 5; }
}

@media (max-width: 900px) {
	.tbo-picker__grid { grid-template-columns: 1fr; }
	.tbo-picker__rail { display: none; }
	.tbo-picker__bar { display: block; }
	.tbo-map-viewport { height: 352px; }
	.tbo-seat svg { width: 20px; height: 20px; }
	.tbo-map-content { padding: 14px 8px; gap: 10px; }
	.tbo-map-row { gap: 3px; }
	.tbo-map-row__label { width: 14px; font-size: 9px; }
	.tbo-stage { font-size: 11px; padding: 5px 44px; }
	.tbo-toast { left: 10px; right: 10px; bottom: 10px; max-width: none; }
	.tbo-seat-legend { margin-left: 0; flex-basis: 100%; order: 5; }
}