/* css/recuperar.css */

/* Garante que o card fique centralizado verticalmente */
.recovery-wrapper {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estilo do Card */
.card-recovery {
  max-width: 480px;
  width: 100%;
  border: none;
  /* Sombra suave que se adapta levemente */
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Animação de transição entre passos */
.step-container {
  display: none;
}

.step-active {
  display: block;
  animation: slideUpFade 0.4s ease-out forwards;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Input do código (letras grandes e espaçadas) */
.input-code {
  letter-spacing: 0.5em;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-family: monospace;
}

/* Ajuste de ícones grandes */
.icon-large {
  font-size: 4rem;
}
/* css/recuperar.css */

.recovery-wrapper {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-recovery {
  max-width: 480px;
  width: 100%;
  border: none;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  overflow: hidden; /* Importante para animações não vazarem */
  transition: height 0.3s ease; /* Suaviza mudança de tamanho do card */
}

/* Animações */
.step-container {
  display: none;
}

.step-active {
  display: block;
  animation: fadeInSlide 0.5s ease-out forwards;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* INPUT CÓDIGO */
.input-code {
  letter-spacing: 0.5em;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-family: monospace;
}

.icon-large {
  font-size: 4rem;
}

/* LOADING CHARMOSO ENTRE TELAS */
#step-loading {
  display: none; /* Oculto por padrão */
  text-align: center;
  padding: 3rem 0;
}

.spinner-charm {
  width: 3rem;
  height: 3rem;
  border-width: 0.25em;
}