/* CTA Fabriek — frontend widget styles */

.fcw-root {
	--fcw-primary: #0EB72D;
	--fcw-primary-text: #fff;
	--fcw-primary-icon: #fff;
	--fcw-surface: #111;
	--fcw-surface-text: #fff;
	--fcw-surface-icon: #fff;
	--fcw-radius: 30px;
	--fcw-radius-tl: 30px;
	--fcw-radius-tr: 30px;
	--fcw-radius-br: 30px;
	--fcw-radius-bl: 30px;
	--fcw-gap: 12px;
	--fcw-edge-x: 20px;
	--fcw-edge-y: 20px;
	--fcw-fab-size: 60px;
	--fcw-pad-y: 12px;
	--fcw-pad-x: 18px;
	--fcw-font-size: 14px;
	--fcw-icon-size: 20px;
	--fcw-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
	--fcw-border-width: 0px;
	--fcw-border-color: transparent;
	--fcw-font-weight: 600;
	--fcw-letter-spacing: 0px;
	--fcw-hover-lift: 1px;
	--fcw-hover-text: #fff;
	--fcw-transition: 150ms;
	--fcw-icon-gap: 10px;
	--fcw-backdrop-bg: rgba(255,255,255,0.95);
	--fcw-backdrop-blur: 0px;
	--fcw-backdrop-pad: 12px;
	--fcw-backdrop-radius: 16px;
	--fcw-backdrop-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
	--fcw-cta-width: 220px;
	--fcw-z: 99990;
	font-family: inherit;
	color: var(--fcw-surface-text);
}

.fcw-root *,
.fcw-root *::before,
.fcw-root *::after {
	box-sizing: border-box;
}

.fcw-root[data-position$="-right"] .fcw-stack,
.fcw-root[data-position$="-right"] .fcw-toggle,
.fcw-root[data-position$="-right"] .fcw-cluster {
	right: var(--fcw-edge-x);
	left: auto;
}
.fcw-root[data-position$="-left"] .fcw-stack,
.fcw-root[data-position$="-left"] .fcw-toggle,
.fcw-root[data-position$="-left"] .fcw-cluster {
	left: var(--fcw-edge-x);
	right: auto;
}

/* ---------- Shared CTA pill ---------- */

.fcw-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--fcw-icon-gap);
	padding: var(--fcw-pad-y) var(--fcw-pad-x);
	background: var(--fcw-primary);
	color: var(--fcw-primary-text);
	text-decoration: none;
	border-radius: var(--fcw-radius-tl) var(--fcw-radius-tr) var(--fcw-radius-br) var(--fcw-radius-bl);
	font-weight: var(--fcw-font-weight);
	font-size: var(--fcw-font-size);
	letter-spacing: var(--fcw-letter-spacing);
	line-height: 1;
	box-shadow: var(--fcw-shadow);
	transition: transform var(--fcw-transition) ease, box-shadow var(--fcw-transition) ease, opacity calc(var(--fcw-transition) + 50ms) ease, background var(--fcw-transition) ease, color var(--fcw-transition) ease;
	white-space: nowrap;
	border: var(--fcw-border-width) solid var(--fcw-border-color);
	cursor: pointer;
}
.fcw-cta:hover { transform: translateY(calc(-1 * var(--fcw-hover-lift))); }
.fcw-root[data-hover-text="1"] .fcw-cta:hover { color: var(--fcw-hover-text); }
.fcw-root[data-icon-pos="right"] .fcw-cta { flex-direction: row-reverse; }
.fcw-cta:focus-visible {
	outline: 2px solid var(--fcw-primary-text);
	outline-offset: 2px;
}
.fcw-cta-icon { display: inline-flex; color: var(--fcw-primary-icon); }
.fcw-cta-icon svg {
	width: var(--fcw-icon-size);
	height: var(--fcw-icon-size);
	display: block;
}
.fcw-toggle-icon { color: var(--fcw-primary-icon); }
.fcw-cta-label { display: inline-block; }
.fcw-cta.is-hidden-by-schedule { display: none !important; }

/* ---------- Layout: FAB stack ---------- */

