.wp-block-growpros-image-hotspot {
    --gps-hotspot-size: 20px;
    --gps-hotspot-color: #ffffff;
    --gps-hotspot-accent: #2271b1;
    --gps-hotspot-layer-width: 340px;
    position: relative;
    max-width: 100%;
    text-align: center;
}

/*
 * Frontend image stage.
 * The stage shrink-wraps the rendered image, so percentage-based hotspot
 * coordinates are always relative to the visible image itself.
 */
.wp-block-growpros-image-hotspot .gps-hotspot-canvas,
.wp-block-growpros-image-hotspot .gps-image-hotspot {
    position: relative;
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    line-height: 0;
    vertical-align: top;
    overflow: visible;
    text-align: left;
}

.wp-block-growpros-image-hotspot .gps-hotspot-main-image,
.wp-block-growpros-image-hotspot .gps-hotspot-bg-image-main {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    object-fit: contain;
}



/*
 * Full-viewport frontend image stage.
 * The frame always matches the browser viewport height while the image fills
 * the entire viewport width. object-fit: cover keeps the image proportional;
 * hotspot.js compensates for the cover crop so saved image percentages still
 * point to the same location on the source image.
 */
.wp-block-growpros-image-hotspot:not(.gps-image-hotspot-editor) {
    width: 100vw;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.wp-block-growpros-image-hotspot:not(.gps-image-hotspot-editor) .gps-hotspot-canvas,
.wp-block-growpros-image-hotspot:not(.gps-image-hotspot-editor) .gps-image-hotspot {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    line-height: 0;
    vertical-align: top;
    overflow: visible;
    text-align: left;
}

.wp-block-growpros-image-hotspot:not(.gps-image-hotspot-editor) .gps-hotspot-main-image,
.wp-block-growpros-image-hotspot:not(.gps-image-hotspot-editor) .gps-hotspot-bg-image-main {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    object-fit: cover;
    object-position: 50% 50%;
}

.wp-block-growpros-image-hotspot:not(.gps-image-hotspot-editor) .gps_image_hotspot_child.gps-hotspot-outside-image {
    visibility: hidden;
    pointer-events: none;
}

/* Divi Pixel-inspired frontend structure, renamed dipi -> gps. */
.wp-block-growpros-image-hotspot .gps_image_hotspot_child {
    position: absolute;
    z-index: 5;
    left: var(--gps-hotspot-x, 50%);
    top: var(--gps-hotspot-y, 50%);
    width: 0;
    height: 0;
    margin: 0;
    line-height: normal;
    text-align: left;
}

.wp-block-growpros-image-hotspot .gps_image_hotspot_child.is-open {
    z-index: 60;
}

.wp-block-growpros-image-hotspot .gps-image-hotspot-child {
    position: relative;
    width: 0;
    height: 0;
}

.wp-block-growpros-image-hotspot .gps-hotspot {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    display: block;
    width: var(--gps-hotspot-size);
    height: var(--gps-hotspot-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    box-shadow: none;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transform: translate(-50%, -50%);
}

.wp-block-growpros-image-hotspot .gps-hotspot-icon {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: var(--gps-hotspot-size);
    height: var(--gps-hotspot-size);
    /* border: 2px solid var(--gps-hotspot-accent); */
    border-radius: 50%;
    background: var(--gps-hotspot-color);
    color: var(--gps-hotspot-accent);
    line-height: 0;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    transform: translate(-50%, -50%);
    transition: transform .18s ease, box-shadow .18s ease;
}

/* Draw the center marker with CSS instead of a font glyph.
 * This keeps it perfectly centered and identical across fonts/browsers. */
.wp-block-growpros-image-hotspot .gps-hotspot-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(6px, calc(var(--gps-hotspot-size) * .9));
    height: max(6px, calc(var(--gps-hotspot-size) * .9));
    border-radius: 50%;
    background: var(--gps-hotspot-color);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.wp-block-growpros-image-hotspot .gps-hotspot:hover .gps-hotspot-icon,
.wp-block-growpros-image-hotspot .gps-hotspot:focus-visible .gps-hotspot-icon,
.wp-block-growpros-image-hotspot .gps_image_hotspot_child.is-open .gps-hotspot-icon {
    transform: translate(-50%, -50%) scale(1.14);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}

.wp-block-growpros-image-hotspot .gps-hotspot:focus-visible .gps-hotspot-icon {
    outline: 3px solid color-mix(in srgb, var(--gps-hotspot-accent) 35%, transparent);
    outline-offset: 3px;
}

/* Sonar is ON by default, not only on hover. */
.wp-block-growpros-image-hotspot .gps-svg-sonar-container {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.wp-block-growpros-image-hotspot .gps-sonar-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--gps-hotspot-size);
    height: var(--gps-hotspot-size);
    box-sizing: border-box;
    border: 2px solid var(--gps-hotspot-accent);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72);
    animation: gps-sonar-pulse 2.4s ease-out infinite;
}

