/* ═══════════════════════════════════════
   Раздел «Статус» (спек 2026-10-22-fruit-prices-and-account-status-design.md,
   5.7; макет status-s6, вариант А). Полоса валют — общий .wallet-bar, бирки
   статусов (.status-tag, .tag--status-*) — global.css; вкладки срока,
   карточки, бирки и кнопки — общие компоненты, здесь только раскладка
   раздела. Цвета — токены global.css.
   ═══════════════════════════════════════ */

.status-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-3xl);
}

.status-page__header {
    margin-bottom: var(--space-xl);
}

/* Слово Смотрителя — под полосой валют, над «Ваш статус» (макет). */
.status-page__hint {
    margin-bottom: var(--space-lg);
    line-height: 1.6;
    color: var(--text-secondary);
}

.status-page__error {
    margin-bottom: var(--space-lg);
}

/* ── Ваш статус ──────────────────────────────────────────────── */

.status-now {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.status-now__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.status-now__label {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.status-now__until {
    font-size: var(--font-sm);
    font-weight: 700;
}

.status-now__text {
    font-size: var(--font-sm);
}

/* ── Срок: один переключатель над карточками ─────────────────── */

/* Вкладка срока — две строки: дни и выгода; у срока без выгоды вторая
   строка пустая той же высоты, и вкладки одной высоты. */
.status-terms {
    margin-bottom: var(--space-lg);
}

.status-terms .tabs__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.15;
}

.status-terms__saving {
    font-family: var(--font-body);
    font-size: var(--font-xs);
    font-weight: 700;
}

/* ── Карточки статусов ───────────────────────────────────────── */

/* Карточки растягиваются на всю строку десктопа, без пустой колонки; ряды —
   по самой высокой карточке. */
.statuses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    list-style: none;
}

.statuses__item {
    display: flex;
}

.status-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

/* Своя карточка — рамкой выбора, но на обычной бумаге: подсветка — у бирки
   «Ваш статус». */
.status-card.paper-card--selected {
    background: var(--card);
}

.status-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
}

.status-card__mine {
    background: var(--highlight);
}

.status-card__speed {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
}

.status-card__speed-text {
    font-family: var(--font-body);
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.status-card__time {
    font-size: var(--font-sm);
}

.status-card__time b {
    white-space: nowrap;
}

.status-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    margin-top: var(--space-xs);
}

.status-card__amount {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.status-card__amount .currency-icon {
    width: 20px;
    height: 20px;
}

.status-card__old {
    font-size: var(--font-sm);
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Сумма и полная цена держат ширину самой длинной своей версии среди сроков
   карточки (data-widest от status.js; правило «элемент с меняющейся подписью
   не меняет размер»): иначе зачёркнутая цена и бирка выгоды съезжали бы
   вбок при смене срока. Образец и сумма — в одной ячейке сетки, сумма у
   левого края; цифры моноширинные. */
.status-card__sum {
    display: inline-grid;
    justify-items: start;
    font-variant-numeric: tabular-nums;
}

.status-card__sum::before,
.status-card__sum-value {
    grid-area: 1 / 1;
}

.status-card__sum::before {
    content: attr(data-widest);
    visibility: hidden;
}

/* Сетка — атомарный строчный блок, и зачёркивание <s> внутрь неё не
   переходит: сумма зачёркнута сама. */
.status-card__old-value {
    text-decoration: line-through;
}

/* Подпись «вместо» у зачёркнутой цены — только скринридеру: зачёркивание он
   не озвучивает, и «1 080 1 200» читалось бы двумя ценами. Глазу её заменяет
   само зачёркивание. */
.status-card__old-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.status-card__saving {
    background: var(--highlight);
}

.status-card__perday {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.status-card__short {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--warning);
}

/* Действие прижато к низу карточки и во всю её ширину: «Купить»,
   «Продлить», «Сменить» и «Пополнить эссенцию» одного размера. */
.status-card__actions {
    display: flex;
    margin-top: auto;
    padding-top: var(--space-xs);
}

.status-card__actions > * {
    flex: 1;
}

/* Узкий телефон: три срока в 288 пикселях — поля вкладок ужаты, иначе
   «180 дней» не влезал в треть строки. */
@media (max-width: 600px) {
    .status-terms .tabs__tab {
        padding: var(--space-sm) var(--space-xs);
    }
}