/* Form validation styles */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.required-indicator {
    color: var(--color-flame, #ef3a2d) !important;
    font-weight: bold !important;
}

.input-error {
    border-color: var(--color-flame, #ef3a2d) !important;
    border-width: 2px !important;
    background-color: rgba(239, 58, 45, 0.05) !important;
}

input.input-error, select.input-error, textarea.input-error {
    border-color: var(--color-flame, #ef3a2d) !important;
    border-width: 2px !important;
    background-color: rgba(239, 58, 45, 0.05) !important;
}


/* Form Validation Styles */

/* Required field indicator */
.required-indicator {
  color: var(--color-flame, #ef3a2d) !important;
  font-weight: bold !important;
}

/* Error state for inputs */
.input-error {
  border-color: var(--color-flame, #ef3a2d) !important;
  border-width: 2px !important;
  background-color: rgba(239, 58, 45, 0.05) !important;
}

.input-error:focus {
  animation: shake 0.6s !important;
  border-color: var(--color-flame, #ef3a2d) !important;
  box-shadow: 0 0 0 2px rgba(239, 58, 45, 0.3) !important;
}

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

/* Error message styling */
.form-error-message {
  color: var(--color-flame, #ef3a2d);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}