/* ================================================================
   Registration Gate & Profile — компоненты бесплатного gate (T6+/.1+).
   Расширение дизайн-системы. Подключать ПОСЛЕ tokens.css.
   Все значения берутся из токенов. Новых цветов не вводим.

   ВАЖНО: базовый класс кнопок назван .gbtn (а не .btn), чтобы не
   конфликтовать с Bootstrap .btn, который загружается на части страниц.
   ================================================================ */

/* ─────────────────────────────────────────────────────────────
   КНОПКИ (общие для gate-модалки, empty states, профиля)
   ───────────────────────────────────────────────────────────── */
.gbtn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  height: 38px; padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.gbtn svg { flex-shrink: 0; }
.gbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }

.gbtn--primary { background: var(--success); color: var(--text-on-dark); border-color: var(--success); }
.gbtn--primary:hover { background: #2ea043; border-color: #2ea043; }

.gbtn--secondary { background: var(--bg-3); color: var(--text); border-color: var(--border); }
.gbtn--secondary:hover { background: var(--bg-overlay); border-color: var(--text-subtle); }

.gbtn--tertiary { background: transparent; color: var(--text-muted); border-color: transparent; }
.gbtn--tertiary:hover { color: var(--text); background: var(--nav-hover-bg); }

.gbtn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.gbtn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.gbtn--sm { height: 30px; padding: 0 11px; font-size: 12px; }
.gbtn--block { width: 100%; }
.gbtn:disabled, .gbtn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────
   LOCKED FILTER CHIPS — tier / enchantment
   ───────────────────────────────────────────────────────────── */
.gchip {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 32px; padding: 0 11px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text-muted);
  border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: all var(--transition);
}
.gchip svg { flex-shrink: 0; }

/* 1. Available inactive */
.gchip:hover { border-color: var(--accent); color: var(--text); }

/* 2. Available active */
.gchip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.gchip.is-active.t6 { background: var(--tier-t6); border-color: var(--tier-t6); color: #111; }
.gchip.is-active.t7 { background: var(--tier-t7); border-color: var(--tier-t7); color: #111; }
.gchip.is-active.t8 { background: var(--tier-t8); border-color: var(--tier-t8); color: #111; }

/* 3. Locked idle — видимый, читаемый, с замком */
.gchip.is-locked {
  background: var(--bg-2);
  border-style: dashed; border-color: var(--border);
  color: var(--text-subtle);
  cursor: pointer;
}
.gchip.is-locked .glock { opacity: .85; }
.gchip.is-locked .gchip-label { color: var(--text-muted); }

/* 4. Locked hover / focus — показываем кликабельность */
.gchip.is-locked:hover,
.gchip.is-locked:focus-visible {
  outline: none;
  border-color: var(--accent);
  border-style: solid;
  color: var(--text);
  background: var(--bg-3);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.gchip.is-locked:hover .gchip-label,
.gchip.is-locked:focus-visible .gchip-label { color: var(--text); }

/* 5. Locked pressed */
.gchip.is-locked:active,
.gchip.is-locked.is-pressed { transform: translateY(1px); background: var(--bg-overlay); border-color: var(--accent); }

/* 6. Disabled loading */
.gchip.is-loading {
  cursor: progress; color: transparent; border-style: solid;
  pointer-events: none;
}
.gchip.is-loading::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  background-size: 200% 100%; animation: gchip-shimmer 1.1s infinite;
}
@keyframes gchip-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.glock { width: 12px; height: 12px; }

/* select-вариант: locked options */
.gselect-opt-locked { color: var(--text-subtle); }

/* ─────────────────────────────────────────────────────────────
   УНИВЕРСАЛЬНЫЙ LOCKED — навешивается gate.js на ЛЮБОЙ существующий
   чип/кнопку фильтра по атрибуту, поверх его собственных стилей.
   ───────────────────────────────────────────────────────────── */
[data-gate-locked="1"] {
  position: relative;
  border-style: dashed !important;
  opacity: .72;
  cursor: pointer;
}
[data-gate-locked="1"]:hover,
[data-gate-locked="1"]:focus-visible {
  outline: none;
  opacity: 1;
  border-style: solid !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-bg);
}
[data-gate-locked="1"] .gate-lock {
  width: 11px; height: 11px; margin-right: 3px;
  vertical-align: -1px; display: inline-block; flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   INLINE NUDGE — компактный блок рядом с фильтрами
   ───────────────────────────────────────────────────────────── */
.nudge {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: var(--accent-bg);
  border: 1px solid rgba(88,166,255,.28);
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--text); line-height: 1.45;
}
.nudge-ico { flex-shrink: 0; color: var(--accent); display: flex; }
.nudge-text { flex: 1; min-width: 0; text-wrap: pretty; }
.nudge-text b { font-weight: 700; }
.nudge-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 640px) {
  .nudge { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .nudge-actions { width: 100%; }
  .nudge-actions .gbtn { flex: 1; }
}

/* ─────────────────────────────────────────────────────────────
   MODAL — «Полная база после регистрации»
   ───────────────────────────────────────────────────────────── */
.gate-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(1,4,9,.72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.gate-modal {
  width: 100%; max-width: 440px;
  background: var(--bg-overlay);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.gate-head {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 20px 20px 0;
  position: relative;
}
.gate-badge {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--accent-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.gate-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 2px 0 0; line-height: 1.25; text-wrap: balance; }
.gate-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: var(--radius-md);
  border: none; background: transparent; color: var(--text-subtle);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all var(--transition);
}
.gate-close:hover { background: var(--nav-hover-bg); color: var(--text); }
.gate-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-bg); }
.gate-body { padding: 14px 20px 0; }
.gate-copy { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin: 0 0 14px; text-wrap: pretty; }
.gate-copy b { color: var(--text); font-weight: 700; }

.gate-benefits { display: grid; gap: 9px; margin: 0 0 4px; }
.gate-benefit { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.gate-benefit .gb-ico {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
  background: var(--success-bg); color: var(--success);
  display: flex; align-items: center; justify-content: center;
}
.gate-actions { display: grid; gap: 8px; padding: 18px 20px 8px; }
.gate-trust {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 4px 20px 18px;
  font-size: 12px; color: var(--text-subtle);
}
.gate-trust svg { color: var(--success); }

/* Loading-состояние primary-кнопки */
.gbtn.is-loading { color: transparent; position: relative; pointer-events: none; }
.gbtn.is-loading::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
  border-radius: 50%; animation: gbtn-spin .7s linear infinite;
}
@keyframes gbtn-spin { to { transform: rotate(360deg); } }

/* Mobile bottom-sheet вариант */
.gate-overlay.as-sheet { align-items: flex-end; padding: 0; }
.gate-overlay.as-sheet .gate-modal {
  max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border-bottom: none;
}
.gate-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--border); margin: 8px auto 0; }

