/* ── CAPTCHA widgets — frontend forms + wp-login ─────────── */
.pa-captcha-wrap {
  margin: 14px 0;
  display: flex;
  justify-content: center;
}
.pa-captcha-wrap.pa-captcha-compact { margin: 10px 0 0; justify-content: center; }

/* Math captcha */
.pa-captcha-math {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 14px 0;
}
.pa-captcha-math-label {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  font-family: var(--sans, system-ui, sans-serif);
}
.pa-captcha-math-label strong {
  color: #fff;
  font-family: var(--mono, 'Space Mono', monospace);
  letter-spacing: .02em;
}
.pa-captcha-math-input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s;
}
.pa-captcha-math-input:focus {
  outline: none;
  border-color: rgba(59,130,246,.5);
}
.pa-captcha-math-input::placeholder { color: rgba(255,255,255,.3); }

/* Light theme */
body.pa-light .pa-captcha-math {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.1);
}
body.pa-light .pa-captcha-math-label { color: rgba(0,0,0,.6); }
body.pa-light .pa-captcha-math-label strong { color: #111827; }
body.pa-light .pa-captcha-math-input {
  background: #ffffff;
  border-color: rgba(0,0,0,.12);
  color: #111827;
}
body.pa-light .pa-captcha-math-input::placeholder { color: rgba(0,0,0,.3); }

/* Third-party widget containers — just give them breathing room */
.pa-captcha-hcaptcha,
.pa-captcha-recaptcha,
.pa-captcha-turnstile {
  transform-origin: center;
}

/* Login page captcha (wp-login.php context — body is unstyled by our theme) */
body.login .pa-captcha-wrap,
body.login .pa-captcha-math {
  margin: 16px 0;
}
body.login .pa-captcha-math {
  background: #fff;
  border: 1px solid #dcdcde;
}
body.login .pa-captcha-math-label { color: #3c434a; }
body.login .pa-captcha-math-label strong { color: #1d2327; }
body.login .pa-captcha-math-input {
  background: #fff;
  border-color: #8c8f94;
  color: #2c3338;
}

/* ── Compact inline variant — for tight single-row forms (newsletter) ──
   Matches the surrounding newsletter form (same 12px radius and padding
   scale as .newsletter-input) instead of a full pill shape that clashed
   with the rounded-rectangle inputs above it. */
.pa-captcha-math.pa-captcha-compact {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  /* This element is a block-level flex box, not a flex item nested inside
     another flex parent — so width:auto here would resolve to "fill the
     available width" (the standard CSS block-box sizing algorithm), not
     "shrink to content" as a flex ITEM's width:auto would. That was the
     actual bug behind every previous attempt at this fix. fit-content is
     the correct, explicit way to size a block-level box to its content,
     paired with auto margins to centre it — the same technique the base
     (non-compact) .pa-captcha-math rule above already uses successfully
     for the full-width contact-form variant. */
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 13px 18px;
  border-radius: 12px;
  background: #151515;
  border: 1px solid rgba(255,255,255,.05);
}
.pa-captcha-compact .pa-captcha-math-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: rgba(255,255,255,.35);
}
.pa-captcha-compact .pa-captcha-math-label {
  font-size: 13.5px;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.pa-captcha-compact .pa-captcha-math-label strong {
  font-family: var(--mono, monospace);
  font-weight: 700;
}
.pa-captcha-compact .pa-captcha-math-input {
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  width: 76px;
  flex: 0 0 76px;
  text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 480px) {
  .pa-captcha-compact {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 10px;
    border-radius: 12px;
    padding: 13px 16px;
  }
  .pa-captcha-compact .pa-captcha-math-input { flex: 1 1 auto; width: auto; margin-left: 0; }
}
body.pa-light .pa-captcha-compact {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
body.pa-light .pa-captcha-compact .pa-captcha-math-input {
  background: #fff;
  border-color: rgba(0,0,0,.12);
}
body.pa-light .pa-captcha-compact .pa-captcha-math-icon { color: rgba(0,0,0,.3); }