/* ==========================================================================
   SEAT MAP V3 — Zoom/Pan with Venue-Shaped Overview
   Replace the .bk-seatmap-v2 section in style.css with this file's contents
   ========================================================================== */

/* ---- Outer wrapper ---- */
.bk-seatmap-v3 {
  background: var(--color-surface, #151413);
  border-radius: 8px;
  padding: 0;
  position: relative;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Generous height for seat map visibility */
  min-height: 520px;
  max-height: 80vh;
  height: 75vh;
}

/* ---- Toolbar ---- */
.bk-zm-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 6px;
  flex-shrink: 0;
  z-index: 10;
  background: var(--color-surface, #151413);
}

.bk-zm-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  flex-shrink: 0;
  padding: 0;
}

.bk-zm-btn:hover {
  background: rgba(212,168,83,0.18);
  border-color: rgba(212,168,83,0.45);
  color: #d4a853;
}

.bk-zm-btn:active {
  transform: scale(0.92);
}

.bk-zm-hint {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-zm-scale-badge {
  font-size: 0.7rem;
  color: rgba(212,168,83,0.6);
  margin-left: auto;
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ---- Sector tabs ---- */
.bk-sector-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 8px;
  justify-content: center;
  flex-shrink: 0;
}

.bk-sector-tab {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
  font-family: inherit;
}

.bk-sector-tab:hover {
  background: rgba(212,168,83,0.12);
  border-color: rgba(212,168,83,0.35);
  color: #d4a853;
}

.bk-sector-tab--active {
  background: rgba(212,168,83,0.18);
  border-color: rgba(212,168,83,0.6);
  color: #d4a853;
  font-weight: 600;
}

/* ---- Legend ---- */
.bk-legend-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 0 14px 8px;
  flex-shrink: 0;
}

.bk-leg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
}

.bk-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

