.htig{ --hs: 52px; }
.htig__wrap{ position:relative; max-width:100%; }
.htig__img{ width:100%; height:auto; display:block; border-radius:14px; }
.htig__overlay{ position:absolute; inset:0; }

.htig-spot{
  position:absolute;
  transform: translate(-50%,-50%);
  width: var(--hs);
  height: var(--hs);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.70);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  cursor:pointer;
  touch-action: manipulation;
  text-decoration:none;
}
.htig-spot.is-circle{ border-radius:999px; }
.htig-spot.is-rect{ border-radius:14px; }

.htig-spot__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 2px rgba(0,0,0,.12);
}

.htig-spot::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.85);
  opacity: .28;
  pointer-events:none;
}

/* effects */
.htig-spot.fx-none::after{ animation:none; opacity:.35; }
.htig-spot.fx-calm::after{ animation: htigPulseCalm 1.9s ease-in-out infinite; }
.htig-spot.fx-blink::after{ animation: htigPulseBlink 1.2s ease-in-out infinite; }

/* calm down after first interaction (optional behavior) */
.htig.htig--interacted .htig-spot.fx-calm::after,
.htig.htig--interacted .htig-spot.fx-blink::after{
  animation:none;
  opacity:.35;
}

@keyframes htigPulseCalm{
  0%{ transform:scale(.92); opacity:.22; }
  55%{ transform:scale(1.12); opacity:.55; }
  100%{ transform:scale(.92); opacity:.22; }
}
@keyframes htigPulseBlink{
  0%{ transform:scale(.88); opacity:.20; }
  50%{ transform:scale(1.18); opacity:.70; }
  100%{ transform:scale(.88); opacity:.20; }
}

@media (prefers-reduced-motion: reduce){
  .htig-spot::after{ animation:none !important; opacity:.38; }
}

/* Modal */
.htig-modal[hidden]{ display:none; }
.htig-modal{
  position:fixed;
  inset:0;
  z-index: 99999;
}
.htig-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.htig-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(720px, calc(100% - 28px));
  background:#fff;
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  max-height: min(82vh, 760px);
  overflow:auto;
}
.htig-modal__close{
  position: sticky;
  top: 0;
  float: right;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
  padding: 6px 10px;
  margin: -6px -6px 0 0;
}
.htig-modal__title{
  font-weight: 800;
  font-size: 18px;
  margin: 2px 0 10px;
}
.htig-modal__content{
  line-height: 1.5;
}
.htig-modal__cta{
  margin-top: 14px;
}
.htig-modal__cta-btn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: #0b5fff;
  color: #fff;
  text-decoration:none;
  font-weight: 700;
}

/* Mobile: bottom sheet */
@media (max-width: 768px){
  .htig-modal__panel{
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 78vh;
  }
}

