/* Hotspot Highlight Boxes - Production Style */
.hotspot-highlight {
    position: absolute;
    border-radius: 8px;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;  /* Hidden by default */
}

/* Active State - Static Blue Border */
.hotspot-highlight.active {
    opacity: 1;
    border: 2px solid #3b82f6;
    box-shadow: 
        0 0 0 2px rgba(59, 130, 246, 0.3),
        0 0 20px rgba(59, 130, 246, 0.5);
    background: transparent; /* No fill - only border */
    /* No animation - static border */
}

/* Edit Mode Support */
.hotspot-highlight.edit-mode {
    opacity: 0.3;
    border: 2px dashed #f59e0b;
    pointer-events: auto;
    cursor: move;
}

.hotspot-highlight.edit-mode:hover {
    opacity: 0.6;
    border-color: #f97316;
}

.hotspot-highlight.dragging {
    opacity: 0.5;
    cursor: grabbing;
}