/**
 * OTP Validation CSS
 * Styling for OTP verification UI
 */

#sendOtpBtn:disabled, #submitBtn:disabled, .submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.otp-verified {
  border-color: #28a745 !important;
  background-color: #f0fff4 !important;
}

#otpSection {
  animation: slideDown 0.3s ease-in-out;
}

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

.otp-button {
  position: absolute;
  right: 5px;
  top: 5px;
  background-color: #05a2e9;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.otp-button:hover:not(:disabled) {
  background-color: #0489c7;
}

.otp-button.verify {
  background-color: #28a745;
}

.otp-button.verify:hover:not(:disabled) {
  background-color: #218838;
}

#email_error, #otp_error {
  color: #f70000;
  font-size: 12px;
  display: block;
  margin-top: 5px;
}

#otp_success {
  color: #28a745;
  font-size: 12px;
  display: block;
  margin-top: 5px;
}

#otpTimer {
  margin-top: 5px;
  font-size: 12px;
  color: #666;
  font-weight: 500;
}