/* ============================================================
   BitStat – сторінка /pricing
   ------------------------------------------------------------
   Стилі поверх дизайн-системи сайту. Було: власна система
   pricing.css, чужа решті сторінок. Порядок правил – спершу
   телефон, далі ширші екрани.
   ============================================================ */

/* ── герой: по центру, бо продукт сторінки – самі тарифи ── */
[data-site-refresh-content] .hero--prc {
  min-height: 0; overflow: hidden; position: relative;
  padding: calc(var(--nav-height) + var(--sp-10)) 0 var(--sp-6);
}
[data-site-refresh-content] .prc-hero-inner {
  position: relative; z-index: 1;
  max-width: 880px; margin: 0 auto; padding: 0 var(--sp-5);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
[data-site-refresh-content] .prc-hero-inner h1 {
  margin: var(--sp-5) 0 0;
  font-size: clamp(30px, 5vw, 50px); font-weight: 800;
  line-height: 1.12; letter-spacing: -.02em; color: var(--text-primary);
  text-wrap: balance;
}
[data-site-refresh-content] .prc-hero-copy {
  margin: var(--sp-4) 0 0; max-width: 56ch;
  font-size: var(--fs-16); line-height: 1.65; color: var(--text-secondary);
}
[data-site-refresh-content] .prc-assure {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2) var(--sp-5);
}
[data-site-refresh-content] .prc-assure li {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-13); color: var(--text-secondary);
}
[data-site-refresh-content] .prc-assure svg { width: 14px; height: 14px; color: var(--accent-bright); flex: 0 0 auto; }

/* перемикач оплати: та сама пігулка, що ряд вкладок на /features */
[data-site-refresh-content] .prc-toggle {
  display: inline-flex; gap: 4px; padding: 5px;
  margin-top: var(--sp-6);
  border-radius: 999px;
  background: rgba(16,16,17,.86);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
[data-site-refresh-content] .prc-toggle-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 10px 18px; min-height: 44px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: none;
  font-size: var(--fs-14); font-weight: 600; color: var(--text-muted);
  transition: color .18s ease, background .18s ease;
}
[data-site-refresh-content] .prc-toggle-btn:hover { color: var(--text-primary); }
[data-site-refresh-content] .prc-toggle-btn[aria-pressed="true"] {
  color: var(--text-primary);
  background: var(--green-bg);
  box-shadow: inset 0 0 0 1px rgba(60,217,122,.30);
}
[data-site-refresh-content] .prc-save {
  padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-bright); background: var(--green-bg);
}
[data-site-refresh-content] .prc-toggle-btn[aria-pressed="true"] .prc-save { background: rgba(60,217,122,.18); }
[data-site-refresh-content] .prc-toggle-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* ── картки тарифів ── */
[data-site-refresh-content] .blk--plans { padding-top: var(--sp-8); }
[data-site-refresh-content] .prc-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
/* Картки тарифів приведені до проду один в один (19.08.2026):
   радіус 24, паддінг 22, підкладка з верхнім відблиском і тінню,
   золотий акцент Premium зі зсувом у 58% - як на bit-stat.com/pricing */
[data-site-refresh-content] .prc-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  border: 1px solid #303034; border-radius: 24px;
  background: linear-gradient(rgba(255,255,255,.01), transparent 34%), rgba(13,13,15,.9);
  box-shadow: 0 1px 0 0 rgba(255,255,255,.02) inset, 0 18px 46px rgba(0,0,0,.16);
}
[data-site-refresh-content] .prc-card--premium {
  border-color: rgba(191,139,27,.5);
  background: radial-gradient(circle at 58% 0%, rgba(162,113,12,.10), transparent 45%),
              linear-gradient(rgba(99,70,10,.08), transparent 44%), rgba(13,13,15,.9);
  box-shadow: 0 1px 0 0 rgba(255,219,104,.035) inset, 0 20px 54px rgba(73,47,5,.12);
}
[data-site-refresh-content] .prc-card-top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
[data-site-refresh-content] .prc-badge {
  padding: 5px 12px; border-radius: 999px;
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary); background: var(--border-a05); border: 1px solid var(--border-a10);
}
[data-site-refresh-content] .prc-card--premium .prc-badge { color: #f6ce52; background: rgba(246,206,82,.10); border-color: rgba(246,206,82,.25); }
[data-site-refresh-content] .prc-popular {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-bright);
}
[data-site-refresh-content] .prc-offer {
  flex-basis: 100%;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3); min-height: 1.2em;
  font-size: var(--fs-12); color: var(--text-muted);
}
[data-site-refresh-content] .prc-offer s { color: var(--text-muted); }
/* чип пропозиції: зелена пігулка, у Premium - золота (як на проді) */
[data-site-refresh-content] .prc-chip {
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 650; line-height: 1.5;
  color: #69db91; background: rgba(42,129,73,.14); border: 1px solid rgba(80,193,121,.24);
}

