.ticketseat-seat-shortcode {
	--ticketseat-radius: var(--at-radius--m, 8px);
	display: contents;
}

.ticketseat-seat-app {
	--ticketseat-content-width: 1200px;
	--ticketseat-radius: var(--at-radius--m, 8px);
	border: 1px solid #dcdcde;
	border-radius: 16px;
	background: #fff;
	box-sizing: border-box;
	color: #1d2327;
	margin: 1.5rem auto;
	max-width: var(--ticketseat-content-width);
	padding: 1rem;
	width: 100%;
}

.ticketseat-seat-app [hidden] {
	display: none !important;
}

body.ticketseat-has-fullscreen-picker {
	overflow: hidden;
}

.ticketseat-seat-app.is-closed {
	display: none;
}

.ticketseat-header,
.ticketseat-footer {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.ticketseat-header h3 {
	margin: 0 0 0.25rem;
}

.ticketseat-header .ticketseat-header-subtitle {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	opacity: 0.95;
}

.ticketseat-status,
.ticketseat-selection {
	margin: 0;
}

.ticketseat-status:empty {
	display: none;
}

.ticketseat-steps {
	counter-reset: none;
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.ticketseat-steps li {
	align-items: center;
	background: #f0f0f1;
	border-radius: var(--ticketseat-radius, 8px);
	color: #646970;
	display: inline-flex;
	font-size: 0.85rem;
	font-weight: 700;
	justify-content: center;
	padding: 0.45rem 0.75rem;
	text-align: center;
}

.ticketseat-steps li.is-active {
	background: var(--at-primary, #0C3B6B);
	color: #fff;
}

.ticketseat-step-panel {
	display: none;
}

.ticketseat-step-panel.is-active {
	display: block;
}

.ticketseat-stage {
	background: #fff;
	border-radius: 14px;
	margin: 1rem 0;
	padding: 1rem;
}

.ticketseat-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.ticketseat-legend-item {
	align-items: center;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: var(--ticketseat-radius, 8px);
	color: #1d2327;
	display: inline-flex;
	font-size: 0.85rem;
	font-weight: 700;
	gap: 0.4rem;
	padding: 0.35rem 0.65rem;
}

.ticketseat-legend-item > span:first-child {
	background: var(--ticketseat-seat-color, #1f7a4d);
	border-radius: 999px;
	display: inline-block;
	flex-shrink: 0;
	height: 0.75rem;
	width: 0.75rem;
}

.ticketseat-legend-label {
	line-height: 1.25;
	text-align: left;
}

.ticketseat-map-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	justify-content: center;
	margin: 0.75rem 0 0;
}

.ticketseat-map-toolbar button {
	align-items: center;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: var(--ticketseat-radius, 8px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.85rem;
	font-weight: 800;
	justify-content: center;
	min-height: 36px;
	padding: 0.35rem 0.7rem;
	text-align: center;
}

@media (max-width: 767px) {
	.ticketseat-map-toolbar button.ticketseat-zoom-out,
	.ticketseat-map-toolbar button.ticketseat-zoom-in {
		font-weight: 1000;
		padding-left: 1.2rem;
		padding-right: 1.1rem;
		font-size: 1.2rem;
	}
}

.ticketseat-map-toolbar button:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}


.ticketseat-map-viewport {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
		linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
		#f6f7f7;
	background-size: 8px 8px;
	border: 1px solid #dcdcde;
	border-radius: 14px;
	cursor: grab;
	height: clamp(560px, 72vh, 900px);
	overflow: hidden;
	position: relative;
	touch-action: none;
	user-select: none;
	width: 100%;
}

.ticketseat-map-viewport.is-panning {
	cursor: grabbing;
}

.ticketseat-map {
	left: 0;
	position: absolute;
	top: 0;
	transform-origin: 0 0;
}

/* GPU-promote the map only while a gesture is running. At rest the layer
   demotes and Chrome repaints it at the final effective scale, so seats stay
   crisp on fractional Windows display scaling (e.g. map zoom 1.95 × dPR 1.8);
   a permanently promoted layer can stay soft from a stale raster scale.
   Blur *during* a gesture is normal and resolves on the calm repaint. */
.ticketseat-map-viewport.is-panning .ticketseat-map,
.ticketseat-map-viewport.is-zooming .ticketseat-map {
	will-change: transform;
}

.ticketseat-venue-decor {
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.ticketseat-venue-line {
	fill: none;
	stroke: #172435;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 10;
}

.ticketseat-venue-fill {
	fill: #172435;
	fill-rule: evenodd;
	stroke: none;
}

.ticketseat-map-title {
	fill: #000;
	font-family: Arial, sans-serif;
	font-size: 26px;
	font-weight: 700;
}

.ticketseat-map-subtitle {
	fill: #000;
	font-family: Arial, sans-serif;
	font-size: 24px;
}

.ticketseat-map-podium {
	fill: #172435;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 44px;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.ticketseat-map-text {
	fill: #172435;
	font-family: Arial, sans-serif;
	font-size: 20px;
}

.ticketseat-stage-label {
	background: #1d2327;
	border-radius: var(--ticketseat-radius, 8px);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	left: 50%;
	letter-spacing: 0.05em;
	padding: 0.45rem 1rem;
	position: absolute;
	text-transform: uppercase;
	top: 16px;
	transform: translateX(-50%);
}

.ticketseat-seat {
	align-items: center;
	border: 2px solid var(--ticketseat-seat-color, #1f7a4d);
	border-radius: 999px;
	box-shadow: inset 0 0 0 3px #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 700;
	height: var(--ticketseat-seat-size, 42px);
	justify-content: center;
	position: absolute;
	touch-action: none;
	transition: box-shadow 120ms ease, background 120ms ease;
	user-select: none;
	width: var(--ticketseat-seat-size, 42px);
	z-index: 2;
}

/* Hover/focus feedback is a glow only — no translateY movement. The old
   2px lift snapped back when a clicked seat became disabled (hover rule
   stops matching), a visible jump at high zoom on scaled displays. */
.ticketseat-seat:focus-visible {
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--ticketseat-seat-color, #1f7a4d) 28%, transparent);
}

/* Hover glow only on real pointers. Hybrid Windows devices can advertise a
   fine hover-capable pointer because a touchpad is present, then retain
   :hover after a touchscreen tap. JS marks that actual touch input so the
   glow cannot appear later when the held seat is re-enabled. Keyboard focus
   remains independent. Not while panning or zooming: seats sliding under the
   cursor would jitter. */
@media (hover: hover) and (pointer: fine) {
	.ticketseat-seat-app:not(.ticketseat-touch-input) .ticketseat-map-viewport:not(.is-panning):not(.is-zooming) .ticketseat-seat:hover:not(:disabled) {
		box-shadow: 0 0 0 6px color-mix(in srgb, var(--ticketseat-seat-color, #1f7a4d) 28%, transparent);
	}
}

/* While panning or zooming, seats crossing under the cursor must not fight
   the viewport cursor (grab↔pointer↔not-allowed flicker on dense maps). */
.ticketseat-map-viewport.is-panning .ticketseat-seat,
.ticketseat-map-viewport.is-zooming .ticketseat-seat {
	cursor: inherit;
}

.ticketseat-seat-available {
	background: var(--ticketseat-seat-color, #1f7a4d);
	color: transparent;
}

.ticketseat-seat-held {
	background: #fff4d6;
	border-color: #b7791f;
	color: #744210;
	cursor: not-allowed;
}

.ticketseat-seat-reserved {
	background: #f0f0f1;
	border-color: #8c8f94;
	color: #646970;
	cursor: not-allowed;
	text-decoration: line-through;
}

.ticketseat-seat-unavailable {
	background: #eadfdf;
	border-color: #cdbbbb;
	color: transparent;
	cursor: not-allowed;
}

.ticketseat-seat-selected {
	background: #078d50;
	border-color: #078d50;
	color: #fff;
	font-size: 0;
}

.ticketseat-seat-selected::after {
	content: '✓';
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1;
}

.ticketseat-seat-tooltip {
	background: #fff;
	border-radius: 9px;
	box-shadow: 0 10px 22px rgba(23, 36, 53, 0.16);
	color: #6f638b;
	display: grid;
	font-size: 15px;
	font-weight: 500;
	gap: 4px;
	line-height: 1.2;
	max-width: min(240px, calc(100vw - 24px));
	min-width: 155px;
	padding: 12px 16px;
	pointer-events: none;
	position: fixed;
	text-align: center;
	transform: translate(-50%, -100%);
	z-index: 1000001;
}

.ticketseat-seat-tooltip[hidden] {
	display: none;
}

.ticketseat-seat-tooltip::after {
	background: #fff;
	content: '';
	height: 14px;
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 14px;
}

.ticketseat-seat-tooltip.is-below {
	transform: translate(-50%, 0);
}

.ticketseat-seat-tooltip.is-below::after {
	bottom: 100%;
	top: auto;
}

.ticketseat-seat-tooltip-price {
	color: #6f638b;
	font-size: 18px;
	font-weight: 800;
}

.ticketseat-seat-tooltip-type,
.ticketseat-seat-tooltip-place {
	color: #6f638b;
	display: block;
	font-size: 15px;
}

.ticketseat-seat-tooltip small {
	font-size: 12px;
}

.ticketseat-tariffs {
	display: grid;
	gap: 0.75rem;
	margin: 1rem 0;
}

.ticketseat-tariff-row {
	align-items: center;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: var(--ticketseat-radius, 8px);
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 90px 1fr;
	padding: 0.75rem;
}

.ticketseat-tariff-row strong {
	color: #111;
	display: grid;
	gap: 0.15rem;
}

.ticketseat-tariff-row small {
	color: #646970;
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.25;
}

.ticketseat-tariff-row select {
	border: 1px solid #8c8f94;
	border-radius: var(--ticketseat-radius, 8px);
	color: #000;
	max-width: 100%;
	min-height: 40px;
	padding: 0.35rem 0.5rem;
}

.ticketseat-tariff-row select option {
	color: #000;
}

.ticketseat-tariff-chip {
	align-items: center;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: var(--ticketseat-radius, 8px);
	color: #000;
	display: inline-flex;
	flex-wrap: wrap;
	font-weight: 800;
	gap: 0.4rem 0.75rem;
	line-height: 1.25;
	min-height: 40px;
	padding: 0.55rem 0.75rem;
}

.ticketseat-tariff-chip-label {
	color: #000;
	display: inline-block;
}

.ticketseat-tariff-chip-price {
	color: #000;
	font-weight: 700;
	white-space: nowrap;
}

.ticketseat-tariff-chip-old-price {
	color: #646970;
	font-weight: 600;
	margin-left: 0.35em;
	text-decoration: line-through;
	white-space: nowrap;
}

.ticketseat-tariff-warning {
	background: #fcf0f1;
	border-left: 4px solid #d63638;
	margin: 0;
	padding: 0.75rem;
}

.woocommerce-cart-form__contents .product-quantity .quantity input.qty.ticketseat-fixed-seat-quantity,
.brxe-woocommerce-cart-items .product-quantity .quantity input.qty.ticketseat-fixed-seat-quantity {
	-moz-appearance: textfield;
	display: block !important;
	pointer-events: none;
	text-align: center;
}

.woocommerce-cart-form__contents .product-quantity .quantity.ticketseat-fixed-seat-quantity-wrap .action.minus,
.woocommerce-cart-form__contents .product-quantity .quantity.ticketseat-fixed-seat-quantity-wrap .action.plus,
.brxe-woocommerce-cart-items .product-quantity .quantity.ticketseat-fixed-seat-quantity-wrap .action.minus,
.brxe-woocommerce-cart-items .product-quantity .quantity.ticketseat-fixed-seat-quantity-wrap .action.plus {
	display: none !important;
}

.woocommerce-cart-form__contents .product-quantity .quantity input.qty.ticketseat-fixed-seat-quantity::-webkit-outer-spin-button,
.woocommerce-cart-form__contents .product-quantity .quantity input.qty.ticketseat-fixed-seat-quantity::-webkit-inner-spin-button,
.brxe-woocommerce-cart-items .product-quantity .quantity input.qty.ticketseat-fixed-seat-quantity::-webkit-outer-spin-button,
.brxe-woocommerce-cart-items .product-quantity .quantity input.qty.ticketseat-fixed-seat-quantity::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.ticketseat-actions {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-left: auto;
}

/* Base dimensions come from the Bricks button classes on these elements;
   layout and TicketSeat-specific colour/state overrides live here. */
.ticketseat-close,
.ticketseat-back,
.ticketseat-next,
.ticketseat-add-cart {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	text-align: center;
}

.ticketseat-seat-app .ticketseat-back {
	background-color: var(--at-white-alt) !important;
	border-color: var(--at-white-alt) !important;
	color: var(--at-btn-light-color) !important;
}

.ticketseat-seat-app .ticketseat-back:hover,
.ticketseat-seat-app .ticketseat-back:focus-visible {
	background-color: var(--at-btn-light-background--hover) !important;
	border-color: var(--at-btn-light-background--hover) !important;
}

.ticketseat-seat-app .ticketseat-next:disabled,
.ticketseat-seat-app .ticketseat-add-cart:disabled {
	background: #eef0f3 !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: #a2aab4 !important;
	cursor: default;
	opacity: 1;
	pointer-events: none;
}

/* Arrows mark navigation between steps; "Afrekenen" is the commitment action,
   so it shows the order total instead of an arrow. The second content
   declaration adds empty alt text so screen readers skip the glyph; browsers
   without the slash syntax fall back to the first declaration. */
.ticketseat-back::before {
	content: '\2190';
	content: '\2190' / '';
	margin-right: 0.5em;
}

/* Forward arrow on "Kies tarief". The .is-waiting spinner rule below is more
   specific, so it takes over this ::after while holds confirm. */
.ticketseat-next::after {
	content: '\2192';
	content: '\2192' / '';
	margin-left: 0.5em;
}

.ticketseat-seat-app .ticketseat-next.is-waiting::after {
	animation: ticketseat-spin 700ms linear infinite;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	content: '';
	flex: 0 0 auto;
	height: 1em;
	margin-left: 0.5em;
	width: 1em;
}

.ticketseat-processing-overlay {
	align-items: center;
	/* No full-screen scrim: a dark overlay over the whole picker is what iOS 26
	   Safari samples for its toolbar tint, darkening the header/footer bars. The
	   centered card still communicates the loading/processing state. */
	background: transparent;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
	z-index: 60;
}

.ticketseat-fullscreen .ticketseat-processing-overlay {
	position: fixed;
}

.ticketseat-processing-overlay[hidden] {
	display: none;
}

.ticketseat-processing-box {
	align-items: center;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	max-width: min(90vw, 380px);
	padding: 1.75rem 2.25rem;
	text-align: center;
}

.ticketseat-processing-spinner {
	animation: ticketseat-spin 700ms linear infinite;
	border: 3px solid #d8dde3;
	border-radius: 50%;
	border-top-color: var(--at-primary, #0C3B6B);
	height: 2.5rem;
	width: 2.5rem;
}

.ticketseat-processing-message {
	color: #1d2327;
	font-weight: 600;
	margin: 0;
}

@keyframes ticketseat-spin {
	to {
		transform: rotate(360deg);
	}
}

.ticketseat-open-button,
.ticketseat-warning-ok {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	text-align: center;
}

.ticketseat-warning-backdrop {
	/* Transparent for the same reason as the processing overlay: a full-screen
	   dark scrim throws off the iOS 26 Safari toolbar colour. The dialog keeps
	   its own shadow for separation. Still covers the screen to catch the
	   tap-to-dismiss. */
	background: transparent;
	inset: 0;
	position: fixed;
	z-index: 2147483646;
}

.ticketseat-warning-modal {
	background: #fff;
	border-radius: var(--ticketseat-radius, 8px);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
	box-sizing: border-box;
	color: #222;
	left: 50%;
	max-width: calc(100vw - 40px);
	overflow: hidden;
	padding: 24px;
	position: fixed;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 700px;
	z-index: 2147483647;
}

.ticketseat-warning-modal p {
	font-size: 18px;
	line-height: 1.45;
	margin: 0 0 14px;
}

.ticketseat-warning-modal h3 {
	font-size: 22px;
	line-height: 1.3;
	margin: 0 0 18px;
}

@media (max-width: 600px) {
	.ticketseat-warning-modal {
		padding: 20px;
	}

	.ticketseat-warning-modal p {
		font-size: 16px;
	}
}

.ticketseat-fullscreen {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	inset: 0;
	margin: 0;
	max-width: none;
	padding: 0;
	position: fixed;
	width: 100vw;
	z-index: 999999;
}

.admin-bar .ticketseat-fullscreen {
	height: calc(100dvh - 32px);
	top: 32px;
}

.ticketseat-fullscreen .ticketseat-header {
	background-color: var(--at-primary-d-1, #103358);
	color: var(--at-white, #F5F5F5);
	border-bottom: 1px solid #dcdcde;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	flex: 0 0 auto;
	padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 2rem) 0.9rem;
	position: relative;
	z-index: 5;
}

.ticketseat-fullscreen .ticketseat-header h3 {
	font-size: clamp(1.25rem, 3vw, 1.9rem);
	letter-spacing: 0.02em;
	margin: 0;
}

.ticketseat-fullscreen .ticketseat-status {
	color: #646970;
	font-size: 0.9rem;
	font-weight: 700;
	margin-top: 0.25rem;
}

.ticketseat-fullscreen .ticketseat-steps {
	background: #fff;
	border-bottom: 1px solid #dcdcde;
	flex: 0 0 auto;
	justify-content: center;
	margin: 0;
	padding: 0.75rem 1rem;
}

.ticketseat-fullscreen.ticketseat-step-tariffs [data-step-indicator='seats'],
.ticketseat-fullscreen.ticketseat-step-tariffs.has-tariffs-chosen [data-step-indicator='cart'] {
	cursor: pointer;
}

.ticketseat-fullscreen.ticketseat-step-tariffs.has-tariffs-chosen [data-step-indicator='cart']:hover,
.ticketseat-fullscreen.ticketseat-step-tariffs.has-tariffs-chosen [data-step-indicator='cart']:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-primary, #0C3B6B) 16%, transparent);
	outline: none;
}

.ticketseat-fullscreen.ticketseat-step-tariffs [data-step-indicator='seats']:hover,
.ticketseat-fullscreen.ticketseat-step-tariffs [data-step-indicator='seats']:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-primary, #0C3B6B) 16%, transparent);
	outline: none;
}

.ticketseat-fullscreen.ticketseat-step-seats .ticketseat-steps {
	display: none;
}

.ticketseat-fullscreen .ticketseat-step-summary {
	background: #fff;
	border-bottom: 1px solid #dcdcde;
	color: #1d2327;
	display: none;
	flex: 0 0 auto;
	font-size: var(--at-text--s, 1rem);
	font-weight: 800;
	margin: 0;
	padding: 0.9rem clamp(1rem, 4vw, 2rem);
	text-align: center;
}

.ticketseat-fullscreen.ticketseat-step-tariffs .ticketseat-step-summary {
	display: block;
}

.ticketseat-fullscreen .ticketseat-stage {
	border-radius: 0;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0;
	min-height: 0;
	padding: 0;
}

.ticketseat-fullscreen .ticketseat-stage.ticketseat-step-panel:not(.is-active) {
	display: none;
}

.ticketseat-fullscreen .ticketseat-seat-controls {
	background: #fff;
	border-bottom: 1px solid #dcdcde;
	box-shadow: 0 3px 18px rgba(0, 0, 0, 0.08);
	display: grid;
	flex: 0 0 auto;
	gap: 0.65rem;
	padding: 0.8rem clamp(1rem, 4vw, 2rem);
	position: relative;
	z-index: 4;
}

.ticketseat-fullscreen .ticketseat-legend,
.ticketseat-fullscreen .ticketseat-map-toolbar {
	align-items: center;
	margin: 0;
}

.ticketseat-fullscreen .ticketseat-map-viewport {
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	flex: 1 1 auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--ticketseat-content-width);
	min-height: 0;
}

.ticketseat-fullscreen .ticketseat-map-toolbar {
	background: #fff;
	flex: 0 0 auto;
	justify-content: center;
	padding: 0.5rem clamp(1rem, 4vw, 2rem);
}

@media (max-width: 767px) {
	.ticketseat-fullscreen .ticketseat-map-toolbar {
		background: var(--at-primary-d-1, #103358);
		padding-top: 1.0rem !important;
		padding-bottom: 0.7rem !important;
	}
}

.ticketseat-fullscreen .ticketseat-footer {
	align-items: center;
	background-color: var(--at-primary-d-1, #103358);
	color: var(--at-white, #F5F5F5);
	border-top: 1px solid #dcdcde;
	box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.16);
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	gap: 1rem;
	min-height: 85px;
	padding: 1rem clamp(1rem, 4vw, 2rem) max(1rem, env(safe-area-inset-bottom));
	z-index: 6;
}

@media (max-width: 767px) {
	.ticketseat-fullscreen .ticketseat-footer {
		border-top: none;
	}
}

.ticketseat-fullscreen.ticketseat-step-tariffs .ticketseat-footer .ticketseat-selection {
	display: none;
}

.ticketseat-fullscreen .ticketseat-selection {
	display: grid;
	gap: 0.15rem;
}

.ticketseat-fullscreen .ticketseat-selection strong {
	font-size: 1.05rem;
	line-height: 1.2;
}

.ticketseat-fullscreen .ticketseat-selection span {
	color: var(--at-secondary-l-3, #dbc8ad);
	font-weight: 700;
}

.ticketseat-fullscreen .ticketseat-next,
.ticketseat-fullscreen .ticketseat-add-cart {
	font-size: 1rem;
	min-width: 220px;
	text-transform: uppercase;
}

.ticketseat-fullscreen .ticketseat-step-panel[data-step-panel='tariffs'].is-active {
	box-sizing: border-box;
	flex: 1 1 auto;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--ticketseat-content-width);
	overflow: auto;
	padding: 2rem clamp(1rem, 4vw, 2rem);
	width: 100%;
}

.ticketseat-fullscreen .ticketseat-header,
.ticketseat-fullscreen .ticketseat-steps,
.ticketseat-fullscreen .ticketseat-step-summary,
.ticketseat-fullscreen .ticketseat-seat-controls,
.ticketseat-fullscreen .ticketseat-map-toolbar,
.ticketseat-fullscreen .ticketseat-footer {
	padding-left: max(1rem, calc((100vw - var(--ticketseat-content-width)) / 2));
	padding-right: max(1rem, calc((100vw - var(--ticketseat-content-width)) / 2));
}

@media (max-width: 700px) {
	.ticketseat-header,
	.ticketseat-footer {
		align-items: stretch;
		flex-direction: column;
	}

	.ticketseat-close,
	.ticketseat-back,
	.ticketseat-next,
	.ticketseat-add-cart {
		width: 100%;
	}

	.ticketseat-actions {
		flex-direction: column-reverse;
		margin-left: 0;
	}

	.ticketseat-stage {
		margin-left: -0.5rem;
		margin-right: -0.5rem;
		padding: 0.75rem;
	}

	.ticketseat-legend,
	.ticketseat-map-toolbar {
		justify-content: center;
	}

	.ticketseat-map-viewport {
		height: min(72svh, 620px);
		min-height: 460px;
	}

	.ticketseat-tariff-row {
		grid-template-columns: 1fr;
	}

	.ticketseat-fullscreen .ticketseat-header {
		align-items: center;
		flex-direction: row;
		padding: max(0.85rem, env(safe-area-inset-top)) 1rem 0.75rem;
	}

	.ticketseat-fullscreen .ticketseat-header > div {
		min-width: 0;
	}

	.ticketseat-fullscreen .ticketseat-header h3 {
		font-size: 1.5rem;
	}

	.ticketseat-seat-shortcode .ticketseat-seat-app.ticketseat-fullscreen .ticketseat-close {
		align-items: center;
		align-self: center;
		background: #fff;
		border: 0;
		border-radius: 999px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
		color: var(--at-primary, #0C3B6B);
		display: flex;
		flex: 0 0 auto;
		font-size: 0;
		height: 44px;
		justify-content: center;
		min-width: 44px;
		padding: 0;
		position: relative;
		width: 44px;
	}

	.ticketseat-seat-shortcode .ticketseat-seat-app.ticketseat-fullscreen .ticketseat-close::before,
	.ticketseat-seat-shortcode .ticketseat-seat-app.ticketseat-fullscreen .ticketseat-close::after {
		background: currentColor;
		border-radius: 2px;
		content: '';
		height: 18px;
		left: 50%;
		margin: 0;
		position: absolute;
		top: 50%;
		width: 3px;
	}

	.ticketseat-seat-shortcode .ticketseat-seat-app.ticketseat-fullscreen .ticketseat-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.ticketseat-seat-shortcode .ticketseat-seat-app.ticketseat-fullscreen .ticketseat-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.ticketseat-fullscreen .ticketseat-stage {
		margin: 0;
		padding: 0;
	}

	.ticketseat-fullscreen .ticketseat-seat-controls {
		padding: 0.7rem 0.85rem;
	}

	.ticketseat-fullscreen .ticketseat-legend {
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 0.15rem;
		scrollbar-width: none;
	}

	.ticketseat-fullscreen .ticketseat-legend::-webkit-scrollbar {
		display: none;
	}

	.ticketseat-fullscreen .ticketseat-map-toolbar {
		justify-content: center;
		padding: 0.45rem 0.85rem;
	}

	.ticketseat-fullscreen .ticketseat-map-viewport {
		height: auto;
		min-height: 0;
	}

	.ticketseat-fullscreen .ticketseat-footer {
		align-items: stretch;
		bottom: 0;
		flex-direction: column;
		left: 0;
		padding: 0.9rem 1rem max(0.9rem, env(safe-area-inset-bottom));
		pointer-events: none;
		position: absolute;
		right: 0;
		transform: translateY(calc(100% + 1rem));
		transition: transform 180ms ease;
	}

	.ticketseat-fullscreen.has-selection.ticketseat-step-seats .ticketseat-footer,
	.ticketseat-fullscreen.ticketseat-step-tariffs .ticketseat-footer,
	.ticketseat-fullscreen.ticketseat-step-cart .ticketseat-footer {
		pointer-events: auto;
		transform: translateY(0);
	}

	.ticketseat-fullscreen .ticketseat-step-panel[data-step-panel='tariffs'].is-active {
		padding-bottom: 9.5rem;
	}

	.ticketseat-fullscreen .ticketseat-next,
	.ticketseat-fullscreen .ticketseat-add-cart {
		min-width: 0;
		width: 100%;
	}
}

@media screen and (max-width: 782px) {
	.admin-bar .ticketseat-fullscreen {
		height: calc(100dvh - 46px);
		top: 46px;
	}
}

/* Debug mode ([ticketseat ... debug="on|url"]): header copy button, live
   counter badge in the map viewport, and the clipboard fallback overlay. */
.ticketseat-debug-button {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	justify-content: center;
	margin-left: auto;
	text-align: center;
}

.ticketseat-debug-badge {
	background: rgba(16, 51, 88, 0.85);
	border-radius: 8px;
	bottom: 10px;
	color: #fff;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	left: 10px;
	line-height: 1.4;
	padding: 0.3rem 0.55rem;
	pointer-events: none;
	position: absolute;
	z-index: 20;
}

.ticketseat-debug-fallback {
	align-items: center;
	background: rgba(16, 24, 32, 0.72);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	inset: 0;
	justify-content: center;
	padding: 1.25rem;
	position: absolute;
	z-index: 70;
}

.ticketseat-debug-fallback[hidden] {
	display: none;
}

.ticketseat-debug-fallback p {
	background: #fff;
	border-radius: 10px;
	color: #1d2327;
	font-weight: 700;
	margin: 0;
	max-width: 640px;
	padding: 0.75rem 1rem;
	text-align: center;
}

.ticketseat-debug-fallback textarea {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	color: #1d2327;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	height: min(50vh, 420px);
	max-width: 640px;
	padding: 0.75rem;
	width: 100%;
}

@media (max-width: 700px) {
	.ticketseat-seat-shortcode .ticketseat-seat-app.ticketseat-fullscreen .ticketseat-debug-button {
		align-self: center;
		border-radius: 999px;
		flex: 0 0 auto;
		font-size: 0.85rem;
		height: 44px;
		padding: 0 0.9rem;
		width: auto;
	}

	/* The mobile footer overlays the bottom of the map viewport, so the badge
	   moves to the top-left corner there. */
	.ticketseat-debug-badge {
		bottom: auto;
		top: 10px;
	}
}

/* Chromium's built-in Windows grab cursor is a white hand with a hairline
   outline that vanishes at fractional display scaling (e.g. 180% scaling ×
   90% browser zoom = dPR 1.8), leaving a near-invisible cursor on the light
   map. Windows machines (class set in frontend.js) get outlined SVG hands
   instead; macOS keeps its native, well-rendered cursors. */
.ticketseat-outlined-cursor .ticketseat-map-viewport {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.1 12.9 V7.3 a1.3 1.3 0 0 1 2.6 0 V11 h0.7 V5.6 a1.3 1.3 0 0 1 2.6 0 V11 h0.7 V6.3 a1.3 1.3 0 0 1 2.6 0 V11.6 h0.7 V8.4 a1.3 1.3 0 0 1 2.6 0 V14.8 c0 4-2.7 6.6-6.4 6.6 h-1 c-2.5 0-4.1-1.1-5.3-3.2 l-2.2-3.9 c-.5-.9-.2-1.9.7-2.3.8-.4 1.7-.1 2.2.7 l1.5 2.4 Z" fill="white" stroke="%230C3B6B" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/></svg>') 12 12, grab;
}

.ticketseat-outlined-cursor .ticketseat-map-viewport.is-panning {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.6 15.2 V12.6 a1.3 1.3 0 0 1 2.6 0 V12 a1.3 1.3 0 0 1 2.6 0 V12.2 a1.3 1.3 0 0 1 2.6 0 V12.9 a1.3 1.3 0 0 1 2.6 0 V16 c0 3.6-2.5 6-5.9 6 h-0.9 c-2.3 0-3.8-1-4.9-2.9 l-1.6-2.8 c-.5-.9-.2-1.9.7-2.3.8-.4 1.7-.1 2.2.7 Z" fill="white" stroke="%230C3B6B" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/></svg>') 12 12, grabbing;
}