/**
 * WBF Image Protection — CSS Overlay
 * Creates an invisible layer over product images to prevent Save Image As.
 * The overlay intercepts mouse events so the browser cannot access the <img> directly.
 */

/* Overlay on image containers — catches Save Image As */
.wbf-img-protected {
    position: relative !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.wbf-img-protected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
    /* Pass clicks through to zoom/lightbox/swiper — img already has pointer-events:none
       so right-click on image is still impossible (browser shows page menu, not image menu) */
    pointer-events: none;
    /* Transparent 1x1 GIF as "image" — what gets saved on "Save Image As" */
    background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
    background-repeat: no-repeat;
    background-size: 0 0;
}

/* Ensure interactive elements stay clickable above the overlay */
.wbf-img-protected .img-light-box,
.wbf-img-protected .easyzoom,
.wbf-img-protected .js-view-large,
.wbf-img-protected .btn-additional,
.wbf-img-protected .gr-btn-additional,
.wbf-img-protected a {
    position: relative;
    z-index: 11;
    pointer-events: auto !important;
}

/* Prevent image selection highlighting */
.wbf-img-protected img {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-touch-callout: none !important;
}

/* Block pointer events on images only when right-click is blocked (JS adds this class) */
.wbf-img-noclick img {
    pointer-events: none !important;
}

/* Re-enable pointer events on interactive elements inside protection */
.wbf-img-protected .swiper-container,
.wbf-img-protected .swiper-wrapper,
.wbf-img-protected .swiper-slide,
.wbf-img-protected .swiper-arrows,
.wbf-img-protected .swiper-dots,
.wbf-img-protected .wrapper-imgs,
.wbf-img-protected picture {
    pointer-events: auto !important;
}

/* Tooltip message on hover (only shown if overlay message is configured) */
.wbf-img-protected[data-wbf-msg]::after {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wbf-img-protected[data-wbf-msg]:hover::after {
    content: attr(data-wbf-msg);
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    pointer-events: none;
}