/* ═══════════════════════════════════════════════════════════════════════════
   Көркем — касса (booking.js). Чёрно-красная гамма сайта, стекло поверх
   затемнения. Схема зала прокручивается внутри своего окна, страница под
   модалкой не двигается (html.bk-lock).
   ═══════════════════════════════════════════════════════════════════════════ */

html.bk-lock { overflow: hidden; }

.bk[hidden] { display: none !important; }

.bk {
  position: fixed; inset: 0;
  z-index: 120;                 /* выше трейлера (110) */
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 3vw, 28px);
}

.bk__scrim {
  position: absolute; inset: 0;
  background: rgba(6, 5, 7, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bk__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(92dvh, 900px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #17141890 0%, var(--surface) 22%);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
  overflow: hidden;
  animation: bk-rise .32s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes bk-rise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bk__panel { animation: none; } }

.bk__x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--paper); background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: opacity .2s;
}
.bk__x:hover { opacity: .6; }

/* ── Шапка ────────────────────────────────────────────────────────────────── */
.bk__head {
  padding: 18px 58px 14px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.bk__film {
  font-family: Geologica, sans-serif;
  font-weight: 700; font-size: clamp(18px, 4.4vw, 23px);
  letter-spacing: -.01em; line-height: 1.12; color: var(--paper);
}
.bk__meta { margin-top: 5px; color: var(--muted); font-size: 14px; }

/* ── Тело (схема / состояния) ───────────────────────────────────────────────── */
.bk__body {
  padding: 16px 18px 4px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.bk__screen {
  margin: 2px auto 16px;
  max-width: 460px;
  text-align: center; letter-spacing: 12px; text-indent: 12px;
  font-size: 12px; text-transform: uppercase; color: var(--dim);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  border-radius: 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, rgba(var(--accent-hi-rgb), .10), transparent 70%);
}

.bk__gridwrap { overflow-x: auto; padding-bottom: 6px; }

.bk__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: clamp(3px, 1.1vw, 6px);
  min-width: min(100%, 520px);
  margin: 0 auto;
  width: fit-content;
}

.bk__gap { aspect-ratio: 1; }

.bk__seat {
  aspect-ratio: 1;
  min-width: 18px;
  display: grid; place-items: center;
  font: 600 10px/1 'Golos Text', sans-serif;
  color: #062a12;
  background: #2FA65A;
  border: 0; border-radius: 5px 5px 3px 3px;
  cursor: pointer;
  transition: transform .12s, background .15s, box-shadow .15s;
}
.bk__seat:hover { background: #3ac06b; transform: translateY(-1px); }
.bk__seat.is-sel {
  background: var(--grad); color: #fff;
  box-shadow: 0 0 0 2px var(--red-hi), 0 6px 14px -6px var(--red);
}
.bk__seat--taken {
  background: #2a2529; color: transparent;
  cursor: not-allowed; border-radius: 5px 5px 3px 3px;
}

/* ── Легенда ────────────────────────────────────────────────────────────────── */
.bk__legend {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  padding: 14px 4px 6px; color: var(--muted); font-size: 13px;
}
.bk__lg { display: inline-flex; align-items: center; gap: 7px; }
.bk__dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.bk__dot--free { background: #2FA65A; }
.bk__dot--sel { background: var(--red); }
.bk__dot--taken { background: #2a2529; }

/* ── Состояния (загрузка / недоступно) ──────────────────────────────────────── */
.bk__state { padding: 40px 20px; text-align: center; color: var(--muted); }
.bk__state p { margin: 10px 0 0; }
.bk__spin {
  width: 32px; height: 32px; margin: 0 auto;
  border: 3px solid var(--line); border-top-color: var(--red);
  border-radius: 50%; animation: bk-spin .8s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }
.bk__state--warn .bk__warnt {
  color: var(--paper); font-family: Geologica, sans-serif;
  font-weight: 600; font-size: 17px;
}
.bk__state--warn .bk__warnp { color: var(--muted); font-size: 14px; }

/* ── Подвал (почта, сумма, оплата) ──────────────────────────────────────────── */
.bk__foot {
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, .18);
}
.bk__sum {
  font-family: Geologica, sans-serif; color: var(--paper);
  font-size: 15px; margin-bottom: 10px;
}
.bk__sum b { font-size: 18px; }
.bk__pay { display: flex; gap: 10px; flex-wrap: wrap; }
.bk__email {
  flex: 1 1 200px; min-width: 0;
  padding: 12px 14px;
  color: var(--paper); background: var(--elevated);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  font: 400 15px 'Golos Text', sans-serif;
}
.bk__email::placeholder { color: var(--dim); }
.bk__email:focus { outline: none; border-color: var(--red); }

.bk__btn {
  flex: 0 0 auto;
  padding: 12px 22px;
  font: 600 15px Geologica, sans-serif; color: #fff;
  background: var(--grad); border: 0; border-radius: var(--r-btn);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
  transition: filter .15s, opacity .15s;
}
.bk__btn:hover { filter: brightness(1.06); }
.bk__btn:disabled { opacity: .4; cursor: default; filter: none; }
.bk__btn--line {
  background: transparent; color: var(--paper);
  border: 1px solid var(--line);
}
.bk__note { margin: 10px 0 0; color: var(--dim); font-size: 12.5px; }
.bk__note.is-warn { color: var(--red-hi); }

/* Телефон: панель на весь низ; схему ужимаем во всю ширину без горизонтальной
   прокрутки (19 мест в ряду иначе уезжают за край). */
@media (max-width: 560px) {
  .bk { padding: 0; align-items: flex-end; }
  .bk__panel {
    width: 100%; max-height: 94dvh;
    border-radius: 18px 18px 0 0;
  }
  .bk__gridwrap { overflow-x: hidden; }
  .bk__grid { min-width: 0; gap: 3px; }
  .bk__seat { min-width: 0; font-size: 9px; border-radius: 4px 4px 3px 3px; }
  .bk__pay { flex-direction: column; align-items: stretch; }
  /* В колоночной раскладке flex-grow тянул бы поле на всю высоту — фиксируем. */
  .bk__email { flex: 0 0 auto; width: 100%; }
  .bk__btn { width: 100%; justify-content: center; }
}

/* ── Схема зала без продажи (hallmap.js, Cinema Park) ─────────────────────────
   Места только для просмотра: без руки-курсора и подъёма. Сетка во всю
   ширину окна (до 32 px на клетку), поэтому на телефоне без прокрутки вбок.
   По краям каждого ряда его номер. */
.bk--view .bk__grid {
  width: 100%; min-width: 0;
  max-width: calc(var(--cols) * 32px);
}
.bk--view .bk__seat { cursor: default; transition: none; }
.bk--view .bk__seat:hover { transform: none; background: #2FA65A; }
.bk--view .bk__seat--taken:hover { background: #2a2529; }
.bk__row {
  display: grid; place-items: center;
  font: 500 11px/1 'Golos Text', sans-serif;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.bk__count {
  margin: 14px 0 0; text-align: center;
  font: 400 15px Geologica, sans-serif; color: var(--muted);
}
.bk__count b { color: var(--paper); font-weight: 600; }
.bk--view .bk__legend { padding-top: 8px; }
.bk--view .bk__foot { text-align: center; }
.bk--view .bk__btn {
  width: 100%; justify-content: center;
  padding: 15px 22px; font-size: 16px;
}
@media (max-width: 560px) {
  .bk__row { font-size: 9px; }
}
.bk--view .bk__panel:focus { outline: none; }