/* =============================================================================
   ВИТРИНА ТАРИФОВ — ОДИН КОМПОНЕНТ НА ДВА МЕСТА (WF1-CABINET-POLISH-4, п.12).

   ГДЕ ПОДКЛЮЧАЕТСЯ: публичная главная (секция «Тарифы») и модалка «Сменить
   тариф» в кабинете. Разметка у них одна (`views/modules/wf1_plans.php`),
   значит и оформление обязано быть одним: две таблицы стилей для одного
   компонента разошлись бы при первой правке.

   ОБЛАСТЬ ДЕЙСТВИЯ. Каждое правило начинается с `.wfp` — корневого класса
   компонента. Глобальных селекторов здесь нет ни одного: файл подключается на
   ДВУХ площадках с разными дизайн-системами (старый публичный сайт и кабинет
   на `--ui-*`), и правило без корня перекрасило бы чужие элементы.

   ЦВЕТА. Компонент самодостаточен: собственные значения заданы прямо, а не
   через переменные кабинета, потому что на публичной главной переменных
   `--ui-*` нет вовсе. Там, где кабинет их объявляет, используются они —
   через `var(--ui-*, запасное)`, и запасное совпадает со значением кабинета.

   ЗАВИСИМОСТЕЙ НЕТ: ни Bootstrap, ни иконочного шрифта, ни CDN. Галочки и
   прочерки — псевдоэлементы, а не картинки.
   ============================================================================= */

/* КАРТОЧКИ РЯДА ОДНОЙ ВЫСОТЫ, CTA НА ОДНОЙ ЛИНИИ
   (WF1-CABINET-POLISH-4.1, п.7).

   Здесь стояло `align-items:start`: карточка с меньшим числом строк
   возможностей была ниже соседней, и её кнопка висела выше чужой. С тремя
   карточками (пробный период рядом с двумя платными) разнобой стал заметен
   сразу. `stretch` — значение по умолчанию, и оно здесь правильное: карточка
   тянется до высоты ряда, а кнопка внутри прижата к низу
   (`.wfp-btn{margin-top:auto}` ниже). Итог: все CTA на одной линии. */
.wfp{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
    align-items:stretch;
    min-width:0;
}

/* НИЖНИЙ ОТСТУП ПОСЛЕ ВСЕГО БЛОКА КАРТОЧЕК (п.7). Секция тарифов на главной
   заканчивалась сеткой вплотную: карточка «Рекомендуем» с тенью упиралась в
   границу следующего раздела. Отступ задан витрине, а не секции: секция —
   чужой файл (`style.css` публичного сайта), и её отступы описывают все
   разделы главной сразу. */
.wfp--public{margin:0 0 32px}

/* Карточка семейства. Одна карточка — одно предложение, а не один вариант
   объёма: шесть почти одинаковых карточек, которые здесь были раньше,
   сравнить невозможно. */
