/* Seat map: the room and everything in it — sections, rows, seats, tables,
   standing areas, stage — drawn on a plane in the plan's own coordinates and
   scaled by the seatmap-selection controller (--seatmap-scale, pan, pinch,
   overview). Element sizes inside the plane are plan units that scale with
   the zoom; the controls around the plane use the tokens.

   The class names are the controller's contract: it reads
   .seatmap-customer-map__plane and the content selectors, and sets is-panning,
   is-pinching, is-zoomed, is-overview, is-unavailable and is-category-muted. */
.seatmap-customer-map {
  background: var(--color-surface-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  min-inline-size: 0;
  overflow: hidden;
  position: relative;
}

/* A price class colours its seats, chips and legend from --seat-category-color
   (seat_category_shop_style), kept in a mid range so it stays distinct from
   the map in both schemes (WCAG 1.4.11) */
.has-seat-category {
  --seat-fill: oklch(from var(--seat-category-color) clamp(0.52, l, 0.62) c h);
  --seat-ink: #141414;
}

[data-scheme="dark"] .has-seat-category {
  --seat-fill: oklch(from var(--seat-category-color) clamp(0.64, l, 0.76) c h);
}

/* Floor choice and zoom, floating over the top of the map */
.seatmap-customer-map__toolbar {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  inset-block-start: var(--space-xs);
  inset-inline: var(--space-xs);
  justify-content: space-between;
  pointer-events: none;
  position: absolute;
  z-index: 20;

  > * {
    pointer-events: auto;
  }
}

.seatmap-customer-map__floor-select {
  background: color-mix(in oklch, var(--color-surface-1) 88%, transparent);
  backdrop-filter: blur(12px);
  border: var(--border-width) solid var(--color-subtle);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  max-inline-size: min(15rem, 50vw);
  padding: var(--space-2xs) var(--space-s);
}

.seatmap-customer-map__zoom {
  align-items: center;
  backdrop-filter: blur(12px);
  background: color-mix(in oklch, var(--color-surface-1) 88%, transparent);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 var(--border-width) var(--color-subtle), var(--shadow-raised);
  display: flex;
  gap: var(--space-3xs);
  margin-inline-start: auto;
  padding: var(--space-3xs);

  button {
    align-items: center;
    background: transparent;
    block-size: 2.25rem;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    gap: var(--space-3xs);
    justify-content: center;
    padding-inline: var(--space-xs);
    transition: background-color var(--duration-fast) var(--ease-out);

    &:hover:not(:disabled) {
      background: var(--color-surface-3);
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.35;
    }
  }
}

.seatmap-customer-map__zoom-step {
  aspect-ratio: 1;
  padding: 0 !important;
}

.seatmap-customer-map__zoom-level {
  font-variant-numeric: tabular-nums;
  min-inline-size: 3.5rem;
}

.seatmap-customer-map__viewport {
  block-size: var(--seat-map-height, min(70vh, 48rem));
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-s);
  background:
    radial-gradient(circle at center, oklch(from var(--color-accent) l c h / 0.08), transparent 65%),
    var(--color-surface-1);
  cursor: grab;
  user-select: none;
}

.seatmap-customer-map__viewport.is-panning {
  cursor: grabbing;
  scroll-behavior: auto;
}

.seatmap-customer-map__viewport.is-pinching {
  scroll-behavior: auto;
}

.seatmap-customer-map__viewport.is-pinching .seatmap-customer-map__stage {
  will-change: transform;
}

.seatmap-customer-map__floor {
  min-width: 100%;
  min-height: 100%;
}

.seatmap-customer-map__viewport.is-overview .seatmap-customer-map__floor:not([hidden]) {
  display: grid;
  place-items: center;
}

.seatmap-customer-map__stage {
  position: relative;
  width: var(--seatmap-scaled-width);
  height: var(--seatmap-scaled-height);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raised);
}

.seatmap-customer-map__plane {
  position: absolute;
  top: var(--seatmap-plane-top, 0);
  left: var(--seatmap-plane-left, 0);
  width: var(--seatmap-natural-width);
  aspect-ratio: var(--seatmap-aspect-ratio);
  transform: scale(var(--seatmap-scale));
  transform-origin: top left;
  color: var(--color-text);
}

.seatmap-customer-map__room {
  position: absolute;
  inset: 0;
  background: var(--color-surface-0);
  border-radius: var(--radius-l);
}

