/**
 * UDS Arena Seat Map — оформление.
 * Тёмная премиум-тема. Все цвета вынесены в переменные на .sm —
 * чтобы перекрасить модуль под лендинг, достаточно переопределить их.
 */

.sm {
  /* поверхности */
  --sm-bg:            #0A1020;
  --sm-surface:       #111A2E;
  --sm-surface-2:     #16203A;
  --sm-line:          rgba(255, 255, 255, .09);
  --sm-line-strong:   rgba(255, 255, 255, .16);

  /* текст */
  --sm-text:          #E8EDF7;
  --sm-text-dim:      #8A99B8;

  /* бренд */
  --sm-accent:        #2E51FF;   /* синий «Авторы» */
  --sm-accent-soft:   #4C6BFF;
  --sm-gold:          #C9A870;   /* золото «Якуба» */

  /* состояния мест */
  --sm-sold:          #33405C;
  --sm-blocked:       #1B2440;
  --sm-selected:      #FFFFFF;

  --sm-radius:        16px;

  position: relative;
  color: var(--sm-text);
  font-family: inherit;
}

.sm *, .sm *::before, .sm *::after { box-sizing: border-box; }

/* ─── легенда ──────────────────────────────────────────────────────────────── */
.sm__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.sm__leg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 12px;
  border: 1px solid var(--sm-line);
  border-radius: 999px;
  background: var(--sm-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}
.sm__leg:hover { border-color: var(--sm-line-strong); transform: translateY(-1px); }
.sm__leg[aria-pressed="true"] {
  border-color: var(--leg-color);
  background: color-mix(in srgb, var(--leg-color) 14%, var(--sm-surface));
}

.sm__leg-dot {
  width: 12px; height: 12px;
  border-radius: 4px;
  background: var(--leg-color);
  flex: none;
}
.sm__leg-text { display: flex; align-items: baseline; gap: 8px; }
.sm__leg-title { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.sm__leg-price { font-size: 13px; color: var(--sm-text-dim); white-space: nowrap; }

.sm__leg-states {
  display: flex; gap: 14px;
  margin-left: auto;
  font-size: 12.5px;
  color: var(--sm-text-dim);
}
.sm__state { display: inline-flex; align-items: center; gap: 7px; }
.sm__state::before {
  content: ''; width: 11px; height: 11px; border-radius: 3px;
}
.sm__state--sold::before    { background: var(--sm-sold); }
.sm__state--blocked::before { background: var(--sm-blocked); border: 1px solid var(--sm-line); }

/* ─── раскладка ────────────────────────────────────────────────────────────── */
.sm__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.sm__stage-wrap {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(46, 81, 255, .16), transparent 60%),
    var(--sm-surface);
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-radius);
  overflow: hidden;
}

.sm__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 84vh;
  /* пока зал не приближен — вертикальный свайп листает страницу;
     после приближения JS переключает на none (см. applyCamera) */
  touch-action: pan-y;
  cursor: default;
}
.sm__svg.is-zoomed { cursor: grab; }
.sm__svg.is-zoomed:active { cursor: grabbing; }