.wp-block-growpros-image-hotspot .gps-sonar-circle:nth-child(2) {
    animation-delay: .6s;
}

.wp-block-growpros-image-hotspot .gps-sonar-circle:nth-child(3) {
    animation-delay: 1.2s;
}

.wp-block-growpros-image-hotspot .gps-sonar-circle:nth-child(4) {
    animation-delay: 1.8s;
}

@keyframes gps-sonar-pulse {
    0% {
        opacity: .72;
        transform: translate(-50%, -50%) scale(.72);
    }
    78%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3.25);
    }
}

/* Click-open HTML layer. */
.wp-block-growpros-image-hotspot .gps-tooltip-wrap {
    position: absolute;
    animation: none !important;
    transition: none !important;
    z-index: 20;
    box-sizing: border-box;
    width: var(--gps-hotspot-layer-width);
    max-width: min(var(--gps-hotspot-layer-width), calc(100vw - 32px));
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: #fff;
    color: #1e1e1e;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .22);
}

.wp-block-growpros-image-hotspot .gps-tooltip-wrap[hidden] {
    display: none !important;
}

.wp-block-growpros-image-hotspot .gps-tooltip-desc > :first-child {
    margin-top: 0;
}

.wp-block-growpros-image-hotspot .gps-tooltip-desc > :last-child {
    margin-bottom: 0;
}

.wp-block-growpros-image-hotspot .gps-tooltip-position-top {
    left: 0;
    bottom: calc(var(--gps-hotspot-size) / 2 + 14px);
    transform: translateX(-50%);
}

.wp-block-growpros-image-hotspot .gps-tooltip-position-right {
    left: calc(var(--gps-hotspot-size) / 2 + 14px);
    top: 0;
    transform: translateY(-50%);
}

.wp-block-growpros-image-hotspot .gps-tooltip-position-bottom {
    left: 0;
    top: calc(var(--gps-hotspot-size) / 2 + 14px);
    transform: translateX(-50%);
}

.wp-block-growpros-image-hotspot .gps-tooltip-position-left {
    right: calc(var(--gps-hotspot-size) / 2 + 14px);
    top: 0;
    transform: translateY(-50%);
}

.wp-block-growpros-image-hotspot .gps-tooltip-arrow::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotate(45deg);
}

