/* WS Ortodôntico — Altcha widget theme overrides (v2.x variable names). */
altcha-widget {
  /* v2 variable names — see node_modules/altcha/dist/altcha.js CSS block. */
  --altcha-color-base: #ffffff;
  --altcha-color-text: #1a1a1a;
  --altcha-color-border: rgba(0, 0, 0, 0.18);
  --altcha-color-border-focus: #ff5a1f;
  --altcha-color-active: #ff5a1f;
  --altcha-color-error-text: #c62828;
  --altcha-color-footer-bg: transparent;
  --altcha-border-width: 1px;
  --altcha-border-radius: 12px;
  --altcha-max-width: 100%;

  display: block;
  margin: 0 0 1.25rem;
  /* Force readable text colour even if the widget inherits white from a
     dark background (drawer, etc.). The widget's internal CSS uses
     `color: var(--altcha-color-text, currentColor)`, so we also set
     `color` directly on the host as a safety net. */
  color: #1a1a1a;
}

/* Belt-and-braces: anything the widget renders in light DOM stays dark.
   The widget's own CSS uses `color: var(--altcha-color-text, currentColor)`
   on `.altcha`, but our theme's `body { color: #fff }` keeps winning on
   nested spans/labels. Hammer it with !important. */
altcha-widget,
altcha-widget *,
altcha-widget .altcha,
altcha-widget .altcha-label,
altcha-widget .altcha-footer,
altcha-widget .altcha-error {
  color: #1a1a1a !important;
}
altcha-widget a { color: #ff5a1f !important; }
altcha-widget .altcha {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

/* Match the rest of our forms (login / register / contact). */
.wsorto-account-form altcha-widget,
.contact-message-contacto-form altcha-widget {
  margin-top: 0.5rem;
}