.seatmap-customer-map__walls {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.seatmap-customer-map__wall {
  fill: none;
  stroke: #111;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 6;
}

[data-scheme="dark"] .seatmap-customer-map__wall {
  stroke: oklch(0.86 0 0);
}

.seatmap-customer-map__door-opening {
  fill: none;
  stroke: var(--color-surface-2);
  stroke-linecap: butt;
  stroke-width: 12;
}

.seatmap-customer-map__door-jamb,
.seatmap-customer-map__door-leaf {
  fill: none;
  stroke: #111;
  stroke-linecap: square;
  stroke-width: 3;
}

.seatmap-customer-map__door-arc {
  fill: none;
  opacity: 0.55;
  stroke: #111;
  stroke-dasharray: 5 3;
  stroke-width: 1.5;
}

[data-scheme="dark"] .seatmap-customer-map__door-jamb,
[data-scheme="dark"] .seatmap-customer-map__door-leaf {
  stroke: oklch(0.86 0 0);
}

[data-scheme="dark"] .seatmap-customer-map__door-arc {
  stroke: oklch(0.78 0 0);
}

.seatmap-customer-map__section,
.seatmap-customer-map__table,
.seatmap-customer-map__standing,
.seatmap-customer-map__element {
  position: absolute;
  left: var(--seatmap-x);
  top: var(--seatmap-y);
  width: var(--seatmap-width);
  height: var(--seatmap-height);
  transform: rotate(var(--seatmap-rotation));
  transform-origin: center;
}

.seatmap-customer-map__section {
  z-index: 1;
  padding: 0.65rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-subtle);
  border-radius: 0.8rem;
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-scheme="dark"] .seatmap-customer-map__section {
  background: var(--color-surface-3);
  color: var(--color-text);
}

.seatmap-customer-map__row-label {
  position: absolute;
  z-index: 8;
  left: var(--seatmap-x);
  top: var(--seatmap-y);
  min-width: 1.25rem;
  transform: translate(-125%, -50%);
  color: var(--color-muted);
  font-family: "Geist Mono", monospace;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
  text-align: right;
  text-shadow: 0 0 0.25rem var(--color-surface-0);
}

.seatmap-customer-map__seat {
  position: absolute;
  z-index: 6;
  left: var(--seatmap-x);
  top: var(--seatmap-y);
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  /* Circles with upright labels — match editor/preview. Rotating chair-shaped
     chips around tables makes seats look like diamonds with sideways numbers. */
  transform: translate(-50%, -50%);
  border-radius: 999px;
  font-family: "Geist Mono", monospace;
  font-size: 0.62rem;
  font-weight: 800;
}

.seatmap-customer-map__seat--choice {
  color: var(--color-text);
  background: var(--color-surface-0);
  border: 1px solid color-mix(in srgb, var(--color-text) 38%, var(--color-subtle));
  box-shadow: 0 0.2rem 0.5rem oklch(0 0 0 / 0.12);
  cursor: pointer;
}

.seatmap-customer-map__seat--choice:hover {
  border-color: var(--color-accent);
}

.seatmap-customer-map__seat--choice.has-seat-category {
  color: var(--seat-ink);
  background: var(--seat-fill);
  border-color: oklch(from var(--seat-fill) calc(l * 0.72) c h);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-text) 28%, transparent),
    0 0.2rem 0.5rem oklch(0 0 0 / 0.18);
}

.seatmap-customer-map__seat--choice.has-seat-category:hover {
  border-color: oklch(from var(--seat-fill) calc(l * 0.55) c h);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--seat-fill) 45%, transparent),
    0 0.2rem 0.5rem oklch(0 0 0 / 0.18);
}

.seatmap-customer-map__seat--choice.is-category-muted {
  opacity: 0.18;
}

.seatmap-customer-map__seat--choice > span:first-child { visibility: hidden; }