.wfp-card{
    position:relative;
    display:flex;flex-direction:column;
    padding:24px;
    border:1px solid var(--ui-line,#e2e8f0);
    border-radius:16px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
}
/* Рекомендованное предложение выделяется рамкой и подписью. Признак приходит
   ИЗ ДАННЫХ (`is_popular` записи каталога), а не из позиции в вёрстке. */
.wfp-card--pick{border-color:#2563eb;box-shadow:0 10px 34px rgba(37,99,235,.14)}
.wfp-card--mine{border-color:#94a3b8}
.wfp-card__flag{
    position:absolute;top:-11px;left:24px;
    padding:3px 11px;border-radius:999px;
    background:#2563eb;color:#fff;
    font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}
.wfp-card__name{
    margin:0 0 14px;
    font-size:20px;font-weight:750;line-height:1.2;color:var(--ui-text,#101828);
}

/* --- переключатель объёма заявок --- */

.wfp-seg{margin:0 0 16px}
.wfp-seg__label{
    display:block;margin-bottom:7px;
    font-size:11.5px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;
    color:var(--ui-faint,#98a2b3);
}
/* ДОРОЖКА ЗАМЕТНО ТЕМНЕЕ ВЫБРАННОЙ КНОПКИ.
   Сначала здесь стояло `--ui-surface-2` (#f8fafc): белая активная кнопка на
   почти белой дорожке не читалась как выбранная — на снимке экрана отличить
   выбранный вариант от невыбранного было нельзя. Разница по фону должна быть
   видимой, а не формальной. */
.wfp-seg__row{
    display:flex;gap:3px;padding:3px;
    border:1px solid #e2e8f0;border-radius:10px;
    background:#eef2f7;
}
.wfp-seg__btn{
    flex:1 1 0;min-width:0;min-height:32px;padding:0 8px;
    border:0;border-radius:7px;background:transparent;
    color:var(--ui-muted,#667085);
    font-family:inherit;font-size:13px;font-weight:650;line-height:1;
    cursor:pointer;white-space:nowrap;transition:.15s ease;
}
.wfp-seg__btn:hover{color:var(--ui-text,#101828)}
.wfp-seg__btn:focus-visible{outline:2px solid #2563eb;outline-offset:1px}
.wfp-seg__btn.is-active{
    background:#fff;color:#2563eb;
    box-shadow:0 1px 2px rgba(16,24,40,.10);
}

/* --- карточка пробного периода (WF1-CABINET-POLISH-4.1, п.7) --- */

/* Оформление то же, что у платных карточек: это не отдельная дизайн-система,
   а третий элемент того же ряда. Отличается только содержимое верхней части —
   вместо цены срок, вместо подписи периода одно предложение о том, когда
   начинается отсчёт. */
.wfp-card--trial{border-color:#cdd8ea;background:linear-gradient(180deg,#f7faff 0%,#fff 46%)}

/* СРОК НА МЕСТЕ ЦЕНЫ. Кегль заметно меньше, чем у числа цены (34 px): «14 дней
   бесплатно» — это строка из трёх слов, и в 34 пикселя она разъезжается на две
   строки в карточке шириной 300 px. */
.wfp-trial__big{
    font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.02em;
    color:var(--ui-text,#101828);margin-bottom:6px;
}
/* СОСТАВ ФУНКЦИЙ ОДНОЙ СТРОКОЙ (WF1-TRIAL-MAX-FUNCTIONS). Это главное, что
   отличает пробный период от прежнего бесплатного набора, поэтому строка стоит
   сразу под сроком и набрана акцентным цветом — но остаётся обычным текстом, а
   не бейджем: бейдж в этом ряду уже занят пометкой «Рекомендуем». */
.wfp-trial__max{
    margin:0 0 8px;font-size:13px;font-weight:700;line-height:1.4;color:#1d4ed8;
}
.wfp-trial__note{
    margin:0;font-size:12.5px;line-height:1.5;color:var(--ui-muted,#667085);
}

/* --- тело варианта --- */

.wfp-var{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.wfp-var[hidden]{display:none}

.wfp-price{display:flex;align-items:baseline;gap:5px;margin-bottom:4px;flex-wrap:wrap}
.wfp-price b{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ui-text,#101828)}
.wfp-price span{font-size:16px;font-weight:700;color:var(--ui-text,#101828)}
/* Период не переносится отдельно от цены и не разрывается посередине:
   «179 BYN /» на одной строке и «мес.» на другой читается как две величины. */
.wfp-price em{font-size:13px;font-style:normal;color:var(--ui-muted,#667085);white-space:nowrap}

.wfp-var__mine,
.wfp-var__badge{
    margin:0 0 12px;padding:3px 9px;align-self:flex-start;
    border-radius:999px;font-size:11.5px;font-weight:700;
}
.wfp-var__mine{background:#eef2f6;color:#475467}
.wfp-var__badge{background:#eff6ff;color:#1d4ed8}

.wfp-limits{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--ui-line,#e2e8f0);display:grid;gap:8px}
.wfp-limits li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px}
.wfp-limits span{color:var(--ui-muted,#667085);min-width:0}
.wfp-limits b{font-weight:700;color:var(--ui-text,#101828);white-space:nowrap}

.wfp-feats{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.wfp-feats li{
    position:relative;padding-left:23px;
    font-size:12.5px;line-height:1.4;color:var(--ui-text-2,#344054);
}
/* Галочка и прочерк — псевдоэлементы, а не иконочный шрифт: подключать ради
   двух знаков целый набор значков незачем. */
.wfp-feats li::before{
    content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;
}
.wfp-feats li.is-on::before{
    background:#e9f8f1;
    box-shadow:inset 0 0 0 1px #a7e3c6;
}
.wfp-feats li.is-on::after{
    content:"";position:absolute;left:4px;top:7px;width:7px;height:3.5px;
    border-left:1.8px solid #079455;border-bottom:1.8px solid #079455;
    transform:rotate(-45deg);
}
.wfp-feats li.is-off{color:var(--ui-faint,#98a2b3)}
.wfp-feats li.is-off::before{background:#f1f3f7;box-shadow:inset 0 0 0 1px #e2e8f0}
.wfp-feats li.is-off::after{
    content:"";position:absolute;left:4.5px;top:9.5px;width:6px;height:1.8px;background:#c3cad6;
}

/* --- кнопка --- */

/* Кнопка прижата к низу карточки: у соседних семейств разное число строк
   возможностей, и без этого кнопки стояли бы на разной высоте. */
.wfp-btn{
    display:inline-flex;align-items:center;justify-content:center;
    margin-top:auto;width:100%;min-height:44px;padding:0 18px;
    border:1px solid var(--ui-line,#e2e8f0);border-radius:10px;
    background:#fff;color:var(--ui-text-2,#344054);
    font-family:inherit;font-size:14px;font-weight:700;line-height:1;
    text-decoration:none;cursor:pointer;transition:.15s ease;
}
.wfp-btn:not([disabled]):hover{border-color:#d5ddea;background: #2e9f3a;color: #fff}
.wfp-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.wfp-btn[disabled]{opacity:.55;cursor:default;background:#f4f6f9;color:#98a2b3}

/* ГЛАВНАЯ КНОПКА — СИНЯЯ С БЕЛЫМ ТЕКСТОМ ВО ВСЕХ СОСТОЯНИЯХ.
   Отдельные правила для `a.wfp-btn--primary` нужны в кабинете: там объявлено
   `body.qz-user-cabinet a{color:inherit}` весом (0,2,1), и ссылка с классом
   синей кнопки без этого получала бы тёмный текст (см. `wf1-wheels.css`). */
.wfp-btn--primary{background:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.20)}
.wfp-btn--primary:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.wfp-btn--primary:focus,
.wfp-btn--primary:focus-visible,
.wfp-btn--primary:active,
.wfp-btn--primary:visited{color:#fff}
body.qz-user-cabinet a.wfp-btn--primary,
body.qz-user-cabinet a.wfp-btn--primary:link,
body.qz-user-cabinet a.wfp-btn--primary:visited,
body.qz-user-cabinet a.wfp-btn--primary:hover,
body.qz-user-cabinet a.wfp-btn--primary:focus,
body.qz-user-cabinet a.wfp-btn--primary:focus-visible,
body.qz-user-cabinet a.wfp-btn--primary:active{color:#fff}

/* --- витрина внутри модалки кабинета --- */

/* В модалке места меньше, чем на главной: карточки уже, отступы плотнее.
   Числа и состав при этом те же — меняется только плотность. */
.wfp--cabinet{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin:0 0 18px}
.wfp--cabinet .wfp-card{padding:20px}
.wfp--cabinet .wfp-card__name{font-size:18px;margin-bottom:12px}
.wfp--cabinet .wfp-price b{font-size:29px}
.wfp--cabinet .wfp-btn{min-height:40px;font-size:13.5px}

@media (max-width:720px){
    .wfp{grid-template-columns:minmax(0,1fr);gap:16px}
    .wfp-card{padding:20px}
    .wfp-price b{font-size:30px}
    /* На узком экране переключатель из трёх кнопок остаётся в строку: объёмы
       короткие («100», «300», «500»), и переносить их не нужно. */
    .wfp-seg__btn{font-size:12.5px;padding:0 6px}
}