/* 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; }
}

/* ---------- SJ Living stacked button styling ---------- */

.fcw-cta[data-cta-id="whatsapp"],
.fcw-cta[data-cta-id="sale_pagina"],
.fcw-cta[data-cta-id="url_mz67kd"] {
	flex-direction: column !important;
	width: 100%;
	max-width: 260px;
	min-height: 96px;
	padding: 16px 12px !important;
	border-radius: 8px 0 0 8px !important;
	justify-content: center;
	align-items: center;
	gap: 8px !important;
	white-space: normal;
	position: relative;
	box-shadow: none !important;
	border: none !important;
}

.fcw-cta[data-cta-id="whatsapp"] .fcw-cta-icon,
.fcw-cta[data-cta-id="sale_pagina"] .fcw-cta-icon,
.fcw-cta[data-cta-id="url_mz67kd"] .fcw-cta-icon {
	display: flex !important;
	margin: 0 auto;
}

.fcw-cta[data-cta-id="whatsapp"] .fcw-cta-icon svg,
.fcw-cta[data-cta-id="sale_pagina"] .fcw-cta-icon svg,
.fcw-cta[data-cta-id="url_mz67kd"] .fcw-cta-icon svg {
	width: 28px !important;
	height: 28px !important;
}

.fcw-cta[data-cta-id="whatsapp"] .fcw-cta-label,
.fcw-cta[data-cta-id="sale_pagina"] .fcw-cta-label,
.fcw-cta[data-cta-id="url_mz67kd"] .fcw-cta-label {
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	line-height: 1.2;
}

/* Dark with gold text: WhatsApp and Sale */
.fcw-cta[data-cta-id="whatsapp"],
.fcw-cta[data-cta-id="sale_pagina"] {
	background: #202020 !important;
	color: #b29b5f !important;
}

.fcw-cta[data-cta-id="whatsapp"] .fcw-cta-icon,
.fcw-cta[data-cta-id="whatsapp"] .fcw-cta-label,
.fcw-cta[data-cta-id="sale_pagina"] .fcw-cta-icon,
.fcw-cta[data-cta-id="sale_pagina"] .fcw-cta-label {
	color: #b29b5f !important;
}

.fcw-cta[data-cta-id="whatsapp"]:hover,
.fcw-cta[data-cta-id="sale_pagina"]:hover {
	background: #1a1a1a !important;
	transform: none !important;
}

/* Gold with white text: Korting popup button */
.fcw-cta[data-cta-id="url_mz67kd"] {
	background: #b29b5f !important;
	color: #ffffff !important;
}

.fcw-cta[data-cta-id="url_mz67kd"] .fcw-cta-icon,
.fcw-cta[data-cta-id="url_mz67kd"] .fcw-cta-label {
	color: #ffffff !important;
}

.fcw-cta[data-cta-id="url_mz67kd"]:hover {
	background: #9d8550 !important;
	transform: none !important;
}

/* Decorative accent dot on Korting button */
.fcw-cta[data-cta-id="url_mz67kd"]::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #b29b5f;
	pointer-events: none;
}

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

/* ===========================================================
 * Popup (CF7 + coupon code)
 * Default theme: SJ Living (beige/gold). Override via custom CSS.
 * =========================================================== */
