/* ──────────────────────────────────────────────
   Seat map (reserved seating)
   Runtime seat states are CSS classes set by the seat-map Stimulus
   controller from server data; the SVG itself never encodes them.
   ────────────────────────────────────────────── */

.seat-map-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #FAFAFA;
    border: 1px solid #E9EAEC;
    border-radius: var(--biletite-radius, 0.875rem);
    touch-action: none;          /* pan/pinch handled by the controller */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.seat-map-viewport:active {
    cursor: grabbing;
}

.seat-map-viewport svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
}

.seat-map.is-busy .seat-map-viewport {
    opacity: 0.7;
}

.seat-map-toolbar .btn {
    min-width: 2.5rem;
}

/* Seats — the element may be a group with shapes inside, or a shape itself */
.hall-seat {
    cursor: pointer;
}

.hall-seat:is(circle, rect, path, ellipse, polygon),
.hall-seat :is(circle, rect, path, ellipse, polygon) {
    transition: fill 0.12s ease, stroke 0.12s ease;
}

.hall-seat text {
    pointer-events: none;
}

/* Hover only for available seats */
.seat-available:hover:is(circle, rect, path, ellipse, polygon),
.seat-available:hover :is(circle, rect, path, ellipse, polygon) {
    stroke: var(--biletite-dark, #1E1E2E) !important;
    stroke-width: 2;
}

.seat-selected:is(circle, rect, path, ellipse, polygon),
.seat-selected :is(circle, rect, path, ellipse, polygon) {
    fill: var(--biletite-primary, #F5A623) !important;
    stroke: var(--biletite-primary-dark, #E8850C) !important;
    stroke-width: 2.5;
}

.seat-reserved,
.seat-sold,
.seat-disabled {
    cursor: not-allowed;
}

.seat-reserved:is(circle, rect, path, ellipse, polygon),
.seat-reserved :is(circle, rect, path, ellipse, polygon) {
    fill: #FDE68A !important;
    stroke: #F59E0B !important;
}

.seat-sold:is(circle, rect, path, ellipse, polygon),
.seat-sold :is(circle, rect, path, ellipse, polygon) {
    fill: #D1D5DB !important;
    stroke: #9CA3AF !important;
}

.seat-disabled:is(circle, rect, path, ellipse, polygon),
.seat-disabled :is(circle, rect, path, ellipse, polygon) {
    fill: #F3F4F6 !important;
    stroke: #E5E7EB !important;
}

.seat-disabled text,
.seat-sold text {
    opacity: 0.5;
}

.hall-seat:focus {
    outline: none;
}

.hall-seat:focus-visible:is(circle, rect, path, ellipse, polygon),
.hall-seat:focus-visible :is(circle, rect, path, ellipse, polygon) {
    stroke: #1D4ED8 !important;
    stroke-width: 3;
}

/* Legend */
.seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.82rem;
    color: var(--biletite-gray, #6B7280);
}

.seat-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.seat-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.seat-legend-swatch.is-available { background: #9CA3AF; }
.seat-legend-swatch.is-selected  { background: var(--biletite-primary, #F5A623); border-color: var(--biletite-primary-dark, #E8850C); }
.seat-legend-swatch.is-reserved  { background: #FDE68A; border-color: #F59E0B; }
.seat-legend-swatch.is-sold      { background: #D1D5DB; border-color: #9CA3AF; }
.seat-legend-swatch.is-disabled  { background: #F3F4F6; border-color: #E5E7EB; }

/* Selection panel */
.seat-selection-panel {
    border: 1px solid #E9EAEC;
    border-radius: var(--biletite-radius, 0.875rem);
    background: #fff;
}

.seat-selection-timer {
    font-variant-numeric: tabular-nums;
}

/* Seat labels on cart / checkout / confirmation */
.seat-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--biletite-primary-pale, #FFF3DC);
    color: var(--biletite-dark, #1E1E2E);
    margin: 0.15rem 0.25rem 0 0;
}