/* ROOT VPN skin for the ALTCHA widget: matches the form inputs, ROOT green accent. */
altcha-widget {
  display: block;
  font-family: var(--rv-font-body, Inter, system-ui, sans-serif);
  font-size: 14px;
  --altcha-max-width: 100%;
  --altcha-border-radius: 12px;
  --altcha-padding: 12px 14px;
  --altcha-color-base: var(--ink, #fff);
  --altcha-color-base-content: var(--text, #0B0C0E);
  --altcha-border-color: var(--line, #d9dde3);
  --altcha-color-neutral: var(--line, #d9dde3);
  --altcha-color-neutral-content: var(--muted, #5b616b);
  --altcha-color-primary: #159B6B;
  --altcha-color-primary-content: #fff;
  --altcha-color-success: #159B6B;
  --altcha-color-success-content: #fff;
  --altcha-checkbox-border-color: var(--muted, #8a9099);
  --altcha-checkbox-outline-color: rgba(21, 155, 107, .55);
  --altcha-spinner-color: #159B6B;
}
altcha-widget .altcha-main { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
altcha-widget .altcha-main > * { width: auto; }
altcha-widget .altcha-checkbox-wrap label { font-weight: 600; color: var(--text, #0B0C0E); cursor: pointer; }
altcha-widget .altcha-footer { flex-grow: 0; margin-left: auto; font-size: 12px; opacity: .8; color: var(--muted, #5b616b); }
altcha-widget .altcha-error { color: #c0392b; width: 100%; }
@media (max-width: 420px) {
  altcha-widget .altcha-footer { margin-left: 0; width: 100%; justify-content: flex-start; }
}
/* The forms style every input/label; give the widget's own controls back their size. */
:root form altcha-widget .altcha-checkbox input,
:root form altcha-widget .altcha-checkbox-native input {
  width: var(--altcha-checkbox-size); height: var(--altcha-checkbox-size); min-height: 0;
  padding: 0; margin: 0; font-size: inherit; box-shadow: none; position: absolute; left: 0; top: 0;
  border: var(--altcha-checkbox-border-width, 1px) solid var(--altcha-checkbox-border-color);
  border-radius: var(--altcha-checkbox-border-radius); background: var(--altcha-input-background-color);
}
:root form altcha-widget .altcha-checkbox input:checked { background-color: var(--altcha-color-success); border-color: var(--altcha-color-success); }
:root form altcha-widget label { display: inline; gap: 0; font-size: 14px; }
:root form altcha-widget input[type="checkbox"]:focus { outline: var(--altcha-checkbox-outline); outline-offset: 2px; border-color: var(--altcha-color-success); }