/**
 * Einpassung des ALTCHA-Widgets in gängige Themes.
 *
 * Das Widget nutzt kein Shadow DOM. Dadurch greifen Theme-Regeln für
 * Formularelemente direkt in das Widget hinein - vor allem auf
 * input[type="checkbox"]. Weil ALTCHA "appearance: none" setzt, bleibt von
 * einer so überschriebenen Checkbox oft nur ein senkrechter Strich übrig.
 * Die Regeln unten setzen genau das wieder gerade.
 *
 * Die !important sind unvermeidbar: Theme-Regeln gewinnen sonst über
 * Spezifität. Betroffen ist ausschließlich das Innere von .altcha-spamschutz.
 */

.altcha-spamschutz {
	margin: 1em 0;
	max-width: 100%;
}

.altcha-spamschutz altcha-widget {
	display: block;
	max-width: 100%;

	/* Vom Widget unterstützte Variablen - bei Bedarf im Theme anpassen. */
	--altcha-max-width: 100%;
	--altcha-border-radius: 6px;
}

/* --------------------------------------------------------------------
 * Checkbox gegen Theme-Styles durchsetzen
 * ----------------------------------------------------------------- */

.altcha-spamschutz .altcha-checkbox > input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: var(--altcha-checkbox-size, 22px) !important;
	height: var(--altcha-checkbox-size, 22px) !important;
	min-width: var(--altcha-checkbox-size, 22px) !important;
	min-height: var(--altcha-checkbox-size, 22px) !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	top: 0 !important;
	left: 0 !important;
	flex: 0 0 auto !important;
	float: none !important;
	background-image: none !important;
	box-shadow: none !important;
	text-indent: 0 !important;
	transform: none !important;
}

/* Themes, die ihre Checkbox-Grafik über Pseudo-Elemente zeichnen. */
.altcha-spamschutz .altcha-checkbox > input[type="checkbox"]::before,
.altcha-spamschutz .altcha-checkbox > input[type="checkbox"]::after {
	content: none !important;
	display: none !important;
}

/* Das Häkchen-SVG darf nicht von Theme-Regeln für svg erfasst werden. */
.altcha-spamschutz .altcha-checkbox > svg {
	position: absolute !important;
	width: 11px !important;
	height: 11px !important;
	max-width: none !important;
	margin: 0 !important;
	pointer-events: none;
}

/* --------------------------------------------------------------------
 * Label und Layout
 * ----------------------------------------------------------------- */

.altcha-spamschutz .altcha label,
.altcha-spamschutz .altcha-label {
	display: inline !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}

.altcha-spamschutz .altcha-main {
	box-sizing: border-box;
}

/* Themes, die allen Formularelementen eine feste Höhe geben. */
.altcha-spamschutz .altcha,
.altcha-spamschutz .altcha-main,
.altcha-spamschutz .altcha-checkbox-wrap {
	height: auto !important;
	min-height: 0 !important;
	line-height: normal;
}

/* Unsichtbare Darstellung: kein Widget, also auch kein Abstand. */
.altcha-spamschutz--invisible {
	margin: 0 !important;
	padding: 0 !important;
	height: 0;
}

/* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet. */
.altcha-spamschutz__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Login-Seite: volle Breite, passender Abstand. */
body.login .altcha-spamschutz {
	margin: 0 0 16px;
}