/**
 * Image Hotspot - Common base CSS ( loads for every style ).
 *
 * Owns the shared skeleton: the frame, marker buttons centred on their
 * coordinates, the four tooltip placements ( with arrows ) and the open /
 * hover reveal logic. Per-style files paint the marker and tooltip chrome.
 * CSS variables drive theme and sizing:
 *   --captwiki-hs-accent        → marker accent colour
 *   --captwiki-hs-marker        → marker diameter
 *   --captwiki-hs-marker-color  → icon / number colour
 *   --captwiki-hs-tooltip-w     → tooltip width
 *   --captwiki-hs-tooltip-bg    → tooltip background
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-hotspot {
	--captwiki-hs-accent: #6d5efc;
	--captwiki-hs-marker: 34px;
	--captwiki-hs-marker-color: #ffffff;
	--captwiki-hs-tooltip-w: 220px;
	--captwiki-hs-tooltip-bg: #111827;
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.captwiki-hotspot *,
.captwiki-hotspot *::before,
.captwiki-hotspot *::after {
	box-sizing: border-box;
}

/* ── Frame & image ─────────────────────────────────────── */
.captwiki-hotspot__frame {
	position: relative;
	width: 100%;
}

.captwiki-hotspot__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* ── Point ( marker anchor ) ───────────────────────────── */
.captwiki-hotspot__point {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
}

/* ── Marker button ─────────────────────────────────────── */
.captwiki-hotspot__marker {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate( -50%, -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --captwiki-hs-marker );
	height: var( --captwiki-hs-marker );
	padding: 0;
	background: var( --captwiki-hs-accent );
	border: 0;
	border-radius: 50%;
	color: var( --captwiki-hs-marker-color );
	font-size: calc( var( --captwiki-hs-marker ) * 0.42 );
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.captwiki-hotspot__marker:hover {
	transform: translate( -50%, -50% ) scale( 1.1 );
}

.captwiki-hotspot__marker:focus-visible {
	outline: 2px solid var( --captwiki-hs-accent );
	outline-offset: 3px;
}

.captwiki-hotspot__marker-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: inherit;
	line-height: 1;
}

.captwiki-hotspot__marker-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-hotspot__marker-icon i {
	font-style: normal;
}

/* ── Pulse ring ────────────────────────────────────────── */
.captwiki-hotspot--pulse .captwiki-hotspot__marker::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 color-mix( in srgb, var( --captwiki-hs-accent ) 55%, transparent );
	animation: captwiki-hs-pulse 2.2s ease-out infinite;
	pointer-events: none;
}

@keyframes captwiki-hs-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix( in srgb, var( --captwiki-hs-accent ) 55%, transparent );
	}

	70% {
		box-shadow: 0 0 0 14px transparent;
	}

	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.captwiki-hotspot--pulse .captwiki-hotspot__marker::after {
		animation: none;
	}
}

/* ── Tooltip ───────────────────────────────────────────── */
.captwiki-hotspot__tooltip {
	position: absolute;
	z-index: 3;
	width: var( --captwiki-hs-tooltip-w );
	max-width: 80vw;
	padding: 14px 16px;
	background: var( --captwiki-hs-tooltip-bg );
	border-radius: 10px;
	color: #ffffff;
	box-shadow: 0 12px 30px rgba( 17, 24, 39, 0.28 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	pointer-events: none;
}

/* Placements - measured from the point anchor ( 0 × 0 ). */
.captwiki-hotspot__tooltip--top {
	left: 0;
	bottom: calc( var( --captwiki-hs-marker ) / 2 + 12px );
	transform: translate( -50%, 6px );
}

.captwiki-hotspot__tooltip--bottom {
	left: 0;
	top: calc( var( --captwiki-hs-marker ) / 2 + 12px );
	transform: translate( -50%, -6px );
}

.captwiki-hotspot__tooltip--left {
	right: calc( var( --captwiki-hs-marker ) / 2 + 12px );
	top: 0;
	transform: translate( 6px, -50% );
}

.captwiki-hotspot__tooltip--right {
	left: calc( var( --captwiki-hs-marker ) / 2 + 12px );
	top: 0;
	transform: translate( -6px, -50% );
}

/* Arrow */
.captwiki-hotspot__tooltip::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: inherit;
	transform: rotate( 45deg );
}

.captwiki-hotspot__tooltip--top::after {
	left: 50%;
	bottom: -5px;
	margin-left: -5px;
}

.captwiki-hotspot__tooltip--bottom::after {
	left: 50%;
	top: -5px;
	margin-left: -5px;
}

.captwiki-hotspot__tooltip--left::after {
	right: -5px;
	top: 50%;
	margin-top: -5px;
}

.captwiki-hotspot__tooltip--right::after {
	left: -5px;
	top: 50%;
	margin-top: -5px;
}

/* ── Reveal ────────────────────────────────────────────── */
.captwiki-hotspot--hover .captwiki-hotspot__point:hover .captwiki-hotspot__tooltip,
.captwiki-hotspot--hover .captwiki-hotspot__point:focus-within .captwiki-hotspot__tooltip,
.captwiki-hotspot__point.is-open .captwiki-hotspot__tooltip {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.captwiki-hotspot--hover .captwiki-hotspot__point:hover .captwiki-hotspot__tooltip--top,
.captwiki-hotspot--hover .captwiki-hotspot__point:focus-within .captwiki-hotspot__tooltip--top,
.captwiki-hotspot__point.is-open .captwiki-hotspot__tooltip--top {
	transform: translate( -50%, 0 );
}

.captwiki-hotspot--hover .captwiki-hotspot__point:hover .captwiki-hotspot__tooltip--bottom,
.captwiki-hotspot--hover .captwiki-hotspot__point:focus-within .captwiki-hotspot__tooltip--bottom,
.captwiki-hotspot__point.is-open .captwiki-hotspot__tooltip--bottom {
	transform: translate( -50%, 0 );
}

.captwiki-hotspot--hover .captwiki-hotspot__point:hover .captwiki-hotspot__tooltip--left,
.captwiki-hotspot--hover .captwiki-hotspot__point:focus-within .captwiki-hotspot__tooltip--left,
.captwiki-hotspot__point.is-open .captwiki-hotspot__tooltip--left {
	transform: translate( 0, -50% );
}

.captwiki-hotspot--hover .captwiki-hotspot__point:hover .captwiki-hotspot__tooltip--right,
.captwiki-hotspot--hover .captwiki-hotspot__point:focus-within .captwiki-hotspot__tooltip--right,
.captwiki-hotspot__point.is-open .captwiki-hotspot__tooltip--right {
	transform: translate( 0, -50% );
}

/* ── Tooltip content ───────────────────────────────────── */
.captwiki-hotspot__title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: inherit;
}

.captwiki-hotspot__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	opacity: 0.85;
}

.captwiki-hotspot__link {
	display: inline-block;
	margin-top: 8px;
	color: #a5b4fc;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.captwiki-hotspot__link:hover {
	color: #c7d2fe;
}