.hk-seatmap {
	--hk-seat-line: var(--line, rgba(128, 128, 128, .35));
	--hk-seat-accent: var(--accent, var(--gold, #1f3a5f));
	--hk-seat-on-accent: var(--on-accent, var(--on-gold, var(--on-brand, #fff)));
	--hk-seat-mute: var(--mute, #777);
	--hk-seat-paper: #f3f1ec;
	--hk-seat-surface: var(--surface, transparent);
	margin: 1.5em 0;
}
.hk-seatmap__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hk-seatmap__head { display: flex; flex-wrap: wrap; gap: .8em 1.5em; align-items: end; margin-bottom: .8em; }
.hk-seatmap__field { display: flex; flex-direction: column; gap: .2em; font-size: .85em; }
.hk-seatmap__date { min-width: 14em; padding: .5em .6em; font: inherit; }
.hk-seatmap__tabs { display: inline-flex; border: 1px solid var(--hk-seat-line); border-radius: 6px; overflow: hidden; }
.hk-seatmap__tab { padding: .55em 1em; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.hk-seatmap__tab[aria-pressed="true"] { background: var(--hk-seat-accent); color: var(--hk-seat-on-accent); }
.hk-seatmap__skip { display: inline-block; margin: 0 0 .6em; font-size: .85em; }
.hk-seatmap__msg { margin: .4em 0; padding: .5em .8em; border-left: 3px solid var(--hk-seat-accent); background: rgba(128, 128, 128, .1); }
.hk-seatmap__msg.is-error { border-left-color: #b23a3a; }
.hk-seatmap__msg[hidden], .hk-seatmap__stage[hidden], .hk-seatmap__list[hidden], .hk-seatmap__skip[hidden] { display: none; }
.hk-seatmap__legend { display: flex; flex-wrap: wrap; gap: .4em 1em; list-style: none; margin: 0 0 .8em; padding: 0; font-size: .85em; align-items: center; }
.hk-seatmap__legend-item { display: inline-flex; gap: .4em; align-items: center; padding: .25em .6em; border: 1px solid var(--hk-seat-line); border-radius: 99px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.hk-seatmap__legend-item.is-on { border-color: var(--hk-seat-accent); box-shadow: 0 0 0 1px var(--hk-seat-accent); }
.hk-seatmap__swatch { display: inline-block; width: .9em; height: .9em; border-radius: 50%; }
.hk-seatmap__key { display: inline-flex; gap: .4em; align-items: center; color: var(--hk-seat-mute); }
.hk-seatmap__keysym { display: inline-block; width: .9em; height: .9em; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.hk-seatmap__key--free .hk-seatmap__keysym { background: currentColor; }
.hk-seatmap__key--yours .hk-seatmap__keysym { background: currentColor; box-shadow: inset 0 0 0 2px var(--hk-seat-paper); }
.hk-seatmap__stage { position: relative; border: 1px solid var(--hk-seat-line); border-radius: 6px; overflow: hidden; background: var(--hk-seat-paper); touch-action: none; }
.hk-seatmap__svg { display: block; width: 100%; height: auto; max-height: 78vh; touch-action: none; user-select: none; }
.hk-seatmap__paper { fill: var(--hk-seat-paper); }
.hk-seatmap__section { cursor: zoom-in; }
.hk-seatmap__section.is-standing { cursor: pointer; }
.hk-seatmap__zonelabel { fill: #fff; font-family: sans-serif; font-weight: 700; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 3px; pointer-events: none; }
.hk-seat { pointer-events: all; stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: pointer; }
.hk-seat.is-taken { cursor: not-allowed; stroke-dasharray: 2 2; opacity: .6; }
.hk-seat.is-yours { stroke: #fff !important; stroke-width: 3px; paint-order: stroke; }
.hk-seat.is-dim { opacity: .18; }
.hk-seat-dot { fill: #fff; stroke: #000; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.hk-seatmap__tip { position: absolute; z-index: 3; max-width: 22em; padding: .35em .6em; background: #111; color: #fff; font-size: .8em; border-radius: 4px; pointer-events: none; }
.hk-seatmap__tip[hidden] { display: none; }
.hk-seatmap__tools { position: absolute; right: .5em; top: .5em; display: flex; flex-direction: column; gap: .3em; }
.hk-seatmap__tool { width: 2.4em; height: 2.4em; border: 1px solid var(--hk-seat-line); border-radius: 6px; background: rgba(255, 255, 255, .9); color: #111; font-size: 1.1em; cursor: pointer; }
.hk-seatmap__list { border: 1px solid var(--hk-seat-line); border-radius: 6px; padding: .8em 1em; max-height: 70vh; overflow: auto; }
.hk-seatmap__sectitle { display: flex; gap: .5em; align-items: center; margin: .8em 0 .4em; font-size: 1em; }
.hk-seatmap__row { display: flex; flex-wrap: wrap; gap: .3em; align-items: center; margin: .25em 0; }
.hk-seatmap__rowname { width: 2.2em; font-weight: 700; }
.hk-seatmap__seat { min-width: 2.4em; height: 2.4em; padding: 0 .3em; border: 2px solid var(--seat, #777); border-radius: 50%; background: var(--seat, #777); color: #fff; font: inherit; font-size: .85em; font-variant-numeric: tabular-nums; cursor: pointer; text-shadow: 0 0 2px rgba(0, 0, 0, .6); }
.hk-seatmap__seat.is-wheelchair { border-radius: 5px; }
.hk-seatmap__seat.is-companion { border-radius: 5px; transform: rotate(45deg); }
.hk-seatmap__seat.is-taken { background: transparent; color: var(--hk-seat-mute); border-style: dashed; text-decoration: line-through; text-shadow: none; cursor: not-allowed; }
.hk-seatmap__seat.is-yours { box-shadow: 0 0 0 3px var(--hk-seat-paper), 0 0 0 5px var(--hk-seat-accent); }
.hk-seatmap__seat:focus-visible, .hk-seatmap__legend-item:focus-visible, .hk-seatmap__tab:focus-visible, .hk-seatmap__tool:focus-visible { outline: 3px solid var(--hk-seat-accent); outline-offset: 2px; }
.hk-seatmap__zone { display: flex; gap: 1em; align-items: center; }
.hk-seatmap__qty { width: 5em; padding: .4em; }
.hk-seatmap__mine { margin-top: 1em; }
.hk-seatmap__minetitle { margin: 0 0 .4em; font-size: 1em; }
.hk-seatmap__minelist { list-style: none; margin: 0; padding: 0; }
.hk-seatmap__minelist li { display: flex; justify-content: space-between; gap: 1em; align-items: center; padding: .35em 0; border-bottom: 1px solid var(--hk-seat-line); }
.hk-seatmap__remove { border: 0; background: none; color: var(--hk-seat-accent); text-decoration: underline; cursor: pointer; font: inherit; }
.hk-seatmap__hold { font-variant-numeric: tabular-nums; color: var(--hk-seat-mute); }
.hk-seatmap__hint { color: var(--hk-seat-mute); }
.hk-seatmap__cart { margin-top: .6em; padding: .8em 1.6em; border: 0; border-radius: 4px; background: var(--hk-seat-accent); color: var(--hk-seat-on-accent); font: inherit; font-weight: 600; cursor: pointer; }
.hk-seatmap__cart:disabled { opacity: .6; cursor: default; }
@media (max-width: 640px) { .hk-seatmap__date { min-width: 0; width: 100%; } .hk-seatmap__field { width: 100%; } .hk-seatmap__seat { min-width: 2.8em; height: 2.8em; } }
.hk-seatmap__cartbox { display: flex; flex-wrap: wrap; gap: 1em; align-items: center; margin-top: .6em; }
.hk-seatmap__cartbox .hk-seatmap__cart { margin-top: 0; }
.hk-seatmap__viewcart { font-weight: 600; }
.hk-seatmap__rowletter { fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: 3px; font-family: sans-serif; font-weight: 700; pointer-events: none; user-select: none; }