/*
 * Webmyday Flux Planner.
 * De widget van Flux zet zijn knop (rechts 16px, onder 16px, 56px groot) en venster (rechts 16px,
 * onder 80px, max. 380 x 600px) vast rechtsonder. Door de transform op <flux-schedule> geldt dat
 * "rechtsonder" binnen dit element, en dit element zetten wij op de gekozen plek.
 * Dicht: alleen zo groot als de knop (de knop heeft tekst, dus de breedte meet flux-planner.js;
 * zonder meting 240px). Open: zo groot als venster + knop, met 16px rand.
 */
.wmd-flux .wmd-flux__widget {
	display: block;
	position: fixed;
	z-index: 2147483000;
	width: var(--wmd-flux-knop-breedte, 240px);
	height: 88px;
	margin: 0;
	padding: 0;
	transform: var(--wmd-flux-basis, translateZ(0));
	transform-origin: 100% 100%;
}

.wmd-flux.is-open .wmd-flux__widget {
	width: calc(min(380px, 100vw - 2rem) + 2rem);
	height: calc(min(600px, 100vh - 7rem) + 6rem);
}

/* Knop van Flux verborgen: dicht = helemaal weg; open = venster met het kruisje eronder. */
.wmd-flux.wmd-flux--geen-knop:not(.is-open) .wmd-flux__widget {
	display: none;
}