.bk-dot--free   { background: #3a7d2c; }
.bk-dot--sold   { background: #7a2020; }
.bk-dot--picked { background: #d4a853; }
.bk-dot--vip    { background: #6b4fa0; }
.bk-dot--lozhe  { background: #3a6d94; }

/* ---- Zoom viewport ---- */
.bk-zm-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
  /* No border, no background — transparent so outer bg shows */
  min-height: 300px;
  touch-action: none; /* for pinch handling */
  user-select: none;
  -webkit-user-select: none;
}

.bk-zm-viewport:active {
  cursor: grabbing;
}

/* ---- The inner canvas that gets scaled ---- */
.bk-zm-canvas {
  position: absolute;
  /* transform-origin set inline via JS, default center */
  transform-origin: 0 0;
  /* will-change: transform for GPU compositing */
  will-change: transform;
  /* transition only when NOT dragging — for smooth zoom button clicks */
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bk-zm-canvas--no-anim {
  transition: none !important;
}

/* ---- Stage label ---- */
.bk-stage-label {
  position: absolute;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-primary, #d4a853);
  background: linear-gradient(to bottom, rgba(212,168,83,0.18), rgba(212,168,83,0.04));
  border: 1px solid rgba(212,168,83,0.3);
  border-radius: 6px;
  padding: 5px 18px;
  white-space: nowrap;
  pointer-events: none;
  /* Position is set inline by JS to center above seats */
}

/* ====================================================
   SEATS — base, positioned absolutely
   ==================================================== */
.bk-s {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: box-shadow 0.12s, background 0.12s, border-color 0.12s;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  overflow: hidden;
  /* size and font-size are set by zoom-level classes below */
}

/* ====================================================
   ZOOM OVERVIEW — scale < 0.6 → tiny dots, no text
   ==================================================== */
.bk-zm-viewport.zoom-overview .bk-s {
  width: 10px;
  height: 10px;
  font-size: 0;
  border-radius: 50%;
  border: none;
  cursor: default;
  /* no hover effects in overview — feels weird */
  transition: none;
}

/* Picked seats stay bigger even in overview so user can find them */
.bk-zm-viewport.zoom-overview .bk-s--picked {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(212,168,83,0.9);
  box-shadow: 0 0 4px rgba(212,168,83,0.7);
  animation: bk-seat-pulse 1.6s ease-in-out infinite;
}

/* ====================================================
   ZOOM MEDIUM — 0.6 ≤ scale < 1.2 → 18px squares, seat number
   ==================================================== */
.bk-zm-viewport.zoom-medium .bk-s {
  width: 18px;
  height: 18px;
  font-size: 8px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.bk-zm-viewport.zoom-medium .bk-s--free:hover,
.bk-zm-viewport.zoom-medium .bk-s--vip:hover,
.bk-zm-viewport.zoom-medium .bk-s--lozhe:hover,
.bk-zm-viewport.zoom-medium .bk-s--balcony:hover {
  transform: scale(1.2);
  z-index: 5;
}

/* ====================================================
   ZOOM DETAIL — scale ≥ 1.2 → 28px full buttons
   ==================================================== */
.bk-zm-viewport.zoom-detail .bk-s {
  width: 28px;
  height: 28px;
  font-size: 10px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.bk-zm-viewport.zoom-detail .bk-s--free:hover,
.bk-zm-viewport.zoom-detail .bk-s--vip:hover,
.bk-zm-viewport.zoom-detail .bk-s--lozhe:hover,
.bk-zm-viewport.zoom-detail .bk-s--balcony:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 5;
}

/* ====================================================
   COLOR CLASSES (same colors as v2, shared)
   ==================================================== */
.bk-s--free {
  background: #3a7d2c;
  color: #fff;
  border-color: rgba(255,255,255,0.08);
}
.bk-s--free:hover {
  background: #4a9e38;
}
.bk-s--free:active {
  transform: scale(0.95);
}

.bk-s--sold {
  background: #7a2020;
  color: rgba(255,255,255,0.35);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.bk-s--blocked {
  background: #2e2e2e;
  color: rgba(255,255,255,0.18);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.bk-s--picked {
  background: #d4a853;
  color: #1a1612;
  border-color: rgba(255,255,255,0.35);
  font-weight: 700;
  z-index: 3;
  box-shadow: 0 0 0 2px rgba(212,168,83,0.5), 0 2px 10px rgba(212,168,83,0.4);
  animation: bk-seat-pulse 1.6s ease-in-out infinite;
}
.bk-s--picked:hover {
  background: #e0b960;
}

.bk-s--vip {
  background: #6b4fa0;
  color: #fff;
  border-color: rgba(255,255,255,0.12);
}
.bk-s--vip:hover {
  background: #8261be;
}

.bk-s--lozhe {
  background: #3a6d94;
  color: #fff;
  border-color: rgba(255,255,255,0.1);
}
.bk-s--lozhe:hover {
  background: #4a87b4;
}

.bk-s--balcony {
  background: #2d5a7a;
  color: #cde;
  border-color: rgba(255,255,255,0.08);
}
.bk-s--balcony:hover {
  background: #3a72a0;
}

@keyframes bk-seat-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(212,168,83,0.5), 0 2px 10px rgba(212,168,83,0.35); }
  50%       { box-shadow: 0 0 0 4px rgba(212,168,83,0.25), 0 2px 14px rgba(212,168,83,0.55); }
}

/* ====================================================
   SELECTION BAR (sticky bottom, same as v2)
   ==================================================== */
.bk-selection-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(28, 24, 20, 0.97);
  border-top: 1px solid rgba(212,168,83,0.35);
  padding: 12px 20px;
  z-index: 9999;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-shrink: 0;
  /* animate entrance */
  animation: bk-sel-slide-up 0.3s ease-out;
}

@keyframes bk-sel-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.bk-sel-info {
  flex: 1;
  min-width: 0;
}

.bk-sel-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: #d4a853;
  display: block;
}

.bk-sel-seats {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 240px;
}

.bk-sel-total {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.bk-sel-btn {
  background: var(--color-primary, #d4a853);
  color: #1a1612;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, transform 0.1s;
  font-family: inherit;
}

.bk-sel-btn:hover {
  background: #e0c46a;
  transform: scale(1.03);
}

.bk-sel-btn:active {
  transform: scale(0.97);
}

/* ====================================================
   LOADING STATE
   ==================================================== */
.bk-map-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 24px;
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
}

.bk-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(212,168,83,0.15);
  border-top-color: #d4a853;
  border-radius: 50%;
  animation: bk-spin 0.8s linear infinite;
}

.bk-spinner-lg {
  width: 40px;
  height: 40px;
}

@keyframes bk-spin {
  to { transform: rotate(360deg); }
}

/* ====================================================
   ERROR STATE
   ==================================================== */
.bk-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  text-align: center;
}

.bk-error-state svg {
  width: 48px;
  height: 48px;
  color: rgba(212,83,83,0.7);
}

.bk-error-state h3 {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.bk-error-state p {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
  max-width: 300px;
}

/* ====================================================
   ENTRANCE TICKET CARD (café)
   ==================================================== */
.bk-entrance-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,168,83,0.2);
  border-radius: 10px;
  margin: 20px 16px;
}

.bk-entrance-card__icon {
  color: #d4a853;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.bk-entrance-card__icon svg {
  width: 44px;
  height: 44px;
}

.bk-entrance-card__body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 8px;
}

.bk-entrance-card__body p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ====================================================
   TOAST CONTAINER
   ==================================================== */
.bk-toast-container {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.bk-toast {
  background: rgba(30,26,22,0.95);
  border: 1px solid rgba(212,168,83,0.3);
  color: rgba(255,255,255,0.85);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.84rem;
  text-align: center;
  backdrop-filter: blur(8px);
  animation: bk-toast-in 0.25s ease-out;
}

.bk-toast--warning { border-color: rgba(230,150,50,0.5); color: #e09040; }
.bk-toast--error   { border-color: rgba(200,60,60,0.5); color: #e05050; }
.bk-toast--success { border-color: rgba(60,180,80,0.5); color: #55cc66; }

@keyframes bk-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 600px) {
  .bk-seatmap-v3 {
    min-height: 400px;
    max-height: 70vh;
    height: 65vh;
  }

  .bk-zm-hint {
    display: none;
  }

  .bk-selection-bar {
    flex-wrap: wrap;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }

  .bk-sel-seats {
    max-width: 180px;
  }

  .bk-zm-viewport.zoom-detail .bk-s {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
}

/* ====================================================
   BACKWARD COMPAT — keep old v2 classes working if
   they appear outside this module
   ==================================================== */
.bk-seatmap-v2 {
  /* Redirect to v3 shell */
  background: var(--color-surface, #151413);
  border-radius: 8px;
  padding: 16px 12px 80px;
  position: relative;
  font-family: inherit;
}