/**
 * Color Hotspots for Elementor.
 *
 * Colors are read only through --ch-* variables so per-hotspot values
 * (set on .elementor-repeater-item-{id}) always win over the global ones.
 */

/* 8.1 Variables: zero specificity, on the widget element itself. */
:where(.elementor-widget-color-hotspot) {
	--ch-color: #fff;
	--ch-color-hover: var(--ch-color);
	--ch-bg: #5636d1;
	--ch-bg-hover: var(--ch-bg);
	--ch-pulse: var(--ch-bg);
	--ch-icon-size: 14px;
	--ch-icon-gap: 5px;
	--ch-box-size: 32px;
	--ch-transition: 300ms;
	--ch-tooltip-color: #fff;
	--ch-tooltip-bg: #1f2124;
	--ch-tooltip-gap: 10px;
	--ch-tooltip-duration: 300ms;
	--ch-anim-duration: 1500ms;
	--ch-x: 50%;
	--ch-y: 50%;
}

/* 8.2 Layout */
.ch-hotspots {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.ch-hotspots__image img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ch-hotspot {
	position: absolute;
	z-index: 1;
	line-height: normal;
	translate: var(--ch-tx) var(--ch-ty);
}

.ch-hotspot--h-left {
	left: var(--ch-x);
	--ch-tx: -50%;
}

.ch-hotspot--h-right {
	right: var(--ch-x);
	--ch-tx: 50%;
}

.ch-hotspot--v-top {
	top: var(--ch-y);
	--ch-ty: -50%;
}

.ch-hotspot--v-bottom {
	bottom: var(--ch-y);
	--ch-ty: 50%;
}

.ch-hotspot:hover,
.ch-hotspot:focus-within,
.ch-hotspot.ch-is-open {
	z-index: 3;
}

.ch-hotspot__button {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ch-icon-gap);
	min-width: var(--ch-box-size);
	min-height: var(--ch-box-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font: inherit;
	appearance: none;
	color: var(--ch-color);
	background-color: var(--ch-bg);
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: color var(--ch-transition), background-color var(--ch-transition);
}

.ch-hotspot__button:hover,
.ch-hotspot__button:focus-visible,
.ch-hotspot.ch-is-open .ch-hotspot__button {
	color: var(--ch-color-hover);
	background-color: var(--ch-bg-hover);
	text-decoration: none;
}

.ch-hotspot__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ch-hotspot--has-label .ch-hotspot__button {
	padding: 6px 12px;
	border-radius: 999px;
}

.ch-hotspot__icon {
	display: inline-flex;
	font-size: var(--ch-icon-size);
	line-height: 1;
}

.ch-hotspot__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ch-hotspot__label {
	line-height: 1.2;
}

.ch-hotspot__dot {
	width: calc(var(--ch-box-size) / 3);
	aspect-ratio: 1;
	border-radius: 50%;
	background: currentColor;
}

/* 8.3 Tooltip
 * Position blocks only set variables; the generic rules below consume them.
 * Default (no class applies) is "top".
 */
.ch-tooltip {
	--ch-inset: auto auto calc(100% + var(--ch-tooltip-gap)) 50%;
	--ch-tt-x: -50%;
	--ch-tt-y: 0px;
	--ch-dx: 0;
	--ch-dy: 1;
	--ch-origin: 50% 100%;
	--ch-a-inset: 100% auto auto 50%;
	--ch-a-tr: -50% 0;
	--ch-a-bc: var(--ch-tooltip-bg) transparent transparent transparent;
	--ch-sx: 0px;
	--ch-sy: 0px;

	position: absolute;
	z-index: 2;
	inset: var(--ch-inset);
	width: 200px;
	max-width: 80vw;
	box-sizing: border-box;
	padding: 8px 12px;
	border-radius: 4px;
	color: var(--ch-tooltip-color);
	background: var(--ch-tooltip-bg);
	line-height: 1.5;
	font-weight: 400;
	text-align: start;
	translate: calc(var(--ch-tt-x) + var(--ch-sx)) calc(var(--ch-tt-y) + var(--ch-sy));
	transform-origin: var(--ch-origin);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--ch-tooltip-duration),
		visibility var(--ch-tooltip-duration),
		scale var(--ch-tooltip-duration),
		translate var(--ch-tooltip-duration);
}