.seatmap-customer-map__input {
  position: absolute;
  top: var(--seatmap-y);
  left: var(--seatmap-x);
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.seatmap-customer-map__input:checked + .seatmap-customer-map__seat--choice > span:first-child {
  visibility: visible;
}

.seatmap-customer-map__seat--neutral {
  z-index: 4;
  width: 1rem;
  height: 1rem;
  background: var(--color-subtle);
  border-radius: 999px;
  opacity: 0.55;
}

.seatmap-customer-map__input:focus-visible + .seatmap-customer-map__seat,
.seatmap-customer-map__input:focus-visible + .seatmap-customer-map__table {
  outline: 3px solid oklch(from var(--color-accent) l c h / 0.35);
  outline-offset: 3px;
}

.seatmap-customer-map__input:checked + .seatmap-customer-map__seat {
  color: var(--color-on-accent);
  background: var(--color-accent-fill);
  border-color: var(--color-accent-fill);
}

.seatmap-customer-map__seat.is-unavailable {
  color: var(--color-muted);
  background: color-mix(in srgb, var(--color-surface-1) 70%, var(--color-subtle));
  border-color: var(--color-subtle);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.75;
}

.seatmap-customer-map__seat.is-unavailable::after {
  position: absolute;
  width: 55%;
  height: 1.5px;
  content: "";
  background: var(--color-muted);
  border-radius: 999px;
  transform: rotate(-45deg);
}

.seatmap-customer-map__seat.is-accessible {
  border-radius: 999px;
}

.seatmap-customer-map__seat.is-companion {
  border-style: dashed;
}

.seatmap-customer-map__seat.is-paired {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent),
    0 0.2rem 0.5rem oklch(0 0 0 / 0.12);
}

.seatmap-customer-map__pair-links {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.seatmap-customer-map__pair-links line {
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}

.seatmap-customer-map__seat.is-restricted-view {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 4px,
    oklch(from var(--color-accent) l c h / 0.14) 4px 6px
  );
}

.seatmap-customer-map__seat-traits {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: sans-serif;
  font-size: 0.9rem;
  line-height: 1;
  pointer-events: none;
}

.seatmap-customer-map__input:checked + .seatmap-customer-map__seat .seatmap-customer-map__seat-traits {
  color: var(--color-on-accent);
}

.seatmap-customer-map__input:checked + .seatmap-customer-map__seat.has-traits > span:first-child {
  position: absolute;
  z-index: 1;
  right: -0.25rem;
  bottom: -0.35rem;
  display: grid;
  place-items: center;
  min-width: 1rem;
  height: 1rem;
  padding-inline: 0.15rem;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-subtle);
  border-radius: 999px;
  font-size: 0.5rem;
  line-height: 1;
}

.seatmap-customer-map__table {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  color: var(--color-muted);
  background: var(--color-surface-1);
  border: 1px solid var(--color-subtle);
  border-radius: var(--seatmap-radius, 0.75rem);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.seatmap-customer-map__table--around {
  border-radius: var(--seatmap-radius, 50%);
}

.seatmap-customer-map__table small {
  margin-top: 0.1rem;
  font-size: 0.58rem;
  font-weight: 600;
}

.seatmap-customer-map__table--choice {
  z-index: 5;
  color: var(--color-text);
  background: var(--color-surface-0);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0.25rem 0.65rem oklch(0 0 0 / 0.12);
  cursor: pointer;
}

.seatmap-customer-map__table--choice.has-seat-category {
  color: var(--seat-ink);
  background: var(--seat-fill);
  border-color: oklch(from var(--seat-fill) calc(l * 0.72) c h);
}

.seatmap-customer-map__input:checked + .seatmap-customer-map__table {
  color: var(--color-on-accent);
  background: var(--color-accent-fill);
}

.seatmap-customer-map__table.is-unavailable {
  border-color: var(--color-subtle);
  cursor: not-allowed;
  opacity: 0.5;
}

.seatmap-customer-map__standing {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.5rem;
  color: var(--color-muted);
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, oklch(from var(--color-accent) l c h / 0.06) 8px 16px),
    var(--color-surface-1);
  border: 1px dashed var(--color-subtle);
  border-radius: 0.75rem;
  font-size: 0.72rem;
  text-align: center;
}

.seatmap-customer-map__standing--choice {
  color: var(--color-text);
  border-color: var(--color-accent);
  text-decoration: none;
}

.seatmap-customer-map__standing--choice:hover,
.seatmap-customer-map__standing--choice:focus-visible {
  opacity: 1;
  background-color: oklch(from var(--color-accent) l c h / 0.12);
}

.seatmap-customer-map__standing.is-unavailable { opacity: 0.5; }

.seatmap-customer-map__standing .icon { --icon-size: 1.25rem; }
.seatmap-customer-map__standing span { font-size: 0.6rem; }

.seatmap-customer-map__element {
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--color-muted);
  border: 1px solid var(--color-subtle);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.seatmap-customer-map__element--stage {
  color: var(--color-text);
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface-1));
  border-radius: 0.6rem 0.6rem 50% 50% / 0.6rem 0.6rem 25% 25%;
  box-shadow: 0 0.4rem 1rem oklch(0 0 0 / 0.08);
}

.seatmap-customer-map__element--aisle {
  background: oklch(from var(--color-accent) l c h / 0.045);
  border-style: dashed;
}

