/**
 * AB Form Styling – Basis-Styles.
 *
 * Bewusst niedrige Spezifität (eine Klasse pro Selektor): Alles, was im
 * Elementor-Editor einstellbar ist, wird von Elementors generiertem CSS
 * (".elementor-element-xyz .ab-pts__option") zuverlässig überschrieben.
 * Nur strukturelle Resets nutzen zwei Klassen.
 */

.ab-pts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
}

.ab-pts__option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 10px;
	border: 1px solid #434655;
	border-radius: 0;
	background-color: transparent;
	color: #e5e2e3;
	line-height: 1.3;
	cursor: pointer;
	user-select: none;
	transition-property: background-color, border-color, color, box-shadow;
	transition-duration: 150ms;
	transition-timing-function: ease;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.ab-pts__option:hover {
	background-color: #2a2a2b;
}

.ab-pts__option.is-selected {
	border-color: #b4c5ff;
	background-color: rgba(180, 197, 255, 0.08);
}

/* CSS-only Fallback, falls JS nicht läuft. Eigene Regel: ältere Browser
   ignorieren nur diese Zeile, nicht die darüber. */
.ab-pts__option:has(.ab-pts__input:checked) {
	border-color: #b4c5ff;
	background-color: rgba(180, 197, 255, 0.08);
}

.ab-pts__text {
	display: block;
	min-width: 0;
}

/* --- Indikator ---------------------------------------------------------- */

.ab-pts .ab-pts__input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	place-content: center;
	box-shadow: none;
	float: none;
	vertical-align: middle;
}

.ab-pts__input {
	display: inline-grid;
	width: 14px;
	height: 14px;
	border: 1px solid #434655;
	border-radius: 0;
	background-color: #2a2a2b;
	transition-property: background-color, border-color;
	transition-duration: 150ms;
	transition-timing-function: ease;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.ab-pts .ab-pts__input::after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 0;
	background-color: transparent;
	transition-property: background-color;
	transition-duration: 150ms;
	transition-timing-function: ease;
}

.ab-pts__input:checked::after {
	background-color: #b4c5ff;
}

/* --- Fokus (Barrierefreiheit) ------------------------------------------- */

.ab-pts__input:focus-visible {
	outline: 2px solid #b4c5ff;
	outline-offset: 2px;
}

.ab-pts__option:focus-within {
	outline: 2px solid #b4c5ff;
	outline-offset: 2px;
}

/* --- Fehlerzustand (Elementor markiert das Feld-Wrapper-Element) --------- */

.elementor-field-group.elementor-error .ab-pts__option {
	border-color: #d9534f;
}

/* --- Druckansicht ------------------------------------------------------- */

@media print {
	.ab-pts__option {
		border-color: #999;
		color: #000;
	}
}