/* ============================================
   CONTACT PAGE — Styles
   ============================================ */

/* Slightly wider than the login card to fit the two-column name/email row */
.contact-card {
  max-width: 620px;
}

/* Textarea matches the styled inputs (no left icon padding) */
.input-wrapper textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.55;
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  resize: vertical;
  min-height: 150px;
  transition: all var(--transition);
}
.input-wrapper textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgb(101 163 13 / 0.12);
}
.input-wrapper textarea::placeholder { color: var(--text-tertiary); }

/* Inline error text under fields */
.field-error {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
}

/* Success / error flash on the contact page */
.contact-alert {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.contact-alert.success {
  background: var(--accent-light);
  color: var(--accent-hover);
}
.contact-alert.error {
  background: #fee2e2;
  color: #dc2626;
}
[data-theme="dark"] .contact-alert.error {
  background: #450a0a;
  color: #fca5a5;
}