/* Hotspot Types Styles */
.hotspot-area {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .hotspot-area:hover {
        transform: scale(1.05);
    }
}

@media (hover: none) {
    .hotspot-area:hover {
        transform: none !important;
    }
}

.hotspot-icon {
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .hotspot-icon:hover {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    }
}

@media (hover: none) {
    .hotspot-icon:hover {
        transform: translate(-50%, -50%) !important;
        box-shadow: none !important;
    }
}

/* Hotspot type specific styles */
.hotspot-area[data-type="link"] .hotspot-icon {
    background: #4672E2 !important;
}

.hotspot-area[data-type="photo"] .hotspot-icon {
    background: #28a745 !important;
}

.hotspot-area[data-type="video"] .hotspot-icon {
    background: #dc3545 !important;
}

.hotspot-area[data-type="sound"] .hotspot-icon {
    background: #6f42c1 !important;
}

.hotspot-area[data-type="gif"] .hotspot-icon {
    background: #fd7e14 !important;
}

.hotspot-area[data-type="product"] .hotspot-icon {
    background: #20c997 !important;
}

/* Modal styles for hotspot properties */
.hotspot-modal {
    background: #2c3e50;
    color: white;
    border-radius: 8px;
}

.hotspot-modal .tab-btn {
    transition: all 0.3s ease;
}

.hotspot-modal .tab-btn:hover {
    background: #4672E2 !important;
    color: white !important;
}

.hotspot-modal input[type="color"] {
    cursor: pointer;
}

.hotspot-modal input[type="checkbox"] {
    margin-right: 8px;
}

.video-option {
    transition: all 0.3s ease;
}

.video-option:hover {
    background: #4672E2 !important;
    color: white !important;
}

.video-option.active {
    background: #4672E2 !important;
    color: white !important;
}

/* Responsive styles */
@media (max-width: 768px) {
    .hotspot-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
    
    .hotspot-modal {
        width: 95% !important;
        margin: 10px !important;
    }
}