/*
 * CookieFirst-Banner als zentrierte Karte, ohne Overlay und ohne Scroll-Lock (23.10.2026).
 * Eingebunden in tpl/tracking.html.twig und wpress/wp-content/themes/SimDiscountTheme/footer.php.
 * Selektoren über stabile Attribute (data-testid, data-cookiefirst-*), nicht über die generierten cf*-Klassen.
 * Betrifft nur das Banner (erste Ebene). Einstellungs-Dialog (data-testid="modal") und
 * schwebender Einstellungs-Button (data-testid="reopenSettingsBtn") bleiben unverändert.
 * Bei Änderungen ?v= an beiden Einbindungen erhöhen (CloudFront cacht CSS 7 Tage).
 */

/* Fixierter Container: mittig statt unten über die volle Breite */
html body .cookiefirst-root [data-testid="banner"] {
	top: 50% !important;
	bottom: auto !important;
	left: 50% !important;
	right: auto !important;
	width: 640px !important;
	max-width: calc(100vw - 32px) !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	transform: translate(-50%, -50%) !important;
}

/* Karte */
html body .cookiefirst-root [data-cookiefirst-widget="banner"] {
	box-sizing: border-box !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 22px 24px 18px !important;
	max-height: 85vh !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	border: 2px solid #9aa3ae !important;
	border-radius: 12px !important;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .12) !important;
}

/* Spalten im Banner untereinander statt nebeneinander (Text oben, Buttons unten) */
html body .cookiefirst-root [data-cookiefirst-widget="banner"] > div > div {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Button-Bereich (leere Platzhalter-Divs ohne Abstand, damit die Lücke über den Buttons nicht wächst) */
html body .cookiefirst-root [data-cookiefirst-widget="banner"] > div > div > div:empty {
	margin: 0 !important;
}
html body .cookiefirst-root [data-cookiefirst-widget="banner"] [data-testid="actionButtons"] {
	margin-top: 10px !important;
}
html body .cookiefirst-root [data-cookiefirst-widget="banner"] [data-testid="actionButtons"] button {
	min-height: 40px !important;
}

/* Reihenfolge: "Alle akzeptieren" und "Ablehnen" gleich breit nebeneinander, "Nein, anpassen" darunter in voller Breite */
@supports selector(:has(a)) {
	html body .cookiefirst-root [data-testid="actionButtons"] > div:has([data-cookiefirst-action="accept"]),
	html body .cookiefirst-root [data-testid="actionButtons"] > div:has([data-cookiefirst-action="reject"]) {
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 50% !important;
	}
	html body .cookiefirst-root [data-testid="actionButtons"] > div:has([data-cookiefirst-action="accept"]) {
		order: 1 !important;
	}
	html body .cookiefirst-root [data-testid="actionButtons"] > div:has([data-cookiefirst-action="reject"]) {
		order: 2 !important;
	}
	html body .cookiefirst-root [data-testid="actionButtons"] > div:has([data-cookiefirst-action="adjust"]) {
		order: 3 !important;
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Handy */
@media (max-width: 767px) {
	html body .cookiefirst-root [data-cookiefirst-widget="banner"] {
		padding: 18px 16px 12px !important;
		max-height: 85vh !important;
		max-height: 85dvh !important;
	}
	html body .cookiefirst-root [data-cookiefirst-widget="banner"] [data-testid="actionButtons"] button {
		min-height: 44px !important;
	}
}