/* billing.css — Subscription Management & Billing History (Epic 23) */

.billing-page {
  max-width: 720px;
  margin: var(--space-12) auto;
  padding: 0 var(--space-5);
}

.billing-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
}

.billing-intro {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-8);
}

/* ── Tab navigation ────────────────────────────────── */
.billing-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-neutral-200, #e5e7eb);
  margin-bottom: var(--space-8);
  gap: 0;
}

.billing-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-500);
  cursor: pointer;
  transition: color var(--duration-150) var(--ease-out),
              border-color var(--duration-150) var(--ease-out);
}

.billing-tab:hover {
  color: var(--color-neutral-800);
}

.billing-tab[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.billing-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.billing-panel[hidden] { display: none; }

/* ── Plan card ─────────────────────────────────────── */
.plan-card {
  background: var(--color-surface-elevated, #f8fafc);
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.plan-card__left { flex: 1; min-width: 0; }

.plan-card__name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.plan-card__detail {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  margin-bottom: var(--space-1);
}

.plan-card__detail strong {
  color: var(--color-neutral-800);
}

.plan-card__provider {
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
  margin-top: var(--space-2);
}

/* ── Status badge ──────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 3px var(--space-3);
  border-radius: 999px;
  white-space: nowrap;
}

.status-badge--active {
  background: var(--color-band-leading-bg, rgb(22 163 74 / 0.1));
  color: var(--color-band-leading, #16a34a);
  border: 1px solid var(--color-band-leading-border, rgb(22 163 74 / 0.25));
}

.status-badge--cancelling {
  background: var(--color-band-stabilizing-bg, rgb(234 88 12 / 0.08));
  color: var(--color-band-stabilizing, #ea580c);
  border: 1px solid var(--color-band-stabilizing-border, rgb(234 88 12 / 0.25));
}

.status-badge--past-due {
  background: var(--color-band-at-risk-bg, rgb(220 38 38 / 0.08));
  color: var(--color-band-at-risk, #dc2626);
  border: 1px solid var(--color-band-at-risk-border, rgb(220 38 38 / 0.2));
}

.status-badge--free {
  background: var(--color-surface-inset, #e2e8f0);
  color: var(--color-neutral-600);
  border: 1px solid var(--color-border, #e2e8f0);
}

/* ── Action section ────────────────────────────────── */
.billing-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Cancel confirmation inline block ─────────────── */
.cancel-confirm {
  background: var(--color-band-stabilizing-bg);
  border: 1px solid var(--color-band-stabilizing-border, rgb(234 88 12 / 0.25));
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-top: var(--space-4);
}

.cancel-confirm__title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-800);
  margin-bottom: var(--space-3);
}

.cancel-confirm__msg {
  font-size: var(--text-sm);
  color: var(--color-neutral-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.cancel-confirm__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Free plan state ───────────────────────────────── */
.free-plan-card {
  background: var(--color-surface-elevated, #f8fafc);
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
}

.free-plan-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-700);
  margin-bottom: var(--space-2);
}

.free-plan-card__desc {
  font-size: var(--text-sm);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-5);
}

/* ── Payment history table ─────────────────────────── */
.history-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-neutral-200, #e5e7eb);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.history-table thead tr {
  background: var(--color-surface-elevated, #f8fafc);
  border-bottom: 1px solid var(--color-neutral-200, #e5e7eb);
}

.history-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--color-neutral-600);
  white-space: nowrap;
}

.history-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-neutral-100, #f3f4f6);
  vertical-align: middle;
}

.history-table tbody tr:last-child td {
  border-bottom: none;
}

.history-table tbody tr:hover td {
  background: var(--color-surface-elevated, #f8fafc);
}

/* history event badges */
.event-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 2px var(--space-2);
  border-radius: 999px;
}

.event-badge--paid {
  background: var(--color-band-leading-bg, rgb(22 163 74 / 0.1));
  color: var(--color-band-leading, #16a34a);
}

.event-badge--failed {
  background: var(--color-band-at-risk-bg, rgb(220 38 38 / 0.08));
  color: var(--color-band-at-risk, #dc2626);
}

.event-badge--refunded {
  background: var(--color-ai-light, rgb(99 102 241 / 0.08));
  color: var(--color-ai, #6366f1);
}

.history-invoice-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  /* Reset so a <button> variant matches the <a> link styling. */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.history-invoice-link:hover { text-decoration: underline; }
.history-invoice-link:disabled { opacity: .6; cursor: default; text-decoration: none; }

.history-failure {
  font-size: var(--text-xs);
  color: var(--color-band-at-risk, #dc2626);
  margin-top: 2px;
}

.history-empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-neutral-400);
  font-size: var(--text-sm);
}

.history-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-neutral-400);
  margin-top: var(--space-3);
  line-height: var(--leading-relaxed);
}

/* ── Shared buttons (reuse from account.css pattern) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-150) var(--ease-out),
              box-shadow var(--duration-150) var(--ease-out),
              transform var(--duration-150) var(--ease-out);
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn--secondary {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-surface-inset); }

.btn--danger-outline {
  background: transparent;
  color: var(--color-band-at-risk, #dc2626);
  border: 1.5px solid var(--color-band-at-risk, #dc2626);
}
.btn--danger-outline:hover:not(:disabled) { background: var(--color-error-bg); }

/* ── Banners ───────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.banner--error   { background: var(--color-status-error-bg);   color: var(--color-status-error-text);   border: 1px solid var(--color-status-error-border); }
.banner--success { background: var(--color-status-success-bg); color: var(--color-status-success-text); border: 1px solid var(--color-status-success-border); }
.banner__close { background: none; border: none; font-size: 1rem; cursor: pointer; color: inherit; }

/* .skeleton, @keyframes shimmer, .skeleton-line now in
   css/components/skeleton.css (loaded globally via base.css). */