.ch-tooltip > :first-child {
	margin-top: 0;
}

.ch-tooltip > :last-child {
	margin-bottom: 0;
}

/* Stretched link: makes the whole tooltip card clickable. */
.ch-tooltip__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.ch-tooltip::after {
	content: "";
	position: absolute;
	inset: var(--ch-a-inset);
	translate: var(--ch-a-tr);
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: var(--ch-a-bc);
}

/* Arrow off unless the widget has .ch-tooltip-arrow-yes. */
.elementor-widget-color-hotspot:not(.ch-tooltip-arrow-yes) .ch-tooltip::after {
	display: none;
}

/* Positions: variable sets. */
.ch-tooltip-position-top .ch-tooltip,
.ch-hotspots .ch-hotspot--tooltip-top .ch-tooltip {
	--ch-inset: auto auto calc(100% + var(--ch-tooltip-gap)) 50%;
	--ch-tt-x: -50%;
	--ch-tt-y: 0px;
	--ch-dx: 0;
	--ch-dy: 1;
	--ch-origin: 50% 100%;
	--ch-a-inset: 100% auto auto 50%;
	--ch-a-tr: -50% 0;
	--ch-a-bc: var(--ch-tooltip-bg) transparent transparent transparent;
}

.ch-tooltip-position-bottom .ch-tooltip {
	--ch-inset: calc(100% + var(--ch-tooltip-gap)) auto auto 50%;
	--ch-tt-x: -50%;
	--ch-tt-y: 0px;
	--ch-dx: 0;
	--ch-dy: -1;
	--ch-origin: 50% 0;
	--ch-a-inset: auto auto 100% 50%;
	--ch-a-tr: -50% 0;
	--ch-a-bc: transparent transparent var(--ch-tooltip-bg) transparent;
}

.ch-tooltip-position-left .ch-tooltip {
	--ch-inset: 50% calc(100% + var(--ch-tooltip-gap)) auto auto;
	--ch-tt-x: 0px;
	--ch-tt-y: -50%;
	--ch-dx: 1;
	--ch-dy: 0;
	--ch-origin: 100% 50%;
	--ch-a-inset: 50% auto auto 100%;
	--ch-a-tr: 0 -50%;
	--ch-a-bc: transparent transparent transparent var(--ch-tooltip-bg);
}

.ch-tooltip-position-right .ch-tooltip {
	--ch-inset: 50% auto auto calc(100% + var(--ch-tooltip-gap));
	--ch-tt-x: 0px;
	--ch-tt-y: -50%;
	--ch-dx: -1;
	--ch-dy: 0;
	--ch-origin: 0 50%;
	--ch-a-inset: 50% 100% auto auto;
	--ch-a-tr: 0 -50%;
	--ch-a-bc: transparent var(--ch-tooltip-bg) transparent transparent;
}

@media (max-width: 1024px) {
	.ch-tooltip-position-tablet-top .ch-tooltip {
		--ch-inset: auto auto calc(100% + var(--ch-tooltip-gap)) 50%;
		--ch-tt-x: -50%;
		--ch-tt-y: 0px;
		--ch-dx: 0;
		--ch-dy: 1;
		--ch-origin: 50% 100%;
		--ch-a-inset: 100% auto auto 50%;
		--ch-a-tr: -50% 0;
		--ch-a-bc: var(--ch-tooltip-bg) transparent transparent transparent;
	}

	.ch-tooltip-position-tablet-bottom .ch-tooltip {
		--ch-inset: calc(100% + var(--ch-tooltip-gap)) auto auto 50%;
		--ch-tt-x: -50%;
		--ch-tt-y: 0px;
		--ch-dx: 0;
		--ch-dy: -1;
		--ch-origin: 50% 0;
		--ch-a-inset: auto auto 100% 50%;
		--ch-a-tr: -50% 0;
		--ch-a-bc: transparent transparent var(--ch-tooltip-bg) transparent;
	}

	.ch-tooltip-position-tablet-left .ch-tooltip {
		--ch-inset: 50% calc(100% + var(--ch-tooltip-gap)) auto auto;
		--ch-tt-x: 0px;
		--ch-tt-y: -50%;
		--ch-dx: 1;
		--ch-dy: 0;
		--ch-origin: 100% 50%;
		--ch-a-inset: 50% auto auto 100%;
		--ch-a-tr: 0 -50%;
		--ch-a-bc: transparent transparent transparent var(--ch-tooltip-bg);
	}

	.ch-tooltip-position-tablet-right .ch-tooltip {
		--ch-inset: 50% auto auto calc(100% + var(--ch-tooltip-gap));
		--ch-tt-x: 0px;
		--ch-tt-y: -50%;
		--ch-dx: -1;
		--ch-dy: 0;
		--ch-origin: 0 50%;
		--ch-a-inset: 50% 100% auto auto;
		--ch-a-tr: 0 -50%;
		--ch-a-bc: transparent var(--ch-tooltip-bg) transparent transparent;
	}
}

