/* Controle: area principal da tela de cadastro (.cadastro-wrapper). */
.cadastro-wrapper {
  max-width: 760px;
  margin: 0 auto;
}

/* Controle: card principal da pagina de cadastro (.cadastro-wrapper .card). */
.cadastro-wrapper .card {
  text-align: center;
}

/* Controle: area circular do logo no topo do card de cadastro (.cadastro-logo-wrap). */
.cadastro-logo-wrap {
  width: 92px;
  height: 92px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 1px solid #33558f;
  background: radial-gradient(circle at 30% 30%, #1d335a 0%, #0f1a2d 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(5, 12, 24, 0.45);
}

/* Controle: imagem do logo dentro do circulo do cadastro (.cadastro-logo). */
.cadastro-logo {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

/* Controle: formulario wizard de cadastro (#cadastro-form). */
#cadastro-form {
  max-width: 560px;
  margin: 0 auto;
}

/* Controle: labels padrao de todos os campos do formulario (#cadastro-form label). */
#cadastro-form label {
  text-align: center;
}

/* Controle: container de cada etapa do wizard (.wizard-step). */
.wizard-step {
  display: none;
  gap: 12px;
}

/* Controle: etapa atualmente ativa do wizard (.wizard-step.is-active). */
.wizard-step.is-active {
  display: grid;
}

/* Controle: etapa 1 (e-mail) do wizard (.wizard-step[data-step="1"]). */
.wizard-step[data-step="1"] {
  gap: 20px;
}

/* Controle: blocos internos da etapa 1 (label + input/botao). */
.wizard-step[data-step="1"] > div {
  display: grid;
  gap: 12px;
}

/* Controle: label do campo e-mail na etapa 1 (.wizard-step[data-step="1"] label). */
.wizard-step[data-step="1"] label {
  margin-bottom: 0;
  text-align: left;
}

/* Controle: campo e botao da etapa 1 (.wizard-step[data-step="1"] input/button). */
.wizard-step[data-step="1"] input,
.wizard-step[data-step="1"] button {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Controle: area do captcha anti-robo na etapa 1 de cadastro. */
.wizard-step[data-step="1"] .captcha-container {
  display: flex;
  justify-content: center;
}

/* Controle: texto de preview de e-mail exibido entre etapas (.email-preview-box). */
.email-preview-box {
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Controle: preview de e-mail na etapa 2 de confirmacao. */
.wizard-step[data-step="2"] .email-preview-box {
  color: #86efac;
}

/* Controle: area de acoes de verificacao (botoes Avancar/Validar codigo). */
.verification-actions {
  display: flex;
  justify-content: center;
}

/* Controle: botao dentro da area de acoes de verificacao. */
.verification-actions button {
  width: auto;
  min-width: 220px;
}

/* Controle: mensagem de feedback do cadastro (#cadastro-feedback). */
.cadastro-feedback {
  min-height: 20px;
  margin: 0;
  font-size: 0.92rem;
}

/* Controle: estado de erro da mensagem de feedback (.cadastro-feedback.is-error). */
.cadastro-feedback.is-error {
  color: #fca5a5;
}

/* Controle: estado de sucesso da mensagem de feedback (.cadastro-feedback.is-success). */
.cadastro-feedback.is-success {
  color: #86efac;
}