.gkb-seatmap-root {
	position: relative;
	max-width: 100%;
}

.gkb-map-viewport {
	position: relative;
	width: 100%;
	height: 70vh;
	max-height: 640px;
	min-height: 320px;
	overflow: hidden;
	touch-action: none;
	background: #fff;
	border: 2px solid #999;
	border-radius: 4px;
	cursor: grab;
}

.gkb-map-viewport.gkb-map-panning {
	cursor: grabbing;
}

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

.gkb-status-menu {
	position: absolute;
	z-index: 100;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.18 );
	padding: 4px;
	min-width: 190px;
}

.gkb-status-menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 8px;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	border-radius: 4px;
	font-size: 13px;
	color: #222;
}

.gkb-status-menu-item:hover {
	background: #f0f0f0;
}

.gkb-status-menu-item-current {
	font-weight: 600;
	background: #f5f5f5;
}

.gkb-status-menu-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid #333;
	flex-shrink: 0;
}

.gkb-seatmap-svg {
	display: block;
}

.gkb-seatmap-bg {
	pointer-events: none;
}

.gkb-seat {
	stroke: #333;
	stroke-width: 1;
	fill-opacity: 0.55;
}

.gkb-clickable {
	cursor: pointer;
}

.gkb-clickable:hover {
	stroke: #000;
	stroke-width: 2;
	fill-opacity: 0.8;
}

.gkb-seat.gkb-selected {
	fill: #e69f2e !important;
	fill-opacity: 0.85;
	stroke: #000;
	stroke-width: 2;
}

.gkb-seat.gkb-status-pending {
	fill: #c9c9c9 !important;
	fill-opacity: 0.55;
	stroke: #b8860b;
	stroke-width: 1.5;
	stroke-dasharray: 3 2;
	cursor: not-allowed;
}

.gkb-seat.gkb-has-hold {
	stroke-dasharray: 3 2;
}

.gkb-legend-swatch-pending {
	background: #c9c9c9;
	border-color: #b8860b;
	border-style: dashed;
}

.gkb-countdown {
	margin-top: 4px;
	font-weight: 600;
	color: #a35b00;
}

.gkb-code-panel {
	margin-bottom: 12px;
	padding: 8px 0;
	text-align: center;
}

.gkb-code-input {
	margin: 0 8px;
	width: 280px;
	max-width: 55%;
}

/*
 * Bare <input>/<textarea> uebernehmen KEIN nutzbares Formular-Styling vom
 * Theme (verifiziert 23.07.2026 - anders als urspruenglich angenommen faellt
 * ohne eigene Regeln nur der karge Browser-Standard an). Die Referenzoptik
 * (siehe asVerein) kommt dort von dessen eigenem gebuendelten Bootstrap
 * (.form-control), nicht vom Theme - daher hier bewusst dieselbe Optik in
 * eigenem CSS nachgebaut, ohne echte Abhaengigkeit zu Bootstrap/asVerein.
 */
.gkb-checkout-row input:not([type="checkbox"]),
.gkb-checkout-row textarea,
.gkb-code-input {
	box-sizing: border-box;
	padding: 10px 14px;
	font-size: 16px;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 6px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.gkb-checkout-row input:not([type="checkbox"]):focus,
.gkb-checkout-row textarea:focus,
.gkb-code-input:focus {
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba( 13, 110, 253, 0.25 );
}

.gkb-code-submit {
	margin-left: 4px;
}

.gkb-code-message-box {
	margin: 0 0 12px;
	padding: 10px 14px;
	background: #f3f3f3;
	border-radius: 4px;
	text-align: center;
	font-style: italic;
}

.gkb-code-message-box:empty {
	display: none;
}

.gkb-code-message-success {
	color: #2d7a3a;
}

.gkb-code-message-error {
	color: #b23b3b;
}

.gkb-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 12px;
}

.gkb-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.gkb-legend-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid #333;
}

.gkb-legend-hint {
	flex-basis: 100%;
	text-align: center;
	font-style: italic;
	margin: 4px 0 0;
}

.gkb-reservation-status {
	margin-top: 12px;
	padding: 10px 14px;
	background: #f3f3f3;
	border-radius: 4px;
	text-align: center;
}

.gkb-selection-summary {
	font-weight: 500;
}

.gkb-price-breakdown {
	margin-top: 6px;
	font-weight: 600;
}

.gkb-price-breakdown:empty {
	display: none;
}

.gkb-error {
	color: #b23b3b;
}

.gkb-checkout-panel {
	margin: 16px auto 0;
	padding: 14px 16px;
	text-align: center;
}

.gkb-checkout-heading {
	margin: 0 0 6px;
}

.gkb-checkout-intro {
	margin: 0 0 12px;
}

.gkb-checkout-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-bottom: 10px;
}

.gkb-checkout-row input,
.gkb-checkout-row textarea {
	width: 100%;
	max-width: 440px;
}

.gkb-checkout-consent {
	flex-direction: row;
	justify-content: center;
}

/*
 * BEWUSST kein display:flex auf dem Label: Bei gemischtem Inhalt (Text +
 * <a>-Link + weiterer Text) macht Flexbox aus jedem einzelnen Textknoten ein
 * eigenes anonymes Flex-Item, das dann unabhaengig umbricht - fuehrte zu
 * wortweise zerstueckeltem Text (siehe Nutzer-Screenshot). Normale Inline-
 * Textbox-Faltung + gefloatete Checkbox ist hier das richtige Werkzeug.
 */
.gkb-checkout-consent label {
	display: block;
	max-width: 440px;
	text-align: left;
}

.gkb-checkout-consent input[type="checkbox"] {
	float: left;
	margin: 3px 8px 0 0;
}

.gkb-checkout-submit {
	margin-top: 4px;
}

.gkb-checkout-message {
	margin-top: 10px;
}

.gkb-checkout-message-success {
	color: #2d7a3a;
}

.gkb-checkout-message-error {
	color: #b23b3b;
}