/*
 * Cap captcha widget — themed to match the site's dark/light shells.
 *
 * The widget is a custom element that exposes its appearance through CSS
 * variables, so nothing here reaches inside its shadow DOM.
 */

.cap-captcha-field {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
}

cap-widget {
  --cap-background: #ffffff;
  --cap-border-color: #d7dde5;
  --cap-border-radius: 12px;
  --cap-color: #10141c;
  --cap-checkbox-background: #f4f6f9;
  --cap-checkbox-border: 1px solid #cbd3dd;
  --cap-checkbox-border-radius: 6px;
  --cap-checkbox-size: 22px;
  --cap-font: inherit;
  --cap-spinner-color: #0a6c5d;
  --cap-spinner-background-color: #dfe5ec;
  --cap-spinner-thickness: 4px;
  --cap-widget-height: 52px;
  --cap-widget-width: 100%;
  --cap-widget-padding: 12px 14px;
  --cap-gap: 12px;

  display: block;
  max-width: 320px;
  width: 100%;
}

/* The site ships a dark theme by default; follow whichever shell is active. */
/* The site's dark shell, and the panel's (Metronic sets data-bs-theme). */
.dark-theme cap-widget,
[data-bs-theme="dark"] cap-widget {
  --cap-background: #171c26;
  --cap-border-color: #2b3444;
  --cap-color: #e8edf4;
  --cap-checkbox-background: #212936;
  --cap-checkbox-border: 1px solid #38445a;
  --cap-spinner-color: #21c39c;
  --cap-spinner-background-color: #2b3444;
}

/* Mirror the widget for the Persian site. */
[dir="rtl"] cap-widget {
  direction: rtl;
}

/* Keep the widget from overflowing the narrow login/register cards. */
.user-form cap-widget,
.contact-form cap-widget,
.abuse-form cap-widget {
  max-width: 100%;
}

/* Panel forms: full width, spaced like the other Metronic rows. */
.form.w-100 .cap-captcha-field {
  justify-content: flex-start;
  margin: 0 0 1.75rem;
}
.form.w-100 cap-widget {
  max-width: 100%;
}
cap-widget.cap-required {
  outline: 2px solid #f1416c;
  outline-offset: 2px;
  border-radius: var(--cap-border-radius, 12px);
}