/*
 * Floating CTA Button — front-end styles.
 * All per-CTA values come from CSS custom properties set on the .fcta element.
 */

.fcta {
	position: fixed;
	z-index: var(--fcta-z, 9999);
	width: max-content;
	max-width: calc(100vw - 16px);
	line-height: 1;
	box-sizing: border-box;
}

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

/* ---------- Edge positions ---------- */

.fcta-pos-right,
.fcta-pos-left {
	top: calc(var(--fcta-align, 50%) + var(--fcta-shift, 0px));
	transform: translateY(calc(var(--fcta-align, 50%) * -1));
}

.fcta-pos-right {
	right: var(--fcta-edge, 0);
}

.fcta-pos-left {
	left: var(--fcta-edge, 0);
}

.fcta-pos-top,
.fcta-pos-bottom {
	left: calc(var(--fcta-align, 50%) + var(--fcta-shift, 0px));
	transform: translateX(calc(var(--fcta-align, 50%) * -1));
}

.fcta-pos-top {
	top: var(--fcta-edge, 0);
}

.fcta-pos-bottom {
	bottom: var(--fcta-edge, 0);
}

.admin-bar .fcta-pos-top {
	top: calc(var(--fcta-edge, 0px) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .fcta-pos-top {
		top: calc(var(--fcta-edge, 0px) + 46px);
	}
}

.fcta .fcta-inner,
.fcta .fcta-attn {
	position: relative;
	display: block;
}

/* ---------- Button ---------- */

.fcta .fcta-btn {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--fcta-gap, 8px);
	width: var(--fcta-w, auto);
	height: var(--fcta-h, auto);
	min-width: 0;
	margin: 0;
	padding: var(--fcta-pad, 11px 20px);
	border: 0;
	border-radius: var(--fcta-radius, 8px);
	background: var(--fcta-bg, #2563eb);
	box-shadow: var(--fcta-shadow, none);
	color: var(--fcta-color, #fff);
	font-family: inherit;
	font-size: var(--fcta-fs, 14px);
	font-style: normal;
	font-weight: var(--fcta-fw, 700);
	letter-spacing: var(--fcta-ls, 0);
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: var(--fcta-tt, none);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.fcta .fcta-btn:hover,
.fcta .fcta-btn:focus-visible {
	background: var(--fcta-hover-bg, var(--fcta-bg));
	color: var(--fcta-hover-color, var(--fcta-color));
	text-decoration: none;
}

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

.fcta .fcta-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
	box-shadow: 0 0 0 3px #1e1e1e;
}

.fcta .fcta-text {
	display: block;
}

.fcta .fcta-icon {
	display: inline-flex;
	flex: none;
	width: var(--fcta-is, 18px);
	height: var(--fcta-is, 18px);
	color: var(--fcta-icon, currentColor);
}

.fcta .fcta-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fcta-icon-end .fcta-icon {
	order: 2;
}

/* ---------- Layout & orientation ---------- */

.fcta-layout-vertical .fcta-btn {
	flex-direction: column;
}

.fcta-rotated .fcta-text {
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.fcta-pos-left.fcta-rotated .fcta-text {
	transform: rotate(180deg);
}

/* Edge-flush buttons: fill the gap to the screen edge when the tab moves on hover or attention. */
.fcta-flush .fcta-btn::before {
	content: "";
	position: absolute;
	background: inherit;
	pointer-events: none;
}

.fcta-flush.fcta-pos-right .fcta-btn::before {
	top: 0;
	bottom: 0;
	left: 100%;
	width: 14px;
}

.fcta-flush.fcta-pos-left .fcta-btn::before {
	top: 0;
	bottom: 0;
	right: 100%;
	width: 14px;
}

.fcta-flush.fcta-pos-top .fcta-btn::before {
	left: 0;
	right: 0;
	bottom: 100%;
	height: 14px;
}

.fcta-flush.fcta-pos-bottom .fcta-btn::before {
	left: 0;
	right: 0;
	top: 100%;
	height: 14px;
}

/* ---------- Shadows ---------- */

.fcta-shadow-soft {
	--fcta-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
}

.fcta-shadow-strong {
	--fcta-shadow: 0 12px 28px rgba(15, 23, 42, 0.24), 0 2px 6px rgba(15, 23, 42, 0.14);
}

/* ---------- Hover effects ---------- */

.fcta-hover-scale .fcta-btn:hover {
	transform: scale(1.05);
}

.fcta-hover-lift.fcta-pos-right .fcta-btn:hover {
	transform: translateX(-4px);
}

.fcta-hover-lift.fcta-pos-left .fcta-btn:hover {
	transform: translateX(4px);
}

.fcta-hover-lift.fcta-pos-top .fcta-btn:hover {
	transform: translateY(4px);
}

.fcta-hover-lift.fcta-pos-bottom .fcta-btn:hover {
	transform: translateY(-4px);
}

/* ---------- Waiting (display trigger / dismiss check pending) ---------- */

.fcta.fcta-waiting {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* ---------- Entrance animations ---------- */

.fcta:not(.fcta-waiting) .fcta-inner {
	animation-duration: 0.6s;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
	animation-delay: var(--fcta-delay, 0s);
	animation-fill-mode: both;
}

.fcta-enter-fade:not(.fcta-waiting) .fcta-inner {
	animation-name: fcta-fade;
}

.fcta-enter-zoom:not(.fcta-waiting) .fcta-inner {
	animation-name: fcta-zoom;
}

.fcta-enter-bounce:not(.fcta-waiting) .fcta-inner {
	animation-name: fcta-bounce-in;
	animation-duration: 0.8s;
}

.fcta-enter-slide.fcta-pos-right:not(.fcta-waiting) .fcta-inner {
	animation-name: fcta-slide-right;
}

.fcta-enter-slide.fcta-pos-left:not(.fcta-waiting) .fcta-inner {
	animation-name: fcta-slide-left;
}

.fcta-enter-slide.fcta-pos-top:not(.fcta-waiting) .fcta-inner {
	animation-name: fcta-slide-top;
}

.fcta-enter-slide.fcta-pos-bottom:not(.fcta-waiting) .fcta-inner {
	animation-name: fcta-slide-bottom;
}

@keyframes fcta-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fcta-zoom {
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: none; }
}

@keyframes fcta-bounce-in {
	0% { opacity: 0; transform: scale(0.3); }
	50% { opacity: 1; transform: scale(1.08); }
	75% { transform: scale(0.96); }
	100% { opacity: 1; transform: none; }
}

@keyframes fcta-slide-right {
	from { transform: translateX(calc(100% + var(--fcta-edge, 0px) + 24px)); }
	to { transform: none; }
}

@keyframes fcta-slide-left {
	from { transform: translateX(calc(-100% - var(--fcta-edge, 0px) - 24px)); }
	to { transform: none; }
}

@keyframes fcta-slide-top {
	from { transform: translateY(calc(-100% - var(--fcta-edge, 0px) - 60px)); }
	to { transform: none; }
}

@keyframes fcta-slide-bottom {
	from { transform: translateY(calc(100% + var(--fcta-edge, 0px) + 24px)); }
	to { transform: none; }
}

/* ---------- Attention animations (repeat every 4s) ---------- */

.fcta:not(.fcta-waiting) .fcta-attn {
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-delay: calc(var(--fcta-delay, 0s) + 1.5s);
}

.fcta .fcta-attn:hover,
.fcta .fcta-attn:focus-within {
	animation-play-state: paused;
}

.fcta-attn-pulse:not(.fcta-waiting) .fcta-attn {
	animation-name: fcta-pulse;
}

.fcta-attn-shake.fcta-pos-top:not(.fcta-waiting) .fcta-attn,
.fcta-attn-shake.fcta-pos-bottom:not(.fcta-waiting) .fcta-attn {
	animation-name: fcta-shake-x;
}

.fcta-attn-shake.fcta-pos-left:not(.fcta-waiting) .fcta-attn,
.fcta-attn-shake.fcta-pos-right:not(.fcta-waiting) .fcta-attn {
	animation-name: fcta-shake-y;
}

.fcta-attn-bounce.fcta-pos-right:not(.fcta-waiting) .fcta-attn {
	animation-name: fcta-nudge-right;
}

.fcta-attn-bounce.fcta-pos-left:not(.fcta-waiting) .fcta-attn {
	animation-name: fcta-nudge-left;
}

.fcta-attn-bounce.fcta-pos-top:not(.fcta-waiting) .fcta-attn {
	animation-name: fcta-nudge-top;
}

.fcta-attn-bounce.fcta-pos-bottom:not(.fcta-waiting) .fcta-attn {
	animation-name: fcta-nudge-bottom;
}

@keyframes fcta-pulse {
	0%, 30%, 100% { transform: scale(1); }
	10% { transform: scale(1.08); }
	20% { transform: scale(0.98); }
}

@keyframes fcta-shake-x {
	0%, 20%, 100% { transform: translateX(0); }
	4%, 12% { transform: translateX(-5px); }
	8%, 16% { transform: translateX(5px); }
}

@keyframes fcta-shake-y {
	0%, 20%, 100% { transform: translateY(0); }
	4%, 12% { transform: translateY(-5px); }
	8%, 16% { transform: translateY(5px); }
}

@keyframes fcta-nudge-right {
	0%, 24%, 100% { transform: translateX(0); }
	8% { transform: translateX(-10px); }
	16% { transform: translateX(-4px); }
}

@keyframes fcta-nudge-left {
	0%, 24%, 100% { transform: translateX(0); }
	8% { transform: translateX(10px); }
	16% { transform: translateX(4px); }
}

@keyframes fcta-nudge-top {
	0%, 24%, 100% { transform: translateY(0); }
	8% { transform: translateY(10px); }
	16% { transform: translateY(4px); }
}

@keyframes fcta-nudge-bottom {
	0%, 24%, 100% { transform: translateY(0); }
	8% { transform: translateY(-10px); }
	16% { transform: translateY(-4px); }
}

/* ---------- Close button ---------- */

.fcta .fcta-close {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 4px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #1f2937;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
	color: #fff;
	line-height: 1;
	cursor: pointer;
}

.fcta .fcta-close:hover {
	background: #000;
}

.fcta .fcta-close:focus-visible {
	outline: 2px solid #1e1e1e;
	outline-offset: 2px;
}

.fcta .fcta-close svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fcta-pos-right .fcta-close {
	top: -10px;
	left: -10px;
}

.fcta-pos-left .fcta-close {
	top: -10px;
	right: -10px;
}

.fcta-pos-top .fcta-close {
	right: -10px;
	bottom: -10px;
}

.fcta-pos-bottom .fcta-close {
	top: -10px;
	right: -10px;
}

/* ---------- Devices: desktop ≥1025px, tablet 768–1024px, mobile ≤767px ---------- */

@media (min-width: 1025px) {
	.fcta.fcta-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.fcta.fcta-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.fcta.fcta-hide-mobile {
		display: none !important;
	}

	/* Mobile: full-width bottom bar. */
	.fcta.fcta-mobile-bar {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-width: none;
		transform: none;
	}

	.fcta.fcta-mobile-bar .fcta-inner,
	.fcta.fcta-mobile-bar .fcta-attn {
		width: 100%;
	}

	.fcta.fcta-mobile-bar .fcta-attn {
		animation: none;
	}

	.fcta.fcta-mobile-bar .fcta-btn {
		flex-direction: row;
		width: 100%;
		height: auto;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
		border-radius: 0;
		transform: none;
	}

	.fcta.fcta-mobile-bar .fcta-btn::before {
		display: none;
	}

	.fcta.fcta-mobile-bar .fcta-text {
		-webkit-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		transform: none;
	}

	.fcta.fcta-mobile-bar .fcta-icon {
		order: 0;
	}

	.fcta.fcta-mobile-bar.fcta-enter-slide:not(.fcta-waiting) .fcta-inner {
		animation-name: fcta-slide-bottom;
	}

	.fcta.fcta-mobile-bar .fcta-close {
		top: -10px;
		right: 10px;
		bottom: auto;
		left: auto;
	}
}

/* ---------- Accessibility & print ---------- */

@media (prefers-reduced-motion: reduce) {
	.fcta .fcta-inner,
	.fcta .fcta-attn {
		animation: none !important;
	}

	.fcta .fcta-btn {
		transition: none;
	}

	.fcta .fcta-btn:hover {
		transform: none !important;
	}
}

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