/* ═══════════════════════════════════════════════════════════════════
   Страницы покупки: /kupit/ («Купить Premium») и /pokupki/ («Мои покупки»).
   Цвета, шрифты и кнопки — из site.css (переменные :root, .btn, .doc-hero, .plan__list).
   Сначала телефон: всё помещается в 360 px, поля и кнопки не ниже 44 px.
   Без анимаций, кроме коротких смен цвета; курсива нет (у Onest его нет).
   ═══════════════════════════════════════════════════════════════════ */

.buy-hero { padding-bottom: 40px; }
.buy-lead { max-width: 40em; margin: 0; color: var(--soft); font-size: clamp(1.02rem, 1.4vw, 1.16rem); line-height: 1.6; text-wrap: pretty; }

.buy-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(24px, 4vw, 48px); align-items: start; padding: 40px 0 110px; }
@media (max-width: 960px) { .buy-wrap { grid-template-columns: minmax(0, 1fr); max-width: 680px; } }

.buy-card { min-width: 0; padding: clamp(20px, 4vw, 36px); border: 1px solid var(--line); border-radius: var(--r); background: #0d1527; overflow-wrap: anywhere; }
.buy-side { display: grid; gap: 18px; min-width: 0; }
.buy-card--side { padding: clamp(20px, 3vw, 28px); background: rgba(255, 255, 255, 0.025); }

/* ───────── Поля ───────── */
.buy-field { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.buy-legend, .buy-label { display: block; margin: 0 0 12px; padding: 0; color: var(--text); font: 600 1.12rem/1.3 var(--f-display); letter-spacing: -0.01em; }
.buy-label { margin-bottom: 6px; }
.buy-hint { margin: 0 0 12px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.buy-hint--after { margin: 12px 0 0; }
.buy-hint[hidden], .buy-err[hidden], .buy-field[hidden] { display: none; }

.buy-input { display: block; width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(255, 255, 255, 0.04); color: var(--text); font: 500 1.05rem/1.3 var(--f-text); transition: border-color 0.2s, background-color 0.2s; }
.buy-input::placeholder { color: var(--muted); opacity: 0.75; }
.buy-input:hover { border-color: rgba(255, 255, 255, 0.24); }
.buy-input:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.buy-input[aria-invalid='true'] { border-color: #fb7185; }

/* Ошибка — текстом и значком «!», а не только цветом */
.buy-err { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; color: #fecdd3; font-size: 0.95rem; font-weight: 600; line-height: 1.45; }
.buy-err::before { content: '!'; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: #fb7185; color: #1a0508; font: 800 0.8rem/1 var(--f-text); }

/* ───────── Выбор тарифа: карточки-переключатели ───────── */
.buy-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .buy-plans { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.buy-plan { position: relative; display: flex; cursor: pointer; }
/* Сам переключатель невидим, но доступен с клавиатуры и для экранного диктора */
.buy-plan__input, .buy-seg input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.buy-plan__box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-content: start; width: 100%; min-height: 64px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 20px; background: rgba(255, 255, 255, 0.03); transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.buy-plan:hover .buy-plan__box { border-color: rgba(255, 255, 255, 0.26); }
.buy-plan__mark { grid-row: 1 / span 3; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--muted); border-radius: 50%; }
.buy-plan__mark::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.2s var(--ease-out); }
.buy-plan__name { grid-column: 2; grid-row: 1; color: var(--text); font: 600 1.08rem/1.3 var(--f-display); letter-spacing: -0.01em; }
.buy-plan__price { grid-column: 3; grid-row: 1; justify-self: end; color: var(--text); font: 600 1.2rem/1.25 var(--f-display); letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.buy-plan__term, .buy-plan__note { grid-column: 2 / 4; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.buy-plan__note { margin-top: 6px; color: var(--soft); }
/* Выбранный тариф: рамка толще, точка внутри кружка, фон — не только цвет */
.buy-plan__input:checked + .buy-plan__box { border-color: var(--accent); background: rgba(52, 211, 153, 0.08); box-shadow: inset 0 0 0 1px var(--accent); }
.buy-plan__input:checked + .buy-plan__box .buy-plan__mark { border-color: var(--accent); }
.buy-plan__input:checked + .buy-plan__box .buy-plan__mark::after { transform: scale(1); }
.buy-plan__input:focus-visible + .buy-plan__box { outline: 2px solid var(--mint); outline-offset: 3px; }
.buy-plan--founder .buy-plan__name { color: #fde68a; }
.buy-plan--founder .buy-plan__mark::after { background: var(--gold); }
.buy-plan--founder .buy-plan__input:checked + .buy-plan__box { border-color: var(--gold); background: rgba(251, 191, 36, 0.07); box-shadow: inset 0 0 0 1px var(--gold); }
.buy-plan--founder .buy-plan__input:checked + .buy-plan__box .buy-plan__mark { border-color: var(--gold); }

/* ───────── «Себе / в подарок» ───────── */
.buy-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 5px; border: 1px solid var(--line-2); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
.buy-seg label { position: relative; display: flex; cursor: pointer; }
.buy-seg span { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 13px; color: var(--muted); font-weight: 700; text-align: center; transition: background-color 0.2s, color 0.2s; }
.buy-seg span .i { display: none; }
.buy-seg label:hover span { color: var(--text); }
.buy-seg input:checked + span { background: rgba(52, 211, 153, 0.16); color: var(--mint); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.45); }
.buy-seg input:checked + span .i { display: block; }
.buy-seg input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 2px; }
.buy-seg + .buy-hint { margin: 12px 0 0; }

/* ───────── Отметка согласия ───────── */
.buy-check { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(255, 255, 255, 0.03); color: var(--text); font-weight: 600; line-height: 1.45; cursor: pointer; transition: border-color 0.2s; }
.buy-check:hover { border-color: rgba(255, 255, 255, 0.26); }
.buy-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.buy-check.is-invalid { border-color: #fb7185; }
.buy-links { margin: 10px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* ───────── Итог, оплата, кнопка ───────── */
.buy-total { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 0 0 18px; padding-top: 20px; border-top: 1px solid var(--line); }
.buy-total__label { display: block; color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.buy-total__what { display: block; color: var(--text); font-weight: 600; }
.buy-total__sum { color: var(--text); font: 600 clamp(1.9rem, 4vw, 2.4rem)/1 var(--f-display); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Значок замка — слева от первых строк, дальше текст идёт на всю ширину (на телефоне так меньше переносов) */
.buy-pay { display: flow-root; margin: 0 0 14px; padding: 16px 18px; border: 1px solid rgba(52, 211, 153, 0.25); border-radius: 18px; background: rgba(52, 211, 153, 0.06); color: var(--soft); font-size: 0.95rem; line-height: 1.55; }
.buy-pay > .i { float: left; width: 22px; height: 22px; margin: 1px 10px 0 0; color: var(--accent); }
.buy-pay p { margin: 0 0 0.5em; }
.buy-pay p:last-child { margin: 0; }
.buy-oferta { margin: 0 0 16px; color: var(--soft); font-size: 0.95rem; line-height: 1.5; }
.buy-submit { height: auto; min-height: 58px; padding: 14px 22px; line-height: 1.25; white-space: normal; text-align: center; }
.buy-submit[aria-disabled='true'] { cursor: progress; opacity: 0.7; transform: none; box-shadow: none; }
.buy-nw { white-space: nowrap; }

/* Сообщение после отправки. Блок всегда в разметке (для экранного диктора), пустой — без рамки */
.buy-status { margin-top: 16px; padding: 16px 18px; border: 1px solid rgba(96, 165, 250, 0.35); border-radius: 18px; background: rgba(96, 165, 250, 0.08); color: var(--text); font-size: 0.98rem; line-height: 1.55; }
.buy-status:empty { margin: 0; padding: 0; border: 0; }
.buy-status.is-ok { border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.08); }
.buy-status p { margin: 0 0 0.5em; }
.buy-status p:last-child { margin: 0; }
.buy-note { margin: 14px 0 0; color: var(--muted); font-size: 0.93rem; line-height: 1.5; }

/* ───────── Справка сбоку ───────── */
.buy-h2 { margin: 0 0 14px; color: var(--text); font: 600 1.15rem/1.3 var(--f-display); letter-spacing: -0.01em; }
.buy-list { flex: none; margin: 0 0 16px; }
.buy-small { margin: 0 0 0.7em; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
.buy-small:last-child { margin-bottom: 0; }
.buy-steps { margin: 0 0 16px; padding-left: 1.3em; color: var(--soft); font-size: 0.97rem; }
.buy-steps li { margin-bottom: 0.5em; line-height: 1.5; }
.buy-steps li::marker { color: var(--accent); font-weight: 700; }

@media (max-width: 640px) {
  .buy-wrap { padding-top: 28px; }
  .buy-plan__box { padding: 14px 16px; }
  .buy-submit { font-size: 1rem; }
}