Cinema Seat Chart

<div class="sig-cinema-seats" data-rate="120">
  <span class="sig-cinema-seats__screen">Screen</span>
  <div class="sig-cinema-seats__hall">
    <div class="sig-cinema-seats__row">
      <span class="sig-cinema-seats__mark" aria-hidden="true">A</span>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 1" data-seat="A1"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 2" data-seat="A2"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 3" data-seat="A3" disabled></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 4" data-seat="A4" disabled></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 5" data-seat="A5"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 6" data-seat="A6"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 7" data-seat="A7"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 8" data-seat="A8"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 9" data-seat="A9"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 10" data-seat="A10"></button>
    </div>
    <div class="sig-cinema-seats__row">
      <span class="sig-cinema-seats__mark" aria-hidden="true">B</span>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 1" data-seat="B1"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 2" data-seat="B2"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 3" data-seat="B3"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 4" data-seat="B4"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 5" data-seat="B5"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 6" data-seat="B6"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 7" data-seat="B7" disabled></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 8" data-seat="B8"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 9" data-seat="B9"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 10" data-seat="B10"></button>
    </div>
    <div class="sig-cinema-seats__row">
      <span class="sig-cinema-seats__mark" aria-hidden="true">C</span>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 1" data-seat="C1"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 2" data-seat="C2" disabled></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 3" data-seat="C3" disabled></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 4" data-seat="C4"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 5" data-seat="C5"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 6" data-seat="C6"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 7" data-seat="C7"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 8" data-seat="C8"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 9" data-seat="C9"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 10" data-seat="C10"></button>
    </div>
    <div class="sig-cinema-seats__row">
      <span class="sig-cinema-seats__mark" aria-hidden="true">D</span>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 1" data-seat="D1"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 2" data-seat="D2"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 3" data-seat="D3"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 4" data-seat="D4"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 5" data-seat="D5"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 6" data-seat="D6"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 7" data-seat="D7"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 8" data-seat="D8" disabled></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 9" data-seat="D9"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 10" data-seat="D10"></button>
    </div>
    <div class="sig-cinema-seats__row">
      <span class="sig-cinema-seats__mark" aria-hidden="true">E</span>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 1" data-seat="E1"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 2" data-seat="E2"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 3" data-seat="E3"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 4" data-seat="E4"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 5" data-seat="E5"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 6" data-seat="E6"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 7" data-seat="E7"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 8" data-seat="E8"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 9" data-seat="E9"></button>
      <button class="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 10" data-seat="E10"></button>
    </div>
  </div>
  <span class="sig-cinema-seats__read" data-read aria-live="polite">Pick your seats</span>
</div>

.sig-cinema-seats {
  --sig-pick: #f2b134;
  --sig-w: 280px;
  --sig-speed: 120ms;
}

.sig-cinema-seats {
  position: relative;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: var(--sig-w);
  max-width: 100%;
  padding: 10px;
  font-family: system-ui, sans-serif;
  color: #e9e4f2;
  background: #191522;
  border-radius: 10px;
}

.sig-cinema-seats__screen {
  width: 84%;
  padding: 2px 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: #191522;
  background: #f4efd9;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 8px 18px rgba(244,239,217,.3);
}

.sig-cinema-seats__hall {
  display: grid;
  gap: 4px;
}

.sig-cinema-seats__row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sig-cinema-seats__mark {
  width: 12px;
  font-size: 10px;
  opacity: 0.6;
}

.sig-cinema-seats__seat {
  width: 16px;
  height: 15px;
  padding: 0;
  background: #4b4560;
  border: 0;
  border-radius: 5px 5px 2px 2px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.28);
  cursor: pointer;
  transition: background var(--sig-speed) ease;
}

.sig-cinema-seats__seat:hover {
  background: #7a7198;
}

.sig-cinema-seats__seat:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.sig-cinema-seats__seat[aria-pressed=true] {
  background: var(--sig-pick);
}

.sig-cinema-seats__seat:disabled {
  background: #2a2536;
  box-shadow: none;
  cursor: not-allowed;
}

.sig-cinema-seats__read {
  font-size: 12px;
  font-weight: 600;
  min-height: 1.3em;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .sig-cinema-seats__seat {
    animation: none !important;
    transition: none !important;
  }
}