[data-site-refresh-content] .prc-price-row { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-4); }
[data-site-refresh-content] .prc-price {
  font-size: 48px; font-weight: 780; letter-spacing: -.055em; line-height: 1;
  color: var(--text-primary);
}
[data-site-refresh-content] .prc-card--premium .prc-price { color: #f6ce52; }
[data-site-refresh-content] .prc-period { font-size: var(--fs-13); color: var(--text-muted); }
[data-site-refresh-content] .prc-billed { margin: var(--sp-1) 0 0; min-height: 1.2em; font-size: var(--fs-12); color: var(--text-muted); }
[data-site-refresh-content] .prc-desc {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-13); line-height: 1.6; color: var(--text-secondary);
}
/* Список можливостей один в один з продом: кожен пункт відділений
   тонкою лінією зверху, кегль 12.5px, вертикальний ритм 7px. */
[data-site-refresh-content] .prc-feats {
  list-style: none; margin: 3px 0 14px; padding: 0; display: block;
}
[data-site-refresh-content] .prc-feats li {
  display: flex; gap: 10px; align-items: center;
  padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .067);
  font-size: 12.5px; line-height: 1.5; color: #d7d7dc;
}
[data-site-refresh-content] .prc-feats svg { width: 15px; height: 15px; color: var(--accent-bright); flex: 0 0 auto; }
[data-site-refresh-content] .prc-feats .prc-muted { color: var(--text-muted); }
[data-site-refresh-content] .prc-feats .prc-muted svg { color: var(--text-muted); }
/* Кнопки як на проді: градієнт по діагоналі, радіус 14, іконка
   зліва (зірка в Premium), Free - темна з кантом. */
[data-site-refresh-content] .prc-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  /* auto притискає кнопку до низу картки: у сітці картки однакової
     висоти, і кнопки стають в одну лінію незалежно від вмісту */
  margin-top: auto; padding: 10px 14px; min-height: 44px;
  border-radius: 14px; text-decoration: none;
  font-size: var(--fs-14); font-weight: 700;
  color: #fff; border: 1px solid rgba(105, 221, 146, .18);
  background: linear-gradient(135deg, #3e8d63, #2d694c);
}
[data-site-refresh-content] .prc-cta svg { width: 16px; height: 16px; flex: 0 0 auto; }
[data-site-refresh-content] .prc-cta:hover { filter: brightness(1.08); }
[data-site-refresh-content] .prc-cta--ghost {
  color: #a1a1aa; border: 1px solid #303034;
  background: linear-gradient(#202023, #18181a);
}
[data-site-refresh-content] .prc-cta--ghost:hover { border-color: var(--text-muted); filter: none; }
[data-site-refresh-content] .prc-card--premium .prc-cta {
  color: #fff; border-color: rgba(255, 219, 101, .2);
  background: linear-gradient(135deg, #c5952d, #9e741f);
}
/* чип пропозиції зелений на всіх картках - так на проді */
[data-site-refresh-content] .prc-card--premium .prc-chip {
  color: #69db91; background: rgba(42, 129, 73, .14); border-color: rgba(80, 193, 121, .24);
}
@media (min-width: 921px) {
  /* два тарифи: картки по центру, не розтягнуті на всю ширину */
  [data-site-refresh-content] .prc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin: 0 auto; }
}

/* ── чесний блок Free ── */
[data-site-refresh-content] .prc-free {
  display: grid; gap: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid rgba(60,217,122,.22); border-radius: var(--r-20);
  background: radial-gradient(circle at 0% 0%, rgba(60,217,122,.08), transparent 52%), var(--surface-card);
}
[data-site-refresh-content] .prc-free-copy h2 {
  margin: var(--sp-3) 0 0;
  font-size: clamp(22px, 3vw, 28px); font-weight: 800;
  letter-spacing: -.02em; color: var(--text-primary);
}
[data-site-refresh-content] .prc-free-copy p {
  margin: var(--sp-3) 0 0; max-width: 52ch;
  font-size: var(--fs-14); line-height: 1.65; color: var(--text-secondary);
}
[data-site-refresh-content] .prc-free-note { color: var(--text-muted); }
[data-site-refresh-content] .prc-free-list { margin: 0; align-content: center; }
/* текст і чесний список - одна колонка з власним ритмом на всіх ширинах */
[data-site-refresh-content] .prc-free-text { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 861px) {
  /* дві колонки: текст із чесним списком ліворуч, дашборд праворуч */
  [data-site-refresh-content] .prc-free { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-8); padding: var(--sp-8); align-items: center; }
}

