/* Scoped to the contact page; existing shared styles stay unchanged. */
.contact-form {
  display: grid;
  gap: 20px;
  max-width: 620px;
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(24, 18, 58, 0.98), rgba(14, 10, 36, 0.98));
  box-shadow: var(--shadow);
}

/* Required text fields inherit the site's font and fixed theme palette. */
.contact-field { display: grid; gap: 8px; }
.contact-field label { color: var(--gold); font-size: 0.9rem; font-weight: 600; }

.contact-field input,
.contact-field textarea {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  background: var(--bg-deep);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}

.contact-field textarea { resize: vertical; min-height: 180px; }
.contact-field input:focus,
.contact-field textarea:focus { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.contact-note { margin-bottom: 0; font-size: 0.85rem; }
/* Verification gates sending; status remains readable on errors and narrow screens. */
.contact-actions { display: flex; flex-wrap: wrap; }
.contact-actions .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.contact-actions .btn:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.contact-verification { min-width: 0; }
.contact-status { margin-bottom: 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.contact-status[data-state="error"] { color: #ff9bb1; }
.contact-status[data-state="success"] { color: var(--gold-light); }
.contact-status[hidden] { display: none; }

/* Keep the spam trap off-screen without removing the field from the submitted form. */
.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 480px) {
  .contact-form { padding: 24px 18px; }
}