/*
 * WBPhotography — Foto-beveiliging
 * A: Rechtermuisknop / lang indrukken blokkade + slot-overlay
 * B: Canvas-watermerk
 */

/* ------------------------------------------------------------------ *
 * Foto-wrap: positie-anker voor alle overlays
 * ------------------------------------------------------------------ */
.wbp-foto-guard {
    position: relative;
    display: block;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* iOS: long-press callout onderdrukken */
}

/* ------------------------------------------------------------------ *
 * A — Transparante bescherm-laag (rechtsklik / drag blokkade)
 * Volledige dekking, volledig transparant, onderschept pointer-events.
 * ------------------------------------------------------------------ */
.wbp-foto-shield {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: default;
    /* Opzettelijk geen background — volledig transparant */
}

/* ------------------------------------------------------------------ *
 * A — Slot-overlay (verschijnt bij 2e+ poging)
 * ------------------------------------------------------------------ */
.wbp-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, background 0.25s ease;
}

.wbp-lock-overlay.wbp-lock-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.20);
}

.wbp-lock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.30);
    color: rgba(255, 255, 255, 0.90);
    transition: transform 0.18s ease;
}

.wbp-lock-overlay.wbp-lock-visible .wbp-lock-icon {
    transform: scale(1.06);
}

.wbp-lock-icon svg {
    display: block;
    width: 36px;
    height: 36px;
    pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * B — Canvas-watermerk
 * Positionering wordt via JS ingesteld (position:absolute; inset:0).
 * Onderstaande regel zorgt dat het canvas nooit de foto-layout verstoort
 * en geen pointer-events ontvangt (zodat de shield er doorheen werkt).
 * ------------------------------------------------------------------ */
.wbp-wm-canvas {
    pointer-events: none !important;
    user-select: none;
}

html.wbp-watermark-preload #wbpFoto,
html.wbp-watermark-preload [data-wbp-watermark-target="1"] {
    opacity: 0 !important;
}

img[data-wbp-watermark-controlled="1"][data-wbp-watermark-ready="0"] {
    opacity: 0 !important;
}

img[data-wbp-watermark-controlled="1"][data-wbp-watermark-ready="1"] {
    opacity: 1 !important;
    transition: opacity 0.14s ease;
}