/* ==========================================================================
   Тарифы FeedCRM — общий компонент для сайта и кабинета.
   Разметка — public/js/fc-plan-card.js (один рендер и для EJS, и для браузера), данные — plans.js.
   Только токены из fc-tokens.css. Раскладка подстраивается под ширину контейнера (container queries),
   поэтому одинаково работает и в колонке настроек кабинета, и на всю ширину сайта.
   Числа вне токенов — только границы @container (860px, 760px): переменные в них не работают.

   .plans            — контейнер (container-type)
     .plans-seg      — переключатель сегмента «Для Авито · Для агентств»
     .plans-grid     — карточки; data-count="3" — линейка из трёх
       .plan         — карточка: tone-start | tone-team | tone-business | tone-premium, is-featured, is-current
   ========================================================================== */

.plans { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }

/* ─── Переключатель сегмента ─── */
.plans-seg { display: inline-flex; justify-self: center; gap: var(--sp-hair); padding: var(--sp-1); border-radius: var(--r-md); background: var(--fill); }
.plans-seg button { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-md); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-strong); cursor: pointer; }
.plans-seg button:hover { color: var(--ink); }
.plans-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.plans-seg button:focus-visible { outline: none; box-shadow: var(--ring); }
.plans-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
.plans-panel[hidden] { display: none; }
.plans-note { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: var(--lh-text); text-align: center; }

/* ─── Сетка карточек ─── */
.plans-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.plans-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ─── Карточка ─── */
.plans .plan { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border: var(--outline) solid transparent; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); text-align: left; }
.plans .plan.is-featured::before { content: ""; position: absolute; top: 0; left: var(--sp-5); right: var(--sp-5); height: var(--accent-bar); border-radius: 0 0 var(--accent-bar) var(--accent-bar); background: var(--blue); }
.plans .plan.is-current { border-color: var(--blue); box-shadow: var(--sh-1), 0 0 0 var(--halo) var(--blue-soft); }
.plans .plan svg { width: var(--ic-sm); height: var(--ic-sm); flex: none; }

.plans .plan-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--h-sm); }
.plans .plan-ico { display: inline-grid; place-items: center; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r-sm); background: var(--fill); color: var(--ink-2); }
.plans .plan-ico svg { width: var(--ic-md); height: var(--ic-md); }
.plans .plan-tier { display: inline-flex; align-items: flex-end; gap: var(--sp-hair); height: var(--plan-tier-h); }
.plans .plan-tier i { width: var(--plan-tier-w); border-radius: var(--sp-hair); background: var(--line-strong); }
.plans .plan-tier i:nth-child(1) { height: 38%; }
.plans .plan-tier i:nth-child(2) { height: 56%; }
.plans .plan-tier i:nth-child(3) { height: 75%; }
.plans .plan-tier i:nth-child(4) { height: 100%; }
.plans .plan-tier i.on { background: var(--ink-2); }

.plans .plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.plans .plan-name h3 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-strong); line-height: var(--lh-tight); letter-spacing: -.01em; }
.plans .plan-badge { display: inline-flex; align-items: center; height: var(--h-xs); padding: 0 var(--sp-2); border-radius: var(--r-xs); background: var(--fill); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.plans .plan-badge.is-current { background: var(--blue-soft); color: var(--blue-ink); }
.plans .plan-aud { margin: calc(-1 * var(--sp-2)) 0 0; color: var(--ink-3); font-size: var(--fs-sm); font-weight: var(--fw-text); }

.plans .plan-price { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1) 0 0; }
.plans .plan-price b { font-size: var(--fs-price); font-weight: var(--fw-strong); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plans .plan-price span { color: var(--ink-3); font-size: var(--fs-sm); font-weight: var(--fw-text); }
.plans .plan-seat { margin: calc(-1 * var(--sp-2)) 0 0; color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-strong); }

.plans .plan-limits { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-md); background: var(--fill); }
.plans .plan-limits span { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-text); }
.plans .plan-limits svg { color: var(--ink-3); }
.plans .plan-limits b { color: var(--ink); font-weight: var(--fw-strong); }

.plans .plan-list { display: grid; align-content: start; gap: var(--sp-2); flex: 1; margin: var(--sp-hair) 0 0; padding: 0; list-style: none; }
.plans .plan-list li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.plans .plan-list svg { margin-top: var(--sp-hair); color: var(--green); }
.plans .plan-list b { display: block; color: var(--ink); font-size: var(--fs-md); font-weight: var(--fw-strong); line-height: var(--lh-text); }
.plans .plan-list em { display: block; color: var(--ink-3); font-size: var(--fs-sm); font-style: normal; font-weight: var(--fw-text); line-height: var(--lh-text); }
.plans .plan-extra { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-text); line-height: var(--lh-text); }