.fcw-root[data-layout="fab"] .fcw-toggle {
	position: fixed;
	bottom: var(--fcw-edge-y);
	top: auto;
	width: var(--fcw-fab-size);
	height: var(--fcw-fab-size);
	border-radius: 50%;
	background: var(--fcw-primary);
	color: var(--fcw-primary-text);
	border: 0;
	box-shadow: var(--fcw-shadow);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: var(--fcw-z);
	transition: transform .2s ease;
}
.fcw-root[data-layout="fab"] .fcw-toggle:hover { transform: scale(1.05); }
.fcw-root[data-layout="fab"] .fcw-toggle .fcw-toggle-icon svg {
	width: calc(var(--fcw-icon-size) + 6px);
	height: calc(var(--fcw-icon-size) + 6px);
}
.fcw-root[data-layout="fab"] .fcw-toggle-label { display: none; }

.fcw-root[data-layout="fab"] .fcw-toggle.is-pulse::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--fcw-primary);
	animation: fcw-pulse 1.6s ease-out infinite;
	pointer-events: none;
}
@keyframes fcw-pulse {
	0%   { transform: scale(.85); opacity: .7; }
	80%  { transform: scale(1.4); opacity: 0; }
	100% { transform: scale(1.4); opacity: 0; }
}
.fcw-root[data-layout="fab"] .fcw-toggle[aria-expanded="true"]::after { display: none; }

.fcw-root[data-layout="fab"] .fcw-stack {
	position: fixed;
	bottom: calc(var(--fcw-edge-y) + var(--fcw-fab-size) + var(--fcw-gap));
	top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--fcw-gap);
	align-items: flex-end;
	z-index: var(--fcw-z);
}
.fcw-root[data-position$="-left"][data-layout="fab"] .fcw-stack { align-items: flex-start; }
.fcw-root[data-position^="top-"][data-layout="fab"] .fcw-toggle {
	top: var(--fcw-edge-y);
	bottom: auto;
}
.fcw-root[data-position^="top-"][data-layout="fab"] .fcw-stack {
	top: calc(var(--fcw-edge-y) + var(--fcw-fab-size) + var(--fcw-gap));
	bottom: auto;
}
.fcw-root[data-layout="fab"] .fcw-stack[hidden] { display: none; }
.fcw-root[data-layout="fab"] .fcw-stack .fcw-cta {
	transform: translateY(8px);
	opacity: 0;
	animation: fcw-stack-in .18s ease forwards;
}
.fcw-root[data-layout="fab"] .fcw-stack .fcw-cta:nth-child(1) { animation-delay: 0ms; }
.fcw-root[data-layout="fab"] .fcw-stack .fcw-cta:nth-child(2) { animation-delay: 35ms; }
.fcw-root[data-layout="fab"] .fcw-stack .fcw-cta:nth-child(3) { animation-delay: 70ms; }
.fcw-root[data-layout="fab"] .fcw-stack .fcw-cta:nth-child(4) { animation-delay: 105ms; }
.fcw-root[data-layout="fab"] .fcw-stack .fcw-cta:nth-child(n+5) { animation-delay: 140ms; }
@keyframes fcw-stack-in {
	to { transform: translateY(0); opacity: 1; }
}

/* ---------- Layout: Cluster (always visible) ---------- */

.fcw-root[data-layout="cluster"] .fcw-cluster {
	position: fixed;
	bottom: var(--fcw-edge-y);
	top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--fcw-gap);
	align-items: flex-end;
	z-index: var(--fcw-z);
}
.fcw-root[data-layout="cluster"][data-position$="-left"] .fcw-cluster { align-items: flex-start; }
.fcw-root[data-layout="cluster"][data-position^="top-"] .fcw-cluster {
	top: var(--fcw-edge-y);
	bottom: auto;
}

/* ---------- Layout: Bar + cluster (responsive) ---------- */

.fcw-root[data-layout="bar-cluster"] .fcw-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--fcw-z);
	display: none;
	background: var(--fcw-primary);
	color: var(--fcw-primary-text);
	box-shadow: 0 -4px 16px rgba(0,0,0,.15);
	padding: 8px max(env(safe-area-inset-left), 8px) calc(8px + env(safe-area-inset-bottom)) max(env(safe-area-inset-right), 8px);
	gap: 6px;
	justify-content: space-around;
}
.fcw-root[data-layout="bar-cluster"] .fcw-bar .fcw-cta {
	flex: 1 1 0;
	justify-content: center;
	padding: 10px 6px;
	border-radius: calc(var(--fcw-radius) / 2);
	font-size: calc(var(--fcw-font-size) - 2px);
	min-width: 0;
}
.fcw-root[data-layout="bar-cluster"] .fcw-bar .fcw-cta-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.fcw-root[data-layout="bar-cluster"] .fcw-cluster {
	position: fixed;
	bottom: var(--fcw-edge-y);
	top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--fcw-gap);
	align-items: flex-end;
	z-index: var(--fcw-z);
}
.fcw-root[data-layout="bar-cluster"][data-position$="-left"] .fcw-cluster { align-items: flex-start; }
.fcw-root[data-layout="bar-cluster"][data-position^="top-"] .fcw-cluster {
	top: var(--fcw-edge-y);
	bottom: auto;
}