document.querySelectorAll(".sig-cinema-seats").forEach((el) => {
  const rate = Number(el.dataset.rate);
  const seats = Array.from(el.querySelectorAll("[data-seat]"));
  const read = el.querySelector("[data-read]");
  const idle = read.textContent;
  const pick = (e) => {
    const hit = (e.target).closest("[data-seat]");
    if (!hit) return;
    hit.setAttribute("aria-pressed", String(hit.getAttribute("aria-pressed") !== "true"));
    const on = seats.filter((s) => s.getAttribute("aria-pressed") === "true").map((s) => s.dataset.seat);
    read.textContent = on.length ? on.join(", ") + " · ₹" + on.length * rate : idle;
    el.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: on }));
  };
  el.addEventListener("click", pick);
  return () => el.removeEventListener("click", pick);
});

import { useEffect, useRef } from "react";
import type React from "react";
import "./cinema-seats.css"; // the CSS tab

function attach(el: HTMLElement) {
  const rate = Number(el.dataset.rate);
  const seats = Array.from(el.querySelectorAll("[data-seat]")) as HTMLElement[];
  const read = el.querySelector("[data-read]") as HTMLElement;
  const idle = read.textContent;
  const pick = (e: MouseEvent) => {
    const hit = (e.target as HTMLElement).closest("[data-seat]");
    if (!hit) return;
    hit.setAttribute("aria-pressed", String(hit.getAttribute("aria-pressed") !== "true"));
    const on = seats.filter((s) => s.getAttribute("aria-pressed") === "true").map((s) => s.dataset.seat);
    read.textContent = on.length ? on.join(", ") + " · ₹" + on.length * rate : idle;
    el.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: on }));
  };
  el.addEventListener("click", pick);
  return () => el.removeEventListener("click", pick);
}

export function SigCinemaSeats({ children = "Screen", ...props }: React.ComponentProps<"div">) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => attach(ref.current!), []);

  return (
    <div className="sig-cinema-seats" data-rate="120" ref={ref} {...props}>
      <span className="sig-cinema-seats__screen">{children}</span>
      <div className="sig-cinema-seats__hall">
        <div className="sig-cinema-seats__row">
          <span className="sig-cinema-seats__mark" aria-hidden="true">{"A"}</span>
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 1" data-seat="A1" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 2" data-seat="A2" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 3" data-seat="A3" disabled />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 4" data-seat="A4" disabled />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 5" data-seat="A5" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 6" data-seat="A6" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 7" data-seat="A7" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 8" data-seat="A8" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 9" data-seat="A9" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row A seat 10" data-seat="A10" />
        </div>
        <div className="sig-cinema-seats__row">
          <span className="sig-cinema-seats__mark" aria-hidden="true">{"B"}</span>
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 1" data-seat="B1" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 2" data-seat="B2" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 3" data-seat="B3" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 4" data-seat="B4" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 5" data-seat="B5" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 6" data-seat="B6" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 7" data-seat="B7" disabled />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 8" data-seat="B8" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 9" data-seat="B9" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row B seat 10" data-seat="B10" />
        </div>
        <div className="sig-cinema-seats__row">
          <span className="sig-cinema-seats__mark" aria-hidden="true">{"C"}</span>
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 1" data-seat="C1" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 2" data-seat="C2" disabled />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 3" data-seat="C3" disabled />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 4" data-seat="C4" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 5" data-seat="C5" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 6" data-seat="C6" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 7" data-seat="C7" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 8" data-seat="C8" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 9" data-seat="C9" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row C seat 10" data-seat="C10" />
        </div>
        <div className="sig-cinema-seats__row">
          <span className="sig-cinema-seats__mark" aria-hidden="true">{"D"}</span>
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 1" data-seat="D1" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 2" data-seat="D2" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 3" data-seat="D3" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 4" data-seat="D4" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 5" data-seat="D5" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 6" data-seat="D6" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 7" data-seat="D7" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 8" data-seat="D8" disabled />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 9" data-seat="D9" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row D seat 10" data-seat="D10" />
        </div>
        <div className="sig-cinema-seats__row">
          <span className="sig-cinema-seats__mark" aria-hidden="true">{"E"}</span>
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 1" data-seat="E1" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 2" data-seat="E2" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 3" data-seat="E3" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 4" data-seat="E4" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 5" data-seat="E5" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 6" data-seat="E6" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 7" data-seat="E7" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 8" data-seat="E8" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 9" data-seat="E9" />
          <button className="sig-cinema-seats__seat" type="button" aria-pressed="false" aria-label="Row E seat 10" data-seat="E10" />
        </div>
      </div>
      <span className="sig-cinema-seats__read" data-read aria-live="polite">{"Pick your seats"}</span>
    </div>
  );
}

