/* support.css — extras on top of delete.css (form-card, field, state-card, aside) */

.field select {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1.5px solid transparent;
  border-radius: 18px;
  background: var(--in);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  box-shadow: var(--inset);
}
.field select:focus-visible { outline: 3px solid var(--prt); outline-offset: 2px; }
.field select[aria-invalid] { border: 1.5px solid var(--si); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Honeypot: invisible to people, tempting to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--r-btn);
  background: var(--pri);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 800;
  box-shadow: 5px 5px 12px var(--sd), -5px -5px 12px var(--sl);
  cursor: pointer;
  transition: box-shadow var(--press) ease, filter var(--press) ease;
  touch-action: manipulation;
}
.send-button:active { box-shadow: var(--inset); filter: brightness(0.92); }
.send-button:disabled { opacity: 0.55; cursor: progress; box-shadow: var(--inset); }

.direct { margin-top: 20px; color: var(--mut); font-size: 0.9375rem; }
.direct a { color: var(--prt); font-weight: 700; }

/* Quick answers */
.delete-layout { padding-bottom: 24px; }
.faq { width: var(--wrap); margin: 0 auto 96px; }
.faq h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 16px; }
.faq details {
  margin-bottom: 12px;
  padding: 0 24px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--ed);
  box-shadow: var(--raised-s);
}
.faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 700;
  font-size: 1.0625rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 800; color: var(--prt); }
.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) { color: var(--mut); margin: 0 0 14px; }
.faq details ul { padding-left: 20px; }
.faq details a { color: var(--prt); font-weight: 700; }