/* ─── сцена, подписи ───────────────────────────────────────────────────────── */
.sm__stage {
  fill: url(#sm-stage-grad);
  stroke: var(--sm-gold);
  stroke-width: .06;
  opacity: .95;
}
.sm__stage-text {
  fill: #0A1020;
  font-size: .95px;
  font-weight: 700;
  letter-spacing: .28px;
  text-anchor: middle;
}
.sm__sector {
  fill: var(--sm-text-dim);
  font-size: 1.05px;
  font-weight: 700;
  letter-spacing: .22px;
  text-anchor: middle;
}
.sm__rowlabel {
  fill: var(--sm-text-dim);
  font-size: .78px;
  opacity: .75;
}
.sm__seatnum {
  fill: rgba(10, 16, 32, .82);
  font-size: .58px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

/* ─── места ────────────────────────────────────────────────────────────────── */
.sm__seat {
  fill: var(--seat-color, var(--sm-sold));
  transition: fill .14s, opacity .18s;
}
.sm__seat--available {
  cursor: pointer;
  opacity: .88;
}
.sm__seat--available:hover {
  opacity: 1;
  stroke: #fff;
  stroke-width: .09;
}
.sm__seat--selected {
  fill: var(--sm-selected);
  stroke: var(--seat-color);
  stroke-width: .16;
  cursor: pointer;
}
.sm__seat--sold    { fill: var(--sm-sold); opacity: .85; }
.sm__seat--held    { fill: var(--sm-sold); opacity: .85; }
.sm__seat--blocked { fill: var(--sm-blocked); opacity: .7; }
.sm__seat.is-dimmed { opacity: .15; pointer-events: none; }

/* ─── зум ──────────────────────────────────────────────────────────────────── */
.sm__zoom {
  position: absolute;
  right: 12px; top: 12px;
  display: flex; gap: 6px;
}
.sm__zbtn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--sm-line-strong);
  border-radius: 10px;
  background: rgba(10, 16, 32, .78);
  backdrop-filter: blur(8px);
  color: var(--sm-text);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.sm__zbtn:hover { background: var(--sm-accent); border-color: var(--sm-accent); }

.sm__hint {
  position: absolute;
  left: 14px; bottom: 14px;
  font-size: 12px;
  color: var(--sm-text-dim);
  pointer-events: none;
}

/* ─── подсказка ────────────────────────────────────────────────────────────── */
.sm__tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -140%);
  padding: 8px 12px;
  border: 1px solid var(--sm-line-strong);
  border-radius: 10px;
  background: rgba(6, 11, 24, .95);
  font-size: 13px;
  line-height: 1.45;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.sm__tip-line { display: block; color: var(--sm-text-dim); }

/* ─── корзина ──────────────────────────────────────────────────────────────── */
.sm__cart {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 18px;
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-radius);
  background: var(--sm-surface);
  position: sticky;
  top: 16px;
}
.sm__cart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.sm__cart-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.sm__clear {
  border: 0; background: none; padding: 0;
  color: var(--sm-text-dim); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.sm__clear:hover { color: var(--sm-text); }

.sm__cart-list { flex: 1; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.sm__empty { margin: 0; color: var(--sm-text-dim); font-size: 13.5px; line-height: 1.6; }

.sm__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--sm-line);
  border-radius: 11px;
  background: var(--sm-surface-2);
}
.sm__row-dot { width: 9px; height: 9px; border-radius: 3px; }
.sm__row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sm__row-place { font-size: 13px; }
.sm__row-tariff { font-size: 11.5px; color: var(--sm-text-dim); text-transform: uppercase; letter-spacing: .05em; }
.sm__row-price { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm__row-del {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--sm-text-dim);
  font-size: 17px; line-height: 1;
  cursor: pointer;
}
.sm__row-del:hover { background: rgba(255, 90, 90, .16); color: #FF9B9B; }

.sm__cart-foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sm-line); }
.sm__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sm__total-label { color: var(--sm-text-dim); font-size: 13px; }
.sm__total-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }

.sm__checkout {
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--sm-accent);
  color: #fff;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background .18s, transform .18s;
}
.sm__checkout:hover:not(:disabled) { background: var(--sm-accent-soft); transform: translateY(-1px); }
.sm__checkout:disabled { background: var(--sm-surface-2); color: var(--sm-text-dim); cursor: not-allowed; }

.sm__note { margin: 10px 0 0; font-size: 12px; color: var(--sm-text-dim); text-align: center; }

/* ─── всплывающее сообщение ────────────────────────────────────────────────── */
.sm__flash {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 12px);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--sm-gold);
  color: #14100A;
  font-size: 13.5px; font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 10;
}
.sm__flash.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ─── адаптив ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sm__body { grid-template-columns: minmax(0, 1fr); }
  .sm__svg { max-height: 70vh; }
  .sm__hint { display: none; }

  /* корзина уезжает под схему обычным блоком — sticky здесь только перекрывал зал */
  .sm__cart { position: static; min-height: 0; }
  .sm__cart-list { max-height: none; }

  .sm__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .sm__leg { padding: 9px 11px; gap: 8px; }
  .sm__leg-title { font-size: 13.5px; }
  .sm__leg-price { font-size: 12px; }
  .sm__leg-states { grid-column: 1 / -1; margin-left: 0; justify-content: center; }

  .sm__zbtn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm *, .sm *::before, .sm *::after { transition-duration: .01ms !important; }
}