/* ═══════════════════════════════════════════════════════════════════
   INRESEARCH — БЛОК «СРАВНЕНИЕ РЫНКОВ» (v2)
   Файл: wp-content/themes/inresearch/assets/css/market-compare.css

   Все классы с префиксом .mcmp — коллизий с темой нет (проверено).
   Токены взяты из style.css темы:
     navy #151D3F · green #10CC97 · blue #5586E7
     фоны #F3F6FF / #ECF0FF · рамки #E8E8EC / #DCE2FF
     шрифты Unbounded (дисплей) + Inter (текст/цифры)

   Гейт самодостаточный: .mcmp-locked повторяет .gate-locked из gate.css,
   потому что gate.css НЕ подключается на главной (там только card-gate).
   ═══════════════════════════════════════════════════════════════════ */

.mcmp {
  --mcmp-navy:#151D3F;
  --mcmp-green:#10CC97;
  --mcmp-blue:#5586E7;
  --mcmp-muted:#8A8E9F;
  --mcmp-stroke:#E8E8EC;
  --mcmp-stroke-soft:#DCE2FF;
  --mcmp-bg:#F3F6FF;
  --mcmp-bg-2:#ECF0FF;
  --mcmp-purple:#7c3aed;
  --mcmp-radius:20px;

  padding: 40px 0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--mcmp-navy);
}
.mcmp *{ box-sizing:border-box; }

/* Тема задаёт Unbounded на body и .title его наследует. Но .mcmp выше
   выставляет Inter базовым шрифтом блока (нужен для цифр и таблицы),
   поэтому заголовку возвращаем фирменный стек явно. */
.mcmp__title{
  margin:0 0 6px;
  font-family:"Unbounded", "Inter", sans-serif;
}
.mcmp__subtitle{ margin:0 0 28px; font-size:14px; color:var(--mcmp-muted); }

/* ───────────── СЕТКА: график | панели-столбиком, таблица во всю ширину ───────────── */
.mcmp__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,600px);
  grid-template-areas:
    "chart  panels"
    "table  table";
  gap:24px;
  align-items:start;
}
.mcmp__chart     { grid-area:chart; }
.mcmp__panels    { grid-area:panels; display:flex; flex-direction:column; gap:20px; min-width:0; }
.mcmp__table-card{ grid-area:table; }

/* планшет/мобайл: панели выбора идут ПЕРЕД графиком */
@media (max-width:1280px){
  .mcmp__grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "panels"
      "chart"
      "table";
  }
}

/* ───────────── ГРАФИК (без карточки — фон страницы) ───────────── */
.mcmp__chart-head{
  display:flex; justify-content:flex-end; align-items:center;
  gap:16px; flex-wrap:wrap; margin-bottom:8px;
}
.mcmp__canvas{ position:relative; width:100%; height:640px; }
.mcmp__loader{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--mcmp-muted);
}
.mcmp__canvas.is-ready .mcmp__loader{ display:none; }

/* годы — числа над графиком */
.mcmp__years{
  display:flex; align-items:center; gap:2px;
  padding:4px; border-radius:13px; background:var(--mcmp-bg-2);
}
.mcmp__year{
  border:0; background:none; cursor:pointer;
  padding:7px 13px; border-radius:10px;
  font-family:"Unbounded", sans-serif; font-size:12.5px; font-weight:400;
  color:var(--mcmp-muted); font-variant-numeric:tabular-nums; line-height:1;
  transition:background .18s ease, color .18s ease;
}
.mcmp__year:hover{ color:var(--mcmp-navy); }
.mcmp__year.is-active{ background:var(--mcmp-navy); color:#fff; font-weight:500; }
.mcmp__year:focus-visible{ outline:2px solid var(--mcmp-blue); outline-offset:1px; }

/* ───────────── ПАНЕЛИ ВЫБОРА ───────────── */
.mcmp__panel{
  background:#fff;
  border:1px solid var(--mcmp-stroke);
  border-radius:var(--mcmp-radius);
  padding:20px;
}
.mcmp__panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:16px;
}
.mcmp__panel-title{
  margin:0; font-family:"Unbounded", sans-serif;
  font-size:15px; font-weight:500; color:var(--mcmp-navy);
}
.mcmp__panel-hint{ font-size:11px; color:var(--mcmp-muted); }
.mcmp__reset{
  border:0; background:none; padding:0; cursor:pointer;
  font-family:"Inter", sans-serif; font-size:11px; color:var(--mcmp-blue);
  border-bottom:1px dashed rgba(85,134,231,.5);
}
.mcmp__reset:hover{ color:var(--mcmp-navy); border-color:var(--mcmp-navy); }
.mcmp__panel-list{ display:flex; flex-direction:column; gap:12px; }

