/* ==========================================================================
   Тарифы TWS (сетка 02.10.2026, docs/PRICING_2026-10.md).
   Самодостаточный блок: templates/_pricing_plans.html (карточки) и
   templates/_pricing_compare.html (таблица сравнения). Работает и на
   публичных страницах, и в кабинете: только токены из tokens.css с
   запасными значениями, все классы с префиксом .tp- (не пересекаются с
   public.css / cabinet.css). Без JS: месяц/год показаны рядом.
   ========================================================================== */

.tp{
  --tp-text: var(--color-text, #172031);
  --tp-muted: var(--color-text-muted, #556275);
  --tp-surface: var(--color-surface, #ffffff);
  --tp-bg: var(--color-bg, #f5f7fa);
  --tp-border: var(--color-border, #dde3ea);
  --tp-accent: var(--color-action, #c4520c);
  --tp-accent-soft: var(--color-accent-soft, #fff4ec);
  --tp-on-accent: var(--color-on-action, #ffffff);
  --tp-success: var(--color-success, #1f7a4d);
  --tp-radius: var(--radius-lg, 14px);
  --tp-shadow: var(--shadow-card, 0 1px 3px rgba(15, 39, 71, .08));
  color: var(--tp-text);
  font-family: var(--font-sans, inherit);
  margin: 0 auto;
  max-width: 1200px;
}
.tp *, .tp *::before, .tp *::after{ box-sizing: border-box; }

.tp-head{ text-align: center; margin: 0 auto var(--space-6, 24px); max-width: 760px; }
.tp-head h1,
.tp-head h2{ margin: 0 0 var(--space-2, 8px); font-size: var(--text-2xl, 28px); line-height: 1.2; }
.tp-head--spaced{ margin-top: var(--space-9, 40px); }
.tp-page{ padding-top: var(--space-7, 32px); padding-bottom: var(--space-9, 48px); }
.tp-head p{ margin: 0; color: var(--tp-muted); font-size: var(--text-md, 16px); line-height: 1.5; }

.tp-grid{
  display: grid;
  gap: var(--space-4, 16px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
.tp-grid--free{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--space-4, 16px); }

.tp-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
  padding: var(--space-5, 20px);
  min-width: 0;
}
.tp-card--highlight{ border: 2px solid var(--tp-accent); }
.tp-card--current{ outline: 2px solid var(--tp-success); outline-offset: 2px; }
.tp-card--compact{ padding: var(--space-4, 16px); box-shadow: none; background: var(--tp-bg); }

.tp-badge{
  position: absolute;
  top: -12px;
  left: var(--space-5, 20px);
  background: var(--tp-accent);
  color: var(--tp-on-accent);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  padding: 3px 10px;
}
.tp-badge--current{ background: var(--tp-success); color: var(--color-on-success, #ffffff); }

.tp-title{ margin: 0; font-size: var(--text-xl, 20px); font-weight: 700; }
.tp-audience{ margin: var(--space-1, 4px) 0 0; color: var(--tp-muted); font-size: var(--text-sm, 14px); line-height: 1.4; }

.tp-price{ margin: var(--space-4, 16px) 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tp-price b{ font-size: var(--text-3xl, 32px); line-height: 1; font-weight: 800; letter-spacing: -.01em; }
.tp-price span{ color: var(--tp-muted); font-size: var(--text-sm, 14px); }
.tp-annual{ margin: var(--space-1, 4px) 0 0; color: var(--tp-success); font-size: var(--text-sm, 14px); line-height: 1.4; }

.tp-tagline{ margin: var(--space-4, 16px) 0 0; font-weight: 600; line-height: 1.4; }

.tp-sub{ margin: var(--space-4, 16px) 0 var(--space-2, 8px); font-size: var(--text-xs, 12px); text-transform: uppercase; letter-spacing: .04em; color: var(--tp-muted); font-weight: 600; }

.tp-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tp-list li{ position: relative; padding-left: 22px; line-height: 1.45; font-size: var(--text-sm, 14px); }
.tp-list li::before{
  content: "";
  position: absolute; left: 2px; top: .45em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--tp-success);
  border-bottom: 2px solid var(--tp-success);
  transform: rotate(-45deg);
}
.tp-list--outcomes li::before{
  width: 8px; height: 8px; top: .5em; border: 0; border-radius: 50%;
  background: var(--tp-accent); transform: none;
}

.tp-actions{ margin-top: auto; padding-top: var(--space-5, 20px); display: grid; gap: var(--space-2, 8px); }
.tp-actions form{ margin: 0; }
.tp-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--tp-accent);
  background: var(--tp-surface);
  color: var(--color-accent-text, var(--tp-accent));
  font: inherit; font-weight: 600; font-size: var(--text-sm, 14px);
  text-decoration: none; cursor: pointer;
  padding: 10px 14px;
}
.tp-btn--primary{ background: var(--tp-accent); color: var(--tp-on-accent); }
.tp-btn:hover{ filter: brightness(.95); }
.tp-btn:focus-visible{ outline: 3px solid var(--color-focus, #3466b0); outline-offset: 2px; }
.tp-btn[disabled]{ opacity: .55; cursor: default; filter: none; }
.tp-note{ margin: 0; color: var(--tp-muted); font-size: var(--text-xs, 12px); line-height: 1.4; text-align: center; }

.tp-foot{ margin: var(--space-5, 20px) auto 0; max-width: 860px; text-align: center; color: var(--tp-muted); font-size: var(--text-sm, 14px); line-height: 1.5; }
.tp-foot a{ color: var(--color-link, var(--tp-accent)); }

/* --- Таблица сравнения ----------------------------------------------------
   08.10.2026: колонка «Что входит» не растёт от длинных описаний - table-layout:
   fixed + <colgroup> (первая колонка 260px, колонки тарифов делят остаток
   поровну), текст переносится по ширине колонки; на узких экранах контейнер
   .tp-compare-wrap скроллится по горизонтали (страница не растягивается), а
   первая колонка остаётся «прилипшей» слева. */
.tp-compare{ margin-top: var(--space-7, 32px); min-width: 0; max-width: 100%; }
.tp-compare > summary{ cursor: pointer; font-weight: 600; padding: var(--space-2, 8px) 0; }
.tp-compare-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border: 1px solid var(--tp-border); border-radius: var(--tp-radius); background: var(--tp-surface); }
.tp-table{ width: 100%; min-width: 900px; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm, 14px); }
.tp-table col.tp-col-label{ width: 260px; }
.tp-table th, .tp-table td{ padding: 10px 12px; border-bottom: 1px solid var(--tp-border); text-align: left; vertical-align: top; line-height: 1.4;
  white-space: normal; overflow-wrap: anywhere; word-break: normal; min-width: 0; }
.tp-table thead th{ position: sticky; top: 0; background: var(--tp-bg); font-weight: 700; overflow-wrap: break-word; }
.tp-table tbody th{ font-weight: 500; }
.tp-table .tp-group th{ background: var(--tp-bg); font-weight: 700; text-transform: uppercase; font-size: var(--text-xs, 12px); letter-spacing: .04em; color: var(--tp-muted); overflow-wrap: normal; }
.tp-table .tp-hint{ display: block; color: var(--tp-muted); font-weight: 400; font-size: var(--text-xs, 12px); }
.tp-table .tp-col-current{ background: var(--tp-accent-soft); }
/* Первая колонка («Что входит» / название строки) прилипает слева при горизонтальной прокрутке. */
.tp-table thead th:first-child, .tp-table tbody th[scope="row"]{ position: sticky; left: 0; z-index: 1; background: var(--tp-surface); box-shadow: 1px 0 0 var(--tp-border); }
.tp-table thead th:first-child{ z-index: 2; background: var(--tp-bg); }
.tp-table .tp-group th{ position: static; box-shadow: none; }

@media (max-width: 640px){
  .tp-table{ min-width: 780px; }
  .tp-table col.tp-col-label{ width: 160px; }
  .tp-table th, .tp-table td{ padding: 8px 8px; }
}

@media (max-width: 640px){
  .tp-head h1,
  .tp-head h2{ font-size: var(--text-xl, 22px); }
  .tp-card{ padding: var(--space-4, 16px); }
  .tp-price b{ font-size: var(--text-2xl, 28px); }
}

/* 07.10.2026: кабинет, оплата через ЮKassa - запасной вариант «списать со счёта» ссылкой. */
.tp-alt{ margin: 0; text-align: center; }
.tp-link{ background: none; border: 0; padding: 4px 0; min-height: 32px; color: var(--tp-muted); font: inherit; font-size: var(--text-xs, 12px); text-decoration: underline; cursor: pointer; }
.tp-link:hover, .tp-link:focus-visible{ color: inherit; }