/* Elementor Hotspot Image (Glow) */

.ehg-hotspot-wrap{
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
  overflow: visible;
  --ehg-glow-color: #00c8ff;
  --ehg-tooltip-bg: #111111;
  --ehg-tooltip-text: #ffffff;
}

/* Prevent accidental horizontal overflow on narrow screens */
.ehg-hotspot-wrap,
.ehg-hotspot-wrap *{
  box-sizing: border-box;
}

.ehg-image-holder{
  position: relative;
  display: inline-block; /* shrink-wrap to the rendered image */
  width: auto;
  max-width: 100%;
}

/* Ensure nothing inside the widget clips the tooltip overflow */
.ehg-image-holder,
.ehg-hotspots-layer{
  overflow: visible;
}

.ehg-image-holder img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
}

/* Main image width can be set via Elementor control (responsive). */
.ehg-main-image{
  display:block;
  max-width:100%;
  height:auto;
}

.ehg-hotspots-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.ehg-hotspot{
  position:absolute;
  left: var(--ehg-x, 50%);
  top: var(--ehg-y, 50%);
  transform: translate(-50%, -50%);
  pointer-events:auto;
  z-index: 1;
}

/* Keep all structural containers transparent so no static layer remains under floating/glow */
.ehg-hotspot-wrap,
.ehg-image-holder,
.ehg-hotspots-layer,
.ehg-hotspot,
.ehg-pin,
.ehg-pin .ehg-pin-inner{
  background: transparent !important;
  background-color: transparent !important;
}

