/*
 * Страница тарифов hi.datool.ru/plans/ и оформление заказа
 * (templates/hi/plans.html, plans_checkout.html). Своя вёрстка в стиле сайта
 * (решение пользователя 05.10.2026): карточки как на дашборде канала,
 * фирменный фиолетовый (--brand), цвета — переменные темы сайта, поэтому
 * тёмная тема работает сама; правки для неё — в конце файла.
 */

/* ---------- Шапка страницы ---------- */
/* Колонка страницы не шире экрана: иначе широкая таблица сравнения растягивает
   всё содержимое (у элементов сетки min-width по умолчанию — ширина содержимого) */
.plans-page{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:48px}
.plans-page>*{min-width:0}
.plans-hero{max-width:760px}
.plans-kicker{display:block;color:var(--bp-muted);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.plans-hero h1{margin:6px 0 0;font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-.03em}
.plans-hero p{margin:10px 0 0;color:var(--bp-ink-2);font-size:16px;line-height:1.5}
.plans-hero .plans-current{display:inline-block;padding:9px 14px;border-radius:12px;background:color-mix(in srgb,var(--brand) 10%,var(--bp-surface));color:var(--bp-ink);font-size:14px}
/* Кнопки под описанием страницы API («Описание методов API») */
.plans-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.plans-hero__actions .plans-button{margin:0}

/* ---------- Переключатель срока ---------- */
/* Обёртка сроков и карточек (#plans-offers, её подменяет HTMX) — своя сетка с
   отступом: без неё сроки прилипали к карточкам (замечание 06.10.2026). Отступ
   больше обычного, чтобы над карточкой «Бизнес» поместился флажок «Для команд» */
.plans-offers{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.plans-offers>*{min-width:0}
/* Вид — общие вкладки-«таблетки» (site/css/tabs.css), здесь только значок скидки */
.plans-terms b{padding:1px 6px;border-radius:6px;background:color-mix(in srgb,#15996b 14%,transparent);color:#0f7a54;font-size:11px}

/* ---------- Карточки тарифов ---------- */
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plans-card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--bp-surface);box-shadow:0 8px 26px -23px rgba(31,35,40,.48)}
.plans-card--accent{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 8%,var(--bp-surface)),var(--bp-surface) 55%);box-shadow:0 18px 40px -28px color-mix(in srgb,var(--brand) 70%,transparent)}
.plans-card__flag{position:absolute;top:-11px;left:26px;padding:3px 10px;border-radius:999px;background:var(--brand);color:#fff;font-size:12px;font-weight:700}
.plans-card h2{margin:0;font-size:24px;letter-spacing:-.02em}
.plans-card__lead{margin:0;color:var(--bp-muted);font-size:14px}
.plans-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:4px 0 0}
.plans-price strong{font-size:36px;line-height:1;letter-spacing:-.04em}
.plans-price em{padding:2px 7px;border-radius:7px;background:color-mix(in srgb,#15996b 14%,transparent);color:#0f7a54;font-size:12px;font-style:normal;font-weight:700}
.plans-price span{flex-basis:100%;color:var(--bp-muted);font-size:13px}
.plans-points{display:grid;gap:8px;margin:6px 0 4px;padding:0;list-style:none;font-size:14px;line-height:1.4}
.plans-points li{position:relative;padding-left:22px}
.plans-points li:before{position:absolute;left:0;top:.2em;width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--brand) 16%,var(--bp-surface));content:""}
.plans-points li:after{position:absolute;left:4px;top:.45em;width:6px;height:3px;border:solid var(--brand);border-width:0 0 2px 2px;transform:rotate(-45deg);content:""}
.plans-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:auto;padding:0 18px;border:1px solid var(--brand);border-radius:12px;background:var(--brand);color:#fff;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.plans-button:hover{filter:brightness(1.07)}
.plans-button--ghost{border-color:var(--line);background:var(--bp-surface);color:var(--bp-ink-2)}
.plans-button--ghost:hover{border-color:var(--text-purple);color:var(--text-purple);filter:none}
.plans-button[aria-disabled=true],.plans-button:disabled{opacity:.6;cursor:default;filter:none}
.plans-soon{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--bp-hover);color:var(--bp-muted);font-size:11px;font-weight:600;vertical-align:middle}
.plans-soon--big{padding:6px 14px;font-size:13px}