<div class="sig-cinema-seats relative [box-sizing:border-box] grid [justify-items:center] gap-[8px] w-[280px] [max-width:100%] [padding:10px] [font-family:system-ui,_sans-serif] text-[#e9e4f2] bg-[#191522] rounded-[10px]" data-rate="120">
  <span class="w-[84%] [padding:2px_0] text-[10px] [letter-spacing:0.2em] [text-align:center] [text-transform:uppercase] text-[#191522] bg-[#f4efd9] rounded-[50%_50%_0_0_/_100%_100%_0_0] [box-shadow:0_8px_18px_rgba(244,239,217,.3)]">Screen</span>
  <div class="grid gap-[4px]">
    <div class="[display:flex] items-center gap-[4px]">
      <span class="w-[12px] text-[10px] [opacity:0.6]" aria-hidden="true">A</span>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 1" data-seat="A1"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 2" data-seat="A2"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 3" data-seat="A3" disabled></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 4" data-seat="A4" disabled></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 5" data-seat="A5"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 6" data-seat="A6"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 7" data-seat="A7"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 8" data-seat="A8"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 9" data-seat="A9"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row A seat 10" data-seat="A10"></button>
    </div>
    <div class="[display:flex] items-center gap-[4px]">
      <span class="w-[12px] text-[10px] [opacity:0.6]" aria-hidden="true">B</span>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 1" data-seat="B1"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 2" data-seat="B2"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 3" data-seat="B3"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 4" data-seat="B4"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 5" data-seat="B5"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 6" data-seat="B6"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 7" data-seat="B7" disabled></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 8" data-seat="B8"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 9" data-seat="B9"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row B seat 10" data-seat="B10"></button>
    </div>
    <div class="[display:flex] items-center gap-[4px]">
      <span class="w-[12px] text-[10px] [opacity:0.6]" aria-hidden="true">C</span>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 1" data-seat="C1"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 2" data-seat="C2" disabled></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 3" data-seat="C3" disabled></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 4" data-seat="C4"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 5" data-seat="C5"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 6" data-seat="C6"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 7" data-seat="C7"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 8" data-seat="C8"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 9" data-seat="C9"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row C seat 10" data-seat="C10"></button>
    </div>
    <div class="[display:flex] items-center gap-[4px]">
      <span class="w-[12px] text-[10px] [opacity:0.6]" aria-hidden="true">D</span>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 1" data-seat="D1"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 2" data-seat="D2"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 3" data-seat="D3"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 4" data-seat="D4"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 5" data-seat="D5"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 6" data-seat="D6"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 7" data-seat="D7"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 8" data-seat="D8" disabled></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 9" data-seat="D9"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row D seat 10" data-seat="D10"></button>
    </div>
    <div class="[display:flex] items-center gap-[4px]">
      <span class="w-[12px] text-[10px] [opacity:0.6]" aria-hidden="true">E</span>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 1" data-seat="E1"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 2" data-seat="E2"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 3" data-seat="E3"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 4" data-seat="E4"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 5" data-seat="E5"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 6" data-seat="E6"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 7" data-seat="E7"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 8" data-seat="E8"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 9" data-seat="E9"></button>
      <button class="w-[16px] h-[15px] [padding:0] bg-[#4b4560] [border:0] rounded-[5px_5px_2px_2px] [box-shadow:inset_0_-4px_0_rgba(0,0,0,.28)] cursor-pointer [transition:background_120ms_ease] hover:bg-[#7a7198] focus-visible:[outline:2px_solid_#fff] focus-visible:[outline-offset:1px] [&[aria-pressed=true]]:bg-[#f2b134] disabled:bg-[#2a2536] disabled:[box-shadow:none] disabled:[cursor:not-allowed] motion-reduce:[transition:none!important]" type="button" aria-pressed="false" aria-label="Row E seat 10" data-seat="E10"></button>
    </div>
  </div>
  <span class="text-[12px] font-[600] [min-height:1.3em] [text-align:center]" data-read aria-live="polite">Pick your seats</span>
</div>

<!-- Needs the script from the JS tab. -->