.seatmap-customer-map__element--background { z-index: 0; }

/* Legend: what the colours and marks mean. Closed, a chip over the map's
   bottom left; open, a card in its place whose head (the same summary)
   carries a cross to close it. A tablet shows it as a strip instead (below). */
.seatmap-customer-map__legend-disclosure {
  inset-block-end: var(--space-xs);
  inset-inline-start: var(--space-xs);
  max-inline-size: min(calc(100% - 2 * var(--space-xs)), 30rem);
  position: absolute;
  z-index: 20;

  > summary {
    align-items: center;
    backdrop-filter: blur(12px);
    background: color-mix(in oklch, var(--color-surface-1) 88%, transparent);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 var(--border-width) var(--color-subtle), var(--shadow-raised);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--step--1);
    font-weight: var(--weight-semibold);
    gap: var(--space-2xs);
    list-style: none;
    padding: var(--space-2xs) var(--space-s);

    &::-webkit-details-marker {
      display: none;
    }
  }

  &:not([open]) > .seatmap-customer-map__legend-panel {
    display: none;
  }
}

.seatmap-customer-map__legend-close {
  display: none;
}

/* Open: one card, the summary its head with the cross on the right */
.seatmap-customer-map__legend-disclosure[open] {
  backdrop-filter: blur(12px);
  background: color-mix(in oklch, var(--color-surface-1) 94%, transparent);
  border-radius: var(--radius-l);
  box-shadow: 0 0 0 var(--border-width) var(--color-subtle), var(--shadow-overlay);
  padding: var(--space-xs) var(--space-xs) var(--space-s) var(--space-s);

  > summary {
    backdrop-filter: none;
    background: none;
    box-shadow: none;
    display: flex;
    padding: 0;
  }

  .seatmap-customer-map__legend-title {
    flex: 1;
  }

  .seatmap-customer-map__legend-close {
    align-items: center;
    block-size: 2rem;
    border-radius: var(--radius-pill);
    display: inline-flex;
    inline-size: 2rem;
    justify-content: center;
    transition: background-color var(--duration-fast) var(--ease-out);
  }

  > summary:hover .seatmap-customer-map__legend-close {
    background: var(--color-surface-2);
  }
}

.seatmap-customer-map__legend-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block-start: var(--space-xs);
  padding-inline-end: var(--space-xs);
}

.seatmap-customer-map__legend {
  display: grid;
  font-size: var(--step--1);
  gap: var(--space-xs) var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));

  > span {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2xs);
  }

  i {
    background: var(--color-surface-0);
    block-size: 1rem;
    border: var(--border-width) solid color-mix(in srgb, var(--color-text) 38%, var(--color-subtle));
    border-radius: var(--radius-pill);
    display: inline-grid;
    flex-shrink: 0;
    inline-size: 1rem;
    place-items: center;

    .icon {
      --icon-size: 0.7rem;
    }
  }

  i.has-seat-category {
    background: var(--seat-fill);
    border-color: oklch(from var(--seat-fill) calc(l * 0.72) c h);
  }

  i.is-selected {
    background: var(--color-accent-fill);
    border-color: var(--color-accent-fill);
  }

  i.is-unavailable {
    background: var(--color-surface-3);
    border-color: var(--color-subtle);
    opacity: 0.6;
  }
}

/* A tablet keeps the legend open as a quiet strip under the map, off the
   seats; a phone and the full-screen desktop map float it as a chip */
@media (min-width: 40.0625rem) and (max-width: 59.99rem) {
  .seatmap-customer-map__legend-disclosure,
  .seatmap-customer-map__legend-disclosure[open] {
    backdrop-filter: none;
    background: none;
    border-block-start: var(--border-width) solid var(--color-subtle);
    border-radius: 0;
    box-shadow: none;
    max-inline-size: none;
    padding: 0;
    position: static;

    > summary {
      display: none;
    }
  }

  .seatmap-customer-map__legend-panel {
    padding: var(--space-s) var(--space-m);
  }
}

.seatmap-customer-map__companion-note {
  align-items: flex-start;
  color: var(--color-muted);
  display: flex;
  font-size: var(--step--1);
  gap: var(--space-2xs);
}

/* Seats a little larger to the thumb on phones */
@media (max-width: 40rem) {
  .seatmap-customer-map__viewport {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    padding: var(--space-xs);
    touch-action: pan-x pan-y;
  }

  .seatmap-customer-map__seat--choice {
    block-size: 2.125rem;
    inline-size: 2.125rem;
  }
}