.canvas-360-wrapper .hotspot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.canvas-360-wrapper .hotspot {
  width: 32px;
  height: 32px;
  background: url('../images/hotspot/sphere.png') no-repeat center / contain;
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  animation: bounce360 2s infinite ease-in-out;
  z-index: 20;
   filter: drop-shadow(0 0 6px rgba(255, 255, 0, 0.8));
}
@keyframes bounce360 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}
.canvas-360-wrapper .hotspot:hover {
  transform: translate(-50%, -50%) scale(1.2);
}
.hotspot-layer { position: absolute; inset: 0; pointer-events: none;
}

/* Make hotspots draggable */
.hotspot { 
	pointer-events: auto;
	touch-action: none;
	user-select: none;
	z-index: 20;
}

/* Make hotspots NOT-draggable */
/*
.hotspot {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 30% 30%, #ffe800, #c96700);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
  position:absolute;
  z-index: 20;
}
*/
.hotspot:active {
  transform: scale(1.2);
}
.hotspot-tooltip {
  position: absolute;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  z-index: 30;
}

/* Theme: Military */
.theme-military.hotspot {
  background: radial-gradient(circle at 30% 30%, #ffe800, #c96700);
}
/* Theme: Patrol */
.theme-patrol.hotspot {
  background: radial-gradient(circle at 30% 30%, #08f, #0055aa);
}



/* Pulse Effect */
.hotspot-pulse {
  animation: pulse 1.4s infinite;
  box-shadow: 0 0 6px rgba(255, 232, 0, 0.7);
}

@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/*@keyframes pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity:1 }
  50%     { transform: translate(-50%,-50%) scale(1.2); opacity:0.7 }
}
*/
/* Minimal Flat */
.hotspot-flat {
  background: #08f;
  border-radius: 4px;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 4px rgba(0, 136, 255, 0.5);
}

/* Shine Overlay */
.hotspot-shine::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent);
  animation: shine 1.2s linear infinite;
}

@keyframes shine {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
/*@keyframes shine {
  0%   { transform: translate(-50%,-50%) scale(1); opacity:1 }
  100% { transform: translate(-50%,-50%) scale(1.5); opacity:0 }
}*/

/* Theme-Based Modifiers */
.dark .hotspot { background: radial-gradient(circle at 30% 30%, #0f0, #090); }
.blueprint .hotspot { background: #00f; border: 1px solid #ccc; }
.magic .hotspot { background: #a3f; box-shadow: 0 0 6px #f0f; }

/* Size Modifiers */
.hotspot-xs { width: 10px; height: 10px; }
.hotspot-lg { width: 32px; height: 32px; }