body {
  font-family: "Poppins", sans-serif;
  background-color: #ffffff;
}

.form-input:focus {
  border-color: #ff3e3e;
  box-shadow: 0 0 0 3px rgba(255, 62, 62, 0.1);
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.fade-in-up {
  animation: fadeInUp 0.7s ease-out forwards;
}

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

.pulse-light {
  animation: pulseLight 2s infinite;
}

@keyframes pulseLight {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 62, 62, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 62, 62, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 62, 62, 0);
  }
}

.tab-active {
  color: #111827;
  border-bottom: 2px solid #111827;
}

.tab-inactive {
  color: #6b7280;
  border-bottom: 2px solid transparent;
}

.form-slide-in {
  animation: slideIn 0.3s ease-out forwards;
}

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

.form-slide-out {
  animation: slideOut 0.3s ease-out forwards;
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

.role-option {
  transition: all 0.3s ease;
}

.role-option.active {
  border-color: #111827;
  background-color: rgba(17, 24, 39, 0.05);
}

.role-option.active .check-icon {
  opacity: 1;
}

.check-icon {
  opacity: 0;
  transition: opacity 0.3s ease;
}