/* Billing feature styles. Split out of theme.css; loaded via index.html.
 * Shared tokens/UI-kit/layout live in theme.css. */

/* Billing: summary cards row */
.summary-row {
 display: grid;
 gap: 16px;
 grid-template-columns: 1fr;
 margin-top: 16px;
}

@media (min-width: 720px) {
 .summary-row {
  grid-template-columns: repeat(
   3,
   minmax(0, 1fr)
  );
 }
}

.summary-card {
 padding: 18px 0;
 gap: 12px;
}

.summary-card-body {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.summary-card-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 border-radius: var(--radius-sm);
 background: var(--muted);
 color: var(--muted-foreground);
}

.summary-card-icon.tone-violet {
 background: rgba(
  139,
  92,
  246,
  0.12
 );
 color: #7c3aed;
}

.summary-card-icon.tone-green {
 background: rgba(
  16,
  185,
  129,
  0.12
 );
 color: #059669;
}

.summary-card-label {
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted-foreground);
}

.summary-card-value {
 font-size: 20px;
 font-weight: 700;
 line-height: 1.2;
}

/* Billing: "Powered by Stripe" footer — pinned to the bottom of .page via
 * margin-top:auto inside the page's flex column. */
.stripe-footer {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 16px;
 margin-top: auto;
 padding-top: 20px;
 border-top: 1px solid
  var(--border);
 color: var(--muted-foreground);
 font-size: 13px;
}

.stripe-footer-powered {
 display: inline-flex;
 align-items: center;
 gap: 6px;
}

.stripe-wordmark {
 display: inline-flex;
 align-items: center;
}

.stripe-wordmark svg {
 height: 16px;
 width: auto;
}

.stripe-footer-sep {
 width: 1px;
 height: 14px;
 background: var(--border);
}

.stripe-footer-link {
 color: var(--muted-foreground);
 text-decoration: none;
}

.stripe-footer-link:hover,
.stripe-footer-link:focus-visible {
 color: var(--foreground);
 text-decoration: underline;
}