/* Layout */
.hotspot-wrap {
  position: relative;
  max-width:100%;
;
}

.hotspot-wrap .backdrop {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Hotspot positioning (set via CSS variables on each .hotspot) */
.hotspot {
  --size: 16px;             /* dot size */
  --pulse-size: 44px;       /* pulse ring max size */
  --tip-offset: 16px;       /* gap between dot and tooltip */
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
}

.hotspot .label { position:relative; left: calc(10px - 50%); margin-bottom: 10px; font-weight: bold; text-transform: uppercase;}

/* The blinking dot + pulse ring */
.hotspot .dot {
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background:#007dc4;              /* dot color */
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px #fff;
  display: block; 
}
.hotspot .dot::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid rgba(48, 148, 255, 0.6);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { opacity: 0.9; width: var(--size); height: var(--size); }
  100% { opacity: 0;   width: var(--pulse-size); height: var(--pulse-size); }
}

/* Tooltip */
.tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--tip-offset));
  transform: translateX(-50%);
  min-width: 220px;
	text-align: left;
  max-width: min(320px, 70vw);
  padding: 12px 14px;
  border-radius: 10px;
  background: #111827;       /* slate-900 */
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  line-height: 1.4;
  font-size: 14px;
  z-index: 2;
  display: none;              /* hidden by default */
}

/* Tooltip arrow */
.tooltip .arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: #111827;
  transform: translate(-50%, -50%) rotate(45deg);
  left: 50%; top: 0;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
}



/* Tooltip content bits */
.tooltip header { margin-bottom: 6px; font-size: 15px; }
.tooltip p { margin: 6px 0; }
.tooltip ul { margin: 8px 0 0 18px; }
.tooltip .btn {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  background: #2563eb;       /* blue-600 */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  margin-top: 8px;
}

/* Show on hover or keyboard focus */
.hotspot:is(:hover, :focus-visible) .tooltip {
  display: block;
}

/* Optional: flip tooltip above if near bottom edge */
/* Add .tooltip.top to switch side in HTML if needed */
.hotspot .tooltip.top {
  top: auto;
  bottom: calc(100% + var(--tip-offset));
}
.hotspot .tooltip.top .arrow {
  top: auto;
  bottom: -12px;
}


#tip-1 {}

/* Motion-reduced preference */
@media (prefers-reduced-motion: reduce) {
  .hotspot .dot::after { animation: none; display: none; }
}

/* High-contrast mode tweaks */
@media (forced-colors: active) {
  .hotspot .dot { forced-color-adjust: none; background: CanvasText; }
  .tooltip { border: 1px solid CanvasText; }
}