/* ===========================================================================
   Mapa de assentos — a tela onde a compra é ganha ou perdida
   Grade acessível (roving tabindex + ARIA grid), estados distinguíveis
   por FORMA e TEXTO além da cor, e alvos de toque acima do mínimo da WCAG 2.2.
   =========================================================================== */

.hall {
  padding: var(--s-4) var(--gutter) var(--s-5);
  display: grid;
  gap: var(--s-4);
  justify-items: center;
}

/* ── A tela: trapézio curvo com o brilho do projetor ─────────────────────── */
.screen {
  inline-size: min(100%, 26rem);
  display: grid;
  justify-items: center;
  gap: var(--s-2);
}
.screen__arc {
  inline-size: 100%;
  block-size: 2.5rem;
  background: linear-gradient(180deg, color-mix(in oklab, var(--amber) 85%, #fff), color-mix(in oklab, var(--amber) 35%, transparent) 55%, transparent);
  clip-path: path('M 0 40 Q 50 0 100 40 Z');
  /* clip-path com path() não escala; o polygon abaixo é o que realmente vale */
  clip-path: polygon(0% 100%, 4% 42%, 12% 22%, 28% 8%, 50% 4%, 72% 8%, 88% 22%, 96% 42%, 100% 100%);
  filter: blur(0.4px) drop-shadow(0 -6px 22px rgb(var(--amber-glow) / 0.35));
  opacity: 0.85;
}
.screen__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-inline-start: 0.35em;
}

/* ── A grade ──────────────────────────────────────────────────────────────
   A poltrona é dimensionada a partir da largura real do contêiner e do número
   de colunas da sala (--cols, escrito pelo JS). O piso de 1.5rem = 24px é o
   alvo de toque mínimo da WCAG 2.2: abaixo disso preferimos rolar a sala
   horizontalmente a entregar um alvo que ninguém acerta. */
.seatmap {
  --seat-gap: clamp(0.18rem, 0.9vw, 0.3rem);
  --aisle: clamp(0.55rem, 2.4vw, 1rem);
  --rotulo: 1.05rem;
  --cols: 14;
  --aisles: 2;
  --seat: clamp(
    1.5rem,
    calc(
      (100cqi - var(--rotulo) * 2 - var(--aisle) * var(--aisles) - var(--seat-gap) * (var(--cols) + 1)) / var(--cols)
    ),
    1.85rem
  );
  display: grid;
  gap: var(--seat-gap);
  justify-content: center;
}

.seatrow {
  display: grid;
  grid-auto-flow: column;
  gap: var(--seat-gap);
  align-items: center;
}

/* A letra da fileira gruda nas bordas: numa sala larga o mapa rola, e sem isso
   a pessoa perde a referência de onde está exatamente quando mais precisa. */
.seatrow__label {
  position: sticky;
  z-index: 2;
  inline-size: var(--rotulo);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 700;
  text-align: center;
  color: var(--text-3);
  background: var(--ink);
  user-select: none;
}
.seatrow__label:first-child {
  inset-inline-start: 0;
}
.seatrow__label:last-child {
  inset-inline-end: 0;
}

.seatrow__aisle {
  inline-size: var(--aisle);
}

/* ── O assento ──────────────────────────────────────────────────────────── */
.seat {
  position: relative;
  inline-size: var(--seat);
  block-size: var(--seat);
  border-radius: 5px 5px 3px 3px;
  background: var(--surface-2);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.35);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast), box-shadow var(--t-fast);
}
/* Braço da poltrona — dá silhueta de cadeira, não de quadradinho */
.seat::before {
  content: '';
  position: absolute;
  inset-block-end: 1px;
  inset-inline: -1px;
  block-size: 30%;
  border-radius: 2px;
  background: inherit;
  filter: brightness(0.82);
}
/* Alvo de toque ampliado sem inflar o desenho (WCAG 2.2 — Target Size) */
.seat::after {
  content: '';
  position: absolute;
  inset: -3px;
}

.seat:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--line-strong);
}

.seat[data-state='livre'] {
  background: var(--surface-2);
}

