/**
 * DreamWP Hotspot — front-end markers + popovers.
 *
 * Look matches the reference: blue dot markers that turn into a dark ✕
 * button when open, with a dark rounded popover (plain tooltip or rich
 * card with thumbnail + link).
 */

.dwph-wrap {
	position: relative;
	display: block;
	line-height: 0;
	margin: 0 auto;
}

.dwph-image {
	width: 100%;
	height: 700px;
	/* Fill 700px tall box at full width without distortion: the image
	   keeps its aspect ratio and the overflow is cropped, not stretched. */
	object-fit: cover;
	display: block;
	border-radius: 20px;
	filter: var(--dwph-filter, none);
}

/* --------------------------------------------------------------- markers */

.dwph-spot {
	position: absolute;
	width: 0;
	height: 0;
	line-height: normal;
}

.dwph-marker {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #10161d;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	z-index: 2;
	transition: transform 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.dwph-marker:hover,
.dwph-marker:focus-visible {
	transform: translate(-50%, -50%) scale(1.15);
}

.dwph-marker:focus-visible {
	outline: 2px solid var(--dwph-marker-color, #0aa5ff);
	outline-offset: 2px;
}

/* Closed: colored dot inside a dark ring, gentle pulse. */
.dwph-marker-dot {
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: var(--dwph-marker-color, #0aa5ff);
	animation: dwph-pulse 2.4s ease-out infinite;
}

@keyframes dwph-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
	70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.dwph-marker-dot { animation: none; }
}

/* Open: the dot swaps for a white ✕ on the dark disc. */
.dwph-marker-x {
	position: absolute;
	inset: 0;
	display: none;
	color: #fff;
}

.dwph-marker-x::before,
.dwph-marker-x::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.dwph-marker-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.dwph-marker-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

.dwph-spot.is-open .dwph-marker-dot { display: none; }
.dwph-spot.is-open .dwph-marker-x { display: block; }
.dwph-spot.is-open { z-index: 10; }

/* -------------------------------------------------------------- popovers */

.dwph-popover {
	position: absolute;
	left: 16px;
	top: -12px;
	z-index: 5;
	width: max-content;
	max-width: min(150px, 68vw);
	padding: 14px 16px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	animation: dwph-pop-in 0.16s ease;
}

@keyframes dwph-pop-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.dwph-popover { animation: none; }
}

/* Flip toward the image center near the edges (classes set server-side). */
.dwph-popover.dwph-pop-left {
	left: auto;
	right: 16px;
}

.dwph-popover.dwph-pop-up {
	top: auto;
	bottom: -12px;
}

/* Themes. */
.dwph-theme-dark .dwph-popover {
	background: #10161d;
	color: #e8ecf1;
}

.dwph-theme-light .dwph-popover {
	background: #ffffff;
	color: #1d2327;
	border: 1px solid #e2e6ea;
}

h4.dwph-pop-title {
	margin: 0 0 6px;
	font-size: 14px !important;
	font-weight: 400;
	line-height: 1.3;
	color: inherit;
}

.dwph-pop-title:last-child {
	margin-bottom: 0;
}

.dwph-pop-thumb {
	display: block;
	width: 100%;
	height: 80px;
	object-fit: cover;
	border-radius: 6px;
	margin: 0 0 8px;
}

.dwph-pop-desc {
	margin: 0;
}

.dwph-pop-desc p {
	margin: 0 0 6px;
}

.dwph-pop-desc p:last-child {
	margin-bottom: 0;
}

.dwph-pop-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: inherit;
}

.dwph-theme-dark .dwph-pop-link:hover,
.dwph-theme-dark .dwph-pop-link:focus {
	color: var(--dwph-marker-color, #0aa5ff);
}

.dwph-theme-light .dwph-pop-link:hover,
.dwph-theme-light .dwph-pop-link:focus {
	color: var(--dwph-marker-color, #0aa5ff);
}

/* Small screens: keep popovers on-image. */
@media (max-width: 480px) {
	.dwph-popover {
		max-width: 62vw;
		padding: 10px 12px;
		font-size: 13px;
	}
}

/* Mobile: the fixed 700px box is too tall — let the image keep its natural
   ratio at full width, and hide the hotspot markers entirely (plain image).
   !important so it also beats the inline display set by the reposition JS. */
@media (max-width: 767px) {
	.dwph-image {
		height: auto;
		object-fit: initial;
	}

	.dwph-spot {
		display: none !important;
	}
}