/* Блок тарифов «Месяц / Год» + «Купить» + таймер личной цены — общий для оффера /offer2 и окна
   /offer2/plans, которое сайты встраивают у себя (static/js/offer-embed.js). Разметка —
   templates/partials/offer_plans.html, логика — static/js/offer-plans.js. Перенесено из offer2.html (#258). */

.offer-cta-block { margin: 8px 0 8px; text-align: center; transition: opacity .2s; }
/* Цена личная (акция / без акции) и приходит из /api/offer-state — до ответа блок
   скрыт, иначе человек видит 149 ₽ из шаблона, а через секунду 449 ₽. */
.offer-cta-block--pending { opacity: 0; pointer-events: none; }

/* Главная кнопка покупки: сплошной золотой фон, чёрный аптокейс-текст.
   Единственное свечение на экране — то, куда надо нажать. */
.offer-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 28px;
    border: none;
    border-radius: var(--radius);
    background: var(--accent);
    color: #000;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 34px rgba(255,215,0,0.28);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s, transform 0.15s;
}
.offer-cta:hover { opacity: .9; }
.offer-cta:active { transform: scale(0.97); }

.offer-fineprint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

.offer-promo-timer {
    margin: 12px auto 4px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    text-align: center;
    max-width: 280px;
}
.offer-promo-timer__label {
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}
.offer-promo-timer__value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* Подпись под «Купить»: место под две строки — подписи месяца и года разной длины,
   при переключении тарифа экран не скачет */
.offer-fineprint { min-height: 3em; }
.offer-fineprint b { color: var(--text-secondary); font-weight: 600; }
.nw { white-space: nowrap; }

/* Таймер — про личную цену месяца. При выбранном годе невидим, но держит своё место
   (экран не скачет); без промо его нет совсем (hidden) */
.offer-promo-timer.is-off { visibility: hidden; }

/* Тариф над «Купить»: две карточки обычного стиля, золотая рамка только у выбранной
   (единственная золотая карточка на экране); кнопка «Купить» одна */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; text-align: left; transition: visibility 0s; }
.plans[hidden] { display: none; }
.plan {
    display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 11px 12px 10px;
    cursor: pointer; text-align: left; font: inherit; color: var(--text-secondary);
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s, color .15s, transform .1s;
}
.plan:active { transform: scale(0.98); }
.plan:focus-visible { outline: 2px solid var(--border-light); outline-offset: 2px; }
.plan[aria-checked="true"] { border: 1.5px solid var(--accent); padding: 10.5px 11.5px 9.5px; color: var(--text); }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 20px; }
.plan__name { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); }
.plan__off { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: #2a2a2c; color: var(--text); }
.plan__price {
    display: flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 800; line-height: 1.15;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* подпись к цене мини-строками справа от суммы: «первый / месяц», «в месяц» */
.plan__unit { font-size: 10.5px; font-weight: 600; line-height: 1.1; color: var(--text-secondary); }
.plan__note { font-size: 11px; line-height: 1.3; color: var(--text-secondary); }
.plan[aria-checked="false"] .plan__price { color: var(--text-secondary); }

html.offer-low .plans { margin-bottom: 10px; }
html.offer-low .plan { padding: 8px 12px 7px; }
html.offer-low .plan[aria-checked="true"] { padding: 7.5px 11.5px 6.5px; }
html.offer-low .offer-promo-timer { margin-top: 8px; }

/* Честная надпись над тарифами: 149 ₽ по флагу «топик» уже оплачены / цена для аккаунта после входа другая.
   Видна с первого показа блока (до ответа /api/offer-state блок скрыт) — не сдвигает уже показанное. */
.offer-note {
    margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-card);
    font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); text-align: center;
}
.offer-note[hidden] { display: none; }