/* ============================================================
   v5.6 — FORMULÁRIO ELEGANTE E PROPORCIONAL
   Camada FINAL: harmoniza tipografia, espaçamentos e botões
   sobre todas as camadas anteriores.
   ============================================================ */

/* ---------- CONTAINER ---------- */
body .form-progressive,
body #eligibility-form {
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(28, 24, 18, 0.08),
              0 2px 8px rgba(28, 24, 18, 0.04) !important;
  padding: 2rem 2.25rem !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

/* ---------- CONTAINER DE PROGRESSO (resetar a caixa cinza) ---------- */
body .form-progress {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
  box-shadow: none !important;
}

/* ---------- BARRA DE PROGRESSO ---------- */
body .form-progress-bar,
body #progress-bar {
  position: relative !important;
  height: 5px !important;
  width: 100% !important;
  background: #f0ece6 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin: 0 0 0.875rem 0 !important;
  box-shadow: none !important;
  display: block !important;
}
body .form-progress-bar::after,
body #progress-bar::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: var(--progress-width, 0%) !important;
  background: linear-gradient(90deg, #D4AF8F 0%, #B8956F 100%) !important;
  border-radius: 999px !important;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: block !important;
}

/* ---------- TEXTO "Etapa N de M" ---------- */
body .form-progress-text {
  text-align: center !important;
  color: #9a9285 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* ---------- DOTS DE ETAPA ---------- */
body .form-steps-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  margin-bottom: 1.5rem !important;
}
body .step-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #e3ddd2 !important;
  transition: all 0.3s ease !important;
}
body .step-dot.active {
  background: #D4AF8F !important;
  transform: scale(1.4) !important;
}
body .step-dot.completed {
  background: #B8956F !important;
}

/* ---------- CONTADOR "Etapa N de M" ---------- */
body .form-step-counter,
body #step-counter {
  text-align: center !important;
  color: #9a9285 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
}

/* ---------- TÍTULO E INTRO DA ETAPA ---------- */
body .form-step-title {
  color: #1a1a1a !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 0 1.25rem 0 !important;
  text-align: center !important;
}
body .form-step-intro {
  color: #5a5246 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  margin: 0 0 1rem 0 !important;
  text-align: center !important;
}