.ehg-pin{
  width: calc(var(--ehg-pin-size, 32px) * var(--ehg-scale, 1));
  height: calc(var(--ehg-pin-size, 32px) * var(--ehg-scale, 1));
  /* Scale icon with the pin size */
  font-size: calc(var(--ehg-pin-size, 32px) * 0.55 * var(--ehg-scale, 1));
  border-radius: var(--ehg-pin-radius, 999px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background: none;
  color:#111111;
  padding:0;
  cursor:pointer;
  line-height:1;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* Ensure inner element matches pin size so floating + glow stay together */
.ehg-pin .ehg-pin-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: inherit;
}


.ehg-pin:focus{
  outline:none;
}

.ehg-pin .ehg-pin-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius: var(--ehg-pin-radius, 999px);
  border-style: solid;
  border-width: calc(var(--ehg-pin-border-width, 0px) * var(--ehg-scale, 1));
  border-color: var(--ehg-pin-border-color, #ffffff);
}

/* Tooltip base */
.ehg-tooltip{
  position:absolute;
  /* Keep tooltips above pins/hotspots */
  z-index: 100;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background: var(--ehg-tooltip-bg);
  color: var(--ehg-tooltip-text);
  text-align: left;
  /* Scale tooltip UI with the same responsive factor as the pins */
  border-radius: calc(10px * var(--ehg-scale, 1));
  padding: calc(10px * var(--ehg-scale, 1)) calc(12px * var(--ehg-scale, 1));
  font-size: calc(14px * var(--ehg-scale, 1));
  line-height: 1.35;
  width: min(calc(var(--ehg-tooltip-width, 220px) * var(--ehg-scale, 1)), calc(100% - 16px));
  max-width: calc(100% - 16px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  transform: translate(var(--ehg-clamp-x, 0px), var(--ehg-clamp-y, 0px));
}

/* Make tooltip WYSIWYG images responsive (Elementor often outputs width/height attrs) */
.ehg-tooltip .ehg-tooltip-content img,
.ehg-tooltip .ehg-tooltip-inner img{
  max-width: 100%;
  height: auto;
  display: block;
}

.ehg-tooltip .ehg-tooltip-content figure,
.ehg-tooltip .ehg-tooltip-inner figure{
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.ehg-tooltip .ehg-tooltip-content{
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Tooltip arrow */
.ehg-tooltip::before{
  content:"";
  position:absolute;
  z-index: 1;
  width:0;
  height:0;
  border-style: solid;
}

/* Scale tooltip arrow thickness with the same responsive factor as pins/tooltips */
.ehg-hotspot-wrap{
  --ehg-arrow-size: calc(8px * var(--ehg-scale, 1));
}

/* Direction positioning + arrow */
.ehg-hotspot[data-dir="top"] .ehg-tooltip{
  left:50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 0) translate(var(--ehg-clamp-x, 0px), var(--ehg-clamp-y, 0px));
}
.ehg-hotspot[data-dir="top"] .ehg-tooltip::before{
  left: var(--ehg-arrow-x, 50%);
  top:100%;
  transform: translateX(-50%);
  border-width: var(--ehg-arrow-size) var(--ehg-arrow-size) 0 var(--ehg-arrow-size);
  border-color: var(--ehg-tooltip-bg) transparent transparent transparent;
}

.ehg-hotspot[data-dir="bottom"] .ehg-tooltip{
  left:50%;
  top: calc(100% + 10px);
  transform: translate(-50%, 0) translate(var(--ehg-clamp-x, 0px), var(--ehg-clamp-y, 0px));
}
.ehg-hotspot[data-dir="bottom"] .ehg-tooltip::before{
  left: var(--ehg-arrow-x, 50%);
  bottom:100%;
  transform: translateX(-50%);
  border-width: 0 var(--ehg-arrow-size) var(--ehg-arrow-size) var(--ehg-arrow-size);
  border-color: transparent transparent var(--ehg-tooltip-bg) transparent;
}

.ehg-hotspot[data-dir="left"] .ehg-tooltip{
  right: calc(100% + 10px);
  top:50%;
  transform: translate(0, -50%) translate(var(--ehg-clamp-x, 0px), var(--ehg-clamp-y, 0px));
}
.ehg-hotspot[data-dir="left"] .ehg-tooltip::before{
  left:100%;
  top: var(--ehg-arrow-y, 50%);
  transform: translateY(-50%);
  border-width: var(--ehg-arrow-size) 0 var(--ehg-arrow-size) var(--ehg-arrow-size);
  border-color: transparent transparent transparent var(--ehg-tooltip-bg);
}

.ehg-hotspot[data-dir="right"] .ehg-tooltip{
  left: calc(100% + 10px);
  top:50%;
  transform: translate(0, -50%) translate(var(--ehg-clamp-x, 0px), var(--ehg-clamp-y, 0px));
}

.ehg-hotspot[data-dir="right"] .ehg-tooltip::before{
  right:100%;
  top: var(--ehg-arrow-y, 50%);
  transform: translateY(-50%);
  border-width: var(--ehg-arrow-size) var(--ehg-arrow-size) var(--ehg-arrow-size) 0;
  border-color: transparent var(--ehg-tooltip-bg) transparent transparent;
}

/* Mobile responsiveness: make tooltip + text scale down to fit the container */
@media (max-width: 767px){
  .ehg-tooltip{
    font-size: calc(13px * var(--ehg-scale, 1));
    padding: calc(9px * var(--ehg-scale, 1)) calc(10px * var(--ehg-scale, 1));
    width: min(calc(var(--ehg-tooltip-width, 220px) * var(--ehg-scale, 1)), calc(100% - 12px));
    max-width: calc(100% - 12px);
  }
}

/* Visible states */
.ehg-hotspot.ehg-open .ehg-tooltip{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Hover reveal */
.ehg-hotspot-wrap[data-reveal="hover"] .ehg-hotspot:hover .ehg-tooltip,
.ehg-hotspot-wrap[data-reveal="hover"] .ehg-hotspot:focus-within .ehg-tooltip{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Bring the active hotspot above its siblings so overlapping tooltips always stack correctly */
.ehg-hotspot.ehg-open,
.ehg-hotspot:hover,
.ehg-hotspot:focus-within{
  z-index: 200;
}

/* Glow base */
.ehg-glow .ehg-pin-inner{ position:relative; }

/* Glow styles */
.ehg-glow-style-pulse .ehg-pin-inner{
  box-shadow: 0 0 0 0 var(--ehg-glow-color);
  animation: ehgPulse 1.6s infinite;
}
@keyframes ehgPulse{
  0%   { box-shadow: 0 0 0 0 var(--ehg-glow-color); }
  70%  { box-shadow: 0 0 0 16px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

.ehg-glow-style-ring .ehg-pin-inner::after{
  content:"";
  position:absolute;
  inset:-6px;
  border: 2px solid var(--ehg-glow-color);
  border-radius: inherit;
  opacity:.9;
  animation: ehgRing 1.4s infinite;
  pointer-events:none;
}
@keyframes ehgRing{
  0%   { transform: scale(.7); opacity: .95; }
  100% { transform: scale(1.5); opacity: 0; }
}

.ehg-glow-style-neon .ehg-pin-inner{
  box-shadow: 0 0 10px var(--ehg-glow-color), 0 0 24px var(--ehg-glow-color);
  filter: drop-shadow(0 0 8px var(--ehg-glow-color));
}

.ehg-glow-style-soft .ehg-pin-inner{
  animation: ehgSoft 2.2s infinite;
}
@keyframes ehgSoft{
  0%   { box-shadow: 0 0 6px var(--ehg-glow-color); }
  50%  { box-shadow: 0 0 18px var(--ehg-glow-color); }
  100% { box-shadow: 0 0 6px var(--ehg-glow-color); }
}

/* Floating (independent from Glow) */
.ehg-hotspot-wrap{
  --ehg-float-area: 6px;
  /* Floating speed factor (higher = faster) */
  --ehg-float-speed: 2;
  /* Base duration used to calculate animation time */
  --ehg-float-base: 6s;
}

@keyframes ehgPinFloat{
  0%   { transform: translateY(0); }
  25%  { transform: translateY(calc(var(--ehg-float-area) * -1)); }
  50%  { transform: translateY(var(--ehg-float-area)); }
  75%  { transform: translateY(calc(var(--ehg-float-area) * -0.6)); }
  100% { transform: translateY(0); }
}

/* Float only the visual inner content so X/Y tooltip anchoring never shifts */
.ehg-hotspot-wrap.ehg-floating .ehg-pin .ehg-pin-inner{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: ehgPinFloat calc(var(--ehg-float-base, 6s) / var(--ehg-float-speed, 2)) ease-in-out infinite;
  will-change: transform;
}

/* If both Glow (pulse/soft) and Floating are enabled, combine animations on the same element */
.ehg-hotspot-wrap.ehg-floating.ehg-glow-style-pulse .ehg-pin .ehg-pin-inner{
  animation: ehgPinFloat calc(var(--ehg-float-base, 6s) / var(--ehg-float-speed, 2)) ease-in-out infinite,
             ehgPulse 1.6s infinite;
}

.ehg-hotspot-wrap.ehg-floating.ehg-glow-style-soft .ehg-pin .ehg-pin-inner{
  animation: ehgPinFloat calc(var(--ehg-float-base, 6s) / var(--ehg-float-speed, 2)) ease-in-out infinite,
             ehgSoft 2.2s infinite;
}

@media (prefers-reduced-motion: reduce){
  .ehg-hotspot-wrap.ehg-floating .ehg-pin .ehg-pin-inner{
    animation: none !important;
  }
}