/* ---------- Сравнение ---------- */
.plans-compare h2,.plans-faq h2{margin:0 0 14px;font-size:24px;letter-spacing:-.02em}
.plans-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--bp-surface)}
.plans-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.plans-table th,.plans-table td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.plans-table thead th{color:var(--bp-muted);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.plans-table tbody th{font-weight:500;text-align:left}
.plans-table tr:last-child>*{border-bottom:0}
.plans-table td:nth-child(4){background:color-mix(in srgb,var(--brand) 4%,transparent)}
.plans-yes{width:16px;height:16px;fill:#15996b}
.plans-no{color:var(--bp-muted)}

/* ---------- API и вопросы ---------- */
.plans-api{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--bp-surface)}
.plans-api h2{margin:4px 0 0;font-size:22px}
.plans-api p{max-width:620px;margin:8px 0 0;color:var(--bp-ink-2);font-size:14px;line-height:1.5}
.plans-api .plans-button{margin:0}
.plans-faq dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.plans-faq dl>div{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--bp-surface)}
.plans-faq dt{font-weight:700}
.plans-faq dd{margin:6px 0 0;color:var(--bp-ink-2);font-size:14px;line-height:1.5}

/* ---------- Оформление ---------- */
.plans-checkout{display:grid;gap:14px;max-width:620px;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--bp-surface)}
.plans-checkout h1{margin:0;font-size:28px;letter-spacing:-.02em}
.plans-summary{display:grid;margin:4px 0 0}
.plans-summary>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.plans-summary dt{color:var(--bp-muted)}
.plans-summary dd{margin:0;font-weight:600;text-align:right}
.plans-summary__total dd{font-size:22px;letter-spacing:-.02em}
.plans-note{margin:0;color:var(--bp-ink-2);font-size:14px;line-height:1.5}
.plans-note--soon{padding:12px 14px;border-radius:12px;background:var(--bp-hover)}
.plans-checkout .plans-button{justify-self:start;margin:0}
.plans-back{color:var(--text-purple);font-size:14px;text-decoration:none}

