/* ============================
   Support Form (Contact Form 7)
============================ */
.wq-support-form {
  max-width: 760px;
  margin: 0 auto;
}

/* Honeypot anti-spam field: hidden from sighted users and screen readers,
   but present in the DOM for simple bots to auto-fill. */
.wq-support-form .wq-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wq-support-form label,
.wq-support-form .wq-field {
  display: block;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 700;
}

.wq-support-form input[type="text"],
.wq-support-form input[type="email"],
.wq-support-form input[type="date"],
.wq-support-form select,
.wq-support-form textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(185, 204, 255, 0.15);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(19, 45, 91, .5), rgba(2, 10, 27, .62));
  color: var(--white);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
}

.wq-support-form textarea {
  min-height: 150px;
  resize: vertical;
}

.wq-support-form input::placeholder,
.wq-support-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.wq-support-form select {
  color-scheme: dark;
}

.wq-support-form input[type="text"]:focus,
.wq-support-form input[type="email"]:focus,
.wq-support-form input[type="date"]:focus,
.wq-support-form select:focus,
.wq-support-form textarea:focus {
  border-color: var(--night-accent);
  outline: 3px solid rgba(159, 215, 255, 0.78);
  outline-offset: 2px;
  background: rgba(5, 19, 45, 0.9);
  box-shadow: 0 0 0 1px rgba(159, 215, 255, 0.22), 0 0 24px rgba(86, 139, 255, 0.11);
}

.wq-support-notice ul,
.wq-apple-help ul,
.wq-conditional-box ul { list-style: none; margin: .6em 0; padding-left: 0; }
.wq-support-notice ol,
.wq-apple-help ol,
.wq-conditional-box ol { margin: .6em 0; padding-left: 1.8em; }
.wq-support-notice ul > li,
.wq-apple-help ul > li,
.wq-conditional-box ul > li { display: flex; align-items: center; gap: .55em; }
.wq-support-notice ul > li p,
.wq-apple-help ul > li p,
.wq-conditional-box ul > li p { margin: 0; }
.wq-support-notice ul > li br,
.wq-apple-help ul > li br,
.wq-conditional-box ul > li br { display: none; }
.wq-support-notice ul > li::before,
.wq-apple-help ul > li::before,
.wq-conditional-box ul > li::before { content: ''; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.wq-support-notice li + li,
.wq-apple-help li + li,
.wq-conditional-box li + li { margin-top: .3em; }

.wq-support-notice,
.wq-apple-help {
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid rgba(185, 204, 255, 0.12);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(35, 71, 135, .28), rgba(5, 16, 40, .38));
  box-shadow: 0 14px 36px rgba(0,5,22,.13), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.wq-conditional-box {
  margin: 24px 0;
  padding: 22px;
  border: 1px solid rgba(185, 204, 255, 0.12);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(35, 71, 135, .25), rgba(5, 16, 40, .35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.wq-conditional-box h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
}

.wq-required {
  margin-left: 5px;
  color: var(--orange-mid);
  font-size: 12px;
  font-weight: 700;
}

.wq-small-note {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}

.wq-consent {
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.8;
}

.wq-support-form a {
  color: var(--moon-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wq-support-form a:hover { color: var(--white); }

.wq-submit input[type="submit"] {
  width: 100%;
  padding: 15px 20px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #FFC55F, var(--orange));
  color: #211424;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(255, 138, 36, 0.28), inset 0 1px 0 rgba(255,255,255,.36);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.wq-submit input[type="submit"]:hover {
  background: linear-gradient(135deg, #FFD174, #FF982F);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(255, 138, 36, 0.4);
}

.wq-submit input[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Cloudflare Turnstile (Simple Cloudflare Turnstile). #contact outranks the
   plugin's per-ID "margin-left: -15px". Flex centering keeps a widget wider than
   the form overflowing evenly into both side paddings on narrow phones. */
#contact .cf7-cf-turnstile .cf-turnstile {
  display: flex;
  justify-content: center;
  margin-left: 0;
}

.wq-support-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .wq-conditional-box { padding: 18px; }
  .wq-support-form input[type="text"],
  .wq-support-form input[type="email"],
  .wq-support-form input[type="date"],
  .wq-support-form select,
  .wq-support-form textarea,
  .wq-support-notice,
  .wq-apple-help,
  .wq-conditional-box { -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); }
}
