/* =============================================
   BELLAMY IMAGE HOTSPOT - Elementor Widget CSS
   ============================================= */

.bellamywidget-hotspot-wrapper {
    position: relative;
    width: 100%;
    line-height: 0;
}

.bellamywidget-hotspot-image {
    width: 100%;
    height: auto;
    display: block;
}

/* ==================== HOTSPOT POINT ==================== */
.bellamywidget-hotspot-point {
    --bellamy-hotspot-pulse-color: rgba(0, 115, 170, 0.55);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 2;
}

/* ==================== MARKER ==================== */
.bellamywidget-hotspot-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.bellamywidget-hotspot-marker:focus {
    outline: none;
}

.bellamywidget-hotspot-point:hover .bellamywidget-hotspot-marker,
.bellamywidget-hotspot-point.bellamywidget-hotspot-active .bellamywidget-hotspot-marker {
    transform: scale(1.08);
}

.bellamywidget-hotspot-marker i,
.bellamywidget-hotspot-marker svg {
    line-height: 1;
}

/* ==================== PULSE ANIMATION ==================== */
.bellamywidget-hotspot-pulse .bellamywidget-hotspot-marker:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: var(--bellamy-hotspot-pulse-color);
    animation: bellamy-hotspot-pulse 2s infinite;
    z-index: -1;
}

@keyframes bellamy-hotspot-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* ==================== TOOLTIP ==================== */
.bellamywidget-hotspot-tooltip {
    position: absolute;
    box-sizing: border-box;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
    z-index: 10;
}

.bellamywidget-hotspot-tooltip-title {
    margin: 0;
}

.bellamywidget-hotspot-tooltip-description {
    margin: 0;
}

/* Show on hover trigger */
.bellamywidget-hotspot-wrapper[data-trigger="hover"] .bellamywidget-hotspot-point:hover .bellamywidget-hotspot-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Show on click trigger (toggled via JS) */
.bellamywidget-hotspot-wrapper[data-trigger="click"] .bellamywidget-hotspot-point.bellamywidget-hotspot-active .bellamywidget-hotspot-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==================== TOOLTIP POSITIONS ====================
   All four directions enter with the same straight bottom-to-top
   motion: the hidden state always sits 10px below its resting spot
   (in addition to whatever horizontal centering is needed), and
   moves up to translate(..., 0 / -50%) once visible. This keeps the
   entrance consistent instead of sliding in sideways for left/right
   or downward for the bottom position. */
.bellamywidget-hotspot-tooltip-top {
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 10px);
}
.bellamywidget-hotspot-wrapper .bellamywidget-hotspot-point:hover .bellamywidget-hotspot-tooltip-top,
.bellamywidget-hotspot-point.bellamywidget-hotspot-active .bellamywidget-hotspot-tooltip-top {
    transform: translate(-50%, 0);
}

.bellamywidget-hotspot-tooltip-bottom {
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 10px);
}
.bellamywidget-hotspot-wrapper .bellamywidget-hotspot-point:hover .bellamywidget-hotspot-tooltip-bottom,
.bellamywidget-hotspot-point.bellamywidget-hotspot-active .bellamywidget-hotspot-tooltip-bottom {
    transform: translate(-50%, 0);
}

.bellamywidget-hotspot-tooltip-left {
    right: calc(100% + 14px);
    top: 50%;
    transform: translate(0, calc(-50% + 10px));
}
.bellamywidget-hotspot-wrapper .bellamywidget-hotspot-point:hover .bellamywidget-hotspot-tooltip-left,
.bellamywidget-hotspot-point.bellamywidget-hotspot-active .bellamywidget-hotspot-tooltip-left {
    transform: translate(0, -50%);
}

.bellamywidget-hotspot-tooltip-right {
    left: calc(100% + 14px);
    top: 50%;
    transform: translate(0, calc(-50% + 10px));
}
.bellamywidget-hotspot-wrapper .bellamywidget-hotspot-point:hover .bellamywidget-hotspot-tooltip-right,
.bellamywidget-hotspot-point.bellamywidget-hotspot-active .bellamywidget-hotspot-tooltip-right {
    transform: translate(0, -50%);
}

/* ==================== TOOLTIP ARROW ==================== */
.bellamywidget-hotspot-arrow-on .bellamywidget-hotspot-tooltip:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: inherit;
    transform: rotate(45deg);
}

.bellamywidget-hotspot-arrow-on .bellamywidget-hotspot-tooltip-top:before {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
}

.bellamywidget-hotspot-arrow-on .bellamywidget-hotspot-tooltip-bottom:before {
    top: -5px;
    left: 50%;
    margin-left: -5px;
}

.bellamywidget-hotspot-arrow-on .bellamywidget-hotspot-tooltip-left:before {
    right: -5px;
    top: 50%;
    margin-top: -5px;
}

.bellamywidget-hotspot-arrow-on .bellamywidget-hotspot-tooltip-right:before {
    left: -5px;
    top: 50%;
    margin-top: -5px;
}