/* =========================================================
   Samson SUPERFINALE — prototyp klikací mapy haly
   Světlé/čisté vizuální schéma. Mobile-first, sjednocená
   interakce desktop/mobil (klik na sektor vždy otevře modal).
   ========================================================= */

:root {
  --color-bg: #f4f6f9;
  --color-bg-panel: #ffffff;
  --color-bg-panel-alt: #eef2f6;
  --color-border: #d7dee6;
  --color-border-strong: #b9c4d0;
  --color-text: #16212c;
  --color-text-dim: #5b6b7a;
  --color-accent: #e69015;
  --color-accent-fg: #241503;

  --color-p290: #c62f24;
  --color-p290-tint: #fbe1de;
  --color-p290-dark: #9c231a;
  --color-p490: #2266a3;
  --color-p490-tint: #dde9f6;
  --color-p490-dark: #184c79;
  --color-vip: #1f7a52;
  --color-vip-tint: #dbf0e3;
  --color-vip-dark: #145a3b;
  --color-necis: #b96a12;
  --color-necis-tint: #f7e6cd;
  --color-necis-dark: #8a4d0c;

  --color-free-bg: #ffffff;
  --color-occupied-bg: #e3e7eb;
  --color-occupied-fg: #57626c;
  --color-selected-bg: #e69015;
  --color-selected-fg: #241503;

  --color-timer-bg: #fff4e0;
  --color-timer-border: #f0c473;
  --color-timer-fg: #7a4d06;
  --color-timer-urgent-bg: #fdeceb;
  --color-timer-urgent-border: #f3a89d;
  --color-timer-urgent-fg: #9c2b1f;

  --court-bg: #eaf4ee;
  --court-border: #b7d4c1;
  --court-fg: #3f7256;

  --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-md: 12px;
  --radius-sm: 8px;

  --space-xs: 0.4rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;

  --shadow-card: 0 1px 3px rgba(16, 24, 32, 0.08), 0 1px 2px rgba(16, 24, 32, 0.06);
  --shadow-card-hover: 0 4px 14px rgba(16, 24, 32, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.4em; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 1000;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-panel);
  padding: var(--space-sm) var(--space-md);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 4px rgba(16, 24, 32, 0.05);
}
.site-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}
.brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; }
.brand__title {
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.brand__subtitle {
  color: var(--color-text-dim);
  font-size: 0.9rem;
}
.brand__venue {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-dim);
  font-size: 0.85rem;
}
.brand__venue svg { flex-shrink: 0; color: var(--color-accent); }

/* Odpočet rezervace (15 min) — sdílená komponenta, více instancí (header, modaly) */
.reservation-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-timer-bg);
  border: 1px solid var(--color-timer-border);
  color: var(--color-timer-fg);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}
.reservation-timer[hidden] { display: none; }
.reservation-timer__icon { flex-shrink: 0; }
.reservation-timer--urgent {
  background: var(--color-timer-urgent-bg);
  border-color: var(--color-timer-urgent-border);
  color: var(--color-timer-urgent-fg);
  animation: reservation-pulse 1s ease-in-out infinite;
}
.reservation-timer--compact { font-size: 0.75rem; padding: 0.2rem 0.6rem; }
@keyframes reservation-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156, 43, 31, 0.35); }
  50% { box-shadow: 0 0 0 5px rgba(156, 43, 31, 0); }
}

/* ---------- Layout ---------- */

.layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