/* Кнопка карточки — своя: одинаковая на сайте и в кабинете, у тёмной карточки инвертирована */
.plans .plan-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: var(--h-lg); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-md); background: var(--fill); color: var(--ink); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-strong); text-decoration: none; cursor: pointer; transition: background var(--t-fast) var(--ease); }
.plans .plan-cta:hover { background: var(--fill-hover); color: var(--ink); text-decoration: none; }
.plans .plan-cta.is-primary { background: var(--blue-strong); color: var(--ink-inverse); }
.plans .plan-cta.is-primary:hover { background: var(--blue-hover); color: var(--ink-inverse); }
.plans .plan-cta:disabled { opacity: .55; cursor: default; }
.plans .plan-cta:focus-visible { outline: none; box-shadow: var(--ring); }

/* ─── Тона: цвет и «вес» карточки растут вместе с пакетом ─── */
.plans .plan.tone-team:not(.is-current) { border-color: var(--blue-soft); }
.plans .plan.tone-team .plan-ico { background: var(--blue-soft); color: var(--blue); }
.plans .plan.tone-team .plan-tier i.on { background: var(--blue); }
.plans .plan.tone-team .plan-badge:not(.is-current) { background: var(--blue-soft); color: var(--blue-ink); }
.plans .plan.tone-team .plan-list svg { color: var(--blue); }

.plans .plan.tone-business { background: var(--plan-growth-bg); }
.plans .plan.tone-business .plan-ico { background: var(--green-soft); color: var(--green); }
.plans .plan.tone-business .plan-tier i.on { background: var(--green); }
.plans .plan.tone-business .plan-badge:not(.is-current) { background: var(--green-soft); color: var(--green-ink); }
.plans .plan.tone-business .plan-limits { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }

.plans .plan.tone-premium { background: var(--plan-premium-bg); color: var(--plan-premium-ink); box-shadow: var(--sh-2); }
.plans .plan.tone-premium :is(h3, .plans .plan-price b, .plans .plan-list b, .plans .plan-limits b, .plans .plan-seat) { color: var(--plan-premium-ink); }
.plans .plan.tone-premium :is(.plan-aud, .plans .plan-price span, .plans .plan-list em, .plans .plan-extra, .plans .plan-limits span, .plans .plan-limits svg) { color: var(--plan-premium-ink-2); }
.plans .plan.tone-premium .plan-limits { background: var(--plan-premium-fill); box-shadow: inset 0 0 0 1px var(--plan-premium-line); }
.plans .plan.tone-premium .plan-ico { background: var(--plan-premium-fill); color: var(--plan-premium-accent); }
.plans .plan.tone-premium .plan-tier i { background: var(--plan-premium-line); }
.plans .plan.tone-premium .plan-tier i.on { background: var(--plan-premium-accent); }
.plans .plan.tone-premium .plan-badge { background: var(--plan-premium-fill); color: var(--plan-premium-ink); }
.plans .plan.tone-premium .plan-list svg { color: var(--plan-premium-check); }
.plans .plan.tone-premium .plan-cta { background: var(--plan-premium-fill); color: var(--plan-premium-ink); }
.plans .plan.tone-premium .plan-cta.is-primary { background: var(--plan-premium-cta); color: var(--plan-premium-cta-ink); }
.plans .plan.tone-premium .plan-cta.is-primary:hover { background: var(--plan-premium-cta-hover); }
.plans .plan.tone-premium.is-current { border-color: var(--plan-premium-accent); box-shadow: var(--sh-2), 0 0 0 var(--halo) var(--plan-premium-accent-ring); }

/* ─── Под ширину контейнера ─── */
@container (max-width: 860px) {
    .plans-grid:not([data-count="3"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 760px) {
    .plans-seg { justify-self: stretch; }
    .plans-seg button { flex: 1; justify-content: center; height: auto; min-height: var(--h-md); padding: var(--sp-1) var(--sp-2); line-height: var(--lh-tight); text-align: center; }
    .plans-grid, .plans-grid[data-count="3"] { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--sp-1) 0 var(--sp-2); scrollbar-width: none; }
    .plans-grid::-webkit-scrollbar { display: none; }
    .plans .plan { flex: 0 0 var(--w-plan-snap); scroll-snap-align: center; }
}