/* «Пополнить Silk» (landing/pages/topup.html): sólo lo propio de la página;
   tarjetas, botones y categorías reutilizan site.css (.item, .btn, .cat). */
.topup { padding-top: 40px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 24px; }
.topup-bar { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.topup-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.topup-group-label { font-family: var(--f-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin-right: 8px; }
.topup-group .cat[hidden] { display: none; }
.topup-items { flex: none; }
.topup-item { position: relative; }
.topup-item h2 { font-family: var(--f-display); font-weight: 400; font-size: 28px; }
.topup-item.is-popular { border-color: var(--gold-deep); }
.topup-badge { position: absolute; top: 14px; right: 14px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-gold); background: var(--gold); padding: 2px 8px; }
.topup-bonus { color: #A9D18E !important; }
.topup-status:empty { display: none; }
.topup-status { margin: 0; color: var(--soft); }
.topup-return, .topup-test { padding: 14px 18px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-strong); }
.topup-return[data-kind="success"] { border-color: #5E8A4A; }
.topup-return[data-kind="cancel"] { border-color: var(--gold-deep); }
.topup-test { border-color: var(--gold-deep); color: var(--gold-text); }
.topup-return[hidden], .topup-test[hidden] { display: none; }
.topup-how { max-width: 72ch; }
.topup-how h2 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 400; font-size: 30px; color: var(--text-strong); }
.topup-how ol { margin: 0; padding-left: 22px; color: var(--soft); }
.topup-how li + li { margin-top: 6px; }
.topup-actions { margin: 16px 0 0; }
.topup-actions a[hidden] { display: none; }
.topup-legal { max-width: 72ch; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; }
.topup-legal p { margin: 0 0 6px; }
@media (max-width: 720px) {
  .topup { padding-top: 24px; gap: 18px; }
  .topup-bar { flex-direction: column; align-items: stretch; }
  .topup-item h2 { font-size: 22px; }
}