/* wpagent/hotspot + wpagent/hotspot-point (P11). Points sit at x %/y % of the
 * image (style engine on each point); hotspot props arrive as --wpab-hs-*.
 * Tooltip side: data-side (set by view.js after flipping at the edges), or
 * without JavaScript the point's / hotspot's data-placement. */
.wpab-hotspot__frame {
	position: relative;
}
.wpab-hotspot__img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	border: 0 solid currentColor;
}

/* Point --------------------------------------------------------------------- */
.wpab-hotspot-point {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 0;
	height: 0;
}
.wpab-hotspot-point.is-open,
.wpab-hotspot:not(.is-ready) .wpab-hotspot-point:is(:hover, :focus-within) {
	z-index: 3;
}
.wpab-hotspot-point__button {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--wpab-hs-size, 32px);
	height: var(--wpab-hs-size, 32px);
	margin: 0;
	padding: 0;
	border: 0 solid currentColor;
	border-radius: 999px;
	background: var(--wpab-hs-bg, var(--wp--preset--color--accent, #101828));
	color: var(--wpab-hs-color, var(--wp--preset--color--on-accent, #fff));
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: transform 0.15s ease;
}
.wpab-hotspot-point__button:hover,
.wpab-hotspot-point.is-open > .wpab-hotspot-point__button {
	transform: translate(-50%, -50%) scale(1.1);
}
.wpab-hotspot-point__button:focus-visible {
	outline: 3px solid var(--wp--preset--color--surface, #fff);
	outline-offset: 3px;
}
.wpab-hotspot-point__marker {
	display: inline-flex;
}
.wpab-hotspot-point__icon {
	width: calc(var(--wpab-hs-size, 32px) * 0.55);
	height: calc(var(--wpab-hs-size, 32px) * 0.55);
}
.wpab-hotspot.has-pulse .wpab-hotspot-point__button::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 var(--wpab-hs-bg, var(--wp--preset--color--accent, #101828));
	animation: wpab-hs-pulse 2s ease-out infinite;
	pointer-events: none;
}

/* Tooltip ------------------------------------------------------------------- */
.wpab-hotspot-point__tip {
	--wpab-hs-gap: calc(var(--wpab-hs-size, 32px) / 2 + 10px);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	box-sizing: border-box;
	width: min(var(--wpab-hs-tip-w, 240px), calc(100vw - 24px));
	padding: 12px 14px;
	border-radius: var(--wp--preset--border-radius--md, 10px);
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--ink, #101828);
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.2);
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
	/* display, not visibility: a hidden tooltip must not widen the page. */
	display: none;
	transform: translate(calc(-50% + var(--wpab-hs-shift, 0px)), calc(-100% - var(--wpab-hs-gap)));
}
.wpab-hotspot-point.is-open > .wpab-hotspot-point__tip,
.wpab-hotspot:not(.is-ready) .wpab-hotspot-point:is(:hover, :focus-within) > .wpab-hotspot-point__tip {
	display: block;
}
.wpab-hotspot-point__tip > * + * {
	margin-top: 6px;
}
.wpab-hotspot-point__title {
	margin: 0;
	font-weight: 700;
}
.wpab-hotspot-point__text p {
	margin: 0;
}
.wpab-hotspot-point__link {
	display: inline-block;
	color: var(--wp--preset--color--accent, currentColor);
	font-weight: 600;
}

/* Sides: placement without JavaScript, data-side once placed by view.js. */
.wpab-hotspot[data-placement="bottom"] .wpab-hotspot-point:not([data-placement], [data-side]) > .wpab-hotspot-point__tip,
.wpab-hotspot-point[data-placement="bottom"]:not([data-side]) > .wpab-hotspot-point__tip,
.wpab-hotspot-point[data-side="bottom"] > .wpab-hotspot-point__tip {
	transform: translate(calc(-50% + var(--wpab-hs-shift, 0px)), var(--wpab-hs-gap));
}
.wpab-hotspot[data-placement="left"] .wpab-hotspot-point:not([data-placement], [data-side]) > .wpab-hotspot-point__tip,
.wpab-hotspot-point[data-placement="left"]:not([data-side]) > .wpab-hotspot-point__tip,
.wpab-hotspot-point[data-side="left"] > .wpab-hotspot-point__tip {
	transform: translate(calc(-100% - var(--wpab-hs-gap)), -50%);
}
.wpab-hotspot[data-placement="right"] .wpab-hotspot-point:not([data-placement], [data-side]) > .wpab-hotspot-point__tip,
.wpab-hotspot-point[data-placement="right"]:not([data-side]) > .wpab-hotspot-point__tip,
.wpab-hotspot-point[data-side="right"] > .wpab-hotspot-point__tip {
	transform: translate(var(--wpab-hs-gap), -50%);
}
.wpab-hotspot-point[data-side="top"] > .wpab-hotspot-point__tip {
	transform: translate(calc(-50% + var(--wpab-hs-shift, 0px)), calc(-100% - var(--wpab-hs-gap)));
}

@keyframes wpab-hs-pulse {
	to {
		box-shadow: 0 0 0 14px transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpab-hotspot-point__button {
		transition: none;
	}
	.wpab-hotspot.has-pulse .wpab-hotspot-point__button::after {
		animation: none;
	}
}

/* Editors only: no image chosen yet (Preview placeholder). */
.wpab-hotspot--empty .wpab-hotspot__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(45deg, rgba(16, 24, 40, 0.04) 0 12px, rgba(16, 24, 40, 0.08) 12px 24px);
	outline: 1px dashed rgba(16, 24, 40, 0.35);
}
.wpab-hotspot__empty {
	margin: 0;
	padding: 16px;
	text-align: center;
}

/* Gutenberg only (framed-containers.js): points stay on the image (the editor
 * makes every block position: relative) and a selected point shows its
 * tooltip blocks for editing. */
.wpab-hotspot__frame > .wpab-hotspot-point.block-editor-block-list__block {
	position: absolute;
	margin: 0;
}
.wpab-hotspot-point:is(.is-selected, .has-child-selected) > .wpab-editor-point-tip {
	display: block;
}