/* Floating CTA Buttons — front end */

.fcta-wrap {
	--fcta-size: 56px;
	--fcta-gap: 12px;
	--fcta-ox: 20px;
	--fcta-oy: 20px;
	--fcta-radius: 999px;
	--fcta-sq-radius: 8px;
	--fcta-z: 9999;
	position: fixed;
	z-index: var(--fcta-z);
	display: flex;
	gap: var(--fcta-gap);
	margin: 0;
	padding: 0;
	pointer-events: none;
	box-sizing: border-box;
}

.fcta-wrap *,
.fcta-wrap *::before,
.fcta-wrap *::after {
	box-sizing: border-box;
}

/* Orientation */
.fcta-wrap.fcta-vertical {
	flex-direction: column;
}

.fcta-wrap.fcta-horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	max-width: calc(100vw - 16px);
}

/* Positions */
.fcta-pos-top-left     { top: var(--fcta-oy); left: var(--fcta-ox); }
.fcta-pos-top-right    { top: var(--fcta-oy); right: var(--fcta-ox); }
.fcta-pos-bottom-left  { bottom: var(--fcta-oy); left: var(--fcta-ox); }
.fcta-pos-bottom-right { bottom: var(--fcta-oy); right: var(--fcta-ox); }
.fcta-pos-top-center   { top: var(--fcta-oy); left: 50%; transform: translateX(-50%); }
.fcta-pos-bottom-center{ bottom: var(--fcta-oy); left: 50%; transform: translateX(-50%); }
.fcta-pos-middle-left  { left: var(--fcta-ox); top: 50%; transform: translateY(-50%); }
.fcta-pos-middle-right { right: var(--fcta-ox); top: 50%; transform: translateY(-50%); }

