#map-container {
  width: 100%;
  aspect-ratio: 1170 / 990;
  border: 1px solid #c2a953;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#map-container:active {
  cursor: grabbing;
}

#map-container.zooming-in {
  cursor: zoom-in;
}

#map-container.zooming-out {
  cursor: zoom-out;
}

#map-container svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#map-container .seat-map-background {
  pointer-events: none;
}

/* ======== Base seat styles ======== */
.seat-group {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.seat-group rect {
  transition: filter 0.15s ease, stroke 0.15s ease;
}

/* ======== Hover: available seats (not sold, not selecting) ======== */
.seat-group:not(.sold):not(.selecting):hover {
  transform-origin: center;
}

.seat-group:not(.sold):not(.selecting):hover rect {
  filter: brightness(1.25);
  stroke: #fff;
  stroke-width: 1.5px;
}

/* ======== Selected state ======== */
.seat-group.selected rect {
  fill: #ff5d60 !important;
}

.seat-group.selected:hover rect {
  filter: brightness(1.15);
  stroke: #fff;
  stroke-width: 1.5px;
}

/* ======== Selecting (other user holding) ======== */
.seat-group.selecting {
  cursor: not-allowed;
}

.seat-group.selecting rect {
  fill: #767683 !important;
}

.seat-group.selecting path {
  opacity: 1;
}

.seat-group.selecting:hover rect {
  filter: none !important;
  stroke: none;
}

/* ======== Sold (booked) ======== */
.seat-group.sold {
  cursor: not-allowed;
}

.seat-group.sold rect {
  fill: #767683 !important;
}

.seat-group.sold path {
  opacity: 1;
}

.seat-group.sold:hover rect {
  filter: none !important;
  stroke: none;
}