/* Misto pro fixni sticky kosik na malych obrazovkach — viz stejny zlom (679px) u .cart nize */
@media (max-width: 679px) {
  .layout { padding-bottom: 200px; }
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.map-section__head { margin-bottom: var(--space-md); }
.map-section__head h1 { font-size: clamp(1.25rem, 2.4vw, 1.9rem); }
.map-section__hint { color: var(--color-text-dim); margin: 0; font-size: 0.92rem; }

/* ---------- Hall map ---------- */

.hall-scroll {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  box-shadow: var(--shadow-card);
}

@media (min-width: 480px) {
  .hall-scroll { padding: var(--space-md); }
}

/* Mobile-first: sektory jako karty ve sloupci/2 sloupcích v logickém pořadí
   (odshora dolů odpovídá skutečnému rozmístění tribun v hale). Skutečný
   „mapový“ tvar s prostorovým rozložením se aktivuje až od tabletu výše. */
.hall-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.hall-map .zone--court,
.hall-map .zone--bar {
  grid-column: 1 / -1;
}

@media (min-width: 420px) {
  .hall-map { gap: 10px; }
}

@media (min-width: 680px) {
  .hall-map {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 1fr) repeat(2, 0.6fr) repeat(5, 1.3fr) repeat(2, 0.6fr) repeat(3, 1fr);
    gap: 8px;
    aspect-ratio: 1534 / 1127;
    grid-template-areas:
      "b1 b1 b1 b1 b3 b3 b3 b3 b2 b2 b2 b2"
      "b1 b1 b1 b1 b3 b3 b3 b3 b2 b2 b2 b2"
      "b1 b1 b1 b1 b3 b3 b3 b3 b2 b2 b2 b2"
      ".  .  top top top top top top top top .  ."
      ".  .  top top top top top top top top .  ."
      "seza seza court court court court court court court vip vip vip"
      "seza seza court court court court court court court vip vip vip"
      "seza seza court court court court court court court vip vip vip"
      "seza seza court court court court court court court vip vip vip"
      "seza seza court court court court court court court vip vip vip"
      ".  .  bot bot bot bot bot bot bot bot .  ."
      ".  .  bot bot bot bot bot bot bot bot .  ."
      "a1 a1 a1 a1 a3 a3 a3 a3 a2 a2 a2 a2"
      "a1 a1 a1 a1 a3 a3 a3 a3 a2 a2 a2 a2"
      "a1 a1 a1 a1 a3 a3 a3 a3 a2 a2 a2 a2";
  }
  .hall-map .zone--court,
  .hall-map .zone--bar {
    grid-column: auto;
  }
}

.zone {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.zone--court {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}
.court-box {
  width: 100%;
  height: 100%;
  background: var(--court-bg);
  border: 2px dashed var(--court-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--court-fg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.75rem, 1.6vw, 1.3rem);
  text-align: center;
  padding: 0.6rem;
  min-height: 64px;
}

.zone--bar { display: flex; }

/* ---------- Klikací blok sektoru (sjednocené pro sektory, VIP i nečíslované) ---------- */

.zone-block {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 68px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-panel);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text);
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.zone-block:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.zone-block:active { transform: translateY(0); box-shadow: var(--shadow-card); }
.zone-block:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.sector-block__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.sector-block__code {
  font-weight: 800;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
}
.sector-block__price {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-text-dim);
  white-space: nowrap;
}
.sector-block__meta {
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  color: var(--color-text-dim);
}
.sector-block__bar {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: var(--color-occupied-bg);
  overflow: hidden;
}
.sector-block__fill { display: block; height: 100%; border-radius: 4px; }

.sector-block--p290 { border-color: var(--color-p290); }
.sector-block--p290 .sector-block__fill { background: var(--color-p290); }
.sector-block--p290 .sector-block__code { color: var(--color-p290-dark); }

.sector-block--p490 { border-color: var(--color-p490); }
.sector-block--p490 .sector-block__fill { background: var(--color-p490); }
.sector-block--p490 .sector-block__code { color: var(--color-p490-dark); }

.sector-block--vip { border-color: var(--color-vip); }
.sector-block--vip .sector-block__fill { background: var(--color-vip); }
.sector-block--vip .sector-block__code { color: var(--color-vip-dark); }

.sector-block--full { opacity: 0.72; }

/* Nečíslované sezení — stejný vizuální jazyk jako sektory, barva necis */
.bar-btn {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-color: var(--color-necis);
  background: var(--color-necis-tint);
}
.bar-btn:hover { background: color-mix(in srgb, var(--color-necis-tint) 55%, white); }
.bar-btn__label { font-weight: 700; font-size: clamp(0.78rem, 1.6vw, 1rem); color: var(--color-necis-dark); }
.bar-btn__meta { font-size: clamp(0.7rem, 1.3vw, 0.85rem); color: var(--color-text-dim); }

/* ---------- Sektor - vnitřní struktura uvnitř modalu (generováno JS) ---------- */

.sector-inner { display: flex; flex-direction: column; }

.sector-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}
.sector-title__price { font-weight: 500; opacity: 0.9; font-size: 0.85em; }

.sector-title--p290 { background: var(--color-p290-dark); }
.sector-title--p490 { background: var(--color-p490-dark); }
.sector-title--vip { background: var(--color-vip-dark); }