/* Keep top positions clear of the WordPress admin bar on the front end */
body.admin-bar:not(.wp-admin) .fcta-wrap.fcta-pos-top-left,
body.admin-bar:not(.wp-admin) .fcta-wrap.fcta-pos-top-center,
body.admin-bar:not(.wp-admin) .fcta-wrap.fcta-pos-top-right {
	top: calc(var(--fcta-oy) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar:not(.wp-admin) .fcta-wrap.fcta-pos-top-left,
	body.admin-bar:not(.wp-admin) .fcta-wrap.fcta-pos-top-center,
	body.admin-bar:not(.wp-admin) .fcta-wrap.fcta-pos-top-right {
		top: calc(var(--fcta-oy) + 46px);
	}
}

/* Alignment of mixed-width / mixed-size buttons */
.fcta-vertical.fcta-pos-top-right,
.fcta-vertical.fcta-pos-bottom-right,
.fcta-vertical.fcta-pos-middle-right {
	align-items: flex-end;
}

.fcta-vertical.fcta-pos-top-left,
.fcta-vertical.fcta-pos-bottom-left,
.fcta-vertical.fcta-pos-middle-left {
	align-items: flex-start;
}

.fcta-horizontal.fcta-pos-top-left,
.fcta-horizontal.fcta-pos-top-center,
.fcta-horizontal.fcta-pos-top-right {
	align-items: flex-start;
}

.fcta-horizontal.fcta-pos-bottom-left,
.fcta-horizontal.fcta-pos-bottom-center,
.fcta-horizontal.fcta-pos-bottom-right {
	align-items: flex-end;
}

.fcta-horizontal.fcta-pos-top-right,
.fcta-horizontal.fcta-pos-bottom-right {
	justify-content: flex-end;
}

.fcta-horizontal.fcta-pos-top-center,
.fcta-horizontal.fcta-pos-bottom-center {
	justify-content: center;
}

/* Button */
.fcta-wrap .fcta-btn {
	--fcta-s: calc(var(--fcta-size) * var(--fcta-scale, 1));
	pointer-events: auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--fcta-s) * 0.22);
	height: var(--fcta-s);
	min-width: var(--fcta-s);
	margin: 0;
	padding: 0 calc(var(--fcta-s) * 0.4);
	border: 0;
	border-radius: var(--fcta-radius);
	background-color: var(--fcta-bg, #2563eb) !important;
	color: var(--fcta-fg, #fff) !important;
	font-family: inherit;
	font-size: calc(var(--fcta-s) * 0.3);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none !important;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.fcta-wrap .fcta-btn:hover,
.fcta-wrap .fcta-btn:focus-visible {
	background-color: var(--fcta-hbg, var(--fcta-bg, #1d4ed8)) !important;
	color: var(--fcta-hfg, var(--fcta-fg, #fff)) !important;
	transform: translateY(-2px);
}

.fcta-wrap .fcta-btn:focus {
	outline: none;
}

.fcta-wrap .fcta-btn:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--fcta-hbg, #1d4ed8);
}

.fcta-has-shadow .fcta-btn {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.12);
}

.fcta-has-shadow .fcta-btn:hover {
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), 0 3px 6px rgba(0, 0, 0, 0.14);
}

.fcta-wrap .fcta-icon {
	flex: 0 0 auto;
	width: 1.15em;
	font-size: calc(var(--fcta-s) * 0.36);
	line-height: 1;
	text-align: center;
	color: inherit;
}

.fcta-wrap .fcta-label {
	display: inline-block;
	color: inherit;
}

/* Icon-only buttons */
.fcta-wrap .fcta-btn.fcta-icon-only {
	width: var(--fcta-s);
	padding: 0;
}

.fcta-wrap .fcta-icon-only .fcta-icon {
	font-size: calc(var(--fcta-s) * 0.42);
}

.fcta-wrap .fcta-btn.fcta-shape-circle {
	border-radius: 50%;
}

.fcta-wrap .fcta-btn.fcta-shape-square {
	border-radius: var(--fcta-sq-radius);
}

/* Tooltips (icon-only buttons) */
.fcta-wrap .fcta-has-tip::after {
	content: attr(data-fcta-tip);
	position: absolute;
	z-index: 1;
	padding: 7px 10px;
	border-radius: 6px;
	background: #111827;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.fcta-wrap .fcta-has-tip:hover::after,
.fcta-wrap .fcta-has-tip:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

.fcta-tip-left .fcta-has-tip::after   { right: calc(100% + 10px); top: 50%; transform: translate(4px, -50%); }
.fcta-tip-right .fcta-has-tip::after  { left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%); }
.fcta-tip-top .fcta-has-tip::after    { bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); }
.fcta-tip-bottom .fcta-has-tip::after { top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); }

.fcta-tip-left .fcta-has-tip:hover::after,
.fcta-tip-left .fcta-has-tip:focus-visible::after,
.fcta-tip-right .fcta-has-tip:hover::after,
.fcta-tip-right .fcta-has-tip:focus-visible::after {
	transform: translate(0, -50%);
}

.fcta-tip-top .fcta-has-tip:hover::after,
.fcta-tip-top .fcta-has-tip:focus-visible::after,
.fcta-tip-bottom .fcta-has-tip:hover::after,
.fcta-tip-bottom .fcta-has-tip:focus-visible::after {
	transform: translate(-50%, 0);
}

/* Entrance animation (backwards fill so hover transforms still work afterwards) */
@keyframes fcta-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.85);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.fcta-animate .fcta-btn {
	animation: fcta-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	animation-delay: calc(var(--fcta-i, 0) * 70ms + 200ms);
}

@media (prefers-reduced-motion: reduce) {
	.fcta-wrap .fcta-btn,
	.fcta-wrap .fcta-has-tip::after {
		animation: none !important;
		transition: none !important;
	}

	.fcta-wrap .fcta-btn:hover,
	.fcta-wrap .fcta-btn:focus-visible {
		transform: none;
	}
}

@media print {
	.fcta-wrap {
		display: none !important;
	}
}