/* /premium на телефоне (до 767px): блоки-плитки, карточки столбиком с «Профи» первым,
 * срок — четыре кнопки в ряд, сравнение по одной мерке вместо широкой таблицы, полоса оплаты внизу.
 *
 * Все правила под .tariffs-page: карточки (tariffs-slider.tpl) показывает и /must_reg, его не трогаем.
 * Файл подключён в теле страницы, после darkmode.scss, поэтому тёмную тему задаём здесь же —
 * переменными под html[data-bs-theme="dark"], значения те же, что у $tariff-* в darkmode.scss
 * (меняются вместе с ними). Переменные объявлены на <html>: ими красятся и html, и body.
 */

html:has(.tariffs-page),
.tariffs-page {
    --tpm-bg: #efeff3;
    --tpm-surface: #fff;
    --tpm-card: #f2f2f2;
    --tpm-card-top: #fff5cc;
    --tpm-inner: #fff;
    --tpm-text: #000;
    --tpm-muted: #6b7280;
    --tpm-line: #e6e8ec;
    --tpm-field-line: #dde0ea;
    --tpm-accent: #fecc00;
    --tpm-accent-hover: #e6b800;
    --tpm-link: #3866f2;
    --tpm-green: #006c0b;
    --tpm-green-bg: #eafbec;
    --tpm-green-line: #006c0b;
    --tpm-seg: #f2f3f5;
    --tpm-sale: #e6e6e6;
    --tpm-sale-text: #6b7280;
    --tpm-bar: #c7ccd6;
    --tpm-top-name: #000;
    --tpm-top-ring: transparent;
    --tpm-pill-bg: var(--tpm-green-bg);
    --tpm-pill-text: var(--tpm-green);
    --tpm-pill-line: var(--tpm-green-line);
    --tpm-shadow: 0 12px 34px rgba(16, 22, 28, .14);
}

html[data-bs-theme="dark"]:has(.tariffs-page),
[data-bs-theme="dark"] .tariffs-page {
    --tpm-bg: #15181d;
    --tpm-surface: #15181d;
    --tpm-card: #1c2027;
    --tpm-card-top: #1c2027;
    --tpm-inner: #232830;
    --tpm-text: #f7f7f7;
    --tpm-muted: #9aa1ac;
    --tpm-line: #2c323c;
    --tpm-field-line: #39414e;
    --tpm-link: #8ab4f8;
    --tpm-green: #5fd08a;
    --tpm-green-bg: rgba(34, 197, 94, .14);
    --tpm-green-line: rgba(110, 231, 160, .35);
    --tpm-seg: #1c2027;
    --tpm-sale: #2c323c;
    --tpm-sale-text: #e8eaed;
    --tpm-bar: #4a525f;
    --tpm-top-name: #fecc00;
    --tpm-top-ring: #fecc00;
    /* «Выгоднее на год» в тёмной теме серая: зелёный спорит с жёлтым акцентом. */
    --tpm-pill-bg: #262b34;
    --tpm-pill-text: #e8eaed;
    --tpm-pill-line: #2c323c;
    --tpm-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}

/* Мобильные элементы на широком экране не нужны. */
.ttb-card__badge,
.ttb-card__check-item-mobile,
.ttb-card__save,
.ttb-cmp-link,
.tpm,
.tpb__common-toggle,
.ttb-buybar {
    display: none;
}

