/**
 * Flavors Custom Cursor - document-level cursor follower.
 *
 * The dot + follower nodes are created by JS and appended to <body>; their sizes
 * and colors are inherited from CSS custom properties Elementor sets on <body>
 * via the widget's `selectors`. Position and hover scale are written to inline
 * transforms by the engine - this file only provides shape, color and motion
 * affordances. All nodes are pointer-events:none so they never block clicks.
 */

.flavor-cursor-fx {
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 99999;
}

.flavor-cursor-fx.fcc-visible {
	opacity: 1;
}

.fcc-dot,
.fcc-follower {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	will-change: transform;
}

.fcc-dot {
	width: var(--fcc-dot-size, 8px);
	height: var(--fcc-dot-size, 8px);
	background: var(--fcc-dot-color, #111827);
	border-radius: 50%;
}

/* Ring follower. */
.fcc-follower--ring {
	width: var(--fcc-ring-size, 40px);
	height: var(--fcc-ring-size, 40px);
	border: var(--fcc-ring-thickness, 2px) solid var(--fcc-ring-color, #111827);
	background: var(--fcc-ring-fill, transparent);
	border-radius: 50%;
}

/* Blob follower: a soft shape with a slow wobble on its border-radius only
   (position/scale come from the inline transform, so there is no conflict). */
.fcc-follower--blob {
	width: var(--fcc-blob-size, 60px);
	height: var(--fcc-blob-size, 60px);
	background: var(--fcc-blob-color, #6366f1);
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	animation: fcc-wobble 8s ease-in-out infinite;
}

@keyframes fcc-wobble {
	0%,
	100% {
		border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	}
	33% {
		border-radius: 60% 40% 42% 58% / 63% 37% 63% 37%;
	}
	66% {
		border-radius: 37% 63% 51% 49% / 45% 60% 40% 55%;
	}
}

/* Image follower. */
.fcc-follower--image {
	width: var(--fcc-image-width, 80px);
}

.fcc-follower-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

/* Hide the OS pointer while the custom cursor is active. */
html.fcc-hide-native,
html.fcc-hide-native * {
	cursor: none !important;
}

/* Text entry keeps its caret cursor so visitors can see where they type. */
html.fcc-hide-native input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html.fcc-hide-native textarea,
html.fcc-hide-native [contenteditable]:not([contenteditable="false"]),
html.fcc-hide-native [contenteditable]:not([contenteditable="false"]) * {
	cursor: text !important;
}

html.fcc-hide-native select {
	cursor: auto !important;
}

/* Editor placeholder (content_template). */
.flavor-custom-cursor__note {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
	background: #f1f5f9;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
}

.flavor-custom-cursor__note-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #111827;
	box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.15);
}

/* Reduced motion or forced colours: never show the custom cursor (JS also
   bails); the system pointer is the only one that honours the user's theme. */
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
	.flavor-cursor-fx {
		display: none !important;
	}

	html.fcc-hide-native,
	html.fcc-hide-native * {
		cursor: auto !important;
	}
}