/*
 * Billing page styles.
 *
 * Plan cards: 3-column grid above 720px, single column below for readability
 * on narrow viewports / screen-reader linearization. Cadence toggle uses the
 * existing .btn--toggle pattern from base.css.
 *
 * Visible focus rings inherit from accessibility.css (WCAG AA contrast
 * already covered there).
 */

.page--billing .card {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #d8dee4);
}

.page--billing .card__actions {
  margin-top: 1rem;
}

.cadence-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border, #d8dee4);
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

.btn--toggle {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--text-secondary, #4a5568);
}

.btn--toggle.is-active {
  background: var(--brand, #1a5f7a);
  color: #ffffff;
}

.plan-group {
  margin-top: 1.5rem;
}

.plan-group > h3 {
  margin-bottom: 0.75rem;
}

.plan-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .plan-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.plan-card {
  border: 1px solid var(--border, #d8dee4);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: var(--surface, #ffffff);
  display: flex;
  flex-direction: column;
}

.plan-card--coming-soon {
  opacity: 0.6;
}

.plan-card__title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.plan-card__amount {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text, #1a202c);
}

.plan-card__unit {
  font-size: 0.85rem;
  color: var(--text-secondary, #4a5568);
}

.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: var(--text-secondary, #4a5568);
}

.plan-card__features li {
  padding: 0.15rem 0;
  border-bottom: 1px solid var(--border-soft, #edf1f5);
}

.plan-card__features li:last-child {
  border-bottom: none;
}

.plan-card__cta {
  margin-top: auto;
  align-self: stretch;
}

.payment-methods {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.payment-method-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft, #edf1f5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.payment-method-row:last-child {
  border-bottom: none;
}

.payment-method__brand {
  font-weight: 600;
  font-variant: small-caps;
}

.payment-method__last4 {
  font-family: var(--font-mono, ui-monospace, monospace);
}

.payment-method__exp {
  color: var(--text-secondary, #4a5568);
  font-size: 0.85rem;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid currentColor;
}

.badge--default {
  color: var(--brand, #1a5f7a);
}

.banner {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.banner--error {
  background: #fef1f1;
  color: #8a2a2a;
  border: 1px solid #f5c6c6;
}