.bhp-hotspot-marker { cursor: pointer; font-size: 24px; line-height: 1; }
.bhp-hotspot-popup { display: none; position: absolute; top: 20px; left: -10px; background: #fff; padding: 8px; border: 1px solid #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 1000; }
.bhp-size-small { width: 150px; }
.bhp-size-medium { width: 200px; }
.bhp-size-large { width: 250px; }
.bhp-theme-light { background: #fff; color: #000; }
.bhp-theme-dark { background: #333; color: #fff; }
.bhp-radius-none { border-radius: 0; }
.bhp-radius-small { border-radius: 5px; }
.bhp-radius-large { border-radius: 10px; }

.bhp-hotspot-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.bhp-hotspot-img {
  width: 100%;
  height: auto;
  display: block;
}
.bhp-hotspot-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
}