/**
 * Flavors Custom Cursor - base styles.
 *
 * The dot and ring are fixed-position layers driven entirely by JS transforms
 * (translate3d). Sizes/colors come from CSS custom properties set on <body> by
 * the widget's Elementor `selectors`, with sensible fallbacks here so the
 * cursor still works if no style controls were touched.
 *
 * The whole layer is non-interactive (pointer-events: none) so it never blocks
 * clicks. The blend mode is set by the JS as an inline mix-blend-mode on the
 * fixed layer itself (the layer is a stacking context, so blending its children
 * would only blend them with the transparent layer).
 */

:root,
body {
	--flavor-cursor-dot-size: 8px;
	--flavor-cursor-dot-color: #111827;
	--flavor-cursor-ring-size: 40px;
	--flavor-cursor-ring-color: #111827;
	--flavor-cursor-ring-border: 2px;
	--flavor-cursor-ring-fill: transparent;
	--flavor-cursor-label-color: #ffffff;
	--flavor-cursor-label-bg: #111827;
}

.flavor-cursor-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 2147483646;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	will-change: opacity;
}

.flavor-cursor-layer.is-visible {
	opacity: 1;
}

.flavor-cursor__dot,
.flavor-cursor__ring {
	position: fixed;
	top: 0;
	left: 0;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
}

.flavor-cursor__dot {
	width: var(--flavor-cursor-dot-size);
	height: var(--flavor-cursor-dot-size);
	margin: 0;
	background-color: var(--flavor-cursor-dot-color);
}

.flavor-cursor__ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--flavor-cursor-ring-size);
	height: var(--flavor-cursor-ring-size);
	background-color: var(--flavor-cursor-ring-fill);
	border: var(--flavor-cursor-ring-border) solid var(--flavor-cursor-ring-color);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Press feedback: a subtle ring squeeze. */
.flavor-cursor-layer.is-down .flavor-cursor__ring {
	background-color: var(--flavor-cursor-ring-color);
}

/* Hover label inside the ring. */
.flavor-cursor__label {
	display: none;
	max-width: 140px;
	padding: 2px 8px;
	color: var(--flavor-cursor-label-color);
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	text-align: center;
	background-color: var(--flavor-cursor-label-bg);
	border-radius: 4px;
}

.flavor-cursor-layer.has-label .flavor-cursor__ring {
	background-color: transparent;
	border-color: transparent;
}

.flavor-cursor-layer.has-label .flavor-cursor__label {
	display: block;
}

/* Hide the OS pointer when requested (toggled by JS via <html> class). */
html.flavor-cursor-hide-native,
html.flavor-cursor-hide-native * {
	cursor: none !important;
}

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

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

/* Editor-only informational note (the live cursor is suppressed in edit mode). */
.flavor-cursor__editor-note {
	display: inline-block;
	padding: 10px 14px;
	color: #4b5563;
	font-size: 13px;
	line-height: 1.4;
	background: #f3f4f6;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
}

/* Safety: never run the custom cursor for reduced-motion users. */
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
	.flavor-cursor-layer {
		display: none !important;
	}

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