/* =================================================================
   File: inc/elementor/widgets/image-hotspots/style.css
   ================================================================= */
.liqui-hotspots { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.liqui-hotspots__img { display: block; width: 100%; height: auto; }

.liqui-hotspots__spot {
	position: absolute;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
}
.liqui-hotspots__dot {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 0 6px rgba(11, 107, 203, 0.20), 0 6px 14px rgba(15,23,42,0.30);
	position: relative;
	transition: transform var(--dur-fast) var(--ease);
}
.liqui-hotspots__dot::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid var(--c-accent);
	opacity: 0;
	animation: liqui-hotspot-pulse 2s ease-out infinite;
}
@keyframes liqui-hotspot-pulse {
	0%   { transform: scale(0.6); opacity: 0.6; }
	100% { transform: scale(1.6); opacity: 0;   }
}
.liqui-hotspots__spot:hover .liqui-hotspots__dot,
.liqui-hotspots__spot:focus-visible .liqui-hotspots__dot { transform: scale(1.15); }

.liqui-hotspots__tooltip {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	min-width: 200px;
	max-width: 280px;
	padding: 10px 14px;
	border-radius: var(--radius);
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--c-ink);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
	z-index: 2;
	pointer-events: none;
	text-align: start;
}
.liqui-hotspots__tooltip strong { display: block; margin-bottom: 2px; font-weight: var(--fw-semi); }
.liqui-hotspots__spot:hover .liqui-hotspots__tooltip,
.liqui-hotspots__spot:focus-visible .liqui-hotspots__tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility 0s;
}
html[data-reduced-motion] .liqui-hotspots__dot::after { animation: none; }