/* billing/page.css */

.page-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 30px;
}

#page-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-brand-icon {
  font-size: 26px;
  line-height: 1;
}

.section-month-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--label-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 16px 6px;
}

/* ── Redesign (2026-10) ───────────────────────────────────────────────────── */

/* Payment method on the right, subscriptions and invoices on the left */
@media (min-width: 1100px) {
  .billing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .billing-side { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
  .billing-main { grid-column: 1; grid-row: 1; }
}

.card-brand-icon {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .85);
}
.card-on-file__details { align-self: flex-end; }
#btn-manage-card { justify-content: center; }
#btn-manage-card .row__label { color: var(--accent-strong) !important; font-weight: 750; }

/* ── Billing, as in the mock ─────────────────────────────────────────────── */

.billing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) {
  .billing-grid { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
  .billing-side { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
  .billing-main { grid-column: 1; grid-row: 1; }
}
@media (max-width: 1099px) {
  .billing-side { order: -1; }
  .billing-grid { display: flex; flex-direction: column; }
}
.billing-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.billing-side { display: flex; flex-direction: column; gap: 16px; }

.bill-card { padding: 8px 24px 10px; border-radius: 22px; }
.bill-card__title { font-family: var(--font-display); font-size: 21px; font-weight: 800; margin: 18px 0 6px; }
.bill-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--separator); }
.bill-row__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  background: var(--accent-bg);
}
.bill-row__body { flex: 1; min-width: 0; }
.bill-row__title { font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; }
.bill-mono { font-family: var(--font-mono); font-weight: 650; }
.bill-row__sub { font-size: 13px; color: var(--label-3); margin-top: 2px; }
.bill-row__end { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.bill-row__amount { font-weight: 800; font-size: 15.5px; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.bill-warn { color: var(--orange-text); font-weight: 650; }
.bill-empty { padding: 16px 0 18px; border-top: 1px solid var(--separator); color: var(--label-3); }

.pay-card {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(43, 136, 235, .6), transparent 62%),
    linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
  box-shadow: 0 22px 44px rgba(28, 28, 46, .3);
}
.pay-card__top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.pay-card__number { font-family: var(--font-mono); font-size: 22px; font-weight: 650; letter-spacing: .06em; }
.pay-card__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; opacity: .85; }
.pay-card--empty .pay-card__number { font-family: var(--font); letter-spacing: 0; font-size: 18px; }
.pay-update {
  background: var(--bg-surface);
  color: var(--accent-strong);
  border: 2px solid var(--accent-ring);
}
.pay-update:hover { border-color: var(--accent); }
.pay-note { font-size: 13px; line-height: 1.55; color: var(--label-3); text-align: center; }
@media (max-width: 520px) {
  .bill-card { padding: 4px 16px 8px; }
  .bill-row__end { flex-direction: column; align-items: flex-end; gap: 6px; }
  .pay-card__number { font-size: 18px; }
}