/* Image hotspots module — interactive dots and tooltip popover */

.vb-hotspots-image-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  line-height: 0;
}

.vb-hotspots-image {
  display: block;
  width: 100%;
  height: auto;
}

.vb-hotspot-dot {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--vb-hotspot-dot-size, 18px);
  height: var(--vb-hotspot-dot-size, 18px);
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--vb-hotspot-dot-color, var(--button-primary-color));
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.vb-hotspot-dot__number {
  color: #fff;
  font-family: var(--font-family-body);
  font-size: calc(var(--vb-hotspot-dot-size, 18px) * 0.58);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
}

/* Static marker dots — used by the "legend below image" layout, where the
   texts live in a list under the image instead of in click-open tooltips. */
.vb-hotspot-dot--static {
  cursor: default;
}

/* "Legend below image" layout — the image and the legend read as one card:
   white body, bordered, joined to the image (like the idea-process module). */
.vb-hotspot-card {
  border: 1px solid var(--border-color, #e2e2e2);
  border-radius: var(--border-radius-card, 16px);
  background-color: #fff;
  overflow: hidden;
}

.vb-hotspot-card .vb-hotspots-image-wrap {
  display: block;
}

/* Legend below the image (alternative to tooltips) */
.vb-hotspot-legend {
  list-style: none;
  margin: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: var(--text-color);
  font-family: var(--font-family-body);
}

.vb-hotspot-legend__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.vb-hotspot-dot--legend {
  position: static;
  flex-shrink: 0;
  transform: none;
  cursor: default;
  --vb-hotspot-dot-size: 1.3rem;
  margin-top: 0.12em;
}

.vb-hotspot-dot--legend:hover {
  transform: none;
}

.vb-hotspot-legend__text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: var(--body-line-height, 1.5);
  letter-spacing: var(--body-kerning, 0);
}

.vb-hotspot-legend__text > :last-child {
  margin-bottom: 0;
}

.vb-hotspot-legend__text p {
  margin-bottom: 0.5rem;
}

.vb-hotspot-legend__text a {
  color: inherit;
  text-decoration: underline;
}

.vb-hotspot-legend__item--empty {
  opacity: 0.6;
}

.vb-hotspots-image-wrap--size-s {
  --vb-hotspot-dot-size: 14px;
}

.vb-hotspots-image-wrap--size-m {
  --vb-hotspot-dot-size: 18px;
}

.vb-hotspots-image-wrap--size-l {
  --vb-hotspot-dot-size: 24px;
}

.vb-hotspots-image-wrap--size-xl {
  --vb-hotspot-dot-size: 32px;
}

.vb-hotspots-image-wrap--pulse .vb-hotspot-dot:not([aria-expanded="true"]) {
  animation: vb-hotspot-dot-pulse 2.4s ease-out infinite;
}

