/**
 * Image Hotspot Assist — front-end styles.
 *
 * Base image, absolutely-positioned pins, hidden tooltip content and the guided
 * tour (overlay, controls, active/dimmed states). Tooltipster ships its own theme;
 * the .tooltipster-dia-* rules below skin the tooltip shell to match this module.
 *
 * @author Divi Assist
 */

/* ----- Layout ------------------------------------------------------------ */
.dia-hotspot-assist {
	position: relative;
	width: 100%;
}

.dia-hotspot-image-wrap {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
	border-radius: inherit;
	overflow: visible;
}

.dia-hotspot-image {
	position: relative;
	z-index: 0;
	border-radius: inherit;
}

.dia-hotspot-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --dia-image-radius, 0 );
	opacity: var( --dia-image-opacity, 1 );
}

.dia-hotspot-image a {
	display: block;
	line-height: 0;
}

/* Pin layer overlays the image; only the pins themselves are interactive.
   The counter auto-numbers pins (badge + auto number pins) in both the builder
   and the front end without JavaScript. */
.dia-hotspot-items {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	counter-reset: dia-hotspot;
}

/* Neutralize the Divi child-module wrapper so items position against the image
   layer, not the wrapper. Divi gives .et_pb_module `position: relative` with zero
   height on the front end, which would collapse each pin's `top: Y%` to 0 — so
   force the wrapper back to static (it must not be a positioning context). */