.seat[data-state='ocupado'] {
  background: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: not-allowed;
}
/* Forma além da cor: o ocupado leva um X discreto */
.seat[data-state='ocupado']::before {
  background: none;
  filter: none;
  inset: 0;
  block-size: 100%;
  background-image: linear-gradient(45deg, transparent 45%, var(--line-strong) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--line-strong) 45% 55%, transparent 55%);
  background-size: 55% 55%;
  background-position: center;
  background-repeat: no-repeat;
}

.seat[data-state='selecionado'] {
  background: var(--amber);
  box-shadow: var(--glow-amber), inset 0 -2px 0 rgb(0 0 0 / 0.25);
  transform: translateY(-2px);
}
.seat[data-state='selecionado']::before {
  filter: brightness(0.88);
}
/* Número do assento aparece quando selecionado — confirma sem abrir modal */
.seat[data-state='selecionado']::after {
  content: attr(data-num);
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ink);
}

/* Poltrona VIP: contorno âmbar + topo mais alto (encosto maior) */
.seat[data-tipo='vip'] {
  border-radius: 7px 7px 3px 3px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--amber) 45%, transparent), inset 0 -2px 0 rgb(0 0 0 / 0.35);
}
.seat[data-tipo='vip'][data-state='selecionado'] {
  box-shadow: var(--glow-amber), inset 0 -2px 0 rgb(0 0 0 / 0.25);
}

/* Cadeirante: quadrado, com o símbolo internacional de acesso */
.seat[data-tipo='wheel'] {
  border-radius: 4px;
  background: color-mix(in oklab, #2f6fd0 45%, var(--surface-2));
}
.seat[data-tipo='wheel']::before {
  inset: 0;
  block-size: 100%;
  filter: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8eefc'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cpath d='M10.5 7h1.6a1 1 0 0 1 1 1v3.2h3.1a1 1 0 1 1 0 2h-1.6l1.8 5.1a1 1 0 0 1-1.9.7l-1.8-5.1a3 3 0 0 0-2.8-2H10a3.6 3.6 0 1 0 3.3 5 1 1 0 0 1 1.85.76A5.6 5.6 0 1 1 9.4 9.2 3 3 0 0 1 10.5 7Z'/%3E%3C/svg%3E")
    center / 72% no-repeat;
}

/* Prioritária (idoso, gestante, PCD): faixa tracejada no topo */
.seat[data-tipo='priority'] {
  background: color-mix(in oklab, #7a5cc4 32%, var(--surface-2));
}
.seat[data-tipo='priority']::before {
  block-size: 100%;
  inset: 0;
  filter: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e9e2fb'%3E%3Cpath d='m12 3 2.6 5.4 5.9.8-4.3 4.2 1 5.9-5.2-2.8-5.2 2.8 1-5.9L3.5 9.2l5.9-.8Z'/%3E%3C/svg%3E")
    center / 68% no-repeat;
}

.seat:disabled {
  cursor: not-allowed;
}

.seat:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  z-index: 1;
}

/* ── Legenda ────────────────────────────────────────────────────────────── */
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  padding-block-start: var(--s-2);
  font-size: var(--step--2);
  color: var(--text-2);
}
.legend__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.legend__amostra {
  --seat: 1.05rem;
  inline-size: var(--seat);
  block-size: var(--seat);
  flex: none;
  pointer-events: none;
}
/* Na legenda o número não faz sentido: some com o rótulo do estado escolhido */
.legend__amostra[data-state='selecionado']::after {
  content: none;
}

/* ── Cronômetro de reserva ──────────────────────────────────────────────── */
.hold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--gutter);
  font-size: var(--step--2);
  color: var(--text-2);
  background: var(--ink-3);
  border-block-end: 1px solid var(--line);
}
.hold__clock {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hold[data-urgent='true'] .hold__clock {
  color: var(--warn);
}
.hold[data-urgent='true'] svg {
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}
.hold svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
}

/* Salas maiores ganham rolagem horizontal em telas estreitas, sem zoom.
   O container-type é o que permite ao --seat medir a largura disponível. */
.seatmap-scroll {
  container-type: inline-size;
  inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-block-end: var(--s-2);
  /* Desvanece as bordas quando há mais sala fora da tela — a dica de que dá
     para arrastar, sem precisar de texto explicando. */
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.seatmap-scroll[data-cabe='true'] {
  mask-image: none;
  overflow-x: visible;
}