@media (max-width: 767px) {
    html:has(.tariffs-page),
    html:has(.tariffs-page) body,
    body:has(.tariffs-page) :has(.tariffs-page),
    .tariffs-page {
        background-color: var(--tpm-bg) !important;
    }

    .tariffs-page {
        padding: 12px 5px 0;
        color: var(--tpm-text);
    }

    /* Место под полосу оплаты в конце подвала: body высотой в экран, прокручиваются обёртки внутри. */
    body:has(.tariffs-page .ttb-buybar) .tm-footer {
        padding-bottom: 84px;
    }

    /* Плитки: карточки, сравнение, индивидуальный тариф. */
    .tariffs-page .tts,
    .tariffs-page .tps,
    .tariffs-page .individual-section {
        margin: 12px 0 0;
        width: auto;
        padding: 16px 12px;
        border-radius: 12px;
        background-color: var(--tpm-surface);
    }

    .tariffs-page .tts .container-fluid,
    .tariffs-page .tps .container-fluid,
    .tariffs-page .individual-section .container-fluid {
        padding: 0;
    }

    .tariffs-page .ttb__heading {
        margin: 0;
        padding: 0 0 12px;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.02em;
        text-align: left;
        text-wrap: balance;
        color: var(--tpm-text);
    }

    /* Срок оплаты: кнопки в один ряд, скидка — под названием срока. */
    .tariffs-page .ttb__controls {
        margin: 0 0 12px;
    }

    .tariffs-page .ttb__controls-list {
        padding: 0;
    }

    .tariffs-page .ttb__controls-list-inner {
        display: flex;
        width: 100%;
        gap: 2px;
        padding: 4px;
        border: 0;
        border-radius: 12px;
        background-color: var(--tpm-seg);
    }

    .tariffs-page .ttb__controls-button {
        flex: 1 1 0;
        flex-direction: column;
        justify-content: flex-start;
        gap: 3px;
        width: auto;
        min-width: 0;
        height: auto;
        padding: 7px 2px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
        color: var(--tpm-muted);
        background-color: transparent;
    }

    .tariffs-page .ttb__controls-button:hover {
        color: var(--tpm-text);
        background-color: transparent;
    }

    .tariffs-page .ttb__controls-button.active,
    .tariffs-page .ttb__controls-button.active:hover {
        font-weight: 500;
        color: #000;
        background-color: var(--tpm-accent);
    }

    .tariffs-page .ttb__controls-button .sale-badge,
    .tariffs-page .ttb__controls-button .ttb__badges,
    .tariffs-page .ttb__controls-button .gift-badge {
        position: static;
    }

    .tariffs-page .ttb__controls-button .ttb__badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
    }

    .tariffs-page .ttb__controls-button .sale-badge,
    .tariffs-page .ttb__controls-button.active .sale-badge,
    .tariffs-page .ttb__controls-button .gift-badge,
    .tariffs-page .ttb__controls-button.active .gift-badge {
        padding: 1px 6px;
        font-size: 11px;
        line-height: 16px;
    }

    .tariffs-page .ttb__controls-button .sale-badge {
        color: var(--tpm-sale-text);
        background-color: var(--tpm-sale);
    }

    .tariffs-page .ttb__controls-button.active .sale-badge {
        color: #000;
        background-color: rgba(0, 0, 0, .12);
    }

    /* Карточки — столбиком, без слайдера; «Профи» первым. */
    .tariffs-page .ttb__list {
        padding: 0;
        margin: 0;
        overflow: visible;
    }

    .tariffs-page .ttb__list-prev,
    .tariffs-page .ttb__list-next {
        display: none;
    }

    .tariffs-page .ttb__list-wrapper {
        display: flex;
        flex-direction: column;
        gap: 12px;
        transform: none !important;
    }

    .tariffs-page .ttb__list-slide {
        width: 100% !important;
        max-width: none;
        margin: 0 !important;
        border: 0;
        border-radius: 12px;
        background-color: var(--tpm-card);
    }

    .tariffs-page .ttb__list-slide:hover {
        background-color: var(--tpm-card);
    }

    .tariffs-page .ttb-card--prime,
    .tariffs-page .ttb-card--prime:hover {
        order: -1;
        background-color: var(--tpm-card-top);
        /* Внутрь, а не наружу: обёртка карточек обрезает всё, что за её краем. */
        box-shadow: inset 0 0 0 1px var(--tpm-top-ring);
    }

    .tariffs-page .ttb-card__name {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 14px 12px 0;
        font-size: 20px;
        font-weight: 400;
        line-height: 1.2;
        color: var(--tpm-text);
    }

    .tariffs-page .ttb-card--prime .ttb-card__name {
        color: var(--tpm-top-name);
    }

    .tariffs-page .ttb-card__badge {
        display: inline-block;
        padding: 5px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        color: #000;
        background-color: var(--tpm-accent);
    }

    .tariffs-page .ttb-card__about {
        gap: 8px;
        height: auto;
        margin: 0;
        padding: 6px 12px 12px;
        font-size: 13px;
        color: var(--tpm-muted);
    }

    .tariffs-page .ttb-card__about img {
        width: 18px;
        height: 18px;
        margin: 0;
    }

    /* Цена и итог за срок — в одну строку, а если не влезают, итог переносится под цену. */
    .tariffs-page .ttb__list-slide-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 12px;
        padding: 12px;
        border-radius: 12px;
        background-color: var(--tpm-inner);
    }

    .tariffs-page .ttb-card__check-list {
        flex: 0 0 100%;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--tpm-line);
    }

    .tariffs-page .ttb-card__check-item,
    .tariffs-page .ttb-card__check-item:not(:last-child) {
        display: block;
        margin: 0;
    }

    /* «7 аккаунтов» в треть карточки не влезает одной строкой — пусть переносится. */
    .tariffs-page .ttb-card__check-item-value {
        font-size: 18px;
        font-weight: 300;
        line-height: 1.2;
        color: var(--tpm-text);
    }

    .tariffs-page .ttb-card__check-item-about {
        margin: 2px 0 0;
        font-size: 11px;
        line-height: 1.25;
        color: var(--tpm-muted);
    }

    /* Подсказки по наведению пальцем не открыть — пояснения есть в сравнении ниже. */
    .tariffs-page .ttb-card__check-item-about .info-tooltip {
        display: none;
    }

    .tariffs-page .ttb-card__check-item-mobile {
        display: inline;
    }

    .tariffs-page .ttb-card__price {
        flex: none;
        align-items: baseline;
        gap: 4px;
        height: auto;
        min-height: 0;
        margin: 0;
        white-space: nowrap;
    }

    .tariffs-page .ttb-card__price-main {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 24px;
        line-height: 1.2;
    }

    /* Процент применённого промокода, который скрипт ставит перед ценой, — в одной строке с ней. */
    .tariffs-page .ttb-card__price-main small {
        display: inline-block;
        margin: 0;
        padding: 2px 6px;
        font-size: 13px;
        line-height: 1.2;
    }

    .tariffs-page .ttb-card__price-text {
        font-size: 14px;
        color: var(--tpm-muted);
    }

    .tariffs-page .ttb-card__price-text::before {
        content: "/ ";
    }

    .tariffs-page .ttb-card__old-price {
        align-self: baseline;
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0 4px;
        min-height: 0;
        margin: 0;
        text-align: right;
    }

    .tariffs-page .ttb-card__old-price-main,
    .tariffs-page .ttb-card__old-price-month,
    .tariffs-page .ttb-card__old-price.ttb-card__old-price--year .ttb-card__old-price-main,
    .tariffs-page .ttb-card__old-price.ttb-card__old-price--year .ttb-card__old-price-month {
        margin: 0;
        font-size: 14px;
        font-weight: 300;
        white-space: nowrap;
        color: var(--tpm-muted);
    }

    .tariffs-page .ttb-card__old-price-cta,
    .tariffs-page button.ttb-card__old-price-cta:hover {
        padding: 4px 10px;
        border: 1px solid var(--tpm-pill-line);
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        color: var(--tpm-pill-text);
        background-color: var(--tpm-pill-bg);
    }

    .tariffs-page .ttb-card__gift {
        flex: 0 0 100%;
        margin: 4px 0 0;
    }

    .tariffs-page .ttb-card__save {
        flex: 0 0 100%;
        display: block;
        font-size: 13px;
        color: var(--tpm-green);
    }

    .tariffs-page .ttb-card__save:empty {
        display: none;
    }

    .tariffs-page .ttb-card__button {
        flex: 0 0 100%;
        margin: 8px 0 0;
    }

    .tariffs-page .ttb__list-slide .btn-buy-ttb {
        width: 100%;
        margin: 0;
        padding: 10px 18px;
        border: 1px solid var(--tpm-accent);
        border-radius: 8px;
        font-size: 16px;
        line-height: 24px;
        color: var(--tpm-text);
        background-color: transparent;
    }

    .tariffs-page .ttb__list-slide.ttb-card--prime .btn-buy-ttb,
    .tariffs-page .ttb__list-slide .btn-buy-ttb:hover {
        color: #000;
        border-color: var(--tpm-accent);
        background-color: var(--tpm-accent);
    }

    .tariffs-page .ttb__list-slide.ttb-card--prime .btn-buy-ttb:hover {
        border-color: var(--tpm-accent-hover);
        background-color: var(--tpm-accent-hover);
    }

    .tariffs-page .ttb-card__button .ttb-link {
        display: none;
    }

    .tariffs-page .ttb-cmp-link {
        display: block;
        margin-top: 12px;
        padding: 2px 0 4px;
        font-size: 14px;
        text-align: center;
        color: var(--tpm-link);
    }

    /* Сравнение: широкая таблица уступает место сравнению по одной мерке. */
    .tariffs-page .table-plans-block {
        display: none;
    }

    .tariffs-page .tpm {
        display: block;
    }

    .tpm__chips {
        display: flex;
        gap: 8px;
        margin: 0 -12px;
        padding: 0 12px 4px;
        overflow-x: auto;
        scroll-padding: 0 12px;
        scrollbar-width: none;
    }

    .tpm__chips::-webkit-scrollbar {
        display: none;
    }

    .tpm__chip {
        flex: none;
        padding: 8px 12px;
        border: 1px solid var(--tpm-field-line);
        border-radius: 999px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--tpm-text);
        background-color: var(--tpm-surface);
    }

    .tpm__chip[aria-selected="true"] {
        border-color: var(--tpm-accent);
        color: #000;
        background-color: var(--tpm-accent);
    }

    .tpm__hint {
        min-height: 38px;
        margin: 8px 0 4px;
        font-size: 13px;
        line-height: 1.4;
        color: var(--tpm-muted);
    }

    .tpm__row {
        padding: 12px 0;
        border-bottom: 1px solid var(--tpm-line);
    }

    .tpm__row:last-child {
        border-bottom: 0;
    }

    .tpm__row-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 8px;
    }

    .tpm__row-name {
        font-size: 16px;
        line-height: 1.3;
    }

    .tpm__row-name .ttb-card__badge {
        margin-left: 6px;
        vertical-align: 2px;
    }

    .tpm__price {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        font-weight: 300;
        color: var(--tpm-muted);
    }

    .tpm__row-value {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    .tpm__bar {
        height: 8px;
        border-radius: 999px;
        overflow: hidden;
        background-color: var(--tpm-line);
    }

    .tpm__bar i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background-color: var(--tpm-bar);
    }

    .tpm__row--top .tpm__bar i {
        background-color: var(--tpm-accent);
    }

    .tpm__feat {
        display: grid;
        grid-template-columns: 2.2fr;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        align-items: center;
        gap: 2px;
        padding: 12px 0;
        border-bottom: 1px solid var(--tpm-line);
        font-size: 13px;
        line-height: 1.3;
        text-align: center;
    }

    .tpm__feat span:first-child {
        text-align: left;
    }

    .tpm__feat--head {
        padding-top: 4px;
        font-size: 11px;
        font-weight: 600;
        color: var(--tpm-muted);
    }

    .tpm__feat--head .tpm__feat-top {
        color: var(--tpm-text);
    }

    .tpm__yes {
        font-style: normal;
        font-weight: 600;
        color: var(--tpm-green);
    }

    .tpm__no {
        font-style: normal;
        color: var(--tpm-muted);
    }

    /* «Во всех тарифах» — свёрнуто, раскрывается кнопкой. */
    .tariffs-page .tpb__common {
        margin-top: 8px;
        padding: 0;
        border-top: 1px solid var(--tpm-line);
    }

    .tariffs-page .tpb__common-heading {
        display: none;
    }

    .tariffs-page .tpb__common-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 16px 0 4px;
        border: 0;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--tpm-muted);
        background: none;
    }

    .tpb__common-toggle em {
        font-style: normal;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: none;
        color: var(--tpm-link);
    }

    .tpb__common-toggle[aria-expanded="true"] em {
        display: none;
    }

    .tpb__common-chev {
        width: 6px;
        height: 6px;
        margin-top: -3px;
        border: solid currentColor;
        border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg);
        transition: transform .2s;
    }

    .tpb__common-toggle[aria-expanded="true"] .tpb__common-chev {
        margin-top: 3px;
        transform: rotate(-135deg);
    }

    .tariffs-page .tpb__common-list {
        display: none;
        flex-direction: column;
        gap: 6px;
        margin: 8px 0 0;
        font-size: 13px;
    }

    .tariffs-page .tpb__common--open .tpb__common-list {
        display: flex;
    }

    /* Промокод и индивидуальный тариф. */
    .tariffs-page .individual-section__row {
        margin: 0;
        padding: 0;
        width: auto;
    }

    .tariffs-page .individual-block__heading {
        margin: 0;
        padding: 0 0 12px;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.02em;
        text-wrap: balance;
        color: var(--tpm-text);
    }

    .tariffs-page .individual-block__subheading {
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
    }

    .tariffs-page .individual-block__button {
        display: block;
        margin-top: 16px;
    }

    .tariffs-page .individual-block__button .btn {
        display: block;
        width: 100%;
        margin: 0;
        padding: 10px 18px;
        font-size: 16px;
        line-height: 24px;
        color: #000;
    }

    /* Суммы — цифрами одной ширины, чтобы при смене срока строки не дёргались. */
    .tariffs-page .ttb-card__price-main,
    .tariffs-page .ttb-card__old-price-main,
    .tariffs-page .ttb-card__save,
    .tariffs-page .ttb-card__check-item-value,
    .tpm__price,
    .tpm__row-value,
    .ttb-buybar__sum,
    .ttb-buybar__note {
        font-variant-numeric: tabular-nums;
    }

    /* Полоса оплаты «Профи». */
    .tariffs-page .ttb-buybar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--tpm-line);
        background-color: var(--tpm-surface);
        box-shadow: var(--tpm-shadow);
        transform: translateY(110%);
        transition: transform .2s;
    }

    .tariffs-page .ttb-buybar.is-on {
        transform: none;
    }

    .ttb-buybar__sum {
        display: block;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
    }

    .ttb-buybar__note {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        color: var(--tpm-muted);
    }

    .tariffs-page .ttb-buybar__btn {
        flex: none;
        padding: 10px 20px;
        border: 1px solid var(--tpm-accent);
        border-radius: 8px;
        font-size: 16px;
        line-height: 24px;
        color: #000;
        background-color: var(--tpm-accent);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .tariffs-page .ttb-buybar,
    .tpb__common-chev {
        transition: none;
    }
}