.dia-hotspot-items > * {
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

/* ----- Hotspot item + pin ------------------------------------------------ */
.dia-hotspot-item {
	position: absolute;
	left: var( --dia-hotspot-x, 50% );
	top: var( --dia-hotspot-y, 50% );
	transform: translate( -50%, -50% );
	pointer-events: none;
	line-height: normal;
	counter-increment: dia-hotspot;
}

/* Numbering badge and auto-number pins print the current counter value. */
.dia-hotspot-pin-badge::before,
.dia-hotspot-pin-number[data-auto-number]::before {
	content: counter( dia-hotspot );
}

.dia-hotspot-pin {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --dia-pin-size, 34px );
	height: var( --dia-pin-size, 34px );
	padding: 0;
	margin: 0;
	border: var( --dia-pin-border-width, 2px ) solid var( --dia-pin-border-color, #ffffff );
	border-radius: var( --dia-pin-radius, 50% );
	background: var( --dia-pin-bg, #2563eb );
	color: var( --dia-pin-color, #ffffff );
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: var( --dia-pin-shadow, 0 2px 8px rgba( 0, 0, 0, 0.25 ) );
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.dia-hotspot-pin:hover,
.dia-hotspot-pin:focus-visible {
	transform: scale( var( --dia-pin-hover-scale, 1.12 ) );
	outline: none;
}

.dia-hotspot-item.is-active .dia-hotspot-pin {
	background: var( --dia-pin-bg-active, var( --dia-pin-bg, #1d4ed8 ) );
	color: var( --dia-pin-color-active, var( --dia-pin-color, #ffffff ) );
	transform: scale( var( --dia-pin-active-scale, 1.15 ) );
}

.dia-hotspot-pin-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.dia-hotspot-pin-dot {
	width: 42%;
	height: 42%;
	border-radius: 50%;
	background: currentColor;
}

/* Icon glyph — size relative to the pin and beat Divi's core .et-pb-icon size. */
.dia-hotspot-pin .dia-hotspot-pin-icon,
.dia-hotspot-pin-icon.et-pb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: 'ETmodules' !important;
	font-size: calc( var( --dia-pin-size, 34px ) * 0.56 ) !important;
	line-height: 1 !important;
	-webkit-font-smoothing: antialiased;
}

.dia-hotspot-pin-text,
.dia-hotspot-pin-number {
	font-size: calc( var( --dia-pin-size, 34px ) * 0.44 );
	font-weight: 600;
	line-height: 1;
}

.dia-hotspot-pin-image {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}

.dia-hotspot-pin-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Numbering badge for non-number pins (parent "Enable Pin Numbering"). */
.dia-hotspot-pin-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	background: #ef4444;
	border-radius: 9px;
	pointer-events: none;
}

/* ----- Pin animations ---------------------------------------------------- */
/* A pseudo-element ring drives most animations, so the pin content is untouched. */
.dia-hotspot-anim-pulse .dia-hotspot-pin::before,
.dia-hotspot-anim-ping .dia-hotspot-pin::before,
.dia-hotspot-anim-ripple .dia-hotspot-pin::before,
.dia-hotspot-anim-glow .dia-hotspot-pin::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var( --dia-pulse-color, rgba( 37, 99, 235, 0.5 ) );
	z-index: -1;
	pointer-events: none;
}

.dia-hotspot-anim-pulse .dia-hotspot-pin::before {
	animation: dia-hotspot-pulse var( --dia-pulse-speed, 2s ) ease-out infinite;
}
.dia-hotspot-anim-ping .dia-hotspot-pin::before {
	animation: dia-hotspot-ping var( --dia-pulse-speed, 1.4s ) cubic-bezier( 0, 0, 0.2, 1 ) infinite;
}
.dia-hotspot-anim-ripple .dia-hotspot-pin::before {
	box-shadow: 0 0 0 0 var( --dia-pulse-color, rgba( 37, 99, 235, 0.5 ) );
	background: transparent;
	animation: dia-hotspot-ripple var( --dia-pulse-speed, 1.8s ) ease-out infinite;
}
.dia-hotspot-anim-glow .dia-hotspot-pin::before {
	background: transparent;
	animation: dia-hotspot-glow var( --dia-pulse-speed, 1.8s ) ease-in-out infinite;
}
.dia-hotspot-anim-bounce .dia-hotspot-pin {
	animation: dia-hotspot-bounce var( --dia-pulse-speed, 1.6s ) ease-in-out infinite;
}
.dia-hotspot-anim-scale .dia-hotspot-pin {
	animation: dia-hotspot-scale var( --dia-pulse-speed, 1.8s ) ease-in-out infinite;
}
.dia-hotspot-anim-rotate .dia-hotspot-pin-inner {
	animation: dia-hotspot-rotate var( --dia-pulse-speed, 4s ) linear infinite;
}
.dia-hotspot-anim-shake .dia-hotspot-pin {
	animation: dia-hotspot-shake var( --dia-pulse-speed, 2.4s ) ease-in-out infinite;
}

@keyframes dia-hotspot-pulse {
	0%   { transform: scale( 1 ); opacity: 0.7; }
	70%  { transform: scale( 2.2 ); opacity: 0; }
	100% { transform: scale( 2.2 ); opacity: 0; }
}
@keyframes dia-hotspot-ping {
	0%   { transform: scale( 1 ); opacity: 0.6; }
	80%, 100% { transform: scale( 2.4 ); opacity: 0; }
}
@keyframes dia-hotspot-ripple {
	0%   { box-shadow: 0 0 0 0 var( --dia-pulse-color, rgba( 37, 99, 235, 0.5 ) ); }
	100% { box-shadow: 0 0 0 18px rgba( 37, 99, 235, 0 ); }
}
@keyframes dia-hotspot-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 37, 99, 235, 0 ); }
	50%      { box-shadow: 0 0 14px 5px var( --dia-pulse-color, rgba( 37, 99, 235, 0.6 ) ); }
}
@keyframes dia-hotspot-bounce {
	0%, 100% { transform: translateY( 0 ); }
	50%      { transform: translateY( -6px ); }
}
@keyframes dia-hotspot-scale {
	0%, 100% { transform: scale( 1 ); }
	50%      { transform: scale( 1.15 ); }
}
@keyframes dia-hotspot-rotate {
	from { transform: rotate( 0deg ); }
	to   { transform: rotate( 360deg ); }
}
@keyframes dia-hotspot-shake {
	0%, 90%, 100% { transform: translateX( 0 ); }
	93% { transform: translateX( -3px ); }
	96% { transform: translateX( 3px ); }
}

/* ----- Tooltip content (hidden source read by Tooltipster) --------------- */
.dia-hotspot-tooltip[hidden],
.dia-hotspot-tour-content[hidden] {
	display: none;
}

/* Defaults below (colour / background / radius) are overridden by the native
   Tooltip font, Background and Border groups (Design tab), which target this same
   element with a higher-specificity rule. */
.dia-hotspot-tooltip-inner {
	text-align: left;
	padding: var( --dia-tooltip-padding, 16px );
	color: #f3f4f6;
	background-color: #111827;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba( 0, 0, 0, 0.28 );
}

.dia-hotspot-tooltip-image {
	margin: 0 0 10px;
	line-height: 0;
}

.dia-hotspot-tooltip-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.dia-hotspot-tooltip-img-bottom .dia-hotspot-tooltip-image { margin: 10px 0 0; }

.dia-hotspot-title {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.3;
	color: inherit;
}

/* Headings inherit the theme's (dark) color; force the title to inherit the
   tooltip text color (native Title Text group, or the inner default) so it stays
   visible on the tooltip background. */
.tooltipster-dia .dia-hotspot-title {
	color: inherit;
}

.dia-hotspot-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: inherit;
}

.dia-hotspot-description :last-child { margin-bottom: 0; }

/* Native Divi button inside the tooltip — spacing from the text above. */
.dia-hotspot-tooltip-inner .et_pb_button_wrapper {
	margin-top: 12px;
}

/* ----- Tooltipster shell theme (matches this module) --------------------- */
/* The Tooltipster box is a bare pass-through: the .dia-hotspot-tooltip-inner
   element carries the background, border/radius and shadow (native Tooltip
   Background + Border groups), so the box stays transparent and does not clip. */
.tooltipster-sidetip.tooltipster-dia .tooltipster-box {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.tooltipster-sidetip.tooltipster-dia .tooltipster-content {
	padding: 0;
	line-height: 1.5;
}

/* The shadow theme hides .tooltipster-arrow-background and colors the *border*
   element (white by default), so match the arrow to the box via that element. */
.tooltipster-sidetip.tooltipster-dia.tooltipster-top .tooltipster-arrow-border { border-top-color: var( --dia-tooltip-bg, #111827 ); }
.tooltipster-sidetip.tooltipster-dia.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: var( --dia-tooltip-bg, #111827 ); }
.tooltipster-sidetip.tooltipster-dia.tooltipster-left .tooltipster-arrow-border { border-left-color: var( --dia-tooltip-bg, #111827 ); }
.tooltipster-sidetip.tooltipster-dia.tooltipster-right .tooltipster-arrow-border { border-right-color: var( --dia-tooltip-bg, #111827 ); }

/* Hide the arrow when the module disables it. */
.dia-hotspot-assist[data-tooltip-arrow="off"] ~ .tooltipster-base .tooltipster-arrow,
.tooltipster-dia.dia-no-arrow .tooltipster-arrow { display: none; }

/* ----- Guided tour ------------------------------------------------------- */
/* Dim overlay that darkens the image while the tour runs; the active hotspot is
   "spotlit" by raising it above the overlay. */
.dia-hotspot-tour-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var( --dia-tour-overlay-color, rgba( 8, 11, 22, 0.62 ) );
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --dia-tour-speed, 0.35s ) ease;
	pointer-events: none;
	border-radius: inherit;
}

.dia-hotspot-assist.is-tour-running .dia-hotspot-tour-overlay {
	opacity: 1;
	visibility: visible;
}

/* Raise the active hotspot above the tour overlay (spotlight). */
.dia-hotspot-assist.is-tour-running .dia-hotspot-item.is-tour-active {
	z-index: 6;
}

.dia-hotspot-assist[data-highlight-active="on"].is-tour-running .dia-hotspot-item.is-tour-active .dia-hotspot-pin {
	box-shadow: 0 0 0 var( --dia-tour-ring-size, 6px ) var( --dia-tour-ring-color, rgba( 37, 99, 235, 0.45 ) ),
		0 2px 10px rgba( 0, 0, 0, 0.35 );
}

/* Dim non-active hotspots during the tour (optional). */
.dia-hotspot-assist[data-dim-inactive="on"].is-tour-running .dia-hotspot-item:not( .is-tour-active ) {
	opacity: var( --dia-inactive-opacity, 0.35 );
}

/* ----- Tour start button (native Divi button, centered over the image) --- */
.dia-hotspot-tour-start-wrap {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* Only the button is interactive (the centering wrapper is not). The native
   Divi button provides its own styling via the Design tab. */
.dia-hotspot-tour-start-wrap .et_pb_button_wrapper,
.dia-hotspot-tour-start-wrap .et_pb_button,
.dia-hotspot-tour-start {
	pointer-events: auto;
	margin: 0;
}

/* Hide the start button once the tour is running. */
.dia-hotspot-assist.is-tour-running .dia-hotspot-tour-start-wrap {
	display: none;
}

/* ----- Tour navigation (inside the active tooltip) ----------------------- */
.dia-hotspot-tour-nav {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba( 255, 255, 255, 0.16 );
}

.dia-hotspot-tour-nav .dia-hotspot-tour-progress {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var( --dia-progress-color, inherit );
	opacity: 0.7;
}

.dia-hotspot-tour-nav-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var( --dia-controls-gap, 8px );
}

.dia-hotspot-tour-nav button {
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var( --dia-controls-btn-color, #ffffff );
	background: rgba( 255, 255, 255, 0.18 );
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dia-hotspot-tour-nav button:hover { background: rgba( 255, 255, 255, 0.32 ); }

.dia-hotspot-tour-nav button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ----- Reduced motion ---------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.dia-hotspot-pin,
	.dia-hotspot-pin-inner,
	.dia-hotspot-pin::before {
		animation: none !important;
	}
	.dia-hotspot-tour-overlay { transition: none; }
}

/* Default heading-level sizes for the title/caption (overridable via the
   Title font group in the Design tab). Applies to whichever h1-h6 tag the
   chosen heading level renders. */
h1.dia-hotspot-title { font-size: 27px; }
h2.dia-hotspot-title { font-size: 21px; }
h3.dia-hotspot-title { font-size: 16px; }
h4.dia-hotspot-title { font-size: 14px; }
h5.dia-hotspot-title { font-size: 12px; }
h6.dia-hotspot-title { font-size: 10px; }