/* ───────────── КАСТОМНЫЙ СЕЛЕКТ ───────────── */
.mcmp__sel{ position:relative; }
.mcmp__sel-label{
  display:flex; align-items:center; gap:7px;
  font-size:11px; color:var(--mcmp-muted); margin-bottom:5px;
}
.mcmp__dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.mcmp__sel-trigger{
  width:100%; display:flex; align-items:center; gap:8px;
  padding:11px 12px; border-radius:12px; cursor:pointer; text-align:left;
  border:1px solid var(--mcmp-stroke); background:#fff;
  font-family:"Inter", sans-serif; font-size:13px; color:var(--mcmp-navy);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.mcmp__sel-trigger:hover{ border-color:var(--mcmp-stroke-soft); }
.mcmp__sel-trigger:focus-visible{
  outline:none; border-color:var(--mcmp-blue);
  box-shadow:0 0 0 3px rgba(85,134,231,.14);
}
.mcmp__sel.is-open .mcmp__sel-trigger{
  border-color:var(--mcmp-blue);
  box-shadow:0 0 0 3px rgba(85,134,231,.14);
}
.mcmp__sel-value{
  flex:1; min-width:0; font-weight:500; line-height:1.32;
  white-space:normal; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mcmp__sel-chev{ flex:0 0 14px; color:var(--mcmp-muted); transition:transform .2s ease; }
.mcmp__sel.is-open .mcmp__sel-chev{ transform:rotate(180deg); }

.mcmp__sel-drop{
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1px solid var(--mcmp-stroke-soft); border-radius:14px;
  box-shadow:0 18px 44px rgba(21,29,63,.14);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.mcmp__sel.is-open .mcmp__sel-drop{ opacity:1; visibility:visible; transform:none; }
.mcmp__sel-search{
  width:100%; padding:8px 10px; margin-bottom:6px;
  border:1px solid var(--mcmp-stroke); border-radius:9px;
  font-family:"Inter", sans-serif; font-size:12px; color:var(--mcmp-navy);
}
.mcmp__sel-search:focus{ outline:none; border-color:var(--mcmp-blue); }
.mcmp__sel-list{ list-style:none; margin:0; padding:0; max-height:250px; overflow-y:auto; }
.mcmp__sel-list::-webkit-scrollbar{ width:6px; }
.mcmp__sel-list::-webkit-scrollbar-thumb{ background:var(--mcmp-stroke-soft); border-radius:99px; }
.mcmp__sel-list li{
  display:flex; align-items:flex-start; gap:8px;
  padding:8px 10px; border-radius:9px; cursor:pointer;
  font-size:12.5px; line-height:1.35; color:var(--mcmp-navy);
}
.mcmp__sel-list li:hover{ background:var(--mcmp-bg-2); }
.mcmp__sel-list li.is-current{ background:rgba(85,134,231,.12); font-weight:600; }
.mcmp__sel-list li.is-taken{ color:var(--mcmp-muted); cursor:not-allowed; }
.mcmp__sel-list li.is-taken:hover{ background:#F7F7FA; }
.mcmp__taken-tag{
  margin-left:auto; flex:0 0 auto; align-self:center;
  font-size:9.5px; letter-spacing:.03em; color:var(--mcmp-muted);
  border:1px solid var(--mcmp-stroke); border-radius:99px; padding:2px 6px;
}
.mcmp__sel-empty{ color:var(--mcmp-muted); cursor:default; font-size:12px; }
.mcmp__sel-empty:hover{ background:none !important; }

/* мягкая подсказка «уже выбран» */
.mcmp__sel-note{
  display:block; overflow:hidden; max-height:0; opacity:0; margin-top:0;
  font-size:11px; color:var(--mcmp-purple);
  transition:max-height .22s ease, opacity .22s ease, margin .22s ease;
}
.mcmp__sel.is-dupe .mcmp__sel-note{ max-height:20px; opacity:1; margin-top:5px; }
.mcmp__sel.is-dupe .mcmp__sel-trigger{
  border-color:rgba(124,58,237,.45);
  background:rgba(124,58,237,.04);
  animation:mcmpNudge .32s ease;
}
@keyframes mcmpNudge{
  0%,100%{ transform:translateX(0); }
  25%    { transform:translateX(-3px); }
  60%    { transform:translateX(3px); }
}

/* ───────────── ТАБЛИЦА ───────────── */
.mcmp__table-card{
  background:#fff;
  border:1px solid var(--mcmp-stroke-soft);
  border-radius:var(--mcmp-radius);
  padding:20px 20px 16px;
}
.mcmp__table-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.mcmp__table-title{
  margin:0; font-family:"Unbounded", sans-serif; font-size:14px; font-weight:500;
}
.mcmp__table-sub{ font-size:11px; color:var(--mcmp-muted); }
.mcmp__table-sub b{ color:var(--mcmp-navy); font-weight:600; }
.mcmp__table-scroll{ overflow-x:auto; border-radius:14px; }

table.mcmp__table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:13.5px; table-layout:auto;
}
.mcmp__table th,
.mcmp__table td{
  padding:14px 16px; text-align:right; white-space:nowrap; vertical-align:middle;
}
.mcmp__table th:first-child,
.mcmp__table td:first-child{
  text-align:left; position:sticky; left:0; background:#fff; z-index:1;
}
.mcmp__table thead th{
  background:#fff; border-bottom:1px solid var(--mcmp-stroke-soft); vertical-align:bottom;
}
.mcmp__th-name{
  display:block; font-family:"Unbounded", sans-serif; font-size:12px; font-weight:500;
  line-height:1.4; color:var(--mcmp-navy); white-space:normal;
}
.mcmp__th-unit{
  display:block; margin-top:3px; font-size:10.5px; color:var(--mcmp-muted); font-weight:400;
}
.mcmp__table tbody tr{ background:#fff; }
.mcmp__table tbody tr:hover,
.mcmp__table tbody tr:hover td:first-child,
.mcmp__table tbody tr.is-hot,
.mcmp__table tbody tr.is-hot td:first-child{ background:var(--mcmp-bg-2); }
.mcmp__table tbody td{
  border-bottom:1px solid #F1F2F6;
  font-variant-numeric:tabular-nums; font-weight:500;
}
.mcmp__table tbody tr:last-child td{ border-bottom:0; }
.mcmp__m-cell{
  display:flex; align-items:center; gap:9px; min-width:240px;
  font-family:"Unbounded", sans-serif; font-size:12.5px; font-weight:400;
  white-space:normal; line-height:1.4;
}
.mcmp__m-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; }

.mcmp__table-foot{
  display:flex; align-items:center; gap:8px;
  margin-top:12px; font-size:11.5px; color:var(--mcmp-muted);
}
.mcmp__table-foot-lock{ color:var(--mcmp-purple); }
.mcmp__table-cta{
  border:0; background:none; padding:0; cursor:pointer;
  font-family:"Inter", sans-serif; font-size:11.5px; font-weight:600;
  color:var(--mcmp-purple); border-bottom:1px solid rgba(124,58,237,.35);
}
.mcmp.is-unlocked .mcmp__table-foot{ display:none; }

/* ───────────── ГЕЙТ: копия .gate-locked, но самодостаточная ─────────────
   gate.css подключается ТОЛЬКО на страницах рынков, поэтому на главной
   класс .gate-locked не работал бы. Держим свой .mcmp-locked. */
.mcmp-locked{
  position:relative; display:inline-block; cursor:pointer; user-select:none;
  border-radius:6px; padding:1px 6px; min-width:90px;
  background:linear-gradient(110deg,
    rgba(124,58,237,.18) 0%,
    rgba(124,58,237,.30) 40%,
    rgba(124,58,237,.18) 80%);
  background-size:200% 100%;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:none !important;
  letter-spacing:0; line-height:1.25;
  transition:background-position .35s ease, transform .2s ease;
}
.mcmp-locked::before{
  content:""; position:absolute; inset:0; border-radius:6px;
  background:repeating-linear-gradient(135deg,
    rgba(124,58,237,.28) 0 6px,
    rgba(124,58,237,.08) 6px 12px);
  pointer-events:none;
}
.mcmp-locked::after{
  content:"🔒"; position:absolute; top:-6px; right:-6px;
  font-size:9px; width:14px; height:14px;
  display:flex; align-items:center; justify-content:center; border-radius:999px;
  background:var(--mcmp-purple); color:#fff;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 2px 6px rgba(124,58,237,.35);
}
.mcmp-locked:hover{ background-position:100% 0; transform:translateY(-1px); }

/* доступ открыт — показываем настоящие числа */
.mcmp.is-unlocked .mcmp-locked,
body.gate-unlocked .mcmp-locked{
  background:transparent !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  padding:0; min-width:0; cursor:auto; user-select:auto;
}
.mcmp.is-unlocked .mcmp-locked::before,
.mcmp.is-unlocked .mcmp-locked::after,
body.gate-unlocked .mcmp-locked::before,
body.gate-unlocked .mcmp-locked::after{ display:none !important; }

/* ───────────── МОБАЙЛ ───────────── */
@media (max-width:680px){
  .mcmp{ padding:28px 0; }
  .mcmp__grid{ gap:16px; }
  .mcmp__subtitle{ margin-bottom:20px; }
  .mcmp__panel{ padding:16px; }
  .mcmp__panel-list{ gap:10px; }
  .mcmp__table-card{ padding:16px 16px 14px; }
  .mcmp__canvas{ height:420px; }
}
@media (max-width:520px){
  .mcmp__years{ width:100%; justify-content:space-between; }
  .mcmp__year{ padding:7px 8px; font-size:11.5px; }
}

@media (prefers-reduced-motion:reduce){
  .mcmp *{ animation:none !important; transition:none !important; }
}