/**
 * FXC Fusion, sitewide promo surfaces.
 * Phase 1: the A/B tested top-bar hook. Lives on the dark top bar, so colours
 * are set explicitly here rather than via the --fcb-* light/dark flip.
 * The pulsing dot reuses the @keyframes fc-pulse-dot defined in portal.css.
 */

.fcfp-topbar {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 60vw;
	padding: 3px 11px;
	border-radius: 6px;
	background: linear-gradient(135deg, rgba(20, 184, 166, 0.16), rgba(168, 85, 247, 0.16));
	border: 1px solid rgba(20, 184, 166, 0.35);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.fcfp-topbar:hover {
	border-color: rgba(20, 184, 166, 0.6);
	box-shadow: 0 4px 14px rgba(20, 184, 166, 0.25);
	transform: translateY(-1px);
}

.fcfp-topbar__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #14b8a6;
	box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.6);
	animation: fc-pulse-dot 2s ease-out infinite;
}

.fcfp-topbar__hook {
	color: #e9fbf6;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fcfp-topbar__cta {
	flex: 0 0 auto;
	color: #5eead4;
	font-weight: 700;
}
.fcfp-topbar__cta::after {
	content: " \2192"; /* arrow, kept out of the JS-swapped text */
}
.fcfp-topbar:hover .fcfp-topbar__hook,
.fcfp-topbar:hover .fcfp-topbar__cta {
	color: #99f6e4;
}

/* Phones: compact, the JS replaces the hook with "FXC Fusion". */
@media (max-width: 767px) {
	.fcfp-topbar {
		max-width: none;
	}
}