/* Bil24 Seat Picker — mobile-first */

.bsp-root {
  margin: 16px 0 24px;
  max-width: 100%;
}

.bsp-header .bsp-title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
}

/* ── Легенда категорий ── */
.bsp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
}
.bsp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.bsp-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, .18);
  flex: none;
}

/* ── Карта ── */
.bsp-map-wrap {
  position: relative;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  overflow: hidden;
  background: #faf8f5;
}
.bsp-viewport {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 320px;
  max-height: 720px;
  overflow: hidden;
  touch-action: none;           /* весь тач обрабатываем сами: pan/pinch/tap */
  overscroll-behavior: contain; /* жесты на карте не «уводят» страницу (моб.) */
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
.bsp-viewport:active { cursor: grabbing; }
.bsp-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  /* Схема невидима, пока не собрана полностью (вставка+раскраска+масштаб):
     промежуточные состояния рендера не показываются никогда */
  opacity: 0;
}
.bsp-stage.bsp-ready {
  opacity: 1;
  transition: opacity .18s ease-out;
}
.bsp-stage svg { pointer-events: none; } /* хит-тест тапа — свой, по ближайшему месту */

.bsp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #555;
  background: rgba(250, 248, 245, .85);
  text-align: center;
  padding: 20px;
}
.bsp-loading.bsp-error { color: var(--lp-error, #b03030); }

/* Состояния мест */
.bsp-seat { cursor: pointer; }
.bsp-seat.bsp-sel {
  stroke: #1a1a1a;
  stroke-width: 2.2px;
  paint-order: stroke;
}
.bsp-seat.bsp-na { cursor: default; }

/* ── Пузырёк «место занято» ── */
.bsp-bubble {
  position: absolute;
  transform: translate(-50%, -135%) scale(.92);
  background: rgba(28, 28, 28, .92);
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease-out, transform .18s ease-out;
  z-index: 20;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.bsp-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom: none;
  border-top: 5px solid rgba(28, 28, 28, .92);
}
.bsp-bubble.bsp-bubble-show {
  opacity: 1;
  transform: translate(-50%, -135%) scale(1);
}

/* ── Кнопки зума ── */
.bsp-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
[dir="rtl"] .bsp-zoom { right: auto; left: 10px; }
/* Жёсткий сброс от темы (та же история, что с чипами): компактные белые кнопки */
.bsp-zoom .bsp-zoom-btn,
.bsp-zoom .bsp-zoom-btn:hover,
.bsp-zoom .bsp-zoom-btn:focus,
.bsp-zoom .bsp-zoom-btn:active {
  all: unset;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .15);
  background: #fff;
  color: #222;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.bsp-zoom .bsp-zoom-btn:hover { background: var(--lp-soft-bg, #f5f2ee); }
.bsp-zoom .bsp-zoom-btn:active { transform: translateY(1px); }

/* ── GA (General Admission, combined-сеанс) ── */
.bsp-ga {
  margin: 10px 0 12px; /* sits between the title and the legend */
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
  background: #fff;
}
.bsp-ga-title {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.bsp-ga-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}
.bsp-ga-row + .bsp-ga-row {
  border-top: 1px solid rgba(0, 0, 0, .06);
}
.bsp-ga-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.bsp-ga-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
.bsp-ga-price {
  font-size: 14px;
  color: #333;
}
.bsp-ga-left {
  font-size: 12px;
  color: #777;
  flex-basis: 100%;
}
.bsp-ga-stepper {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Жёсткий сброс от темы (та же история, что с чипами/зумом): круглые кнопки −/+ */
.bsp-ga-stepper .bsp-ga-btn,
.bsp-ga-stepper .bsp-ga-btn:hover,
.bsp-ga-stepper .bsp-ga-btn:focus,
.bsp-ga-stepper .bsp-ga-btn:active {
  all: unset;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
  background: #fff;
  color: #222;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.bsp-ga-stepper .bsp-ga-btn:hover { background: var(--lp-soft-bg, #f5f2ee); }
.bsp-ga-stepper .bsp-ga-btn:active { transform: translateY(1px); }
.bsp-ga-stepper .bsp-ga-btn:disabled,
.bsp-ga-stepper .bsp-ga-btn[disabled] {
  opacity: .35;
  cursor: default;
  transform: none;
}
.bsp-ga-qty {
  min-width: 24px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: #1a1a1a;
}

/* ── Нижняя панель выбора ── */
.bsp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
  background: #fff;
}
.bsp-bar-info {
  flex: 1 1 auto;
  min-width: 0;
}
.bsp-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: #555;
}
.bsp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f2ede6;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 13px;
  color: #222;
  white-space: nowrap;
}
/* Жёсткий сброс: тема (Elementor/Hello) красит любые button в крупные
   бордовые овалы — возвращаем крестику вид маленькой круглой кнопки чипа */
.bsp-chip .bsp-chip-x,
.bsp-chip .bsp-chip-x:hover,
.bsp-chip .bsp-chip-x:focus,
.bsp-chip .bsp-chip-x:active {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .08);
  color: #666;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.bsp-chip .bsp-chip-x:hover {
  background: rgba(176, 48, 48, .15);
  color: var(--lp-error, #b03030);
}
.bsp-bar-total {
  margin-top: 6px;
  font-weight: 600;
  font-size: 15px;
  color: #1a1a1a;
}
.bsp-continue {
  flex: none;
  min-height: 48px;
  padding: 0 22px;
  border: none;
  border-radius: 10px;
  background: var(--lp-btn-bg, #8c1d2f);
  color: var(--lp-btn-text, #fff);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.bsp-continue:disabled {
  opacity: .45;
  cursor: default;
}

/* ── Сообщения ── */
.bsp-msg {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  background: #f4f1ec;
  color: #333;
  border: 1px solid rgba(0, 0, 0, .08);
}
.bsp-msg-warn { background: #fdf3e3; color: #7a5200; border-color: #ecd9ae; }
.bsp-msg-error { background: var(--lp-error-bg, #fbeaea); color: #8f2020; border-color: #eec7c7; }

.bsp-errors {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--lp-error-bg, #fbeaea);
  color: #8f2020;
  font-size: 14px;
}

/* ── Модалка (переиспользуем vino-modal-* классы, позиционирование своё) ── */
#bsp-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
}
#bsp-modal .bsp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
#bsp-modal .bsp-box {
  /* .vino-modal-box brings top/left 50% + translate(-50%,-50%); with position:relative that
     pushed the box to the bottom-right corner on wide screens. Centre it for real. */
  position: relative;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 440px;
  margin: 0 auto;
  max-height: 88vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
body.bsp-modal-open { overflow: hidden; }

#bsp-summary {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--lp-soft-bg, #f7f3ee);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-text, #2c2c2c);
}

/* Кнопки модалки: тема делает их inline-овалами, и они наезжают друг на друга.
   Жёсткий сброс: ОПЛАТИТЬ — блочная на всю ширину, НАЗАД — текстовая ссылка под ней */
#bsp-modal #bsp-pay,
#bsp-modal #bsp-pay:hover,
#bsp-modal #bsp-pay:focus,
#bsp-modal #bsp-pay:active {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  margin-top: 10px;
  border-radius: 10px;
  background: var(--lp-btn-bg, #8c1d2f);
  color: var(--lp-btn-text, #fff);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
#bsp-modal #bsp-pay:hover { background: var(--lp-btn-bg-hover, #7a1826); }
#bsp-modal #bsp-pay[disabled] {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}
#bsp-modal #bsp-back,
#bsp-modal #bsp-back:hover,
#bsp-modal #bsp-back:focus,
#bsp-modal #bsp-back:active {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  text-align: center;
  color: #777;
  font-size: 14px;
  cursor: pointer;
  background: none;
}
#bsp-modal #bsp-back:hover { color: #333; }

/* Промокод: кнопка «Применить» и переключатель — компактные, не овалы темы */
#bsp-modal #bsp-promo-apply,
#bsp-modal #bsp-promo-apply:hover,
#bsp-modal #bsp-promo-apply:focus {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 8px;
  background: var(--lp-soft-bg, #f5f2ee);
  color: #333;
  font-size: 14px;
  cursor: pointer;
  flex: none;
}
#bsp-modal #bsp-promo-apply:hover { background: #ece7e0; }
#bsp-modal #bsp-promo-apply[disabled] { opacity: .55; pointer-events: none; }
#bsp-modal #bsp-promo-toggle,
#bsp-modal #bsp-promo-toggle:hover,
#bsp-modal #bsp-promo-toggle:focus {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  background: none;
  padding: 4px 0;
}
#bsp-modal #bsp-promo-toggle:hover { color: #333; }

/* Кнопка закрытия модалки — тот же жёсткий сброс от темы */
#bsp-modal .bsp-close,
#bsp-modal .bsp-close:hover,
#bsp-modal .bsp-close:focus,
#bsp-modal .bsp-close:active {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: #555;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
#bsp-modal .bsp-close:hover {
  background: rgba(0, 0, 0, .12);
  color: #222;
}

/* ── Скрыть нативную покупку у товаров со схемой ── */
body.bil24-has-seatmap form.cart,
body.bil24-has-seatmap .single_add_to_cart_button,
body.bil24-has-seatmap .vino-book-trigger,
body.bil24-has-seatmap .elementor-widget-woocommerce-product-add-to-cart,
body.bil24-has-seatmap p.stock.out-of-stock,
body.bil24-has-seatmap .stock.out-of-stock,
body.bil24-has-seatmap .elementor-widget-woocommerce-product-price {
  display: none !important;
}

/* ── Мобильная раскладка ── */
@media (max-width: 768px) {
  /* Тише отступ до счётчика «Before the event» — плашка GA должна попадать в первый экран. */
  .bsp-root { margin-top: 8px; }
  /* Карта ниже, чтобы селектор General Admission и Continue попадали в экран сразу
     (карта перехватывает тач для зума/пана — при высокой карте до плашки было не долистать). */
  .bsp-viewport {
    height: 38vh;
    min-height: 220px;
    max-height: 360px;
  }
  /* Панель — обычным блоком в потоке, сразу под картой (селектор General Admission
     с 2026-09-15 стоит выше карты, под заголовком). */
  .bsp-bar {
    position: static;
    flex-wrap: wrap;
  }
  .bsp-continue {
    flex: 1 1 100%;
    min-height: 50px;
  }
  #bsp-modal .bsp-box {
    max-width: none;
    margin: 0;
    border-radius: 16px 16px 0 0;
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    max-height: 92vh;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .bsp-zoom .bsp-zoom-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
  }
}

/* ═══════════════ Полноэкранный режим схемы ═══════════════
 * CSS-оверлей (без нативного Fullscreen API — iOS Safari его для div не даёт).
 * Кнопка ⛶ разворачивает карту на весь экран; карта fills, панель выбора/Continue
 * остаётся внизу; заголовок/легенда/GA скрыты, чтобы максимум места под схему. */
body.bsp-fs-lock { overflow: hidden !important; }

.bsp-root.bsp-fs {
  position: fixed;
  inset: 0;
  z-index: 100000;
  margin: 0;
  padding: 10px calc(10px + env(safe-area-inset-right, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px))
           calc(10px + env(safe-area-inset-left, 0px));
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.bsp-root.bsp-fs .bsp-header,
.bsp-root.bsp-fs .bsp-legend,
.bsp-root.bsp-fs .bsp-ga { display: none !important; }
.bsp-root.bsp-fs .bsp-map-wrap {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}
.bsp-root.bsp-fs .bsp-viewport {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}
.bsp-root.bsp-fs .bsp-bar {
  position: static !important;
  flex: none;
  margin-top: 10px;
  box-shadow: none;
}
/* The expand/close button sits with the other zoom controls; on desktop it's optional. */
.bsp-fs-btn svg { display: block; }