.fcw-popup{
	--fcw-pop-gold:#b29b5f;
	--fcw-pop-gold-deep:#8c7846;
	--fcw-pop-black:#202020;
	--fcw-pop-beige:#f3f1eb;
	--fcw-pop-ink-60:rgba(32,32,32,.6);
	--fcw-pop-ink-40:rgba(32,32,32,.4);
	--fcw-pop-ink-15:rgba(32,32,32,.15);
	--fcw-pop-serif:'Cormorant Garamond',Garamond,'Times New Roman',serif;
	--fcw-pop-sans:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
	position:fixed; inset:0; z-index:2147483000;
	display:flex; align-items:center; justify-content:center;
	padding:24px;
	font-family:var(--fcw-pop-sans); color:var(--fcw-pop-black);
}
.fcw-popup[hidden]{ display:none; }
.fcw-popup-backdrop{ position:absolute; inset:0; background:rgba(20,20,20,.55); backdrop-filter:blur(2px); cursor:pointer; }
.fcw-popup-card{
	position:relative; display:grid; grid-template-columns:1fr; max-width:900px; width:100%;
	background:var(--fcw-pop-beige);
	box-shadow:0 30px 80px rgba(32,32,32,.28), 0 6px 20px rgba(32,32,32,.16);
	max-height:calc(100vh - 48px); overflow:hidden;
}
.fcw-popup[data-has-art="1"] .fcw-popup-card{
	grid-template-columns:.95fr 1.05fr; min-height:520px;
}
.fcw-popup-close{
	position:absolute; top:14px; right:14px; z-index:3;
	width:34px; height:34px; border-radius:999px;
	border:1px solid var(--fcw-pop-ink-15); background:rgba(255,255,255,.7);
	display:grid; place-items:center; color:var(--fcw-pop-black); cursor:pointer; padding:0;
}
.fcw-popup-body{
	padding:50px 46px; display:flex; flex-direction:column; justify-content:center; gap:18px;
	overflow-y:auto;
}
.fcw-popup-body[hidden]{ display:none !important; }
.fcw-popup-eyebrow{
	font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--fcw-pop-gold-deep);
}
.fcw-popup-title{
	font-family:var(--fcw-pop-serif); font-weight:300; font-size:46px; line-height:1; letter-spacing:-.01em; margin:0;
}
.fcw-popup-title em{ font-style:italic; color:var(--fcw-pop-gold-deep); }
.fcw-popup-lede{
	margin:0; color:var(--fcw-pop-ink-60); font-size:13.5px; line-height:1.55; max-width:36ch;
}
.fcw-popup-form{ margin-top:4px; }
.fcw-popup-form .wpcf7{ margin:0; padding:0; }
.fcw-popup-form p{ margin:0; }
/* CF7 input styling — tries to match the V5 mock without depending on specific field markup. */
.fcw-popup-form input[type="email"],
.fcw-popup-form input[type="text"]{
	width:100%; padding:13px 15px; font-size:13.5px; line-height:1.4;
	border:1px solid var(--fcw-pop-black); background:#fff; color:var(--fcw-pop-black);
	border-radius:0; box-shadow:none; outline:none;
}
.fcw-popup-form input[type="submit"],
.fcw-popup-form button[type="submit"]{
	margin-top:10px; padding:13px 22px; background:var(--fcw-pop-black); color:#fff;
	font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
	border:0; cursor:pointer; width:100%;
}
.fcw-popup-form input[type="submit"]:hover,
.fcw-popup-form button[type="submit"]:hover{ background:var(--fcw-pop-gold-deep); }
.fcw-popup-form .wpcf7-spinner{ display:none; }
/* CF7's own validation markup — hidden because we render our own .fcw-popup-error. */
.fcw-popup-form .wpcf7-not-valid-tip,
.fcw-popup-form .wpcf7-response-output,
.fcw-popup-form .wpcf7 form .wpcf7-response-output{
	display:none !important;
}
.fcw-popup-error{
	margin-top:8px; padding:10px 12px;
	background:#fdecec; border:1px solid #f3b3b3; color:#9b1c1c;
	font-size:12px; line-height:1.4;
}
.fcw-popup-input-invalid{
	border-color:#b00020 !important;
	outline:2px solid rgba(176,0,32,.15);
	outline-offset:0;
}
.fcw-popup-terms{
	font-size:10.5px; color:var(--fcw-pop-ink-40); letter-spacing:.02em; line-height:1.55;
}
.fcw-popup-terms a{ color:var(--fcw-pop-ink-60); text-decoration:underline; text-underline-offset:2px; }
.fcw-popup-warning{
	margin:0; padding:12px 14px; background:#fff5d6; border:1px solid #e0c97a; font-size:12px; color:#664c00;
}
.fcw-popup-art{ position:relative; overflow:hidden; }
.fcw-popup-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.fcw-popup-code{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:14px 18px; border:1px solid var(--fcw-pop-black); background:#fff;
}
.fcw-popup-code-label{
	font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--fcw-pop-ink-60);
}
.fcw-popup-code-val{
	font-family:var(--fcw-pop-serif); font-size:28px; font-weight:400; letter-spacing:.08em; color:var(--fcw-pop-black);
}
.fcw-popup-copy{
	background:transparent; border:1px solid var(--fcw-pop-black); color:var(--fcw-pop-black);
	padding:8px 14px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; cursor:pointer;
}
.fcw-popup-copy.is-copied{ background:var(--fcw-pop-black); color:#fff; }

@media (max-width: 720px) {
	.fcw-popup{ padding:0; align-items:stretch; }
	.fcw-popup-card{ max-width:none; max-height:100vh; grid-template-columns:1fr !important; }
	.fcw-popup[data-has-art="1"] .fcw-popup-art{ display:none; }
	.fcw-popup-body{ padding:60px 24px 32px; }
	.fcw-popup-title{ font-size:34px; }
}

/* Minimal theme: drop the serif/gold, use the FAB's primary colors instead. */
.fcw-popup[data-theme="minimal"]{
	--fcw-pop-serif:var(--fcw-pop-sans);
	--fcw-pop-gold-deep:var(--fcw-primary, #202020);
}
.fcw-popup[data-theme="minimal"] .fcw-popup-title{ font-weight:600; letter-spacing:-.02em; }