@media (max-width: 767px) {
	.ch-tooltip-position-mobile-top .ch-tooltip {
		--ch-inset: auto auto calc(100% + var(--ch-tooltip-gap)) 50%;
		--ch-tt-x: -50%;
		--ch-tt-y: 0px;
		--ch-dx: 0;
		--ch-dy: 1;
		--ch-origin: 50% 100%;
		--ch-a-inset: 100% auto auto 50%;
		--ch-a-tr: -50% 0;
		--ch-a-bc: var(--ch-tooltip-bg) transparent transparent transparent;
	}

	.ch-tooltip-position-mobile-bottom .ch-tooltip {
		--ch-inset: calc(100% + var(--ch-tooltip-gap)) auto auto 50%;
		--ch-tt-x: -50%;
		--ch-tt-y: 0px;
		--ch-dx: 0;
		--ch-dy: -1;
		--ch-origin: 50% 0;
		--ch-a-inset: auto auto 100% 50%;
		--ch-a-tr: -50% 0;
		--ch-a-bc: transparent transparent var(--ch-tooltip-bg) transparent;
	}

	.ch-tooltip-position-mobile-left .ch-tooltip {
		--ch-inset: 50% calc(100% + var(--ch-tooltip-gap)) auto auto;
		--ch-tt-x: 0px;
		--ch-tt-y: -50%;
		--ch-dx: 1;
		--ch-dy: 0;
		--ch-origin: 100% 50%;
		--ch-a-inset: 50% auto auto 100%;
		--ch-a-tr: 0 -50%;
		--ch-a-bc: transparent transparent transparent var(--ch-tooltip-bg);
	}

	.ch-tooltip-position-mobile-right .ch-tooltip {
		--ch-inset: 50% auto auto calc(100% + var(--ch-tooltip-gap));
		--ch-tt-x: 0px;
		--ch-tt-y: -50%;
		--ch-dx: -1;
		--ch-dy: 0;
		--ch-origin: 0 50%;
		--ch-a-inset: 50% 100% auto auto;
		--ch-a-tr: 0 -50%;
		--ch-a-bc: transparent var(--ch-tooltip-bg) transparent transparent;
	}
}

/* Per-hotspot positions (higher specificity: win at every breakpoint). */
.ch-hotspots .ch-hotspot--tooltip-bottom .ch-tooltip {
	--ch-inset: calc(100% + var(--ch-tooltip-gap)) auto auto 50%;
	--ch-tt-x: -50%;
	--ch-tt-y: 0px;
	--ch-dx: 0;
	--ch-dy: -1;
	--ch-origin: 50% 0;
	--ch-a-inset: auto auto 100% 50%;
	--ch-a-tr: -50% 0;
	--ch-a-bc: transparent transparent var(--ch-tooltip-bg) transparent;
}

.ch-hotspots .ch-hotspot--tooltip-left .ch-tooltip {
	--ch-inset: 50% calc(100% + var(--ch-tooltip-gap)) auto auto;
	--ch-tt-x: 0px;
	--ch-tt-y: -50%;
	--ch-dx: 1;
	--ch-dy: 0;
	--ch-origin: 100% 50%;
	--ch-a-inset: 50% auto auto 100%;
	--ch-a-tr: 0 -50%;
	--ch-a-bc: transparent transparent transparent var(--ch-tooltip-bg);
}

