/* Teckform Image Hotspots widget. Colors and sizes set in the Style tab override these defaults. */

.teckform-hotspots {
	--teckform-hotspot-size: 28px;
	--teckform-hotspot-color: var(--teckform-accent);
	--teckform-hotspot-icon: var(--teckform-on-accent);
	--teckform-hotspot-distance: 12px;
	--teckform-hotspot-tooltip-width: 260px;
	--teckform-hotspot-tooltip-bg: var(--teckform-surface);
	display: flex;
	justify-content: center;
}

.teckform-hotspots__inner {
	position: relative;
	width: 100%;
	max-width: 100%;
}

.teckform-hotspots__image {
	display: block;
	width: 100%;
	height: auto;
}

/* A spot is a zero-size point on the image. The marker is centered on it
   and the tooltip is placed around it. Positions are physical (from the left)
   because the image itself is not mirrored on right-to-left sites. */
.teckform-hotspots__spot {
	position: absolute;
	z-index: 1;
	width: 0;
	height: 0;
}

.teckform-hotspots__spot.is-open {
	z-index: 3;
}

.teckform-hotspots__marker {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--teckform-hotspot-size);
	height: var(--teckform-hotspot-size);
	padding: 0;
	border: 2px solid var(--teckform-hotspot-icon);
	border-radius: 50%;
	background-color: var(--teckform-hotspot-color);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
	color: var(--teckform-hotspot-icon);
	font-size: calc(var(--teckform-hotspot-size) * 0.45);
	line-height: 1;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.teckform-hotspots__marker:hover,
.teckform-hotspots__marker[aria-expanded="true"] {
	transform: translate(-50%, -50%) scale(1.1);
}

.teckform-hotspots__marker:focus-visible {
	outline: 3px solid var(--teckform-hotspot-color);
	outline-offset: 3px;
}

.teckform-hotspots__marker svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.teckform-hotspots__marker i {
	color: inherit;
}

.teckform-hotspots__dot {
	width: 36%;
	height: 36%;
	border-radius: 50%;
	background-color: var(--teckform-hotspot-icon);
}

/* Pulse: a ring in the marker color that grows and fades. */
.teckform-hotspots--pulse .teckform-hotspots__marker::before {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background-color: var(--teckform-hotspot-color);
	animation: teckform-hotspot-pulse 2s ease-out infinite;
	pointer-events: none;
}

@keyframes teckform-hotspot-pulse {
	from {
		opacity: 0.6;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(2.2);
	}
}

/* Tooltip */
.teckform-hotspots__tooltip {
	position: absolute;
	z-index: 2;
	width: max-content;
	max-width: min(var(--teckform-hotspot-tooltip-width), calc(var(--teckform-hotspots-room, 100vw) - 16px));
	padding: 14px 16px;
	border: 1px solid var(--teckform-border);
	border-radius: 12px;
	background-color: var(--teckform-hotspot-tooltip-bg);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
	color: var(--teckform-text);
	text-align: start;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.teckform-hotspots__spot.is-open .teckform-hotspots__tooltip {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.2s ease;
}

/* Little arrow pointing at the marker. It follows the marker when the
   tooltip is slid sideways to stay inside the image. */
.teckform-hotspots__tooltip::before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: var(--teckform-hotspot-tooltip-bg);
	transform: rotate(45deg);
}

.teckform-hotspots__title {
	margin: 0 0 4px;
	color: var(--teckform-text);
	font-weight: 700;
	line-height: 1.3;
}

.teckform-hotspots__text {
	margin: 0;
	color: var(--teckform-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.teckform-hotspots__link {
	display: inline-block;
	margin-top: 8px;
	color: var(--teckform-accent);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.teckform-hotspots__link:hover,
.teckform-hotspots__link:focus-visible {
	text-decoration: underline;
}

/* Above and below */
.is-pos-top > .teckform-hotspots__tooltip,
.is-pos-bottom > .teckform-hotspots__tooltip {
	left: 0;
	transform: translateX(calc(-50% + var(--teckform-hotspot-shift, 0px)));
}

.is-pos-top > .teckform-hotspots__tooltip {
	bottom: calc(var(--teckform-hotspot-size) / 2 + var(--teckform-hotspot-distance));
}

.is-pos-bottom > .teckform-hotspots__tooltip {
	top: calc(var(--teckform-hotspot-size) / 2 + var(--teckform-hotspot-distance));
}

.is-pos-top > .teckform-hotspots__tooltip::before,
.is-pos-bottom > .teckform-hotspots__tooltip::before {
	left: calc(50% - var(--teckform-hotspot-shift, 0px) - 5px);
}

.is-pos-top > .teckform-hotspots__tooltip::before {
	top: calc(100% - 5px);
}

.is-pos-bottom > .teckform-hotspots__tooltip::before {
	bottom: calc(100% - 5px);
}

/* Start and end sides (left and right, swapped on right-to-left sites) */
.is-pos-start > .teckform-hotspots__tooltip,
.is-pos-end > .teckform-hotspots__tooltip {
	top: 0;
	transform: translateY(calc(-50% + var(--teckform-hotspot-shift, 0px)));
}

.is-pos-start > .teckform-hotspots__tooltip {
	inset-inline-end: calc(var(--teckform-hotspot-size) / 2 + var(--teckform-hotspot-distance));
}

.is-pos-end > .teckform-hotspots__tooltip {
	inset-inline-start: calc(var(--teckform-hotspot-size) / 2 + var(--teckform-hotspot-distance));
}

.is-pos-start > .teckform-hotspots__tooltip::before,
.is-pos-end > .teckform-hotspots__tooltip::before {
	top: calc(50% - var(--teckform-hotspot-shift, 0px) - 5px);
}

.is-pos-start > .teckform-hotspots__tooltip::before {
	inset-inline-start: calc(100% - 5px);
}

.is-pos-end > .teckform-hotspots__tooltip::before {
	inset-inline-end: calc(100% - 5px);
}

@media (prefers-reduced-motion: reduce) {
	.teckform-hotspots *,
	.teckform-hotspots *::before,
	.teckform-hotspots *::after {
		animation: none !important;
		transition: none !important;
	}
}