.seating-map-viewport {
    overflow: auto;
    max-height: 65vh;
    border: 1px solid #cad4dc;
    border-radius: 0.375rem;
    overscroll-behavior: contain;
}

.seating-map-viewport svg { display: block; width: 100%; height: auto; }
.seating-map-viewport--full-height {
    position: relative;
    max-height: none;
    aspect-ratio: var(--seating-map-ratio);
}
/* Zoom the map without letting its content change the viewport height. */
.seating-map-viewport--full-height > [data-seat-map-target="stage"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.seating-seat-map { background: #f3f6f8; }
.seating-table-body { stroke-width: var(--table-stroke, 2px); }
.seating-seat-marker { cursor: pointer; outline: none; }
.seating-seat-marker circle { fill: #edf8f2; stroke: #147349; stroke-width: var(--seat-stroke, 1.5px); }
.seating-seat-marker text { fill: #123e2b; font-size: 9px; font-weight: 700; pointer-events: none; }
.seating-seat-marker.is-selected circle { fill: #ffc861; stroke: #815000; stroke-width: calc(var(--seat-stroke, 1.5px) * 1.5); }
.seating-seat-marker.is-unavailable { cursor: not-allowed; }
.seating-seat-marker.is-unavailable circle { fill: #d4dae0; stroke: #6f7a85; stroke-dasharray: 3 2; }
.seating-seat-marker.is-unavailable text { fill: #414b55; }
.seating-map-viewport.is-pan-enabled { cursor: grab; user-select: none; }
.seating-map-viewport.is-panning,
.seating-map-viewport.is-panning .seating-seat-marker { cursor: grabbing; }
.seating-seat-marker:focus-visible circle { stroke: #165eb9; stroke-width: calc(var(--seat-stroke, 1.5px) * 2); }
.seating-map-legend { display: inline-flex; align-items: center; gap: 0.4rem; }
.seating-map-swatch { width: 1rem; height: 1rem; border: 1px solid #147349; background: #edf8f2; border-radius: 50%; }
.seating-map-swatch.selected { background: #ffc861; border-color: #815000; }
.seating-map-swatch.unavailable { background: #d4dae0; border-color: #6f7a85; }