/* Mista v rade se zabaluji na dalsi radek (flex-wrap), NE horizontalni scroll —
   Zdenek vyslovne nechce, aby uzivatel musel posouvat, aby videl vsechna mista
   sektoru (A1/A2/B1/B2 maji az 19 mist v bezne rade). Sirka .seat-row je vzdy
   100 % kontejneru, takze se mista prirozene zalomi presne podle dostupne
   sirky na kazde obrazovce — zadny JS vypocet neni potreba, funguje to
   spolehlive na libovolne sirce (mobil i desktop). Kazda "rada" (data-row) tak
   muze vizualne zabirat vice radku na male obrazovce, na desktopu typicky 1-2.
   Vertikalni scroll modalu (.modal__body{overflow:auto}) toto bez problemu
   pojme. */
.sector-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 6px;
}
.zone--seza .sector-rows { flex-direction: row; flex-wrap: wrap; }

.seat-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  background: var(--color-bg-panel-alt);
  border-radius: var(--radius-sm);
  padding: 5px 6px;
}
.zone--seza .seat-row {
  flex-direction: column;
  align-items: center;
  width: auto;
  background: none;
  padding: 0;
}

.row-num {
  flex-shrink: 0;
  width: 20px;
  padding-top: 2px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-dim);
  text-align: center;
}
.zone--seza .row-num { width: auto; height: 16px; padding-top: 0; }

.seat-row__seats {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}
.zone--seza .seat-row__seats { flex-direction: column; flex-wrap: nowrap; }

.seat {
  flex: none;
  width: clamp(24px, 7.2vw, 38px);
  height: clamp(24px, 7.2vw, 38px);
  min-width: 24px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: clamp(0.6rem, 1.8vw, 0.72rem);
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
  font-family: inherit;
  padding: 0;
}
.seat--p290.seat--free { background: var(--color-p290-tint); border-color: var(--color-p290); }
.seat--p490.seat--free { background: var(--color-p490-tint); border-color: var(--color-p490); }
.seat.seat--free:hover { filter: brightness(0.97); transform: scale(1.06); }
.seat.seat--occupied {
  background: var(--color-occupied-bg);
  color: var(--color-occupied-fg);
  cursor: not-allowed;
}
.seat.seat--selected {
  background: var(--color-selected-bg) !important;
  border-color: var(--color-selected-bg) !important;
  color: var(--color-selected-fg);
  box-shadow: 0 0 0 2px rgba(230, 144, 21, 0.35);
  font-weight: 800;
}

/* ---------- VIP — výběr stolu a míst uvnitř modalu ---------- */

.vip-table-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.vip-table-option {
  border: 1px solid var(--color-border);
  background: var(--color-vip-tint);
  border-radius: var(--radius-sm);
  padding: 0.9rem 0.8rem;
  min-height: 56px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.vip-table-option:hover:not(:disabled) { background: color-mix(in srgb, var(--color-vip-tint) 55%, white); }
.vip-table-option__name { font-weight: 700; color: var(--color-vip-dark); }
.vip-table-option__meta { font-size: 0.8rem; color: var(--color-text-dim); }
.vip-table-option--full,
.vip-table-option:disabled {
  background: var(--color-occupied-bg);
  cursor: not-allowed;
}
.vip-table-option--full .vip-table-option__name,
.vip-table-option--full .vip-table-option__meta { color: var(--color-occupied-fg); }

.modal__back {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--color-p490-dark);
  font-weight: 700;
  cursor: pointer;
  padding: 0.5rem 0;
  margin-bottom: 0.4rem;
  font-family: inherit;
  font-size: 0.9rem;
  min-height: 44px;
}
.modal__back:hover { text-decoration: underline; }

/* ---------- Legenda ---------- */

