/**
 * Stripe checkout — premium SaaS card (uses --sbc-* tokens from theme)
 */

.richet-subs {
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--sbc-space-8, 2rem);
  background: var(--sbc-surface, #fff);
  color: var(--sbc-text, #141820);
  border: 1px solid var(--sbc-border, #e2e5eb);
  border-radius: var(--sbc-radius-lg, 12px);
  box-shadow: var(--sbc-shadow-lg, 0 12px 32px rgba(20, 24, 32, 0.08));
  font-family: var(--sbc-font, Inter, system-ui, sans-serif);
}

.richet-subs * {
  box-sizing: border-box;
}

.richet-subs__summary {
  margin-bottom: var(--sbc-space-6, 1.5rem);
  padding-bottom: var(--sbc-space-6, 1.5rem);
  border-bottom: 1px solid var(--sbc-border, #e2e5eb);
}

.richet-subs__plan {
  font-size: var(--sbc-text-xs, 0.75rem);
  color: var(--sbc-accent, #2b59c3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--sbc-weight-semibold, 600);
}

.richet-subs__price {
  font-size: var(--sbc-text-2xl, 1.5rem);
  font-weight: var(--sbc-weight-semibold, 600);
  letter-spacing: -0.02em;
  margin-top: var(--sbc-space-2, 0.5rem);
  color: var(--sbc-text, #141820);
}

.richet-subs__form {
  display: flex;
  flex-direction: column;
  gap: var(--sbc-space-4, 1rem);
}

.richet-subs__field {
  display: flex;
  flex-direction: column;
  gap: var(--sbc-space-2, 0.5rem);
  font-size: var(--sbc-text-sm, 0.875rem);
  font-weight: var(--sbc-weight-medium, 500);
  color: var(--sbc-text-secondary, #4b5565);
}

.richet-subs__field input {
  padding: 0.625rem 0.875rem;
  background: var(--sbc-surface, #fff);
  color: var(--sbc-text, #141820);
  border: 1px solid var(--sbc-border-strong, #cdd2dc);
  border-radius: var(--sbc-radius-sm, 8px);
  font-size: var(--sbc-text-base, 1rem);
  font-family: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.richet-subs__field input:focus {
  outline: none;
  border-color: var(--sbc-accent, #2b59c3);
  box-shadow: var(--sbc-shadow-focus, 0 0 0 3px rgba(43, 89, 195, 0.22));
}

.richet-subs__btn {
  padding: 0.625rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--sbc-radius-sm, 8px);
  font-weight: var(--sbc-weight-semibold, 600);
  font-size: var(--sbc-text-sm, 0.875rem);
  font-family: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.richet-subs__btn--primary {
  background: var(--sbc-accent, #2b59c3);
  color: #fff;
  border-color: var(--sbc-accent, #2b59c3);
}

.richet-subs__btn--primary:hover:not([disabled]) {
  background: var(--sbc-accent-hover, #234aa8);
  border-color: var(--sbc-accent-hover, #234aa8);
}

.richet-subs__btn--primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.richet-subs__btn--secondary {
  background: transparent;
  color: var(--sbc-text-secondary, #4b5565);
  border-color: var(--sbc-border-strong, #cdd2dc);
}

.richet-subs__btn--secondary:hover {
  background: var(--sbc-bg-subtle, #eef0f4);
  color: var(--sbc-text, #141820);
}

.richet-subs__msg {
  min-height: 1.25em;
  margin: var(--sbc-space-2, 0.5rem) 0 0;
  font-size: var(--sbc-text-sm, 0.875rem);
  color: var(--sbc-text-muted, #6b7380);
}

.richet-subs__msg--ok {
  color: var(--sbc-success, #0f766e);
}

.richet-subs__msg--err {
  color: var(--sbc-destructive, #b42318);
}

.richet-subs__element {
  margin: var(--sbc-space-2, 0.5rem) 0;
}

.richet-subs--error {
  padding: var(--sbc-space-4, 1rem);
  background: var(--sbc-destructive-soft, #fef3f2);
  color: var(--sbc-destructive, #b42318);
  border: 1px solid color-mix(in srgb, var(--sbc-destructive, #b42318) 25%, transparent);
  border-radius: var(--sbc-radius-md, 10px);
  font-size: var(--sbc-text-sm, 0.875rem);
}