/* 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 — stacks below --bp-narrow (720px) */
.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;
}
/* Payment Methods tab cleanup — fixes the saved-method
 * rows that previously inherited .card's column layout (details + actions
 * stacked and centered) and tidies the section header + add-method footer. */

.pm-list-header {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 4px 0 12px;
}

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

.pm-list-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 18px;
 height: 18px;
 padding: 0 6px;
 border-radius: 999px;
 background: var(--muted);
 color: var(--muted-foreground);
 font-size: 11px;
 font-weight: 600;
}

.pm-list {
 display: flex;
 flex-direction: column;
 gap: 10px;
}

/* One saved method: brand/bank icon + name/detail on the left, actions
 * pinned right, everything vertically centered on a single line. */
.pm-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 14px 16px;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
}

/* Default method gets a subtle accent so it reads at a glance. */
.pm-row.is-default {
 border-color: color-mix(
  in srgb,
  var(--primary) 40%,
  var(--border)
 );
 box-shadow: inset 3px 0 0 0
  var(--primary);
}

.pm-row-main {
 display: flex;
 align-items: center;
 gap: 12px;
 min-width: 0;
}

.pm-row-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 flex-shrink: 0;
 border-radius: var(--radius-sm);
 background: var(--muted);
 color: var(--muted-foreground);
}

.pm-row-info {
 min-width: 0;
}

.pm-row-name {
 font-weight: 600;
 font-size: 14px;
 line-height: 1.3;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.pm-row-sub {
 font-size: 12px;
 color: var(--muted-foreground);
 line-height: 1.3;
}

.pm-row-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}

/* Add-method footer: helper text + outlined action, separated by a divider. */
.pm-add-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 margin-top: 16px;
 padding-top: 16px;
 border-top: 1px solid var(--border);
}

.pm-add-hint {
 font-size: 13px;
 color: var(--muted-foreground);
}

.pm-add-bar .btn-content {
 display: inline-flex;
 align-items: center;
 gap: 6px;
}

@media (max-width: 520px) {
 .pm-row {
  flex-direction: column;
  align-items: stretch;
 }

 .pm-row-actions {
  justify-content: flex-end;
 }
}