/* ── CaptchaGuard widget styles ──────────────────────────────────────────── */

.cg-captcha {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  box-sizing: border-box;
  color: var(--cg-text, #333);
}
.cg-captcha *, .cg-captcha *::before, .cg-captcha *::after {
  box-sizing: inherit;
}

/* ── Widget container ───────────────────────────────────────────────────── */
.cg-widget {
  min-width: 240px;
  max-width: 340px;
  padding: 16px 18px;
  background: var(--cg-bg, #fff);
  border: 1px solid var(--cg-border, #dde1e7);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  transition: border-color .15s;
}

/* ── Spinner / loading ──────────────────────────────────────────────────── */
@keyframes cg-rotate {
  to { transform: rotate(360deg); }
}

.cg-spin {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--cg-border, #dde1e7);
  border-top-color: var(--cg-accent, #3a7bd5);
  border-radius: 50%;
  animation: cg-rotate .7s linear infinite;
  flex-shrink: 0;
}

.cg-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  min-height: 48px;
  color: var(--cg-muted, #888);
}

/* ── Status messages ────────────────────────────────────────────────────── */
.cg-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-weight: 500;
  text-align: center;
  padding: 8px 0;
}
.cg-ok  { color: var(--cg-ok,  #2e7d32); }
.cg-err { color: var(--cg-err, #c62828); }

.cg-ok-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cg-ok, #2e7d32);
  color: #fff;
  font-size: 13px;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ── Button ─────────────────────────────────────────────────────────────── */
.cg-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 18px;
  border: none;
  border-radius: 7px;
  background: var(--cg-accent, #3a7bd5);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  text-align: center;
}
.cg-btn:hover:not(:disabled) { opacity: .88; }
.cg-btn:active:not(:disabled) { transform: scale(.97); }
.cg-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Input ──────────────────────────────────────────────────────────────── */
.cg-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  margin-top: 8px;
  border: 1px solid var(--cg-border, #dde1e7);
  border-radius: 7px;
  background: var(--cg-input-bg, #fff);
  color: var(--cg-text, #333);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.cg-input:focus {
  border-color: var(--cg-accent, #3a7bd5);
  box-shadow: 0 0 0 3px rgba(58, 123, 213, .18);
}
.cg-input::placeholder { color: var(--cg-muted, #aaa); }

/* ── Prompt text ────────────────────────────────────────────────────────── */
.cg-prompt {
  margin: 0 0 6px;
  color: var(--cg-text, #333);
}

/* ── Button test — "I'm not a robot" row ───────────────────────────────── */
.cg-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
}
.cg-check-row:focus { outline: 2px solid var(--cg-accent, #3a7bd5); outline-offset: 3px; }

.cg-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid var(--cg-border, #c0c6d0);
  border-radius: 4px;
  background: var(--cg-input-bg, #fff);
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  position: relative;
}
.cg-checkbox.cg-checked {
  background: var(--cg-accent, #3a7bd5);
  border-color: var(--cg-accent, #3a7bd5);
}
.cg-checkbox.cg-checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 2px;
  width: 6px; height: 11px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.cg-check-label {
  flex: 1;
  font-size: 14px;
  color: var(--cg-text, #333);
}

/* reCAPTCHA-style logo in the corner */
.cg-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 4px;
  background:
    linear-gradient(135deg, var(--cg-accent, #3a7bd5) 50%, transparent 50%),
    linear-gradient(225deg, #5a9bf5 50%, transparent 50%),
    linear-gradient(315deg, #2a5db0 50%, transparent 50%),
    linear-gradient(45deg,  var(--cg-accent, #3a7bd5) 50%, transparent 50%);
  opacity: .7;
}

/* ── Math test ──────────────────────────────────────────────────────────── */
.cg-math {}
.cg-math-expr {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding: 6px 0;
  color: var(--cg-text, #1e293b);
  letter-spacing: .04em;
}

/* ── Slider test ────────────────────────────────────────────────────────── */
.cg-slider-wrap {}

.cg-slider {
  display: block;
  width: 100%;
  margin: 6px 0 2px;
  accent-color: var(--cg-accent, #3a7bd5);
  cursor: pointer;
  height: 20px;
}

.cg-slider-val {
  text-align: right;
  font-size: 13px;
  color: var(--cg-muted, #888);
  font-variant-numeric: tabular-nums;
}

/* ── Text captcha ───────────────────────────────────────────────────────── */
.cg-text {}

.cg-text-img {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid var(--cg-border, #e0e4ea);
  margin-bottom: 4px;
}

/* ── Shake on blocked submit ────────────────────────────────────────────── */
@keyframes cg-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.cg-shake .cg-widget {
  animation: cg-shake .5s ease;
  border-color: var(--cg-err, #e53935);
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
.cg-theme-dark {
  --cg-bg:       #1e1e2e;
  --cg-border:   #3a3a5c;
  --cg-accent:   #7c9eff;
  --cg-text:     #e0e0f0;
  --cg-muted:    #8080a8;
  --cg-ok:       #4ade80;
  --cg-err:      #f87171;
  --cg-input-bg: #16162a;
}

/* ── Responsive — never overflow on narrow screens ──────────────────────── */
@media (max-width: 320px) {
  .cg-widget { min-width: 0; }
}

/* ── Popup mode — hide widget in-page until modal opens ─────────────────── */
.cg-captcha[data-popup="1"] {
  display: none;
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */
#cg-modal-ov {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 99999;
  padding: 16px;
  opacity: 0;
  transition: opacity .2s ease;
  backdrop-filter: blur(2px);
}
#cg-modal-ov.cg-modal-visible {
  opacity: 1;
}

/* ── Modal card ──────────────────────────────────────────────────────────── */
#cg-modal-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .22);
  max-width: 380px;
  width: 100%;
  overflow: hidden;
  transform: translateY(12px) scale(.97);
  transition: transform .2s ease;
}
#cg-modal-ov.cg-modal-visible #cg-modal-card {
  transform: translateY(0) scale(1);
}

/* ── Modal header ────────────────────────────────────────────────────────── */
#cg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid #eaecf0;
}
#cg-modal-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}
#cg-modal-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
  transition: background .15s, color .15s;
}
#cg-modal-close:hover {
  background: #f0f2f5;
  color: #333;
}

/* ── Modal body ──────────────────────────────────────────────────────────── */
#cg-modal-body {
  padding: 18px;
  display: flex;
  justify-content: center;
}
#cg-modal-body .cg-captcha {
  display: block !important;
  width: 100% !important;
}
#cg-modal-body .cg-widget {
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* ── Modal dark theme ────────────────────────────────────────────────────── */
#cg-modal-card.cg-modal-dark {
  background: #1e1e2e;
}
#cg-modal-card.cg-modal-dark #cg-modal-head {
  border-bottom-color: #3a3a5c;
}
#cg-modal-card.cg-modal-dark #cg-modal-title {
  color: #e0e0f0;
}
#cg-modal-card.cg-modal-dark #cg-modal-close {
  color: #8080a8;
}
#cg-modal-card.cg-modal-dark #cg-modal-close:hover {
  background: #2a2a42;
  color: #e0e0f0;
}