/**
 * exzent Floating Banner - Frontend-Styles.
 * (c) Holger Kosmitzki, exzent.de - https://exzent.de/
 * Wird auch im Editor geladen, dort aber von editor.css ueberschrieben.
 */

.wpfb-banner {
	--wpfb-x: 24px;
	--wpfb-y: 24px;
	--wpfb-max-width: 420px;
	--wpfb-z: 9999;

	position: fixed;
	z-index: var(--wpfb-z);
	box-sizing: border-box;
	width: auto;
	max-width: min(
		var(--wpfb-max-width),
		calc(100vw - (2 * var(--wpfb-x)))
	);
	max-height: calc(100vh - (2 * var(--wpfb-y)));
	overflow: auto;
	overscroll-behavior: contain;

	/* Startzustand: erst sichtbar, wenn view.js "is-visible" setzt. */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Ohne JavaScript soll das Banner trotzdem lesbar sein. */
.no-js .wpfb-banner,
.wpfb-banner.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wpfb-banner.is-hiding {
	opacity: 0;
	pointer-events: none;
}

/* Keine Vorgaben fuer Hintergrund, Innenabstand oder Schatten: das kommt
   komplett aus den Block-Einstellungen, genau wie beim Gruppe-Block. */

/* ---------------------------------------------------------------- Positionen */

.wpfb-banner.is-pos-bottom-right {
	right: var(--wpfb-x);
	bottom: var(--wpfb-y);
}

.wpfb-banner.is-pos-bottom-left {
	left: var(--wpfb-x);
	bottom: var(--wpfb-y);
}

.wpfb-banner.is-pos-bottom-center {
	left: var(--wpfb-x);
	right: var(--wpfb-x);
	bottom: var(--wpfb-y);
	margin-left: auto;
	margin-right: auto;
}

.wpfb-banner.is-pos-top-right {
	right: var(--wpfb-x);
	top: var(--wpfb-y);
}

.wpfb-banner.is-pos-top-left {
	left: var(--wpfb-x);
	top: var(--wpfb-y);
}

.wpfb-banner.is-pos-top-center {
	left: var(--wpfb-x);
	right: var(--wpfb-x);
	top: var(--wpfb-y);
	margin-left: auto;
	margin-right: auto;
}

.wpfb-banner.is-pos-middle-right {
	right: var(--wpfb-x);
	top: 50%;
	transform: translateY(-50%);
}

.wpfb-banner.is-pos-middle-left {
	left: var(--wpfb-x);
	top: 50%;
	transform: translateY(-50%);
}

.wpfb-banner.is-pos-middle-right.is-visible,
.wpfb-banner.is-pos-middle-left.is-visible {
	transform: translateY(-50%);
}

.wpfb-banner.is-pos-center {
	left: var(--wpfb-x);
	right: var(--wpfb-x);
	top: 50%;
	margin-left: auto;
	margin-right: auto;
	transform: translateY(-50%);
}

.wpfb-banner.is-pos-center.is-visible {
	transform: translateY(-50%);
}

.wpfb-banner.is-pos-bar-bottom,
.wpfb-banner.is-pos-bar-top,
.wpfb-banner.is-pos-push-top,
.wpfb-banner.is-pos-flow-top {
	left: 0;
	right: 0;
	width: 100%;
	max-width: none;
}

.wpfb-banner.is-pos-bar-bottom {
	bottom: 0;
}

.wpfb-banner.is-pos-bar-top,
.wpfb-banner.is-pos-push-top,
.wpfb-banner.is-pos-flow-top {
	top: 0;
}

/* Leiste oben im Seitenfluss: view.js haengt sie an den Anfang des Body und
   setzt is-flow-ready. Erst dann steht sie im normalen Fluss, schiebt alles
   darunter nach unten und scrollt beim Scrollen mit weg. Bis dahin bleibt
   sie fixiert, damit am Seitenende keine Luecke entsteht. */
.wpfb-banner.is-pos-flow-top {
	max-height: none;
	overflow: visible;
}

.wpfb-banner.is-pos-flow-top.is-flow-ready {
	position: static;
}

/* Push-Modus: die komplette Seite inklusive Header rutscht nach unten.
   Die Hoehe misst view.js und schreibt sie in --wpfb-push-top. */
.wpfb-banner.is-pos-push-top {
	max-height: none;
	overflow: visible;
}

html.wpfb-has-push-top body {
	padding-top: var(--wpfb-push-top, 0px);
	transition: padding-top 0.35s ease;
}

/* Admin-Bar nicht ueberdecken. */
body.admin-bar .wpfb-banner.is-pos-push-top,
body.admin-bar .wpfb-banner.is-pos-bar-top {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .wpfb-banner.is-pos-push-top,
	body.admin-bar .wpfb-banner.is-pos-bar-top {
		top: 46px;
	}
}

/* ---------------------------------------------------------------- Animationen */

.wpfb-banner.has-anim-slide.is-pos-bottom-right,
.wpfb-banner.has-anim-slide.is-pos-bottom-left,
.wpfb-banner.has-anim-slide.is-pos-bottom-center,
.wpfb-banner.has-anim-slide.is-pos-bar-bottom {
	transform: translateY(24px);
}

.wpfb-banner.has-anim-slide.is-pos-top-right,
.wpfb-banner.has-anim-slide.is-pos-top-left,
.wpfb-banner.has-anim-slide.is-pos-top-center,
.wpfb-banner.has-anim-slide.is-pos-bar-top,
.wpfb-banner.has-anim-slide.is-pos-push-top,
.wpfb-banner.has-anim-slide.is-pos-flow-top {
	transform: translateY(-24px);
}

.wpfb-banner.has-anim-slide.is-pos-middle-right {
	transform: translate(24px, -50%);
}

.wpfb-banner.has-anim-slide.is-pos-middle-left {
	transform: translate(-24px, -50%);
}

.wpfb-banner.has-anim-slide.is-pos-center {
	transform: translateY(calc(-50% + 24px));
}

.wpfb-banner.has-anim-none {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.wpfb-banner {
		transition: opacity 0.01ms;
		transform: none !important;
	}
}

/* ---------------------------------------------------------------- Schliessen */

.wpfb-banner__close {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	color: currentColor;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.wpfb-banner__close:hover,
.wpfb-banner__close:focus-visible {
	background: rgba(0, 0, 0, 0.16);
}

/* Positionen des Schliessen-Buttons ------------------------------- */

.wpfb-banner.has-close-inside-top-right > .wpfb-banner__close {
	top: 8px;
	right: 8px;
}

.wpfb-banner.has-close-inside-top-left > .wpfb-banner__close {
	top: 8px;
	left: 8px;
}

.wpfb-banner.has-close-inside-bottom-right > .wpfb-banner__close {
	bottom: 8px;
	right: 8px;
}

.wpfb-banner.has-close-inside-bottom-left > .wpfb-banner__close {
	bottom: 8px;
	left: 8px;
}

.wpfb-banner.has-close-inside-middle-right > .wpfb-banner__close {
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}

.wpfb-banner.has-close-inside-middle-left > .wpfb-banner__close {
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
}

/* Ueber dem Inhalt: der Button ragt aus dem Banner heraus. */
.wpfb-banner.has-close-outside {
	overflow: visible;
}

.wpfb-banner.has-close-outside > .wpfb-banner__close {
	background: #ffffff;
	color: #1e1e1e;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.wpfb-banner.has-close-outside > .wpfb-banner__close:hover,
.wpfb-banner.has-close-outside > .wpfb-banner__close:focus-visible {
	background: #f0f0f0;
}

.wpfb-banner.has-close-outside-top-right > .wpfb-banner__close {
	top: -15px;
	right: -15px;
}

.wpfb-banner.has-close-outside-top-left > .wpfb-banner__close {
	top: -15px;
	left: -15px;
}

.wpfb-banner.has-close-outside-middle-right > .wpfb-banner__close {
	top: 50%;
	right: -15px;
	transform: translateY(-50%);
}

.wpfb-banner.has-close-outside-middle-left > .wpfb-banner__close {
	top: 50%;
	left: -15px;
	transform: translateY(-50%);
}

/* ---------------------------------------------------------------- Geraete */

@media (max-width: 781px) {
	.wpfb-banner.wpfb-hide-mobile {
		display: none !important;
	}

	.wpfb-banner:not(.is-pos-bar-bottom):not(.is-pos-bar-top):not(.is-pos-push-top):not(.is-pos-flow-top) {
		max-width: calc(100vw - (2 * var(--wpfb-x)));
	}
}

@media (min-width: 782px) {
	.wpfb-banner.wpfb-hide-desktop {
		display: none !important;
	}
}

.wpfb-banner[hidden] {
	display: none !important;
}