/* 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;
  /* Elementor's border control should NOT reduce the rendered image size.
     Force borders to be added outside the content box (vs. border-box). */
  box-sizing: content-box;
}

.ehg-hotspots-layer{
  /* Defined later with final z-index values */
}

/*
 * Global Pin Settings (Editor + Frontend)
 * When enabled, global image-pin border settings override any per-pin values.
 * Pin sizing (% -> px) is computed in JS so it can react instantly in the editor.
 */
/*
 * Apply global image-pin border vars whenever they are present.
 * In the Elementor editor, the wrapper data attribute may not update without a full re-render,
 * but Elementor *does* live-inject the CSS variables. Keying off variable presence keeps
 * Global Pin Settings working in real-time.
 */
/*
 * Effective vars are computed on EACH hotspot.
 * Per-pin values are always the default source of truth.
 * Global values are only allowed to override them when the wrapper says
 * Global Pin Settings are enabled for the active breakpoint.
 */
.ehg-hotspot{
  --ehg-pin-radius-eff: var(--ehg-pin-radius, 999px);
  --ehg-pin-border-width-eff: var(--ehg-pin-border-width, 0px);
  --ehg-pin-border-color-eff: var(--ehg-pin-border-color, #ffffff);
  --ehg-pin-size-pct-eff: var(--ehg-pin-size-pct, 0);
}
.ehg-hotspot-wrap[data-ehg-global-pin-settings="yes"] .ehg-hotspot{
  --ehg-pin-radius-eff: var(--ehg-global-pin-radius, var(--ehg-global-image-pin-radius, var(--ehg-pin-radius, 999px)));
  --ehg-pin-border-width-eff: var(--ehg-global-pin-border-width, var(--ehg-global-image-pin-border-width, var(--ehg-pin-border-width, 0px)));
  --ehg-pin-border-color-eff: var(--ehg-global-pin-border-color, var(--ehg-global-image-pin-border-color, var(--ehg-pin-border-color, #ffffff)));
  --ehg-pin-size-pct-eff: var(--ehg-global-pin-size-pct, var(--ehg-global-image-pin-size-pct, var(--ehg-pin-size-pct, 0)));
}

/* Structural containers */
.ehg-hotspots-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.ehg-hotspot{
  position: absolute;
  left: var(--ehg-x, 50%);
  top: var(--ehg-y, 50%);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 3;
}

/* Pin container */
.ehg-pin{
  display: flex;
  align-items: center;
  justify-content: center;
}
.ehg-pin-inner{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: inherit;
  /* Keep visible so the outer border ring (box-shadow spread) isn't clipped. */
  overflow: visible;
}

/*
 * Pin border ring
 * Must be OUTSIDE the pin (not inset) so the user-visible "Border Width" matches expectations.
 * The ring is drawn on the *animated* inner element so it follows the Floating effect.
 * NOTE: The inner wrapper is intentionally NOT overflow:hidden (see later rule) so the
 *       outer ring is not clipped even when pins are rounded.
 */
.ehg-pin{ position: relative; overflow: visible; }
.ehg-pin-inner{ position: relative; }
.ehg-pin-inner::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 var(--ehg-pin-border-width-eff, 0px) var(--ehg-pin-border-color-eff, transparent);
  pointer-events:none;
}

.ehg-pin{
  width: var(--ehg-pin-size, 24px);
  height: var(--ehg-pin-size, 24px);
  /* Scale icon with the pin size (JS sets --ehg-pin-font). */
  font-size: var(--ehg-pin-font, 14px);
  border-radius: var(--ehg-pin-radius-eff, 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;
}

/* Prevent theme link hover styles from tinting image pins (especially when wrapper is <a>) */
.ehg-pin,
.ehg-pin-link,
.ehg-pin-link:hover,
.ehg-pin-link:focus,
.ehg-pin-link:active{
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none;
}
.ehg-pin-link:hover .ehg-pin-image,
.ehg-pin-link:focus .ehg-pin-image{
  filter: none !important;
}

/* 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;
}


/* Icon sizing: ensure SVG icons scale with pin size */
.ehg-pin svg{
  width: 1em;
  height: 1em;
  display: block;
}
.ehg-pin i{
  font-size: inherit;
  line-height: 1;
}

/* Fallback pin when image URL missing */
.ehg-pin-fallback{
  width:100%;
  height:100%;
  display:block;
  background: rgba(0,0,0,0.08);
}

.ehg-pin .ehg-pin-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius: var(--ehg-pin-radius-eff, var(--ehg-pin-radius, 999px));
  /*
   * Draw borders OUTSIDE the pin without shrinking the image.
   * We use a 0-0-0 spread box-shadow so the visible radius stays identical
   * and the border never steals pixels from the pin content.
   */
  border: none;
  box-shadow: none;
}

/* 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: var(--ehg-tooltip-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));
  min-width: calc(var(--ehg-tooltip-min-width, 190px) * var(--ehg-scale, 1));
  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); }
  /* Increase the pulse radius by +6px */
  70%  { box-shadow: 0 0 0 22px 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{
  /* Keep the element itself neutral; render the effect via a pseudo element so it stays visible
     even when the pin image uses its own box-shadow for borders. */
  position: relative;
}
.ehg-glow-style-soft .ehg-pin-inner::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: inherit;
  pointer-events:none;
  /* Start subtle and breathe outward */
  box-shadow: 0 0 10px 2px var(--ehg-glow-color);
  opacity: .35;
  transform: scale(0.92);
  animation: ehgSoftBreath 2.2s ease-in-out infinite;
}
@keyframes ehgSoftBreath{
  0%   { opacity: .25; transform: scale(0.92); box-shadow: 0 0 10px 2px var(--ehg-glow-color); }
  50%  { opacity: .65; transform: scale(1.06); box-shadow: 0 0 26px 10px var(--ehg-glow-color); }
  100% { opacity: .25; transform: scale(0.92); box-shadow: 0 0 10px 2px var(--ehg-glow-color); }
}

/* Floating (independent from Glow) */
.ehg-hotspot-wrap{
  --ehg-float-area: 6px;
  /* UI speed control (0..5). Internally mapped so that 5 matches the old "2" speed. */
  --ehg-float-speed-ui: 2.5;
  /* Base duration used to calculate animation time */
  --ehg-float-base: 6s;
}

/* Convert UI speed (0..5) into a factor (0..2), clamped to avoid divide-by-zero */
.ehg-hotspot-wrap{
  /* 5 on the UI equals factor 2 (legacy max) => 2/5 = 0.4 */
  --ehg-float-speed: max(calc(var(--ehg-float-speed-ui, 2.5) * 0.4), 0.1);
}

@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, 1)) 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, 1)) 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, 1)) 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;
  }
}


/* When Global Pin Settings are active, force every pin to use the same final pixel size. */
.ehg-hotspot-wrap[data-ehg-global-pin-settings="yes"] .ehg-pin{
  width: var(--ehg-global-pin-size, var(--ehg-pin-size, 24px));
  height: var(--ehg-global-pin-size, var(--ehg-pin-size, 24px));
  font-size: var(--ehg-global-pin-font, var(--ehg-pin-font, 14px));
}