.wmd-flux--rechtsonder .wmd-flux__widget { right: var(--wmd-flux-x, 0px); bottom: var(--wmd-flux-y, 0px); }
.wmd-flux--linksonder .wmd-flux__widget { left: var(--wmd-flux-x, 0px); bottom: var(--wmd-flux-y, 0px); }
.wmd-flux--rechtsboven .wmd-flux__widget { right: var(--wmd-flux-x, 0px); top: var(--wmd-flux-y, 0px); }
.wmd-flux--linksboven .wmd-flux__widget { left: var(--wmd-flux-x, 0px); top: var(--wmd-flux-y, 0px); }
/* Ingelogd: de WordPress-balk (32px, 46px op smalle schermen) niet afdekken. */
.admin-bar .wmd-flux--rechtsboven .wmd-flux__widget,
.admin-bar .wmd-flux--linksboven .wmd-flux__widget { top: calc(var(--wmd-flux-y, 0px) + 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .wmd-flux--rechtsboven .wmd-flux__widget,
	.admin-bar .wmd-flux--linksboven .wmd-flux__widget { top: calc(var(--wmd-flux-y, 0px) + 46px); }
}
.wmd-flux--linksonder .wmd-flux__widget,
.wmd-flux--linksboven .wmd-flux__widget { transform-origin: 0 100%; }
.wmd-flux--midden .wmd-flux__widget {
	--wmd-flux-basis: translate(-50%, -50%) translate(var(--wmd-flux-x, 0px), var(--wmd-flux-y, 0px));
	top: 50%;
	left: 50%;
	transform-origin: 50% 50%;
}

/* Animatie "planner klapt open" (instelling). Groeit vanuit de kant van de knop; midden vanuit het midden. */
@keyframes wmd-flux-open {
	from { opacity: 0; transform: var(--wmd-flux-basis, translateZ(0)) scale(0.9); }
	to { opacity: 1; transform: var(--wmd-flux-basis, translateZ(0)) scale(1); }
}
@keyframes wmd-flux-vervagen {
	from { opacity: 0; }
	to { opacity: 1; }
}
.wmd-flux--anim.is-open .wmd-flux__widget { animation: wmd-flux-open 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.wmd-flux--anim .wmd-flux__achtergrond:not([hidden]) { animation: wmd-flux-vervagen 0.22s ease-out both; }
@media screen and (max-width: 782px) {
	.wmd-flux--anim:not(.wmd-flux--anim-mobiel).is-open .wmd-flux__widget,
	.wmd-flux--anim:not(.wmd-flux--anim-mobiel) .wmd-flux__achtergrond { animation: none; }
}

.wmd-flux__achtergrond {
	position: fixed;
	inset: 0;
	z-index: 2147482999;
	background: rgba(17, 24, 39, 0.45);
}

.wmd-flux__achtergrond[hidden] {
	display: none;
}

/*
 * Eigen zwevende knop (instelling "Eigen knop met een icoon"). Staat op dezelfde plek als de knop van Flux
 * (16px van de rand + verschuiving). Open: weg, dan staat het kruisje van Flux op die plek.
 */
.wmd-flux__zwevend {
	position: fixed;
	z-index: 2147483000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: 56px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: var(--wmd-flux-knop-radius, 9999px);
	background: var(--wmd-flux-knop-bg, var(--wmd-flux-accent, #111827));
	color: var(--wmd-flux-knop-tekst, #ffffff);
	font: inherit;
	font-size: 16px;
	font-weight: var(--wmd-flux-knop-gewicht, 600);
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.wmd-flux__zwevend:hover {
	background: var(--wmd-flux-knop-hover-bg, var(--wmd-flux-knop-bg, var(--wmd-flux-accent, #111827)));
	color: var(--wmd-flux-knop-hover-tekst, var(--wmd-flux-knop-tekst, #ffffff));
}

.wmd-flux__zwevend:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.wmd-flux__zwevend--rond {
	width: 56px;
	padding: 0;
}

.wmd-flux .wmd-flux__zwevend .wmd-flux-icoon {
	width: 24px;
	height: 24px;
	flex: none;
	margin: 0; /* geen marge zoals bij knoppen op de pagina: in het rondje precies in het midden */
	vertical-align: 0;
}

.wmd-flux.is-open .wmd-flux__zwevend {
	display: none;
}

/* Uitklappen (instelling): dicht een rondje met het icoon, open icoon + tekst. Tekst blijft voorleesbaar. */
.wmd-flux__zwevend--uitklap {
	gap: 0;
	min-width: 56px;
	padding: 0 16px;
}
.wmd-flux__zwevend--uitklap span {
	display: inline-block;
	max-width: 0;
	margin-left: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 0.3s ease, margin-left 0.3s ease, opacity 0.2s ease;
}
.wmd-flux__zwevend--uitklap:focus-visible span,
.wmd-flux__zwevend--uitklap.is-uitgeklapt span {
	max-width: 16em;
	margin-left: 0.5em;
	opacity: 1;
}
@media (hover: hover) and (min-width: 783px) {
	.wmd-flux__zwevend--uitklap:hover span {
		max-width: 16em;
		margin-left: 0.5em;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wmd-flux--anim.is-open .wmd-flux__widget,
	.wmd-flux--anim .wmd-flux__achtergrond { animation: none; }
	.wmd-flux__zwevend--uitklap span { transition: none; }
}

.wmd-flux--rechtsonder .wmd-flux__zwevend { right: calc(16px + var(--wmd-flux-x, 0px)); bottom: calc(16px + var(--wmd-flux-y, 0px)); }
.wmd-flux--linksonder .wmd-flux__zwevend { left: calc(16px + var(--wmd-flux-x, 0px)); bottom: calc(16px + var(--wmd-flux-y, 0px)); }
.wmd-flux--rechtsboven .wmd-flux__zwevend { right: calc(16px + var(--wmd-flux-x, 0px)); top: calc(16px + var(--wmd-flux-y, 0px)); }
.wmd-flux--linksboven .wmd-flux__zwevend { left: calc(16px + var(--wmd-flux-x, 0px)); top: calc(16px + var(--wmd-flux-y, 0px)); }
.wmd-flux--midden .wmd-flux__zwevend {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) translate(var(--wmd-flux-x, 0px), var(--wmd-flux-y, 0px));
}
.admin-bar .wmd-flux--rechtsboven .wmd-flux__zwevend,
.admin-bar .wmd-flux--linksboven .wmd-flux__zwevend { top: calc(48px + var(--wmd-flux-y, 0px)); }
@media screen and (max-width: 782px) {
	.admin-bar .wmd-flux--rechtsboven .wmd-flux__zwevend,
	.admin-bar .wmd-flux--linksboven .wmd-flux__zwevend { top: calc(62px + var(--wmd-flux-y, 0px)); }
}

/* Icoon in een eigen knop op de pagina (shortcode of Avada-knop met #afspraak). */
.wmd-flux-open .wmd-flux-icoon,
.wmd-flux-knop .wmd-flux-icoon,
a.fusion-button[href*="#afspraak"] .wmd-flux-icoon {
	flex: none;
	vertical-align: -0.2em;
	margin-right: 0.4em;
}