.wp-block-growpros-image-hotspot .gps-tooltip-arrow-top::after {
    left: 50%;
    bottom: -6px;
    margin-left: -5px;
    border-right: 1px solid rgba(0, 0, 0, .12);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.wp-block-growpros-image-hotspot .gps-tooltip-arrow-right::after {
    left: -6px;
    top: 50%;
    margin-top: -5px;
    border-left: 1px solid rgba(0, 0, 0, .12);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.wp-block-growpros-image-hotspot .gps-tooltip-arrow-bottom::after {
    left: 50%;
    top: -6px;
    margin-left: -5px;
    border-left: 1px solid rgba(0, 0, 0, .12);
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.wp-block-growpros-image-hotspot .gps-tooltip-arrow-left::after {
    right: -6px;
    top: 50%;
    margin-top: -5px;
    border-right: 1px solid rgba(0, 0, 0, .12);
    border-top: 1px solid rgba(0, 0, 0, .12);
}

/* Preserve the existing Gutenberg editor drag UI. */
.wp-block-growpros-image-hotspot.gps-image-hotspot-editor {
    text-align: left;
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-canvas {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    line-height: normal;
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-main-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-item {
    position: absolute;
    z-index: 5;
    left: var(--gps-hotspot-x, 50%);
    top: var(--gps-hotspot-y, 50%);
    width: var(--gps-hotspot-size);
    height: var(--gps-hotspot-size);
    margin: 0;
    transform: translate(-50%, -50%);
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-button {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: grab;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-dot {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    border: 3px solid var(--gps-hotspot-accent);
    border-radius: 999px;
    background: var(--gps-hotspot-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-ripple {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid var(--gps-hotspot-accent);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.75);
    animation: gps-editor-ripple 1.6s ease-out infinite;
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-ripple-2 {
    animation-delay: .8s;
}

@keyframes gps-editor-ripple {
    0% {
        opacity: .65;
        transform: translate(-50%, -50%) scale(.72);
    }
    85%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3.15);
    }
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-layer {
    position: absolute;
    z-index: 20;
    box-sizing: border-box;
    width: var(--gps-hotspot-layer-width);
    max-width: min(var(--gps-hotspot-layer-width), calc(100vw - 32px));
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: #fff;
    color: #1e1e1e;
    text-align: left;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .22);
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-item.is-layer-top > .gps-hotspot-layer {
    left: 50%;
    bottom: calc(100% + 14px);
    transform: translateX(-50%);
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-item.is-layer-right > .gps-hotspot-layer {
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-item.is-layer-bottom > .gps-hotspot-layer {
    left: 50%;
    top: calc(100% + 14px);
    transform: translateX(-50%);
}

.wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-item.is-layer-left > .gps-hotspot-layer {
    right: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-growpros-image-hotspot .gps-sonar-circle,
    .wp-block-growpros-image-hotspot.gps-image-hotspot-editor .gps-hotspot-ripple {
        animation: none !important;
    }

    .wp-block-growpros-image-hotspot .gps-hotspot-icon {
        transition: none;
    }
}

/**
 ** elementor hotspot rebuild
**/


.hotspotimg.gps-hotspot-widget {
    overflow: visible !important;
}

.hotspotimg .gps-hotspot-container {
    position: relative !important;
    display: inline-block;
    width: 100%;
    overflow: visible !important;
}

.hotspotimg .gps-hotspot-container > img {
    display: block;
    width: 100%;
    height: auto;
}

.hotspotimg .gps-hotspot {
    position: absolute;
    z-index: 20;
    width: 28px;
    height: 28px;
}

.hotspotimg .gps-hotspot-button {
    position: relative;
    display: block;

    width: 28px;
    height: 28px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    cursor: pointer;
}

.hotspotimg .gps-hotspot-dot {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 14px;
    height: 14px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 0 2px
        rgba(0, 0, 0, 0.15);

    z-index: 2;
}

.hotspotimg .gps-hotspot-pulse {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.55);

    transform:
        translate(-50%, -50%);

    animation:
        gps-hotspot-pulse
        2s
        infinite;

    z-index: 1;
}

@keyframes gps-hotspot-pulse {
    0% {
        transform:
            translate(-50%, -50%)
            scale(0.5);

        opacity: 1;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1.7);

        opacity: 0;
    }
}

/*
.hotspotimg .gps-hotspot-tooltip {
    position: absolute;

    min-width: 180px;
    max-width: 320px;

    width: max-content;

    padding: 12px 16px;

    background: #fff;
    color: #222;

    border-radius: 5px;

    box-shadow:
        0 5px 25px
        rgba(0, 0, 0, 0.2);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;

    z-index: 1000;
}

.hotspotimg
.gps-hotspot.is-open
.gps-hotspot-tooltip {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

.hotspotimg
.gps-hotspot-tooltip
> :first-child {
    margin-top: 0;
}

.hotspotimg
.gps-hotspot-tooltip
> :last-child {
    margin-bottom: 0;
}
*/

/* Imported WooCommerce product hotspots (not the Gutenberg hotspot block). */

/* Imported WooCommerce product YouTube embeds. */
.gps-product-youtube {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    margin: 1.5rem auto;
}

.gps-product-youtube iframe {
    display: block;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    height: auto;
}
.gps-product-hotspot--body {
    position: relative;
    width: min(600px, 100%);
    aspect-ratio: 1 / 1;
    margin: 1.5rem auto;
    overflow: visible;
    background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, #53a3ff 50%, transparent) 0, transparent 50%)
}

.gps-product-hotspot--body .gps-product-hotspot__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gps-product-hotspot__point {
    position: absolute;
    z-index: 10;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--wp--preset--color--bbe-primary-700, #18850d);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 4px 12px rgba(0, 0, 0, .28);
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.gps-product-hotspot__point::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 2px solid color-mix(in srgb, var(--wp--preset--color--bbe-primary-700, #18850d) 65%, transparent);
    border-radius: inherit;
    animation: gps-product-hotspot-pulse 2.2s ease-out infinite;
}

.gps-product-hotspot__tooltip {
    display: none;
    position: absolute;
    z-index: 20;
    width: max-content;
    min-width: 132px;
    max-width: min(260px, calc(100vw - 32px));
    padding: 12px;
    border-radius: 4px;
    background: #53a3ff;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.gps-product-hotspot__tooltip p { margin: 0 0 .45em; }
.gps-product-hotspot__tooltip p:last-child { margin-bottom: 0; }
.gps-product-hotspot__tooltip strong { font-weight: 700; }

.gps-product-hotspot__point.is-active .gps-product-hotspot__tooltip,
.gps-product-hotspot.is-always-visible .gps-product-hotspot__tooltip { display: block; }

/* Elementor's saved direction describes the arrow/anchor, so the card opens opposite it. */
.gps-product-hotspot__point.is-right .gps-product-hotspot__tooltip { right: calc(100% + 14px); top: 50%; transform: translateY(-50%); }
.gps-product-hotspot__point.is-left .gps-product-hotspot__tooltip { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); }
.gps-product-hotspot__point.is-bottom .gps-product-hotspot__tooltip { left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); }
.gps-product-hotspot__point.is-top .gps-product-hotspot__tooltip { left: 50%; top: calc(100% + 14px); transform: translateX(-50%); }

@keyframes gps-product-hotspot-pulse {
    0% { opacity: .8; transform: scale(.55); }
    100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 640px) {
    .gps-product-hotspot__tooltip { max-width: min(180px, calc(100vw - 24px)); padding: 9px; font-size: 12px; }
}