/* ============================================================================
 * billing-modal.css — ONE presentation for every billing modal
 * (checkout, upgrade/downgrade review, scheduled replacement/cancellation,
 * payment return, expired/pending/error states) on /account/, /plans/ and
 * /xtract/plans/.
 *
 * SCOPED entirely under .fx-modal[data-fx-plan-modal]: the attribute exists
 * only on billing modals, so API-key/profile modals keep their own styling.
 * Loaded AFTER each page's stylesheet; the scoped specificity wins ties, so
 * page-local legacy modal-content rules are superseded without edits.
 *
 * THEMING [2026-08-05]. Every colour resolves from the shared tokens in
 * core/tokens.css, so the modal follows the established ForceX dark and light
 * themes. The few values with no token of their own (button fill, status
 * hues, backdrop) are declared as LOCAL custom properties with a dark default
 * and an explicit :root[data-theme="light"] override — the same mechanism
 * tokens.css uses. No hardcoded dark-only colour remains.
 * ========================================================================== */

.fx-modal[data-fx-plan-modal] {
  --fxbm-btn-bg: rgba(30, 41, 59, 0.55);
  --fxbm-btn-bg-hover: rgba(30, 41, 59, 0.78);
  --fxbm-btn-border: rgba(148, 163, 184, 0.38);
  --fxbm-btn-action-from: #2563eb;
  --fxbm-btn-action-to: #60a5fa;
  --fxbm-btn-action-from-hover: #1d4ed8;
  --fxbm-btn-action-to-hover: #3b82f6;
  --fxbm-btn-action-border: rgba(96, 165, 250, 0.74);
  --fxbm-btn-action-text: #fff;
  --fxbm-ok: #34d399;
  --fxbm-error: #f87171;
  --fxbm-pending: var(--muted);
  --fxbm-backdrop: rgba(0, 0, 0, 0.62);
}

:root[data-theme="light"] .fx-modal[data-fx-plan-modal] {
  --fxbm-btn-bg: var(--surface2);
  --fxbm-btn-bg-hover: #E2E8F0;
  --fxbm-btn-border: var(--border2);
  --fxbm-btn-action-from: #2563EB;
  --fxbm-btn-action-to: #3B82F6;
  --fxbm-btn-action-from-hover: #1D4ED8;
  --fxbm-btn-action-to-hover: #2563EB;
  --fxbm-btn-action-border: rgba(37, 99, 235, 0.55);
  --fxbm-btn-action-text: #fff;
  --fxbm-ok: #047857;      /* AA contrast on the light surface */
  --fxbm-error: #B91C1C;
  --fxbm-pending: var(--muted);
  --fxbm-backdrop: rgba(15, 23, 42, 0.38);
}

/* surface, border and backdrop follow the theme */
.fx-modal[data-fx-plan-modal] .fx-modal__dialog {
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text);
}
.fx-modal[data-fx-plan-modal] .fx-modal__backdrop { background: var(--fxbm-backdrop); }
.fx-modal[data-fx-plan-modal] .fx-modal__header { border-bottom: 1px solid var(--border); }
.fx-modal[data-fx-plan-modal] .fx-modal__header h3 { color: var(--text); }
.fx-modal[data-fx-plan-modal] .fx-modal__close { color: var(--muted2); }
.fx-modal[data-fx-plan-modal] .fx-modal__close:hover { color: var(--text); }
.fx-modal[data-fx-plan-modal] .fx-modal__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.fx-modal[data-fx-plan-modal] .fx-modal__close:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* structured label/value rows */
.fx-modal[data-fx-plan-modal] .fx-billing-modal__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
}
.fx-modal[data-fx-plan-modal] .fx-billing-modal__label { color: var(--muted2); }
.fx-modal[data-fx-plan-modal] .fx-billing-modal__value {
  color: var(--text);
  font-weight: var(--weight-semibold);
  text-align: right;
}

/* explanatory notes sit separated beneath the rows */
.fx-modal[data-fx-plan-modal] .fx-billing-modal__note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--muted2);
  max-width: 46ch;
}

/* body typography, spacing, and line length */
.fx-modal[data-fx-plan-modal] .fx-modal__body p {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0 0 var(--space-2);
  max-width: 46ch;
  color: var(--text);
}
.fx-modal[data-fx-plan-modal] .fx-billing-modal__wait { color: var(--muted2); }

/* settled states: consistent icon + heading */
.fx-modal[data-fx-plan-modal] .fx-plan-modal__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.fx-modal[data-fx-plan-modal] .fx-plan-modal__status strong {
  font-size: 1.02rem;
  font-family: var(--font-sans);
  color: var(--text);
}
.fx-modal[data-fx-plan-modal] .fx-plan-modal__icon {
  font-size: 1.3rem;
  line-height: 1;
}
.fx-modal[data-fx-plan-modal] .fx-plan-modal__status--ok      .fx-plan-modal__icon { color: var(--fxbm-ok); }
.fx-modal[data-fx-plan-modal] .fx-plan-modal__status--error   .fx-plan-modal__icon { color: var(--fxbm-error); }
.fx-modal[data-fx-plan-modal] .fx-plan-modal__status--pending .fx-plan-modal__icon { color: var(--fxbm-pending); }

/* footer: equal-dimension buttons; two columns, stacked full-width on mobile */
.fx-modal[data-fx-plan-modal] .fx-modal__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  border-top: 1px solid var(--border);
}
.fx-modal[data-fx-plan-modal] .fx-modal__footer > .fx-plan-button:only-child {
  grid-column: 1 / -1;
}
.fx-modal[data-fx-plan-modal] .fx-modal__footer .fx-plan-button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--fxbm-btn-border);
  background: var(--fxbm-btn-bg);
  color: var(--text);
  /* [button typography 2026-08-05] explicit — never font:inherit, so every
     page renders the identical control */
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--motion-base), border-color var(--motion-base);
}
.fx-modal[data-fx-plan-modal] .fx-modal__footer .fx-plan-button:hover:not(:disabled) {
  background: var(--fxbm-btn-bg-hover);
}
.fx-modal[data-fx-plan-modal] .fx-modal__footer .fx-plan-button:focus-visible {
  outline: 2px solid var(--accent-lt);
  outline-offset: 2px;
}
.fx-modal[data-fx-plan-modal] .fx-modal__footer .fx-plan-button--action {
  background: linear-gradient(135deg, var(--fxbm-btn-action-from), var(--fxbm-btn-action-to));
  border-color: var(--fxbm-btn-action-border);
  color: var(--fxbm-btn-action-text);
}
.fx-modal[data-fx-plan-modal] .fx-modal__footer .fx-plan-button--action:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--fxbm-btn-action-from-hover), var(--fxbm-btn-action-to-hover));
}
.fx-modal[data-fx-plan-modal] .fx-modal__footer .fx-plan-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}
@media (max-width: 560px) {
  .fx-modal[data-fx-plan-modal] .fx-modal__footer { grid-template-columns: 1fr; }
}