/* === Inline Form Validation === */
.form-input.input-error {
  border-color: var(--error);
  background-color: #fff8f8;
  animation: shake 0.4s ease-in-out;
}

.form-input.input-error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.1);
}

.error-text {
  display: block;
  color: var(--error);
  font-size: var(--text-xs);
  margin-top: 6px;
  font-weight: 500;
  animation: slideDown 0.3s ease-out forwards;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

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