/* Water Weaver Solutions — Form Validation & Notification Styles */

/* Invalid input styling */
input.error,
select.error,
textarea.error {
  border-color: #E53E3E !important;
  background-color: #FFF5F5 !important;
  box-shadow: 0 0 0 1px #E53E3E !important;
}

/* Valid input state (optional subtle feedback) */
input.valid:not([type="hidden"]),
select.valid,
textarea.valid {
  border-color: #10B981 !important;
}

/* Error message label */
label.error {
  display: block;
  color: #DC2626 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 5px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
}

/* Form status alerts (Success, Error, Loading) */
.form-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  display: none;
  margin-bottom: 14px;
  box-sizing: border-box;
  width: 100%;
}

.form-alert.is-visible {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  animation: formAlertFadeIn 0.3s ease-out;
}

.form-alert svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.form-alert.success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.form-alert.error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

.form-alert.loading {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #BFDBFE;
}

/* Loading button state */
button.btn-loading {
  opacity: 0.8 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: formSpin 0.75s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes formSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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