@media (max-width: 720px) {
	.fcw-root[data-layout="bar-cluster"] .fcw-bar     { display: flex; }
	.fcw-root[data-layout="bar-cluster"] .fcw-cluster { display: none; }
}

/* ---------- Cluster: always icon-only circles ---------- */

.fcw-root[data-layout="cluster"] .fcw-cta-label { display: none; }
.fcw-root[data-layout="cluster"] .fcw-cluster .fcw-cta {
	width: var(--fcw-fab-size);
	height: var(--fcw-fab-size);
	padding: 0;
	border-radius: 50%;
	justify-content: center;
}

/* ---------- Mobile tweak for FAB stack labels ---------- */

@media (max-width: 480px) {
	.fcw-root[data-layout="fab"] .fcw-cta-label { display: none; }
	.fcw-root[data-layout="fab"] .fcw-stack .fcw-cta {
		width: 52px;
		height: 52px;
		padding: 0;
		border-radius: 50%;
		justify-content: center;
	}
}

/* ---------- CTA width modes ---------- */

.fcw-root[data-cta-width="equal"] .fcw-stack,
.fcw-root[data-cta-width="equal"] .fcw-cluster,
.fcw-root[data-cta-width="fixed"] .fcw-stack,
.fcw-root[data-cta-width="fixed"] .fcw-cluster {
	align-items: stretch;
}
.fcw-root[data-cta-width="fixed"] .fcw-stack .fcw-cta,
.fcw-root[data-cta-width="fixed"] .fcw-cluster .fcw-cta {
	width: var(--fcw-cta-width);
}
.fcw-root[data-cta-width="equal"] .fcw-cta-stack,
.fcw-root[data-cta-width="equal"] .fcw-cta-cluster,
.fcw-root[data-cta-width="fixed"] .fcw-cta-stack,
.fcw-root[data-cta-width="fixed"] .fcw-cta-cluster {
	justify-content: center;
}

/* ---------- Backdrop behind CTA stack/cluster ---------- */

.fcw-root[data-backdrop="1"][data-layout="fab"] .fcw-stack,
.fcw-root[data-backdrop="1"][data-layout="cluster"] .fcw-cluster,
.fcw-root[data-backdrop="1"][data-layout="bar-cluster"] .fcw-cluster {
	background: var(--fcw-backdrop-bg);
	padding: var(--fcw-backdrop-pad);
	border-radius: var(--fcw-backdrop-radius);
	box-shadow: var(--fcw-backdrop-shadow);
	-webkit-backdrop-filter: blur(var(--fcw-backdrop-blur));
	backdrop-filter: blur(var(--fcw-backdrop-blur));
}

/* ---------- Mobile colour override ---------- */

@media (max-width: 720px) {
	.fcw-root[data-mobile-colors="1"] .fcw-cta,
	.fcw-root[data-mobile-colors="1"] .fcw-toggle {
		background: var(--fcw-surface);
		color: var(--fcw-surface-text);
	}
	.fcw-root[data-mobile-colors="1"] .fcw-cta-icon,
	.fcw-root[data-mobile-colors="1"] .fcw-toggle-icon {
		color: var(--fcw-surface-icon);
	}
	.fcw-root[data-mobile-colors="1"][data-layout="bar-cluster"] .fcw-bar {
		background: var(--fcw-surface);
		color: var(--fcw-surface-text);
	}
}

/* ---------- Per-CTA device visibility ---------- */

@media (max-width: 720px) {
	.fcw-cta[data-device="desktop"] { display: none !important; }
}
@media (min-width: 721px) {
	.fcw-cta[data-device="mobile"] { display: none !important; }
}

/* ---------- Hidden state ---------- */
.fcw-root.is-hidden { display: none !important; }