.ih-hotspot-container {
    position: relative;
    display: block;
    max-width: 100%;
    line-height: 0;
}

.ih-hotspot-container.ih-align-left {
    margin-left: 0;
    margin-right: auto;
}

.ih-hotspot-container.ih-align-center {
    margin-left: auto;
    margin-right: auto;
}

.ih-hotspot-container.ih-align-right {
    margin-left: auto;
    margin-right: 0;
}

.ih-hotspot-container .ih-hotspot-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.ih-hotspot {
    position: absolute;
    z-index: 10;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    display: block;
    overflow: visible;
}

.ih-hotspot.ih-shape-circle { border-radius: 50%; }
.ih-hotspot.ih-shape-square,
.ih-hotspot.ih-shape-rectangle,
.ih-hotspot.ih-shape-polygon { border-radius: 0; }

/* Shared overlay image styles */
.ih-hotspot .ih-hover-image,
.ih-hotspot .ih-active-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    width: auto;
    height: auto;
    pointer-events: none;
    z-index: 11;
}

/*
 * Brightness 0–100%: resting state uses filter + opacity so the overlay
 * goes from dim to full on hover.
 * --ih-bright is 0–100
 */
.ih-hotspot .ih-hover-image {
    opacity: calc(var(--ih-bright, 0) / 100);
    filter: brightness(calc(var(--ih-bright, 0) * 1%));
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.ih-hotspot:hover .ih-hover-image,
.ih-hotspot:focus .ih-hover-image {
    opacity: 1;
    filter: brightness(100%);
}

/* Active image: only while mouse button is held / active state */
.ih-hotspot .ih-active-image {
    opacity: 0;
    filter: brightness(100%);
    transition: opacity 0.15s ease;
    z-index: 12;
}

.ih-hotspot:active .ih-active-image {
    opacity: 1;
}

.ih-hotspot:active .ih-hover-image {
    opacity: 0;
}

/* Feather: soft fade from centre outward */
.ih-hotspot .ih-hover-feather {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 72%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
}

.ih-hotspot:focus {
    outline: 2px solid rgba(0, 120, 200, 0.5);
    outline-offset: 2px;
}