@keyframes vb-hotspot-dot-pulse {
  0% {
    box-shadow:
      0 0 0 2px #fff,
      0 2px 6px rgba(0, 0, 0, 0.25),
      0 0 0 0 color-mix(in srgb, var(--vb-hotspot-dot-color, var(--button-primary-color)) 50%, transparent);
  }

  38% {
    box-shadow:
      0 0 0 2px #fff,
      0 2px 6px rgba(0, 0, 0, 0.25),
      0 0 0 calc(var(--vb-hotspot-dot-size, 18px) * 0.9) transparent;
  }

  100% {
    box-shadow:
      0 0 0 2px #fff,
      0 2px 6px rgba(0, 0, 0, 0.25),
      0 0 0 calc(var(--vb-hotspot-dot-size, 18px) * 0.9) transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vb-hotspots-image-wrap--pulse .vb-hotspot-dot {
    animation: none;
  }
}

.vb-hotspot-dot:hover,
.vb-hotspot-dot:focus-visible {
  outline: none;
}

.vb-hotspot-dot[aria-expanded="true"] {
  outline: none;
}

.vb-hotspot-tooltip {
  position: absolute;
  z-index: 10;
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 16px;
  background-color: var(--vb-hotspot-tooltip-bg, #000000);
  border: none;
  border-radius: var(--vb-hotspot-tooltip-radius, 4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: var(--vb-hotspot-tooltip-color, #ffffff);
  font-family: var(--font-family-body);
  font-size: var(--vb-hotspot-tooltip-font-size, calc(var(--base-font-size) * 0.8125));
  line-height: var(--body-line-height, 1.5);
  pointer-events: auto;
}

.vb-hotspot-tooltip__content {
  background-color: var(--vb-hotspot-tooltip-bg, #000000);
  color: inherit;
}

body .vb-hotspot-tooltip__content,
body .vb-hotspot-tooltip__content p {
  font-size: inherit;
  letter-spacing: var(--body-kerning, 0);
  color: inherit;
}

.vb-hotspots-image-wrap--tooltip-font-s {
  --vb-hotspot-tooltip-font-size: calc(var(--base-font-size) * 0.6875);
}

.vb-hotspots-image-wrap--tooltip-font-m {
  --vb-hotspot-tooltip-font-size: calc(var(--base-font-size) * 0.8125);
}

.vb-hotspots-image-wrap--tooltip-font-l {
  --vb-hotspot-tooltip-font-size: calc(var(--base-font-size) * 0.875);
}

.vb-hotspot-tooltip[hidden] {
  display: none !important;
}

.vb-hotspot-tooltip__content > :last-child {
  margin-bottom: 0;
}

.vb-hotspot-tooltip__content p {
  margin-bottom: 0.5rem;
}

.vb-hotspot-tooltip__content a {
  color: inherit;
  text-decoration: underline;
}

/* Popover arrow */
.vb-hotspot-tooltip::before,
.vb-hotspot-tooltip::after {
  content: "";
  position: absolute;
  left: var(--vb-hotspot-arrow-left, 50%);
  transform: translateX(-50%);
  border: 8px solid transparent;
  pointer-events: none;
}

/* Tooltip above dot */
.vb-hotspot-tooltip[data-placement="top"]::before {
  bottom: -16px;
  border-top-color: var(--vb-hotspot-tooltip-bg, #000000);
}

.vb-hotspot-tooltip[data-placement="top"]::after {
  bottom: -15px;
  border-top-color: var(--vb-hotspot-tooltip-bg, #000000);
}

/* Tooltip below dot (default) */
.vb-hotspot-tooltip[data-placement="bottom"]::before {
  top: -16px;
  border-bottom-color: var(--vb-hotspot-tooltip-bg, #000000);
}

.vb-hotspot-tooltip[data-placement="bottom"]::after {
  top: -15px;
  border-bottom-color: var(--vb-hotspot-tooltip-bg, #000000);
}

@media (min-width: 768px) {
  .vb-hotspots-image-wrap--tooltip-font-s {
    --vb-hotspot-tooltip-font-size: calc(var(--base-font-size) * 0.75);
  }

  .vb-hotspots-image-wrap--tooltip-font-m {
    --vb-hotspot-tooltip-font-size: calc(var(--base-font-size) * 0.875);
  }

  .vb-hotspots-image-wrap--tooltip-font-l {
    --vb-hotspot-tooltip-font-size: calc(var(--base-font-size) * 0.9375);
  }
}

@media (max-width: 767.98px) {
  .vb-hotspots-image-wrap--size-s {
    --vb-hotspot-dot-size: 18px;
  }

  .vb-hotspots-image-wrap--size-m {
    --vb-hotspot-dot-size: 22px;
  }

  .vb-hotspots-image-wrap--size-l {
    --vb-hotspot-dot-size: 28px;
  }

  .vb-hotspots-image-wrap--size-xl {
    --vb-hotspot-dot-size: 36px;
  }

  .vb-hotspot-tooltip {
    max-width: min(280px, calc(100vw - 24px));
    padding: 10px 14px;
  }
}