/* ---------- Math captcha widget ---------- */

.captcha-widget {
  margin: 1.1rem 0;
  border-radius: 12px;
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, Helvetica, Arial, sans-serif;
}

.captcha-widget.solved .captcha-panel {
  border-color: rgba(13, 158, 99, 0.45);
}

.captcha-panel {
  margin-top: 0;
  border-radius: 12px;
  overflow: hidden;
}

.captcha-err {
  margin: 8px 0 0;
  font-size: 1.05rem;
  color: #dc2626;
}

.captcha-foot {
  margin: 8px 0 0;
  font-size: 0.95rem;
  color: #94a3b8;
}

.captcha-foot a {
  color: #0b3c5d;
  text-decoration: underline;
}

[data-theme="dark"] .captcha-foot {
  color: #64748b;
}

[data-theme="dark"] .captcha-foot a {
  color: #7db4e6;
}

/* ---------- Math captcha (inline widget) ---------- */
.math-captcha {
  padding: 10px 14px;
  background: rgba(11, 60, 93, 0.06);
  border: 1px solid rgba(11, 60, 93, 0.18);
  border-radius: 10px;
}
[data-theme="dark"] .math-captcha {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.math-captcha-q {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0b3c5d;
  margin: 0 0 8px;
}
[data-theme="dark"] .math-captcha-q { color: #dbe6f3; }
.math-captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.math-captcha-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid rgba(11, 60, 93, 0.25);
  border-radius: 8px;
  font-size: 1.1rem;
  font-family: inherit;
  color: #1a1a2e;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.math-captcha-input:focus {
  border-color: #ff7f11;
  box-shadow: 0 0 0 2px rgba(255, 127, 17, 0.18);
}
[data-theme="dark"] .math-captcha-input {
  background: #1a1a2e;
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.18);
}
.math-captcha-check {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff7f11, #e56a00);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.math-captcha-check:hover { opacity: 0.9; }
.math-captcha-check:disabled { opacity: 0.6; cursor: default; }
.math-captcha-ok {
  color: #059669;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 6px 0 0;
}
.math-captcha-err {
  color: #dc2626;
  font-size: 0.95rem;
  margin: 6px 0 0;
}

/* ---------- Math captcha (legacy class) ---------- */
.captcha-math {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(11, 60, 93, 0.06);
  border: 1px solid rgba(11, 60, 93, 0.18);
  border-radius: 10px;
  margin-top: 4px;
}

[data-theme="dark"] .captcha-math {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.captcha-math-label {
  font-size: 1.15rem;
  font-weight: 600;
  color: #0b3c5d;
  white-space: nowrap;
  user-select: none;
}

[data-theme="dark"] .captcha-math-label {
  color: #dbe6f3;
}

.captcha-math-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid rgba(11, 60, 93, 0.25);
  border-radius: 8px;
  font-size: 1.1rem;
  font-family: inherit;
  color: #1a1a2e;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.captcha-math-input:focus {
  border-color: #ff7f11;
  box-shadow: 0 0 0 2px rgba(255, 127, 17, 0.18);
}

[data-theme="dark"] .captcha-math-input {
  background: #1a1a2e;
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .captcha-math-input:focus {
  border-color: #ff9e4d;
  box-shadow: 0 0 0 2px rgba(255, 158, 77, 0.2);
}

.captcha-math-loading {
  font-size: 1rem;
  color: #64748b;
  font-style: italic;
}

/* ---------- Terms & conditions acceptance (signup) ---------- */
.terms-group {
  margin: 0.4rem 0 0.2rem;
}

.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.12rem;
  line-height: 1.5;
  color: #0b3c5d;
  cursor: pointer;
  user-select: none;
}

.terms-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #ff7f11;
  cursor: pointer;
}

.terms-check a {
  color: #ff7f11;
  text-decoration: underline;
  font-weight: 500;
}

.terms-check a:hover {
  color: #e56a00;
}

.terms-group.has-error .terms-check {
  color: #dc2626;
}

[data-theme="dark"] .terms-check {
  color: #dbe6f3;
}

[data-theme="dark"] .terms-check a {
  color: #ff9e4d;
}

/* Abuse-gated captcha containers (messaging + listing forms) */
.msg-captcha-box,
#listing-captcha-box {
  margin: 8px 0 10px;
  padding: 6px;
  background: rgba(11, 60, 93, 0.05);
  border: 1px dashed rgba(11, 60, 93, 0.25);
  border-radius: 10px;
}
.msg-captcha-box .captcha-widget,
#listing-captcha-box .captcha-widget {
  max-width: 340px;
  margin: 0 auto;
}
[data-theme="dark"] .msg-captcha-box,
[data-theme="dark"] #listing-captcha-box {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ---------- Button loading spinner ---------- */
.login-btn,
.signup-btn,
.contact-submit {
  position: relative;
  overflow: hidden;
}

.login-btn.loading,
.signup-btn.loading,
.contact-submit.loading {
  pointer-events: none;
  opacity: 0.75;
}

.login-btn.loading span,
.signup-btn.loading span,
.contact-submit.loading span {
  visibility: hidden;
}

.login-btn.loading::after,
.signup-btn.loading::after,
.contact-submit.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* When loading, also hide the SVG icon inside the button */
.login-btn.loading svg,
.signup-btn.loading svg,
.contact-submit.loading svg {
  visibility: hidden;
}

/* ---------- Cap CAPTCHA widget ---------- */
.captcha-widget[data-cap] {
  margin: 1.1rem 0;
}
.captcha-widget[data-cap] .captcha-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.captcha-widget[data-cap] .captcha-err {
  color: #dc2626;
  font-size: 1.2rem;
  margin: 0;
  padding: 6px 10px;
  background: rgba(220, 38, 38, 0.08);
  border-radius: 8px;
}
[data-theme="dark"] .captcha-widget[data-cap] .captcha-err {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}
/* Cap widget sits inside .captcha-panel */
.captcha-widget[data-cap] cap-widget {
  display: block;
}
/* Solved state */
.captcha-widget[data-cap].solved {
  opacity: 0.85;
}