/* Переключатель витрин: «Подписка на сайт» ↔ «Пакеты API».
 *
 * Стоит вверху /premium (Smarty) и /premium-api (Twig). Разметка у обеих страниц ОДНА —
 * templates_twig/_pricing_switch.html.twig, включается обоими движками (файл без единой фигурной
 * скобки, поэтому и Smarty, и Twig отдают его как есть). Активный сегмент задаёт обёртка
 * страницы: .pricing-switch[data-active="site"] или [data-active="api"].
 *
 * ПОЧЕМУ ЦВЕТА ЗДЕСЬ ЖЁСТКИЕ, А НЕ ТОКЕНАМИ ДИЗАЙН-СИСТЕМЫ. ds-tokens.css подключает только
 * twig-каркас (templates_twig/base.html.twig); на страницах Smarty его нет. Если бы переключатель
 * ссылался на var(--surface) и соседей, он выглядел бы по-разному на двух страницах, между
 * которыми и переключает, — это ровно та ошибка, которую он должен предотвращать. Значения ниже
 * скопированы из ds-tokens.css, светлая и тёмная пары; менять их надо вместе с ним.
 *
 * Тёмная тема приходит с html[data-bs-theme="dark"] — атрибут ставят ОБА каркаса.
 */

.pricing-switch {
    margin: 0 auto 20px;
    max-width: 720px;
    text-align: center;
}

.pricing-switch__tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #e6e8ec; /* --border */
    border-radius: 999px; /* --r-pill */
    background: #f9fafb; /* --surface-2 */
}

.pricing-switch__tab {
    display: block;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #6b7280; /* --text-muted */
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.pricing-switch__tab:hover,
.pricing-switch__tab:focus-visible {
    color: #12161c; /* --text */
    text-decoration: none;
}

.pricing-switch__tab:focus-visible {
    outline: 2px solid rgba(254, 204, 0, .35); /* --focus-ring */
    outline-offset: 2px;
}

/* Активный сегмент — это текущая страница. Клик по нему никуда не ведёт, поэтому и указателя
   «ссылка» у него нет: иначе человек жмёт и получает перезагрузку той же страницы. */
.pricing-switch[data-active="site"] .pricing-switch__tab[data-tab="site"],
.pricing-switch[data-active="api"] .pricing-switch__tab[data-tab="api"] {
    background: #fecc00; /* --accent */
    color: #111; /* --on-accent */
    cursor: default;
    pointer-events: none;
}

.pricing-switch__note {
    margin: 12px auto 0;
    max-width: 620px;
    font-size: 13px; /* --fs-sm */
    line-height: 1.45;
    color: #6b7280; /* --text-muted */
}

.pricing-switch__note b {
    color: #12161c; /* --text */
    font-weight: 600;
}

html[data-bs-theme="dark"] .pricing-switch__tabs {
    border-color: #2c323c; /* --border */
    background: #232830; /* --surface-2 */
}

html[data-bs-theme="dark"] .pricing-switch__tab {
    color: #9aa1ac; /* --text-muted */
}

html[data-bs-theme="dark"] .pricing-switch__tab:hover,
html[data-bs-theme="dark"] .pricing-switch__tab:focus-visible {
    color: #e8eaed; /* --text */
}

html[data-bs-theme="dark"] .pricing-switch__note {
    color: #9aa1ac;
}

html[data-bs-theme="dark"] .pricing-switch__note b {
    color: #fff; /* --text-strong */
}

/* На узком экране сегменты не влезают в строку: переносим и растягиваем на всю ширину, иначе
   правый уезжает за край и до «Пакетов API» человек не доскроллит. */
@media (max-width: 480px) {
    .pricing-switch__tabs {
        display: flex;
        width: 100%;
        border-radius: 12px; /* --r-lg */
    }

    .pricing-switch__tab {
        flex: 1 1 50%;
        padding: 10px 8px;
        border-radius: 10px;
        font-size: 14px;
    }
}