/* The ALTCHA widget (javascript/vendor/altcha/altcha.min.js) draws itself into the page, not into a shadow root, and
   styles itself with a stylesheet it adds to the head. The template's form rules for .page and .uk-modal outrank it. */

/* forms.scss hides every checkbox and draws a box on the label that follows it instead. The widget's checkbox is
   followed by its tick, not by a label, so it was hidden with nothing drawn in its place: "I'm not a robot" with no
   box to tick. This selector outranks the template's (.page input[type="checkbox"]:not(:checked)). */
.page altcha-widget .altcha input[type="checkbox"],
.uk-modal altcha-widget .altcha input[type="checkbox"] {
    display: inline-block;
}

/* The template's text-input rules (.page input:not([type="submit"]):not([type="button"])…, up to six classes deep)
   also give the box their padding, corners, pale fill and pale edge: the empty box was hard to see, and the ticked one
   stayed pale with the white tick on it. These are the widget's own values again. The template's focus edge still
   applies while the box has focus, as on every other field of the site. */
.page altcha-widget .altcha-checkbox input[type="checkbox"],
.uk-modal altcha-widget .altcha-checkbox input[type="checkbox"] {
    padding: 0 !important;
    border-color: var(--altcha-checkbox-border-color) !important;
    border-radius: var(--altcha-checkbox-border-radius) !important;
    background-color: var(--altcha-input-background-color) !important;
}

.page altcha-widget .altcha-checkbox input[type="checkbox"]:checked,
.uk-modal altcha-widget .altcha-checkbox input[type="checkbox"]:checked {
    border-color: var(--altcha-color-success) !important;
    background-color: var(--altcha-color-success) !important;
}