/* ---------- OPÇÕES (radio) ---------- */
body .form-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.625rem !important;
  margin: 0 !important;
}
body .form-option {
  width: 100% !important;
  min-height: 52px !important;
  padding: 0.875rem 1.125rem !important;
  background: #fafaf6 !important;
  border: 1.5px solid #e8e1d4 !important;
  border-radius: 10px !important;
  color: #2c2c2c !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
body .form-option:hover {
  background: #f5efe4 !important;
  border-color: #D4AF8F !important;
  transform: translateY(-1px) !important;
}
body .form-option.selected,
body .form-option:has(input:checked) {
  background: linear-gradient(135deg, #D4AF8F 0%, #B8956F 100%) !important;
  border-color: #B8956F !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(184, 149, 111, 0.25) !important;
}
body .form-option.selected::before,
body .form-option:has(input:checked)::before {
  content: '✓' !important;
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

/* ---------- INPUTS DO STEP 7 (NOME / EMAIL / TELEFONE) ---------- */
body .form-inputs {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  margin: 0 !important;
}
body .form-group {
  margin: 0 !important;
}
body .form-label {
  display: block !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #5a5246 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.4rem 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body .form-input {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  color: #1a1a1a !important;
  background: #fafaf6 !important;
  border: 1.5px solid #e8e1d4 !important;
  border-radius: 10px !important;
  line-height: 1.4 !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: none !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
}
body .form-input::placeholder {
  color: #b0a99a !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
body .form-input:focus {
  outline: none !important;
  border-color: #D4AF8F !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 143, 0.18) !important;
}

/* ---------- BOTÕES DE NAVEGAÇÃO (Voltar / Continuar) ---------- */
body .form-navigation {
  display: flex !important;
  gap: 0.75rem !important;
  margin: 1.75rem 0 0 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  flex-wrap: nowrap !important;
}
body .form-navigation .btn,
body .form-navigation #btn-prev,
body .form-navigation #btn-next {
  flex: 1 1 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 1.25rem !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease !important;
  white-space: nowrap !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box !important;
}
/* Voltar — secundário */
body .form-navigation #btn-prev,
body .form-navigation .btn-secondary {
  flex: 0 0 38% !important;
  background: #ffffff !important;
  color: #6b6256 !important;
  border: 1.5px solid #e0d8c8 !important;
  box-shadow: none !important;
}
body .form-navigation #btn-prev:hover:not(:disabled),
body .form-navigation .btn-secondary:hover:not(:disabled) {
  background: #faf6ef !important;
  border-color: #D4AF8F !important;
  color: #1a1a1a !important;
  transform: translateY(-1px) !important;
}
body .form-navigation #btn-prev:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Continuar — primário */
body .form-navigation #btn-next,
body .form-navigation .btn-primary {
  flex: 1 1 62% !important;
  background: linear-gradient(135deg, #D4AF8F 0%, #B8956F 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(184, 149, 111, 0.28) !important;
}
body .form-navigation #btn-next:hover:not(:disabled),
body .form-navigation .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(184, 149, 111, 0.38) !important;
}
body .form-navigation #btn-next:active,
body .form-navigation .btn-primary:active {
  transform: translateY(0) !important;
}

/* mata pulse no btn-next que distrai e cresce */
body .form-navigation #btn-next.btn-pulse,
body .form-navigation .btn-pulse {
  animation: none !important;
}

/* ---------- NOTA DE SEGURANÇA ---------- */
body .form-security-note {
  text-align: center !important;
  font-size: 0.8rem !important;
  color: #9a9285 !important;
  margin: 1rem 0 0 0 !important;
  padding: 0 !important;
}

/* ---------- SECTION-FINAL (tela de sucesso) ---------- */
body .section-final .final-content {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 2.5rem 2rem !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  box-shadow: 0 10px 36px rgba(28, 24, 18, 0.08) !important;
  text-align: center !important;
}
body .section-final .final-icon {
  font-size: 2.75rem !important;
  margin-bottom: 0.75rem !important;
}
body .section-final .final-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 1rem 0 !important;
}
body .section-final .final-text {
  font-size: 0.975rem !important;
  line-height: 1.6 !important;
  color: #4a4338 !important;
  margin: 0 0 1.75rem 0 !important;
}
body .section-final #kiwify-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 54px !important;
  padding: 0 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #D4AF8F 0%, #B8956F 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(184, 149, 111, 0.32) !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  animation: none !important;
}
body .section-final #kiwify-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(184, 149, 111, 0.42) !important;
}

/* ---------- ANIMAÇÃO DE TRANSIÇÃO ENTRE STEPS (mais suave) ---------- */
body .form-step {
  animation: none !important;
}
body .form-step.active {
  animation: formStepFade 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
@keyframes formStepFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- RESPONSIVO ---------- */
@media (max-width: 640px) {
  body .form-progressive,
  body #eligibility-form {
    padding: 1.5rem 1.25rem !important;
    border-radius: 12px !important;
  }
  body .form-step-title {
    font-size: 1.2rem !important;
  }
  body .form-option {
    min-height: 50px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
  }
  body .form-input {
    font-size: 1rem !important;
    padding: 0.75rem 0.875rem !important;
    min-height: 46px !important;
  }
  body .form-navigation {
    gap: 0.5rem !important;
  }
  body .form-navigation #btn-prev,
  body .form-navigation #btn-next,
  body .form-navigation .btn {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 0.9rem !important;
    padding: 0 0.75rem !important;
  }
  body .form-navigation #btn-prev,
  body .form-navigation .btn-secondary {
    flex: 0 0 36% !important;
  }
  body .form-navigation #btn-next,
  body .form-navigation .btn-primary {
    flex: 1 1 64% !important;
  }
  body .section-final .final-content {
    padding: 2rem 1.25rem !important;
  }
  body .section-final .final-title {
    font-size: 1.3rem !important;
  }
  body .section-final #kiwify-cta {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 0.95rem !important;
  }
}