.legend {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: 0.82rem;
  color: var(--color-text-dim);
  padding: var(--space-sm);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend__swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.legend__swatch--price290 { background: var(--color-p290); }
.legend__swatch--price490 { background: var(--color-p490); }
.legend__swatch--vip { background: var(--color-vip); }
.legend__swatch--free { background: var(--color-free-bg); border: 1px solid var(--color-border-strong); }
.legend__swatch--selected { background: var(--color-selected-bg); }
.legend__swatch--occupied { background: var(--color-occupied-bg); border: 1px solid var(--color-border); }

/* ---------- Košík / cart ---------- */

.cart {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.cart h2 { font-size: 1.1rem; }

.cart__list {
  overflow-y: auto;
  margin-bottom: var(--space-sm);
}
.cart__empty { color: var(--color-text-dim); font-size: 0.9rem; }

.cart__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
}
.cart__item:last-child { border-bottom: none; }
.cart__item-name { font-weight: 600; }
.cart__item-sub { color: var(--color-text-dim); font-size: 0.8rem; }
.cart__item-price { flex-shrink: 0; font-weight: 700; white-space: nowrap; }
.cart__item-remove {
  border: none;
  background: transparent;
  color: var(--color-text-dim);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  min-width: 40px;
  min-height: 40px;
}
.cart__item-remove:hover { color: var(--color-p290); }

.cart__summary { border-top: 1px solid var(--color-border); padding-top: var(--space-sm); }
.cart__row--total { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.15rem; }
.cart__count { color: var(--color-text-dim); font-size: 0.85rem; margin: 0.2rem 0 0; }

.cart__cta {
  margin-top: var(--space-md);
  width: 100%;
  padding: 0.9rem;
  min-height: 48px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.cart__cta:hover:not(:disabled) { filter: brightness(1.06); }
.cart__cta:disabled { background: var(--color-occupied-bg); color: var(--color-occupied-fg); cursor: not-allowed; }

/* Mobil (<680px): kosik jako sticky spodni panel. Nadpis + souhrn + CTA jsou
   vzdy viditelne a dosazitelne, vypis polozek se rozbaluje az po kliknuti
   na nadpis — zadny "peek" trik s transformem, vyska panelu odpovida
   skutecnemu obsahu. */
@media (max-width: 679px) {
  .cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px 16px 0 0;
    z-index: 60;
    box-shadow: 0 -8px 24px rgba(16, 24, 32, 0.16);
    max-height: 82vh;
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  }
  .cart__list { display: none; flex: 1; min-height: 0; }
  .cart.cart--expanded .cart__list { display: block; }
  .cart h2 {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }
  .cart h2::after {
    content: '▲';
    font-size: 0.65rem;
    color: var(--color-text-dim);
    transform: rotate(180deg);
    transition: transform 0.2s ease;
  }
  .cart.cart--expanded h2::after { transform: rotate(0deg); }
}

/* ---------- Modaly ---------- */

.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal[data-open="true"] { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(16, 24, 32, 0.55); }
.modal__panel {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 900px;
  max-height: 100vh;
  background: var(--color-bg-panel);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 680px) {
  .modal__panel {
    margin: 4vh auto;
    width: 92%;
    max-height: 92vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(16, 24, 32, 0.25);
  }
}
.modal__panel--narrow { max-width: 440px; }

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.modal__head-text { display: flex; flex-direction: column; gap: 0.35rem; }
.modal__head-text h2 { font-size: 1.1rem; }
.modal__close {
  border: none;
  background: var(--color-bg-panel-alt);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__close:hover { background: var(--color-occupied-bg); }
.modal__body { padding: var(--space-md); overflow: auto; flex: 1; min-height: 0; }

.modal__desc { color: var(--color-text-dim); font-size: 0.9rem; }
.modal__capacity { font-weight: 600; margin: 0.5rem 0 1rem; }

.stepper { display: flex; align-items: center; gap: 0.6rem; justify-content: center; margin: 1rem 0; }
.stepper__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
  color: var(--color-text);
  font-size: 1.5rem;
  cursor: pointer;
}
.stepper__btn:hover { background: var(--color-necis-tint); }
.stepper__input {
  width: 88px;
  text-align: center;
  font-size: 1.3rem;
  padding: 0.6rem;
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

.modal__confirm {
  width: 100%;
  padding: 0.9rem;
  min-height: 48px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-weight: 800;
  cursor: pointer;
}
.modal__confirm:hover { filter: brightness(1.06); }

.modal-vip-seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1rem; }
@media (min-width: 420px) {
  .modal-vip-seats { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
}
.modal-vip-seat {
  min-height: 64px;
  padding: 1rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-vip);
  background: var(--color-vip-tint);
  color: var(--color-vip-dark);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.modal-vip-seat:hover:not(:disabled) { background: color-mix(in srgb, var(--color-vip-tint) 55%, white); }
.modal-vip-seat.seat--occupied { background: var(--color-occupied-bg); border-color: var(--color-border); color: var(--color-occupied-fg); cursor: not-allowed; }
.modal-vip-seat.seat--selected { background: var(--color-selected-bg); border-color: var(--color-selected-bg); color: var(--color-selected-fg); }

/* ---------- Footer ---------- */

.site-footer {
  text-align: center;
  color: var(--color-text-dim);
  font-size: 0.8rem;
  padding: var(--space-lg) var(--space-md) 4rem;
}

@media (max-width: 679px) {
  .site-footer { padding-bottom: 140px; }
}

/* ---------- Prefers reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}