/* ==========================================================================
   css/pages/contact.css — Contact Page Specific Styles
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   PANEL HEADERS
   ────────────────────────────────────────────────────────────────────────── */
.contact-info-panel h3 {
  font-size:     var(--text-2xl);
  margin-bottom: var(--space-8);
}

.contact-form-panel h3 {
  font-size:     var(--text-2xl);
  margin-bottom: var(--space-7);
  padding-top:   var(--space-3); /* clear the top accent bar */
}

/* ──────────────────────────────────────────────────────────────────────────
   SUBMIT BUTTON STATE HANDLING
   ────────────────────────────────────────────────────────────────────────── */
#submitBtn {
  width:           100%;
  justify-content: center;
  margin-top:      var(--space-2);
  gap:             var(--space-3);
}

#submitBtn .btn-spinner {
  display: none;
}

#submitBtn.is-loading .btn-spinner {
  display: inline-block;
}

#submitBtn.is-loading .btn-text {
  opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────────────────────
   CLOUDFLARE TURNSTILE CONTAINER
   ────────────────────────────────────────────────────────────────────────── */
.turnstile-wrap {
  display:         flex;
  justify-content: flex-start;
  margin-bottom:   var(--space-5);
}

/* Override Turnstile iframe to match dark theme */
.cf-turnstile iframe {
  border-radius: var(--radius-md) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   FORM RESPONSE ALERT (override for contact page spacing)
   ────────────────────────────────────────────────────────────────────────── */
#formResponse {
  margin-top:    var(--space-4);
  margin-bottom: var(--space-4);
}

/* ──────────────────────────────────────────────────────────────────────────
   MAP / LOCATION PLACEHOLDER
   ────────────────────────────────────────────────────────────────────────── */
.location-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-3) var(--space-5);
  background:    rgba(255, 255, 255, 0.03);
  border:        1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  color:         var(--text-muted);
  margin-top:    var(--space-8);
}

.location-chip span { color: var(--primary); }