.ch-hotspots .ch-hotspot--tooltip-right .ch-tooltip {
	--ch-inset: 50% auto auto calc(100% + var(--ch-tooltip-gap));
	--ch-tt-x: 0px;
	--ch-tt-y: -50%;
	--ch-dx: -1;
	--ch-dy: 0;
	--ch-origin: 0 50%;
	--ch-a-inset: 50% 100% auto auto;
	--ch-a-tr: 0 -50%;
	--ch-a-bc: transparent var(--ch-tooltip-bg) transparent transparent;
}

/* 8.4 Visibility per trigger. An item's data-trigger overrides the widget class. */
.ch-tooltip-trigger-hover .ch-hotspot:not([data-trigger]):hover .ch-tooltip,
.ch-tooltip-trigger-hover .ch-hotspot:not([data-trigger]):focus-within .ch-tooltip,
.ch-hotspot[data-trigger="hover"]:hover .ch-tooltip,
.ch-hotspot[data-trigger="hover"]:focus-within .ch-tooltip,
.ch-tooltip-trigger-click.ch-tooltip-hover-yes .ch-hotspot:not([data-trigger]):hover .ch-tooltip,
.ch-tooltip-hover-yes .ch-hotspot[data-trigger="click"]:hover .ch-tooltip,
.ch-tooltip-trigger-click .ch-hotspot:not([data-trigger]).ch-is-open .ch-tooltip,
.ch-hotspot[data-trigger="click"].ch-is-open .ch-tooltip,
.ch-tooltip-trigger-none .ch-hotspot:not([data-trigger]) .ch-tooltip,
.ch-hotspot[data-trigger="none"] .ch-tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	scale: 1;
	--ch-sx: 0px;
	--ch-sy: 0px;
}

/* 8.5 Tooltip animations */
.ch-tooltip-animation-grow .ch-tooltip {
	scale: 0.6;
}

.ch-tooltip-animation-slide .ch-tooltip {
	--ch-sx: calc(var(--ch-dx) * 10px);
	--ch-sy: calc(var(--ch-dy) * 10px);
}

.ch-tooltip-animation-none .ch-tooltip {
	transition: none;
}

/* 8.6 Hotspot animations */
@keyframes ch-soft-beat {
	0%,
	100% {
		scale: 1;
	}

	50% {
		scale: 1.1;
	}
}

@keyframes ch-expand {
	0% {
		scale: 1;
		opacity: 0.6;
	}

	100% {
		scale: 1.8;
		opacity: 0;
	}
}

.ch-hotspot-animation-soft-beat .ch-hotspot__button {
	animation: ch-soft-beat var(--ch-anim-duration) ease-in-out infinite;
}

.ch-hotspot-animation-expand .ch-hotspot__button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--ch-pulse);
	pointer-events: none;
	animation: ch-expand var(--ch-anim-duration) ease-out infinite;
}

/* Pause the pulse while a tooltip is open. */
.ch-hotspot.ch-is-open .ch-hotspot__button,
.ch-hotspot.ch-is-open .ch-hotspot__button::before {
	animation-play-state: paused;
}

/* 8.7 Sequenced entrance */
.ch-hotspots-sequenced-yes .ch-hotspot {
	opacity: 0;
	scale: 0.5;
	transition: opacity 400ms ease, scale 400ms ease;
	transition-delay: var(--ch-delay, 0ms);
}

.ch-hotspots-sequenced-yes .ch-hotspots--in-view .ch-hotspot {
	opacity: 1;
	scale: 1;
}

/* Never hide hotspots inside the Elementor editor. */
body.elementor-editor-active .ch-hotspots-sequenced-yes .ch-hotspot {
	opacity: 1;
	scale: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ch-hotspot__button,
	.ch-hotspot__button::before,
	.ch-tooltip,
	.ch-hotspots-sequenced-yes .ch-hotspot {
		animation: none !important;
		transition: none !important;
	}

	.ch-hotspots-sequenced-yes .ch-hotspot {
		opacity: 1;
		scale: 1;
	}

	.ch-hotspot-animation-expand .ch-hotspot__button::before {
		display: none;
	}
}