/* ============================================================================
   Cores da marca My Orbit — troque as variáveis abaixo pelas cores da marca.
   [COR_PRIMARIA] [COR_ACCENT] [COR_FUNDO] [COR_TEXTO]
   Esquema padrão: escuro/profissional com accent vibrante (laranja).
   ============================================================================ */
:root {
  --color-bg: #0b0e14;          /* [COR_FUNDO] */
  --color-bg-card: #141824;
  --color-bg-elevated: #1b202f;
  --color-border: #262c3d;
  --color-text: #f5f6f8;        /* [COR_TEXTO] */
  --color-text-muted: #9aa2b5;
  --color-primary: #6c5ce7;     /* [COR_PRIMARIA] */
  --color-accent: #ff6a3d;      /* [COR_ACCENT] */
  --color-error: #ff5470;
  --color-success: #2ecc71;
  --font-main: 'Inter', system-ui, -apple-system, sans-serif; /* [FONTE] */
}

* {
  font-family: var(--font-main);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Esconde o honeypot de forma que só bots (que preenchem tudo via DOM) caiam nele. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.step-panel {
  animation: step-in 0.28s ease both;
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.progress-bar-fill {
  transition: width 0.35s ease;
}

.field-error {
  color: var(--color-error);
  font-size: 0.8125rem;
  margin-top: 0.25rem;
  display: none;
}

.field-error.visible {
  display: block;
}

input.invalid,
select.invalid,
textarea.invalid {
  border-color: var(--color-error) !important;
}

.checkbox-card,
.radio-card {
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.checkbox-card:has(input:checked),
.radio-card:has(input:checked) {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card));
}

.btn-spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn-spinner.visible {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}