/* ── таблиця порівняння ── */
/* Промо-примітка: був громіздкий алерт над таблицею - став тонкий
   рядок під нею, бо це виноска до таблиці, а не окрема заява. */
[data-site-refresh-content] .prc-note {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin: var(--sp-4) 0 0; padding: 0 var(--sp-1);
  font-size: var(--fs-13); line-height: 1.6; color: var(--text-muted);
}
[data-site-refresh-content] .prc-note-dot {
  flex: 0 0 auto; width: 6px; height: 6px; margin-top: 8px;
  border-radius: 50%; background: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(60, 217, 122, .14);
}
[data-site-refresh-content] .prc-note b { color: var(--text-secondary); font-weight: 600; }

[data-site-refresh-content] .prc-cmp-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-16); }
/* таблиця без сірої підкладки: тільки рамка і лінії рядків */
[data-site-refresh-content] .prc-cmp { width: 100%; min-width: 640px; border-collapse: collapse; background: transparent; }
[data-site-refresh-content] .prc-cmp th, [data-site-refresh-content] .prc-cmp td {
  padding: 13px var(--sp-4); text-align: left;
  font-size: var(--fs-13); color: var(--text-secondary);
  border-bottom: 1px solid var(--border-a10);
}
[data-site-refresh-content] .prc-cmp thead th {
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-base);
  border-bottom: 1px solid var(--border);
}
[data-site-refresh-content] .prc-cmp tbody th[scope="row"] { font-weight: 500; color: var(--text-primary); }
[data-site-refresh-content] .prc-cmp tr:last-child th, [data-site-refresh-content] .prc-cmp tr:last-child td { border-bottom: 0; }
[data-site-refresh-content] .prc-cmp tbody tr:hover { background: var(--border-a05); }
[data-site-refresh-content] .prc-yes svg { width: 16px; height: 16px; color: var(--accent-bright); }
[data-site-refresh-content] .prc-no svg { width: 14px; height: 14px; color: var(--text-muted); opacity: .6; }
[data-site-refresh-content] .prc-cmp-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-bright); background: var(--green-bg);
}
[data-site-refresh-content] .prc-soon {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  color: var(--text-muted); background: var(--border-a05); border: 1px solid var(--border-a10);
}
[data-site-refresh-content] .prc-cmp-price s { color: var(--text-muted); margin-right: 6px; }
[data-site-refresh-content] .prc-cmp-price { color: var(--text-primary); font-weight: 600; }
[data-site-refresh-content] .prc-limit { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
[data-site-refresh-content] .prc-limit small {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
}
[data-site-refresh-content] .prc-limit strong { color: var(--text-primary); }

/* ── ринок ── */
[data-site-refresh-content] .prc-market { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
[data-site-refresh-content] .prc-market-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-5);
  border: 1px solid var(--border); border-radius: var(--r-16);
  background: var(--surface-card);
}
[data-site-refresh-content] .prc-market-card--own {
  border-color: rgba(60,217,122,.35);
  background: radial-gradient(circle at 50% 0%, rgba(60,217,122,.10), transparent 60%), var(--surface-card);
}
[data-site-refresh-content] .prc-market-name {
  font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
[data-site-refresh-content] .prc-market-value {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary);
}
[data-site-refresh-content] .prc-market-card--own .prc-market-value { color: var(--accent-bright); }
[data-site-refresh-content] .prc-market-desc { font-size: var(--fs-13); line-height: 1.5; color: var(--text-secondary); }
@media (min-width: 721px) {
  [data-site-refresh-content] .prc-market { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

[data-site-refresh-content] .faq-more { margin: var(--sp-2) 0 0; }
[data-site-refresh-content] .faq-more a { color: var(--accent-bright); font-weight: 600; text-decoration: none; }

/* ── скрін продукту в секції Free: доказ замість опису ── */
[data-site-refresh-content] .prc-free-media { min-width: 0; }
[data-site-refresh-content] .prc-shot {
  display: block; width: 100%; padding: 0; background: none;
  border: 1px solid var(--border); border-radius: var(--r-14);
  overflow: hidden; cursor: zoom-in; position: relative;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transition: transform .22s ease, border-color .22s ease;
}
[data-site-refresh-content] .prc-shot:hover, [data-site-refresh-content] .prc-shot:focus-visible {
  transform: translateY(-3px); border-color: rgba(60, 217, 122, .4);
}
[data-site-refresh-content] .prc-shot img { display: block; width: 100%; height: auto; }
[data-site-refresh-content] .fx-zoom {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; color: rgba(255, 255, 255, .9);
  background: rgba(10, 12, 16, .65);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}
[data-site-refresh-content] .fx-zoom svg { width: 16px; height: 16px; }
[data-site-refresh-content] .prc-shot:hover .fx-zoom { background: rgba(60, 217, 122, .28); transform: scale(1.08); }
/* лайтбокс */
[data-site-refresh-content] .fx-shotbox {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 24px;
  background: rgba(4, 6, 8, .92); backdrop-filter: blur(8px);
  cursor: zoom-out;
}
[data-site-refresh-content] .fx-shotbox img { max-width: min(1400px, 96vw); max-height: 92vh; border-radius: 10px; }
[data-site-refresh-content] .fx-shotbox-x {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(20, 24, 30, .8); color: #fff;
  font-size: 18px; cursor: pointer;
}
[data-site-refresh-content].has-shotbox { overflow: hidden; }

/* Проміжки між текстовими секціями були 200px (100 знизу + 100 зверху)
   і читались як провал. Суміжні секції ділять один ритм. */
[data-site-refresh-content] #free-plan, [data-site-refresh-content] #compare, [data-site-refresh-content] #market, [data-site-refresh-content] #faq { padding-top: var(--sp-16); }
[data-site-refresh-content] #plans, [data-site-refresh-content] #free-plan, [data-site-refresh-content] #compare, [data-site-refresh-content] #market, [data-site-refresh-content] #faq { padding-bottom: var(--sp-16); }

/* ── таблиця порівняння на телефоні ──
   min-width 640px лишався від старої чотириколонкової таблиці.
   Тарифів два, тож таблиця має вміщатись у екран без
   бічної прокрутки: інакше колонку Premium просто не видно, а
   порівнювати нема з чим. */
@media (max-width: 700px) {
  [data-site-refresh-content] .prc-cmp { min-width: 0; table-layout: fixed; }
  [data-site-refresh-content] .prc-cmp-scroll { overflow-x: visible; }
  [data-site-refresh-content] .prc-cmp th, [data-site-refresh-content] .prc-cmp td { padding: 11px 8px; font-size: var(--fs-12); }
  /* назва можливості ширша за колонки планів */
  [data-site-refresh-content] .prc-cmp th:first-child, [data-site-refresh-content] .prc-cmp td:first-child { width: 46%; }
  [data-site-refresh-content] .prc-cmp th:not(:first-child), [data-site-refresh-content] .prc-cmp td:not(:first-child) { width: 27%; text-align: center; }
  [data-site-refresh-content] .prc-cmp thead th { font-size: 10px; letter-spacing: .04em; }
  /* галочки і хрестики по центру колонки */
  [data-site-refresh-content] .prc-yes, [data-site-refresh-content] .prc-no { display: inline-flex; }
  /* «Regular 0 / Promo 1 via API» у вузькій колонці складається стосом */
  [data-site-refresh-content] .prc-limit { display: grid; justify-items: center; gap: 2px; line-height: 1.3; }
  [data-site-refresh-content] .prc-limit small { font-size: 9px; }
  /* довгі назви не розпирають таблицю */
  [data-site-refresh-content] .prc-cmp tbody th[scope="row"] { white-space: normal; word-break: break-word; }
  [data-site-refresh-content] .prc-soon { display: inline-block; margin-top: 2px; font-size: 9px; }
  [data-site-refresh-content] .prc-cmp-chip { font-size: 9px; padding: 2px 6px; }
}