/* Same visual language as the pricing buttons — this page is a sibling of it. */
.support-btn {
  display: inline-block;
  background: #0078d4;
  color: #fff !important;
  text-decoration: none !important;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95em;
  transition: background 0.2s;
}
.support-btn:hover { background: #1a8ae8; }
.support-btn.secondary { background: #333; border: 1px solid #555; }
.support-btn.secondary:hover { background: #444; }

.support-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 18px 0 8px;
}
.support-picker p { margin: 0 0 10px; }
/* One column on phones — two 300px columns would squash the labels. */
@media (max-width: 700px) { .support-picker { grid-template-columns: 1fr; } }

.prefill-box:not(:empty) {
  border: 1px solid #333;
  border-left: 3px solid #0078d4;
  border-radius: 4px;
  padding: 14px 16px;
  margin: 18px 0;
  background: rgba(0,120,212,0.06);
}
.prefill-box pre {
  font-size: 0.85em;
  padding: 10px 12px;
  margin: 8px 0 14px;
}
.prefill-note { font-size: 0.8em; color: #888; margin-bottom: 0 !important; }

/* ---- form ---- */
.support-form { margin: 20px 0 8px; max-width: 760px; }
.support-form label {
  display: block;
  font-weight: 600;
  font-size: 0.9em;
  margin: 16px 0 6px;
}
.support-form .req { color: #e05252; margin-left: 3px; }
.support-form .sf-opt { font-weight: 400; color: #888; }
.support-form input[type=text],
.support-form input[type=email],
.support-form select,
.support-form textarea {
  width: 100%;
  background: #1e1e1e;
  color: #EEE;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 9px 11px;
  font-size: 0.92em;
  font-family: inherit;
}
.support-form textarea { resize: vertical; min-height: 130px; }
.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
  outline: none;
  border-color: #0078d4;
}
.support-form input.sf-bad, .support-form textarea.sf-bad { border-color: #e05252; }
.support-form input[type=file] { font-size: 0.85em; color: #BBB; margin-top: 4px; }
.sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 700px) { .sf-row { grid-template-columns: 1fr; } }
.sf-hint { font-size: 0.8em; color: #888; margin: 6px 0 0; }
.sf-tech { margin: 18px 0; font-size: 0.85em; }
.sf-tech summary { cursor: pointer; color: #AAA; }
.sf-tech div { padding: 10px 0 0 14px; color: #999; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.sf-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.support-form button { margin-top: 20px; border: none; cursor: pointer; font-family: inherit; }
.support-form button:disabled { background: #444; cursor: default; }
.sf-status { margin-top: 12px; font-size: 0.9em; min-height: 1.2em; }
.sf-status.ok { color: #6fdc6f; }
.sf-status.bad { color: #FF6B6B; }
.cf-turnstile { margin-top: 20px; }