@import "tailwindcss";

/* Error styling for form validation */
.error-border {
  border-color: #ef4444 !important;
  border-width: 2px !important;
}

.normal-border {
  border-color: #d1fae5 !important;
}

.input-error {
  background-color: #fef2f2 !important;
}

.input-success {
  border-color: #10b981 !important;
  background-color: #f0fdf4 !important;
}

/* Shake animation for error fields */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* Focus states */
.focus\:ring-2:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.5);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .max-w-md {
    max-width: 90%;
  }
}

/* Hide/show classes */
.hidden {
  display: none !important;
}

/* Error message styling */
#error-message {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
}