/* --- v0.3.6: per-hotspot colors + runner effect --- */
.htig-spot{
  width: var(--hs, 52px);
  height: var(--hs, 52px);
  background: color-mix(in srgb, var(--htig-fill, #000) 18%, transparent);
  border: 2px solid color-mix(in srgb, var(--htig-border, #fff) 85%, transparent);
}
.htig-spot.is-rect{
  width: var(--hw, var(--hs, 80px));
  height: var(--hh, var(--hs, 56px));
  border-radius: 10px;
}
.htig-spot.is-circle{ border-radius: 999px; }
.htig-spot.fx-runner::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius: inherit;
  padding:4px;
  background: conic-gradient(from 0deg,
    var(--htig-border, #fff) 0 18%,
    transparent 18% 36%,
    var(--htig-border, #fff) 36% 54%,
    transparent 54% 72%,
    var(--htig-border, #fff) 72% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: htig-spin 1.2s linear infinite;
  pointer-events:none;
  opacity:.95;
}
@keyframes htig-spin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .htig-spot.fx-runner::after{ animation:none; }
}


/* v0.3.7: colors with alpha */
.htig-spot{
  background: color-mix(in srgb, var(--htig-fill, #000) calc(var(--htig-fill-a, 18) * 1%), transparent);
  border: 2px solid color-mix(in srgb, var(--htig-border, #fff) calc(var(--htig-border-a, 85) * 1%), transparent);
}
/* Runner: move stripes along the border (no rotation) */
.htig-spot.fx-runner::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius: inherit;
  padding:4px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--htig-border, #fff) calc(var(--htig-border-a, 85) * 1%), transparent) 0 16px,
    color-mix(in srgb, var(--htig-border2, #00ffcc) calc(var(--htig-border-a, 85) * 1%), transparent) 16px 32px
  );
  background-size: 64px 100%;
  background-position: 0 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: htig-run 1.1s linear infinite;
  pointer-events:none;
  opacity: 1;
}
@keyframes htig-run{ to { background-position: 64px 0; } }
@media (prefers-reduced-motion: reduce){
  .htig-spot.fx-runner::after{ animation:none; }
}

/* v0.3.8: Runner = 3-color gradient, moving along border (no rotation) */
.htig-spot.fx-runner::after{
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--htig-border, #fff) calc(var(--htig-border-a, 85) * 1%), transparent) 0 14px,
    color-mix(in srgb, var(--htig-border2, #00ffcc) calc(var(--htig-border-a, 85) * 1%), transparent) 14px 28px,
    color-mix(in srgb, color-mix(in srgb, var(--htig-border, #fff) 60%, white) calc(var(--htig-border-a, 85) * 1%), transparent) 28px 42px
  );
  background-size: 84px 100%;
}
@keyframes htig-run{ to { background-position: 84px 0; } }

/* v0.3.9: runner as diagonal 3-color gradient moving left->right */
.htig-spot.fx-runner::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius: inherit;
  padding:4px;
  background: linear-gradient(
    45deg,
    color-mix(in srgb, var(--htig-border, #00e5ff) calc(var(--htig-border-a, 85) * 1%), transparent),
    color-mix(in srgb, var(--htig-border2, #00ffcc) calc(var(--htig-border-a, 85) * 1%), transparent),
    color-mix(in srgb, var(--htig-border3, #ff00aa) calc(var(--htig-border-a, 85) * 1%), transparent),
    color-mix(in srgb, var(--htig-border, #00e5ff) calc(var(--htig-border-a, 85) * 1%), transparent)
  );
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: htig-flow 1.2s linear infinite;
  pointer-events:none;
}
@keyframes htig-flow {
  to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .htig-spot.fx-runner::after{ animation:none; }
}

/* v0.4.1: reliable transparency via RGBA vars (0–100%) */
.htig-spot{
  background: var(--htig-fill-rgba, rgba(0,0,0,0.18));
  border: 2px solid var(--htig-border-rgba, rgba(255,255,255,0.85));
}
/* v0.4.1: runner from single base color (no extra pickers) */
.htig-spot.fx-runner::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius: inherit;
  padding:4px;
  background:
    linear-gradient(
      45deg,
      var(--htig-border-rgba, rgba(0,229,255,0.85)),
      color-mix(in srgb, var(--htig-border-rgba, rgba(0,229,255,0.85)) 40%, rgba(255,255,255,0.85)),
      var(--htig-border-rgba, rgba(0,229,255,0.85)),
      color-mix(in srgb, var(--htig-border-rgba, rgba(0,229,255,0.85)) 40%, rgba(0,0,0,0.85)),
      var(--htig-border-rgba, rgba(0,229,255,0.85))
    );
  background-size: 240% 240%;
  background-position: 0% 50%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: htig-flow 1.2s linear infinite;
  pointer-events:none;
}
@keyframes htig-flow {
  to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .htig-spot.fx-runner::after{ animation:none; }
}


/* --- v0.4.3 overrides: real RGBA vars + 3-color runner gradient --- */
.htig-spot{
  background: var(--htig-fill-rgba, rgba(0,0,0,0.18));
  border: var(--htig-bw, 2px) solid var(--htig-border-rgba, rgba(255,255,255,0.85));
}

/* Dot should also respect transparency (helps when user sets 0%) */
.htig-spot__dot{
  background: var(--htig-border-rgba, rgba(255,255,255,0.95));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--htig-fill-rgba, rgba(0,0,0,0.18)) 55%, transparent);
}

/* Runner uses a 3-color diagonal gradient that moves endlessly */
.htig-spot.fx-runner{
  border-color: transparent;
}
.htig-spot.fx-runner::after{
  content:"";
  position:absolute;
  /* Proportional to border width (0px => effect disappears) */
  inset: calc(-1 * var(--htig-bw, 2px));
  border-radius: inherit;
  padding: var(--htig-bw, 2px);
  background: linear-gradient(135deg, var(--htig-g1, rgba(0,255,204,0.85)), var(--htig-g2, rgba(255,0,204,0.85)), var(--htig-g3, rgba(0,170,255,0.85)));
  background-size: 240% 240%;
  animation: htig-border-move 1.4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
@keyframes htig-border-move{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .htig-spot.fx-runner::after{ animation:none; }
}


/* v0.4.5: overall opacity + disable pointer events when fully invisible */
.htig-spot{
  opacity: var(--htig-o, 1);
  pointer-events: var(--htig-pe, auto);
}