/* Styles spécifiques à la page de réinitialisation de mot de passe */
.reset-step {
  display: none;
  animation: fadeIn 0.3s ease;
}

.reset-step.active {
  display: block;
}

.verification-code {
  margin-bottom: 2rem;
}

.code-inputs {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.code-input {
  width: 50px;
  height: 60px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  font-size: 1.5rem;
  text-align: center;
  font-weight: 600;
  transition: all var(--transition-speed) ease;
}

.code-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  outline: none;
}

.resend-code {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.countdown {
  margin-top: 0.5rem;
  color: var(--text-light);
  display: none;
}

.resend-code a.disabled {
  color: var(--text-light);
  cursor: not-allowed;
  pointer-events: none;
}

.success-icon {
  font-size: 4rem;
  color: var(--success-color);
  margin-bottom: 1.5rem;
  animation: bounce 1s ease-in-out;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

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