/* ══════════════════════════════════════════════
   CONTACT FORM — feedback states (shared)
   Append to bottom of option-a.css & option-b.css
══════════════════════════════════════════════ */

/* ── Spinner animation ──────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 0.75s linear infinite; transform-origin: center; }

/* ── Feedback banner ────────────────────────── */
.form-feedback {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 9px;
  font-size: 0.93rem;
  line-height: 1.55;
  margin-bottom: 6px;
}
.form-feedback__icon { flex-shrink: 0; margin-top: 1px; }
.form-feedback__text { flex: 1; }
.form-feedback a { color: inherit; font-weight: 700; text-decoration: underline; }

.form-feedback--success {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #166534;
}
.form-feedback--success .form-feedback__icon { color: #16a34a; }

/* Dark theme (Option A) override */
.form-feedback--success-dark,
[data-theme="dark"] .form-feedback--success {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.25);
  color: #4ade80;
}

.form-feedback--error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #991b1b;
}
.form-feedback--error .form-feedback__icon { color: #dc2626; }

/* Dark theme (Option A) override */
[data-theme="dark"] .form-feedback--error {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.25);
  color: #fca5a5;
}
[data-theme="dark"] .form-feedback--error .form-feedback__icon { color: #f87171; }

/* ── Field error states ─────────────────────── */
.form-group.has-error input,
.form-group.has-error textarea {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}
.field-error {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  color: #dc2626;
  font-weight: 500;
}

/* Dark theme field errors */
[data-theme="dark"] .form-group.has-error input,
[data-theme="dark"] .form-group.has-error textarea {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}
[data-theme="dark"] .field-error { color: #fca5a5; }

/* ── Honeypot (visually hidden, accessible) ─── */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}