/* ---------- Тёмная тема ---------- */
[data-bs-theme=dark] .plans-terms b,[data-bs-theme=dark] .plans-price em{color:#5ccd95}

/* ---------- Планшет и телефон ---------- */
@media(max-width:960px){.plans-grid{grid-template-columns:minmax(0,1fr)}.plans-faq dl{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.plans-card,.plans-checkout{padding:20px;border-radius:18px}.plans-price strong{font-size:30px}}
/* Выбор, на кого оформить подписку (оформление, 0.46.0): список и кнопка в строку */
.plans-org{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:14px 0 0}
.plans-org__label{flex-basis:100%;font-size:14px;font-weight:400}
.plans-org select,.plans-org .site-select{flex:1 1 220px;min-width:0}
.plans-org .plans-button{margin:0;min-height:36px}
/* Страница API max.datool.ru/api/ (0.47.0): что умеет API — три плитки,
   пять карточек тарифов (Тест, Старт, Рост, Профи, Корпоративный) и правила */
.plans-api-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plans-api-features article{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--bp-surface)}
.plans-api-features h2{margin:0 0 6px;font-size:18px}
.plans-api-features p{margin:0;color:var(--bp-ink-2);font-size:14px;line-height:1.5}
.plans-grid--api{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.plans-grid--api .plans-card{padding:22px}
.plans-grid--api .plans-price strong{font-size:28px}
.plans-rules{display:grid;gap:8px;margin:0;padding:0 0 0 20px;color:var(--bp-ink-2);font-size:15px;line-height:1.5}
@media(max-width:960px){.plans-api-features{grid-template-columns:minmax(0,1fr)}.plans-grid.plans-grid--api{grid-template-columns:minmax(0,1fr)}}
/* Промокод на оформлении (0.71.0, docs/promo.md): поле и «Применить» в строку,
   как выбор организации; скидка в сводке — зелёным. Вид поля и красная рамка ошибки —
   общие (fields.css, 0.103.0), здесь ширина и прописные буквы кода */
.plans-promo input{flex:1 1 220px;text-transform:uppercase}
/* Карточка оформления по центру страницы: доп. места (seats_checkout.html, 0.95.3)
   и с 0.102.2 — оформление тарифа (plans_checkout.html, замечание пользователя 15.10.2026) */
.plans-checkout--center{width:100%;margin-inline:auto;font-size:15px}
/* Шрифт карточки не больше 16 px (замечание пользователя 14.10.2026, 0.95.4): заголовок,
   сводка, итог, кнопки — у обеих страниц одинаковые */
.plans-checkout--center h1{font-size:16px;letter-spacing:0}
.plans-checkout--center .plans-summary{font-size:15px}
.plans-checkout--center .plans-summary__total dd{font-size:16px;letter-spacing:0}
.plans-checkout--center .plans-button{font-size:15px}
/* Кнопка — flex: пробелы вокруг <span data-seats-total> схлопываются, зазор между частями задаёт gap */
.plans-checkout--center [data-seats-pay] .plans-button{gap:.3em}
/* Ползунок числа мест (вариант 5, выбор пользователя 15.10.2026): подпись и число в строке,
   под ними дорожка с закрашенной частью до ползунка (--seats-fill ставит seats.js) и деления */
.seats-slider{display:grid;gap:10px;margin:18px 0 0}
.seats-slider__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.seats-slider__label{font-size:14px;font-weight:400}
/* Поле числа мест: вид общий (fields.css), здесь ширина, выравнивание по центру и без стрелок браузера */
.seats-slider input[type=number]{width:72px;padding:0 8px;text-align:center;-moz-appearance:textfield;appearance:textfield}
.seats-slider input[type=number]::-webkit-outer-spin-button,.seats-slider input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.seats-slider__range:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.seats-slider__range{--seats-fill:0%;width:100%;height:20px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.seats-slider__range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,var(--brand) var(--seats-fill),var(--bp-surface-2) var(--seats-fill))}
.seats-slider__range::-moz-range-track{height:6px;border-radius:6px;background:var(--bp-surface-2)}
.seats-slider__range::-moz-range-progress{height:6px;border-radius:6px;background:var(--brand)}
.seats-slider__range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:2px solid var(--brand);border-radius:50%;background:var(--bp-surface);box-shadow:0 2px 6px rgba(31,35,40,.18)}
.seats-slider__range::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--brand);border-radius:50%;background:var(--bp-surface);box-shadow:0 2px 6px rgba(31,35,40,.18)}
.seats-slider__ticks{display:flex;justify-content:space-between;margin:-4px 2px 0;color:var(--bp-muted);font-size:12px;line-height:1}
.plans-summary__discount dd{color:#15996b}
[data-bs-theme=dark] .plans-summary__discount dd{color:#5ccd95}
.plans-promo__ok a{color:var(--text-purple)}
.plans-note--soon form{margin-top:10px}
/* Плашка промокода из ссылки над тарифами */
.plans-promo-banner{margin:0;padding:12px 14px;border-radius:12px;background:var(--bp-hover);color:var(--bp-ink-2);font-size:14px;line-height:1.5}
.plans-promo-banner b{color:var(--bp-ink)}

/* Карточка «Разовый анализ» («Премиум» на 7 дней, 0.88.9–0.88.10): четыре карточки
   в ряд, на средних экранах — по две, на телефоне — одна под другой. Правила
   стоят после общих .plans-grid, чтобы перекрыть их. Пунктирная рамка и серая
   метка «7 дней» отличают короткий срок от подписок на месяц и дольше */
.plans-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.plans-card--week{border-style:dashed}
.plans-card__flag--week{background:var(--bp-surface);color:var(--bp-ink-2);border:1px dashed var(--line)}
@media(max-width:1180px){.plans-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){.plans-grid--four{grid-template-columns:minmax(0,1fr)}}

/* Пополнение баланса онлайн (templates/hi/balance_topup.html, 0.104.0): поля формы
   без рамок fieldset; готовые суммы — «чипы» в ряд, выбранный — цветом бренда; поле
   своей суммы со знаком ₽ справа; способы оплаты — карточки-переключатели по две в
   ряд (на телефоне — одна), выбранная — рамкой бренда, неактивные — бледнее */
.topup-form{display:grid;gap:18px}
.topup-field{display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
.topup-field legend{float:left;width:100%;margin:0 0 10px;padding:0}
.topup-field legend+*{clear:both}
.topup-chips{display:flex;flex-wrap:wrap;gap:8px}
.topup-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--bp-surface);color:var(--bp-ink);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.topup-chip:hover{border-color:var(--text-purple);color:var(--text-purple)}
.topup-chip.is-active{border-color:var(--brand);background:var(--bp-hover);color:var(--text-purple)}
.topup-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.topup-amount{position:relative;max-width:260px}
/* Поле суммы: вид общий (fields.css, 0.103.0), здесь только ширина и место справа под «₽» */
.topup-amount input{width:100%;padding-right:32px}
.topup-amount span{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:var(--bp-muted);pointer-events:none}
.topup-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.topup-method{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bp-surface);cursor:pointer}
.topup-method input{flex:none;margin:3px 0 0;accent-color:var(--brand)}
.topup-method b{display:block;font-size:15px}
.topup-method small{display:block;margin-top:2px;color:var(--bp-muted);font-size:13px;line-height:1.4}
.topup-method:has(input:checked){border-color:var(--brand);background:var(--bp-hover)}
.topup-method:has(input:disabled){opacity:.6;cursor:default}
.topup-method:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.topup-promo{margin:0}
.topup-form .plans-button{justify-self:start;margin:0}
.topup-actions{display:flex;flex-wrap:wrap;gap:10px}
.topup-actions .plans-button{margin:0}
@media(max-width:520px){.topup-methods{grid-template-columns:minmax(0,1fr)}.topup-amount{max-width:none}}