/*
 * CP-12 Payment method card — app/components/ui/payment_method_card_component.rb
 *
 * A CN-01 glass card row: icon frame, masked brand/number (tabular),
 * status badge, and an optional danger-ghost "Remove" action beneath.
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

.ui-payment-method-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ui-payment-method-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-ink-muted);
}

.ui-payment-method-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}

.ui-payment-method-card__masked {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  font-variant-numeric: var(--numeric-tabular);
}

.ui-payment-method-card__expiry {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-variant-numeric: var(--numeric-tabular);
}

.ui-payment-method-card__actions {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
}