/*
 * Design-Token-Kaskade, drei Stufen (niedrigste zuerst):
 *
 * 1. Hardcoded Default hier im :root (funktioniert garantiert überall).
 * 2. var(--wp--preset--color--...) / var(--wp--preset--font-family--...):
 *    Werden von WordPress Core automatisch als CSS-Custom-Properties
 *    ausgegeben, WENN das aktive Theme ein theme.json mit Farb-/Font-
 *    Presets definiert (Global Styles / Site Editor). Bei klassischen
 *    Themes ohne theme.json (z. B. GeneratePress in der Standard-
 *    Konfiguration) existieren diese Variablen schlicht nicht – der
 *    var()-Fallback (Stufe 1) greift dann automatisch.
 * 3. Site-spezifischer Override aus den Plugin-Settings (Design-Sektion),
 *    ausgegeben von Assets::enqueueFrontendAssets() via wp_add_inline_style
 *    NACH diesem Grund-Stylesheet – gewinnt in der Cascade automatisch,
 *    ohne !important, weil er später in der Ausgabe steht.
 *
 * WARUM keine GeneratePress-spezifischen Variablennamen geraten werden:
 * GeneratePress exponiert Farben/Fonts standardmäßig NICHT als CSS-
 * Custom-Properties (sie stecken in Theme-Mods/PHP), es gibt also keine
 * zuverlässige, universelle Variable zum Anzapfen. Der ehrliche, robuste
 * Weg ist die Stufe-3-Einstellung pro Website.
 */
:root {
	--bewec-color-accent: var( --wp--preset--color--primary, #10151a );
	--bewec-color-accent-hover: var( --wp--preset--color--primary, #1c242c );
	--bewec-color-text: var( --wp--preset--color--background, #ffffff );
	--bewec-font-family: var( --wp--preset--font-family--body, inherit );
	--bewec-radius: 8px;
}

.bewec-gate {
	position: relative;
	width: 100%;
}

.bewec-gate__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 200px;
	padding: 1.5rem;
	background: var( --bewec-color-accent );
	color: var( --bewec-color-text );
	font-family: var( --bewec-font-family );
	border: 0;
	border-radius: var( --bewec-radius );
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.4;
	text-align: center;
}

.bewec-gate__placeholder:hover,
.bewec-gate__placeholder:focus-visible {
	background: var( --bewec-color-accent-hover );
}

.bewec-gate__revoke {
	display: block;
	margin: 0.4rem 0 0;
	padding: 0;
	background: none;
	border: none;
	color: inherit;
	font-family: var( --bewec-font-family );
	font-size: 0.8rem;
	text-decoration: underline;
	cursor: pointer;
	opacity: 0.65;
}

.bewec-gate__revoke:hover,
.bewec-gate__revoke:focus-visible {
	opacity: 1;
}

/* [bewec_privacy_controls]-Shortcode */
.bewec-privacy-controls__list {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.bewec-privacy-controls__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
}

.bewec-privacy-controls__providers {
	opacity: 0.7;
	font-size: 0.9em;
}

.bewec-privacy-controls__status {
	display: inline-block;
	margin-left: 0.5rem;
	font-size: 0.85em;
	opacity: 0.8;
}

.bewec-privacy-controls__toggle,
.bewec-privacy-controls__revoke-all,
.bewec-privacy-controls__open-cmp {
	padding: 0.4rem 0.9rem;
	border: 1px solid var( --bewec-color-accent );
	border-radius: var( --bewec-radius );
	background: transparent;
	color: var( --bewec-color-accent );
	cursor: pointer;
	white-space: nowrap;
}

.bewec-privacy-controls__toggle:hover,
.bewec-privacy-controls__revoke-all:hover,
.bewec-privacy-controls__open-cmp:hover {
	background: var( --bewec-color-accent );
	color: var( --bewec-color-text );
}

.bewec-privacy-controls__revoke-all {
	margin-top: 0.5rem;
}

.bewec-gate__icon {
	font-size: 1.75rem;
}

.bewec-gate__original iframe,
.bewec-gate__original {
	width: 100%;
}

.bewec-gate__original[hidden],
.bewec-gate__placeholder[hidden],
.bewec-gate__revoke[hidden] {
	display: none;
}