/* ─────────────────────────────────────────────────────────────
   EMPTY STATES — locked-only запрос (таблица / график)
   ───────────────────────────────────────────────────────────── */
.locked-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: 40px 24px; max-width: 460px; margin: 0 auto;
}
.locked-empty .le-ico {
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  background: var(--accent-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.locked-empty h3 { font-size: 16px; font-weight: 800; margin: 0; letter-spacing: -.01em; text-wrap: balance; color: var(--text); }
.locked-empty p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.55; text-wrap: pretty; }
.locked-empty .le-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }

/* chart-panel вариант — не пустая тёмная область, а панель с CTA */
.locked-chart {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 38px, var(--border-muted) 38px, var(--border-muted) 39px),
    var(--bg-2);
  min-height: 260px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.locked-chart::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, var(--bg-2) 88%);
}
.locked-chart .locked-empty { position: relative; padding: 28px 24px; }

/* table empty row */
.locked-row td { padding: 0 !important; background: var(--bg) !important; }
.locked-row .locked-empty { padding: 30px 20px; max-width: 520px; }

/* «Доступно без регистрации» — мини-карточки похожих item */
.avail-strip { border-top: 1px solid var(--border-muted); margin-top: 6px; padding-top: 14px; }
.avail-strip-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.avail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 8px; }

/* ─────────────────────────────────────────────────────────────
   BADGES — tier / enchantment / provider / subscription status
   ───────────────────────────────────────────────────────────── */
.gbadge-tier { display: inline-flex; align-items: center; height: 19px; border-radius: 5px; padding: 0 7px; font-size: 11px; font-weight: 800; }
.gbadge-tier.t4 { background: var(--tier-t4); color: #fff; }
.gbadge-tier.t5 { background: var(--tier-t5); color: #fff; }
.gbadge-tier.t6 { background: var(--tier-t6); color: #111; }
.gbadge-tier.t7 { background: var(--tier-t7); color: #111; }
.gbadge-tier.t8 { background: var(--tier-t8); color: #111; }
.gbadge-enc { display: inline-flex; align-items: center; height: 19px; border-radius: 5px; padding: 0 7px; font-size: 11px; font-weight: 800; color: #fff; }
.gbadge-enc.e1 { background: var(--enchant-1); color:#06231a; } .gbadge-enc.e2 { background: var(--enchant-2); color:#04222a; }
.gbadge-enc.e3 { background: var(--enchant-3); } .gbadge-enc.e4 { background: var(--enchant-4); color:#3a2f00; }

.status-pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; border: 1px solid; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.ok    { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.status-pill.trial { color: var(--accent);  background: var(--accent-bg);  border-color: rgba(88,166,255,.3); }
.status-pill.warn  { color: var(--warn);    background: var(--warn-bg);    border-color: var(--warn-border); }
.status-pill.muted { color: var(--text-subtle); background: var(--bg-3); border-color: var(--border); }

/* provider chips */
.prov-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--bg-3); color: var(--text-muted); }
.prov-badge svg { width: 13px; height: 13px; }