/*
 * Reset Bootstrap (and similar framework) input styles off the <altcha-widget> wrapper.
 *
 * Projects often hand `class="form-control"` (or the equivalent Bootstrap input class) to the
 * widget — that's the default in tx_form's FormSetup.yaml, rsn_form's Captcha.html and various
 * bbysaeth-era templates. The class is harmless on a normal <input> but on the <altcha-widget>
 * host it draws an empty input border around the entire Altcha UI, making it look like there
 * is a spurious empty text field next to the captcha. The widget already brings its own
 * checkbox + footer chrome, so the host element should have no input-field styling.
 */
altcha-widget.form-control,
altcha-widget.form-control-lg,
altcha-widget.form-control-sm {
    /* Strip the Bootstrap input shell — let the widget's own UI define its box. */
    border: 0;
    padding: 0;
    background: transparent;
    height: auto;
    min-height: 0;
    line-height: normal;
    box-shadow: none;
}

/* When the widget is focused or invalid, Bootstrap turns the border red/blue. The widget
 * communicates its own state via the inner checkbox + footer, so suppress the focus ring. */
altcha-widget.form-control:focus,
altcha-widget.form-control:focus-within,
altcha-widget.form-control:invalid {
    border: 0;
    outline: none;
    box-shadow: none;
}

/*
 * Restore the widget v2 default look. The v3 build changed the upstream defaults to a white
 * 320px card with a 22px rounded checkbox; the v2 widget (which bbysaeth/typo3-altcha shipped)
 * was transparent, 260px, with an 18px checkbox — sites migrating from the old extension were
 * styled against that. Declared on the bare element (0-0-1 specificity) so any project rule
 * (class selector or re-declared variable on an ancestor with higher specificity) overrides it.
 */
altcha-widget {
    --altcha-color-base: transparent;
    --altcha-max-width: 260px;
    --altcha-checkbox-size: 18px;
    --altcha-checkbox-border-radius: 3px;
}

/*
 * Guard against the widget's anti-FOUC rule leaking onto host-page elements.
 *
 * The altcha v3 widget injects `.altcha { all: revert-layer; display: none; }` and reveals
 * only its own root via `.altcha[data-visible] { display: block; }`. tx_form templates
 * commonly emit the form element's *identifier* as a wrapper class — and with the
 * conventional identifier "altcha" the wrapper becomes `<div class="form-group altcha ...">`,
 * matches the injected rule, never gets `data-visible`, and the whole captcha disappears.
 *
 * Only the widget's own root carries `data-state`, so un-hide every other `.altcha` element.
 * `revert` (not `block`) keeps UA semantics intact, e.g. the `hidden` attribute still hides.
 */
.altcha:not([data-state]) {
    display: revert;
}