.form-field {
  position: relative;
  margin-bottom: 14px;
  width: 100%;
}

.form-field input {
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.form-field input:focus {
  outline: none;
  border-color: #4a90e2;
}

.form-field input.error {
  border-color: #e74c3c;
}

.error-message {
  position: absolute;
  bottom: -20px;
  left: 0;
  color: #e74c3c;
  font-size: 12px;
  opacity: 0;
  transform: translateY(10px);
  animation: slideUp 0.3s ease forwards;
}

.field-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: #a0aec0;
}

.form-field:has(.field-icon) input {
  padding-left: 40px;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
