/* ============================================================
   forms-validation.css
   Validation states, error/success messages, reCAPTCHA spacing
   ============================================================ */

/* ─── Field error message ──────────────────────────────────── */
.field-error-msg,
span.field-error-msg {
  display: block;
  color: #dc3545;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  line-height: 1.4;
}

/* ─── Input states ─────────────────────────────────────────── */
.form-control.input-error {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

.form-control.input-valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1) !important;
}

/* ─── reCAPTCHA container ──────────────────────────────────── */
.g-recaptcha {
  margin-top: 6px;
  margin-bottom: 4px;
}

/* Error shown below reCAPTCHA */
.recaptcha-error {
  display: block;
  color: #dc3545;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

/* ─── Form response messages (success / error) ─────────────── */
.form-response-msg {
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.form-success-msg {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.form-error-msg {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.form-response-msg .msg-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.2;
}

/* ─── Submit button: disabled state ───────────────────────── */
button[type="submit"]:disabled,
.btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}