/* Frontend CSS */
.active-contour-wrapper {
  position: relative;
  display: inline-block;
}

.active-contour-wrapper .active-contour-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  z-index: 5;
}

.active-contour-wrapper:hover .active-contour-overlay polygon {
  opacity: 0.15;
}

.active-contour-wrapper .active-contour-overlay polygon {
  cursor: pointer;
  stroke: transparent;
  transition: opacity 0.2s;
  opacity: 0;
}

.active-contour-aligmnent-center {
  text-align: center;
}
.active-contour-aligmnent-right {
  text-align: right;
}
.active-contour-aligmnent-left {
  text-align: left;
}
.active-contour-aligmnent-full {
  display: inline-block;
}

.active-contour-wrapper .active-contour-overlay polygon.effect-op0,
.active-contour-wrapper .active-contour-overlay polygon.effect-op0:hover {
  opacity: 0.0;
}
.active-contour-wrapper .active-contour-overlay polygon.effect-default:hover {
  opacity: 0.3;
}
.active-contour-wrapper .active-contour-overlay polygon.effect-op45:hover {
  opacity: 0.45;
}
.active-contour-wrapper .active-contour-overlay polygon.effect-op60:hover {
  opacity: 0.6;
}
.active-contour-wrapper .active-contour-overlay polygon.effect-op75:hover {
  opacity: 0.75;
}
.active-contour-wrapper .active-contour-overlay polygon.effect-op90:hover {
  opacity: 0.9;
}
.active-contour-wrapper .active-contour-overlay polygon.effect-op100:hover {
  opacity: 1;
}

.active-contour-wrapper .active-contour-overlay polygon.animation-blink {
  animation: active-contour-animation-blink 3s ease-in-out 0.5s infinite;
}

.active-contour-wrapper img {
  max-width: 100%;
  height: auto;
}

@keyframes active-contour-animation-blink {
  0%  { filter: brightness(1); }
  5%  { filter: brightness(2.5); }
  10% { filter: brightness(1); }
}

/* Optional tooltip */
.active-contour-wrapper .ac-tooltip {
  position: absolute;
  background: #000;
  color: #fff;
  padding: 0.3em 0.6em;
  font-size: 0.85em;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  z-index: 100;
  display: none;
}
