/* ============================================================
   Hypomeister — support page
   ============================================================ */

.support-inner { max-width: 620px; }

.support-direct {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--fg-3);
  margin: 20px 0 44px;
}
.support-direct a {
  color: var(--primary-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.support-direct a:hover { color: var(--fg-1); }

/* ── Form ── */
.support-form {
  display: flex; flex-direction: column; gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: clamp(20px, 4vw, 32px);
  box-shadow: var(--shadow-float);
}

.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row.split { flex-direction: row; gap: 16px; }
.form-row.split > * { flex: 1; min-width: 0; }

.form-row label {
  font-size: 13px; font-weight: 600;
  color: var(--fg-2); letter-spacing: 0.1px;
}
.form-row .req { color: var(--primary-300); }

.support-form input[type="text"],
.support-form input[type="email"],
.support-form select,
.support-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 13px 16px;
  color: var(--fg-1);
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s, background .2s;
}
.support-form textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.support-form input::placeholder,
.support-form textarea::placeholder { color: var(--fg-4); }
.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
  outline: none;
  border-color: var(--border-glow);
  background: rgba(59,130,246,0.06);
}
.support-form select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 44px;
}

/* honeypot — hidden from real users, still in the tab order for humans to skip visually but bots see it */
.hp-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.support-form .btn { align-self: flex-start; min-width: 200px; }

.form-status {
  margin: 0; font-size: 14px; min-height: 20px;
}
.form-status.success { color: #34D399; }
.form-status.error { color: #F87171; }