/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Кнопка «Биржа списка» в шапке + диалог одиночного выбора
   «биржа — FT/SP» (js/venuapicker.js) и оформление строк
   venue-листингов в списке монет (js/components/coinlist.js).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── кнопка в шапке: только иконка-глобус (надписей биржи рядом нет) ─── */
.vp-btn { position: relative; }
.vp-btn.vp-on { color: var(--text-primary); border-color: var(--border); background: var(--menu-hover); }

/* ─── диалог ───
   Позиция — инлайн из JS (positionPop): со стороны контента относительно
   положения шапки (top/bottom/left/right). Жёстких top/right здесь нет. */
.vp-pop {
  position: fixed;
  z-index: 320;
  width: 236px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  padding: 8px;
  background: var(--popup-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-origin: top right;
}
.vp-pop.hidden { display: none; }
/* точка роста — со стороны кнопки (направление ставит JS в dataset.dir) */
.vp-pop[data-dir="bottom"] { transform-origin: bottom right; }
.vp-pop[data-dir="left"] { transform-origin: top left; }
.vp-pop[data-dir="right"] { transform-origin: top right; }
.vp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* низким экранам: список скроллится, шапка-подсказка диалога на месте */
.vp-list {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.vp-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  font: inherit;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
}
.vp-row:hover { background: var(--menu-hover); }
.vp-row.on { color: var(--text-primary); }
/* аббревиатура биржи в её цвете — тот же язык, что пилюли меню */
.vp-pill {
  flex-shrink: 0;
  width: 30px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 1.5px 0;
  border: 1px solid;
  border-radius: 5px;
  opacity: 0.55;
}
.vp-row.on .vp-pill { opacity: 1; }
/* логотип + название биржи (PNG из js/img/venues/);
   name тянется на всё освободившееся место, чтобы сегменты FT/SP и
   «N пар» остались на прежних местах справа */
.vp-logo-wrap { flex: 0 0 auto; display: flex; align-items: center; }
.vp-logo {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
  border-radius: 5px;
  opacity: 0.55;
  /* адаптация к светлым темам: светлые/прозрачные PNG (binance — жёлтый
     глиф, hyperliquid — почти белый, kucoin/bitget — светлая плашка)
     садятся на почти-чёрную подложку: читаются и на белом, и на чёрном;
     тёмные логи (okx/bybit/aster) просто сливаются с ней */
  background: #14161a;
  border: 1px solid var(--border);
  box-sizing: content-box;
}
.vp-row.on .vp-logo { opacity: 1; }
.vp-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
/* сегменты рынка: OKX [FT][SP] — выбор всегда ровно один */
.vp-segs {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
.vp-seg {
  font: inherit;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}
.vp-seg:hover { color: var(--text-primary); background: var(--menu-hover); }
.vp-seg.on {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.vp-info {
  min-width: 46px;
  text-align: right;
  font-size: 9.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.vp-info.dead { color: var(--negative); }
.vp-hint {
  padding: 6px 6px 2px;
  font-size: 9px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* ─── строки списка монет ─── */
.coin-item .ci-symbol {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.coin-item .ci-symbol .symbol {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* строка venue-монеты (уникальный листинг): нет метрик 24ч из релея */
.coin-item.vp-extra .volume { color: var(--text-secondary); }
.coin-item.vp-extra .trades,
.coin-item.vp-extra .corr-label { color: var(--text-muted); }

/* ═══ Pro-гейтинг (25.09): только Binance FT free, остальное — PRO ═══ */
/* строка закрытой биржи: приглушена, замок справа — ЕДИНЫЙ с меню
   (sm-item-lock): SVG 12×12, stroke, muted, без текстовой пилюли */
.vp-row.lock { opacity: 0.55; }
.vp-row.lock .vp-name { color: var(--text-muted); }
.vp-lock {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  color: var(--text-muted);
  opacity: 0.85;
}
.vp-lock svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vp-row.lock:hover { background: var(--menu-hover); }
/* закрытый сегмент рынка: полупрозрачный, без текстового замка */
.vp-seg.lock { opacity: 0.5; }
/* место счётчика пар: пустое, но резервирует правый край строки */
.vp-info.vp-info-quiet { min-width: 0; }