/* forms.css — shared styling for the public Feedback + Contact form
 * pages. Previously these rules were inlined into feedback.php (~6 KB)
 * and contact.php (~5 KB) on every render. Extracted here so the bytes
 * ship once per visitor (cached by the browser), HTML responses get
 * smaller, and view-source stays clean.
 *
 * Both surfaces use the same CSS-variable strategy as the rest of the
 * site (--bg-card, --border, --text-main, etc., defined in style.css),
 * so light / dark themes Just Work without per-page overrides.
 *
 * Two near-identical class trees live below — one prefixed `feedback-*`
 * / `fb-*` and one `contact-*` / `ct-*`. We intentionally keep them as
 * separate trees rather than collapsing into a shared `.form-card`
 * because the markup differs slightly and merging would create
 * cross-page coupling that's a pain to debug.
 */

/* ════════════════════════════════════════════════════════════════════
 *  Feedback page (/feedback)
 * ════════════════════════════════════════════════════════════════════ */

.feedback-section { padding: 3rem 0; }
.feedback-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  color: var(--text-main);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.feedback-card h1 { color: var(--text-main); }
.feedback-card .text-muted { color: var(--text-muted) !important; }
.feedback-card .form-label { color: var(--text-main); }
.feedback-card .form-control,
.feedback-card .form-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
}
.feedback-card .form-control:focus,
.feedback-card .form-select:focus {
  background: var(--bg-input);
  color: var(--text-main);
  border-color: var(--brand, #FF3B69);
  box-shadow: 0 0 0 0.18rem rgba(var(--brand-rgb, 255, 59, 105), 0.18);
}
.feedback-card .form-control::placeholder { color: var(--input-placeholder); }
.feedback-member-alert {
  background: rgba(var(--brand-rgb, 255, 59, 105), 0.08);
  border: 1px solid rgba(var(--brand-rgb, 255, 59, 105), 0.22);
  color: var(--brand-light, var(--brand, #FF3B69));
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.feedback-thanks-icon { font-size: 3rem; line-height: 1; margin-bottom: .5rem; color: #0CBC61; }
.feedback-head-icon { font-size: 2.25rem; color: var(--brand, #FF3B69); }

/* ─── Submit-button loading state (shared by both forms) ───────────
 * When the JS interceptor is in flight, .is-loading dims the button,
 * swaps the cursor, and replaces the leading icon with a spinner via
 * the ::before pseudo-element so we don't have to re-render the inner
 * HTML mid-request. */
.btn-brand.is-loading {
  pointer-events: none;
  opacity: 0.85;
  cursor: progress;
}
.btn-brand.is-loading .bi-send { display: none; }
.btn-brand.is-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: fb-spin 0.7s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }

/* ─── Thank-you modal (feedback) ────────────────────────────────────
 * Self-contained — full-viewport fixed overlay with a blurred
 * backdrop, centered rounded card, brand-tinted success ring, and a
 * small fade-in animation. Uses the same CSS variables as the rest
 * of the site, so it themes correctly in light + dark. */
.fb-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.fb-modal[hidden] { display: none; }
.fb-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fb-modal-fade 0.18s ease-out;
}
[data-theme="light"] .fb-modal__backdrop { background: rgba(15, 23, 42, 0.45); }
.fb-modal__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4),
              0 2px 8px rgba(0, 0, 0, 0.2);
  animation: fb-modal-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}
[data-theme="light"] .fb-modal__card {
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.16),
              0 1px 4px rgba(15, 23, 42, 0.08);
}
@keyframes fb-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fb-modal-pop {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.fb-modal__close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  transition: background .15s ease, color .15s ease;
}
.fb-modal__close:hover {
  background: var(--bg-input);
  color: var(--text-main);
}
.fb-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(12, 188, 97, 0.12);
  color: #0CBC61;
  font-size: 2rem;
  box-shadow: 0 0 0 6px rgba(12, 188, 97, 0.06);
}
.fb-modal__title {
  font-family: var(--font-heading, 'Space Grotesk'), sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.fb-modal__body {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.fb-modal__actions {
  display: flex;
  justify-content: center;
}
.fb-modal__actions .btn-brand {
  min-width: 140px;
}

/* Lock the body scroll while the modal is open. Toggled by the JS
 * interceptor via the `fb-modal-open` class on <body>. */
body.fb-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fb-modal__backdrop,
  .fb-modal__card,
  .btn-brand.is-loading::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
 *  Contact page (/contact)
 *  Same visual language as the feedback page; classes are prefixed
 *  separately (.contact-*, .ct-*) to keep the trees independently
 *  editable. The .btn-brand.is-loading rules above are shared.
 * ════════════════════════════════════════════════════════════════════ */

.contact-section { padding: 3rem 0; }
.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  color: var(--text-main);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.contact-card h1 { color: var(--text-main); }
.contact-card .text-muted { color: var(--text-muted) !important; }
.contact-card .form-label { color: var(--text-main); }
.contact-card .form-control {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
}
.contact-card .form-control:focus {
  background: var(--bg-input);
  color: var(--text-main);
  border-color: var(--brand, #FF3B69);
  box-shadow: 0 0 0 0.18rem rgba(var(--brand-rgb, 255, 59, 105), 0.18);
}
.contact-card .form-control::placeholder { color: var(--input-placeholder); }
.contact-thanks-icon { font-size: 3rem; line-height: 1; margin-bottom: .5rem; color: #0CBC61; }
.contact-head-icon { font-size: 2.25rem; color: var(--brand, #FF3B69); }

/* Honeypot — hidden from real humans + autocomplete-disabled so
 * password managers don't autofill it. Bots that crawl the DOM and
 * submit every <input> they see WILL fill this; we drop those
 * server-side and silently send them to the success page. */
.ct-trap {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ct-* spinner is identical to fb-* but uses its own @keyframes name
 * so the two surfaces stay independent if either ever wants to tune
 * its own animation speed. */
.btn-brand.is-loading::before {
  animation: ct-spin 0.7s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* Thank-you modal — same visual language as the feedback modal. */
.ct-modal {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.ct-modal[hidden] { display: none; }
.ct-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ct-modal-fade 0.18s ease-out;
}
[data-theme="light"] .ct-modal__backdrop { background: rgba(15, 23, 42, 0.45); }
.ct-modal__card {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4),
              0 2px 8px rgba(0, 0, 0, 0.2);
  animation: ct-modal-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] .ct-modal__card {
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.16),
              0 1px 4px rgba(15, 23, 42, 0.08);
}
@keyframes ct-modal-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ct-modal-pop {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.ct-modal__close {
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px;
  color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.ct-modal__close:hover { background: var(--bg-input); color: var(--text-main); }
.ct-modal__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(12, 188, 97, 0.12);
  color: #0CBC61;
  font-size: 2rem;
  box-shadow: 0 0 0 6px rgba(12, 188, 97, 0.06);
}
.ct-modal__title {
  font-family: var(--font-heading, 'Space Grotesk'), sans-serif;
  font-size: 1.35rem; font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem; letter-spacing: -0.01em;
}
.ct-modal__body { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; margin: 0 0 1.5rem; }
.ct-modal__actions { display: flex; justify-content: center; }
.ct-modal__actions .btn-brand { min-width: 140px; }
body.ct-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ct-modal__backdrop,
  .ct-modal__card { animation: none; }
}