/* Container & Lens Setup */
.cursor-crosshair {
    cursor: crosshair;
}

.zoom-lens {
    position: absolute;
    border: 1px solid #999;
    background-color: rgba(255, 255, 255, 0.4);
    width: 120px;
    height: 120px;
    pointer-events: none; /* Allows cursor hover events to pass through to the image */
    border-radius: 8px;
    z-index: 10;
}

/* Zoomed Preview Panel (Displays to the right) */
.zoom-result {
    left: 105%; /* Pushes preview box to the right side of the main image */
    top: 0;
    width: 420px;
    height: 420px;
    background-repeat: no-repeat;
    z-index: 100;
    border: 1px solid #eee;
    background-color: #fff;
}

/* Hide zoom preview box on mobile/tablet screens for better UX */
@media (max-width: 991.98px) {
    .zoom-result, .zoom-lens {
        display: none !important;
    }
}