/* ============================================================
   Floating Book CTA — serenity-toolkit-pro
   ============================================================ */

.fbcta-portal {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 99999;
	pointer-events: none;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.fbcta-wrap {
	position: fixed;
	bottom: 32px;
	right: 32px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
	z-index: 99999;

	/* Entry animation */
	opacity: 0;
	transform: translateY(20px);
	animation: fbcta-entry 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

@keyframes fbcta-entry {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Pill ─────────────────────────────────────────────────── */
.fbcta-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #0D0D0D;
	border-radius: 999px;
	padding: 10px 10px 10px 22px;
	text-decoration: none;
	pointer-events: all;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	max-width: 260px;

	/* Lift shadow */
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.18),
		0 1px 4px rgba(0, 0, 0, 0.12);

	/* Transitions */
	transition:
		box-shadow 0.3s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		gap 0.3s ease;
}

.fbcta-pill:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow:
		0 8px 28px rgba(0, 0, 0, 0.22),
		0 2px 8px rgba(0, 0, 0, 0.14);
	text-decoration: none;
}

.fbcta-pill:active {
	transform: translateY(0) scale(0.98);
}

/* ── Label ────────────────────────────────────────────────── */
.fbcta-label {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #ffffff;
	line-height: 1;
	opacity: 1;
	max-width: 160px;
	overflow: hidden;

	transition:
		opacity 0.3s ease,
		max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Icon Circle ──────────────────────────────────────────── */
.fbcta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 50%;
	background: #ffffff;
	flex-shrink: 0;
	position: relative;

	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fbcta-pill:hover .fbcta-icon {
	transform: rotate(360deg) scale(1.08);
}

.fbcta-icon svg {
	color: #0D0D0D;
	transition: transform 0.25s ease;
}

.fbcta-pill:hover .fbcta-icon svg {
	transform: translate(2px, -2px);
}

/* ── Pulse Animation ──────────────────────────────────────── */
.fbcta-pulse::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	animation: fbcta-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

@keyframes fbcta-pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	60%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}

/* ── Collapsed state (scroll) ─────────────────────────────── */
.fbcta-wrap.fbcta-collapsed .fbcta-pill {
	max-width: 56px;
	padding: 10px;
	gap: 0;
}

.fbcta-wrap.fbcta-collapsed .fbcta-label {
	opacity: 0;
	max-width: 0;
}

/* Pause pulse when collapsed */
.fbcta-wrap.fbcta-collapsed .fbcta-pulse::before {
	animation-play-state: paused;
}

/* ── Elementor editor placeholder ────────────────────────── */
.fbcta-anchor {
	display: none !important;
}