/*
    protectedImage.css
    Place in: WebSales.Website.Customer.Shared/wwwroot/css/protectedImage.css
    Link it in the <head> of App.razor / _Host.cshtml / index.html so images are blurred
    from the very first paint (including prerendering), before any JS runs:

    <link rel="stylesheet" href="_content/WebSales.Website.Customer.Shared/css/protectedImage.css" />

    This is a global (not scoped) stylesheet on purpose: the <img> tags passed in through
    the Media fragment belong to the parent component, so scoped CSS would not reach them.
*/

.protected-image {
    --pi-blur: 18px;
    --pi-speed: 180ms;
    position: relative;
    display: block;
    overflow: hidden; /* keeps the blurred edges inside the card */
    isolation: isolate;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* iOS long-press "Save image" sheet */
    -webkit-tap-highlight-color: transparent;
}

    /* ---------- the image layer ---------- */

    .protected-image .pi-media {
        filter: blur(var(--pi-blur));
        transform: scale(1.08); /* hides the soft transparent edge blur creates */
        transition: filter var(--pi-speed) ease, transform var(--pi-speed) ease;
    }

        .protected-image .pi-media img {
            display: block;
            pointer-events: none; /* the image itself can never be the target of a click/menu */
            -webkit-user-drag: none;
            -webkit-touch-callout: none;
        }

    /* ---------- shield: catches right-click / long-press instead of the <img> ---------- */

    .protected-image .pi-shield {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: transparent;
    }

    /* ---------- hint message ---------- */

    .protected-image .pi-hint {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem;
        pointer-events: none;
        transition: opacity var(--pi-speed) ease;
    }

    /* A quiet, compact chip: hairline border, soft dark fill, small sentence-case text.
   Explicit sizes/resets so site-wide span/icon styles can't inflate it. */
    .protected-image .pi-hint-chip {
        display: inline-block;
        max-width: min(11.5rem, 100%);
        padding: 0.7rem 0.95rem 0.65rem;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 6px;
        background: rgba(18, 18, 18, 0.42);
        color: #fff;
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0.02em;
        text-transform: none;
        text-align: center;
        white-space: normal;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .protected-image .pi-hint-hover,
    .protected-image .pi-hint-touch {
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }

    .protected-image .pi-hint-icon {
        width: 1.4rem;
        height: 1.4rem;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.4;
        stroke-linejoin: round;
    }

    .protected-image .pi-hint-hover .pi-hint-icon {
        fill: currentColor;
        stroke: none;
    }

    .protected-image .pi-hint-dot {
        fill: currentColor;
        stroke: none;
    }

    .protected-image .pi-hint-text {
        display: block;
        font-size: inherit;
        text-transform: none;
    }

    /* Touch wording by default; mouse wording on devices with a real hover pointer. */
    .protected-image .pi-hint-hover {
        display: none;
    }

    .protected-image .pi-hint-touch {
        display: flex;
    }

    /* ---------- controls (zoom icon, filename...) sit above everything ---------- */

    .protected-image .pi-controls {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
    }

        .protected-image .pi-controls > * {
            pointer-events: auto;
        }

/* ---------- revealing ---------- */

/* Desktop: hover. Limited to real mouse pointers so a tap on a phone
   doesn't leave the image "stuck" unblurred via sticky :hover. */
@media (hover: hover) and (pointer: fine) {
    .protected-image .pi-hint-hover {
        display: flex;
    }

    .protected-image .pi-hint-touch {
        display: none;
    }

    /* Cards: hovering anywhere on the card image. Lightbox (pi-fill): only when the
       cursor is over the photo itself, which the JS marks with .pi-hover. */
    .protected-image:not(.pi-fill):hover .pi-media,
    .protected-image.pi-hover .pi-media {
        filter: none;
        transform: none;
    }

    .protected-image:not(.pi-fill):hover .pi-hint,
    .protected-image.pi-hover .pi-hint {
        opacity: 0;
    }
}

/* Touch & hold (class set by protectedImage.js) and keyboard focus. */
.protected-image.pi-revealed .pi-media,
.protected-image:focus-visible .pi-media {
    filter: none;
    transform: none;
}

.protected-image.pi-revealed .pi-hint,
.protected-image:focus-visible .pi-hint {
    opacity: 0;
}

.protected-image:focus-visible {
    box-shadow: inset 0 0 0 3px var(--bs-primary, #0d6efd);
}

/* ---------- locked: screenshot chord pressed / window lost focus ---------- */

html.pi-locked .protected-image .pi-media {
    filter: blur(var(--pi-blur)) !important;
    transform: scale(1.08) !important;
    transition: none !important; /* blur instantly, no fade */
}

html.pi-locked .protected-image .pi-hint {
    opacity: 1 !important;
}

/* ---------- fill variant (lightbox / viewers) ---------- */

/* Fills its parent and centres the image; the image's own transform (zoom/pan) is untouched.
   touch-action: none stops the browser claiming pinch/drag gestures, which would
   cancel the pointers mid-gesture and re-blur the image. */
.protected-image.pi-fill {
    width: 100%;
    height: 100%;
    touch-action: none;
}

    .protected-image.pi-fill .pi-media {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* ---------- device-specific text helpers (usable anywhere) ---------- */

.pi-only-hover {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .pi-only-hover {
        display: inline;
    }

    .pi-only-touch {
        display: none;
    }
}

/* ---------- printing the page ---------- */

@media print {
    .protected-image .pi-media {
        filter: blur(var(--pi-blur)) !important;
        transform: scale(1.08) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .protected-image .pi-media,
    .protected-image .pi-hint {
        transition: none;
    }
}

/* ======================================================================
   GuardedImage: always visible (no blur, no hover) - package previews.
   Separate class names, so nothing above is affected.
   ====================================================================== */

.pg-img {
    pointer-events: none; /* the image is never the target of a click/menu */
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Fills the img's nearest positioned ancestor (the node box) and catches
   right-click / long-press instead of the image. */
.pg-shield {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: transparent;
    -webkit-touch-callout: none; /* iOS long-press "Save image" sheet */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Optional (BlurOnScreenshot="true"): blur briefly while a screenshot chord is held. */
html.pi-locked .pg-img.pg-blur-on-lock {
    filter: blur(10px);
}

/* ======================================================================
   NONE mode (Settings.ImageCaptureSecurityMode = "NONE"): ProtectedImage is
   never blurred, but the shield and no-save/no-drag rules above still apply.
   Higher specificity + !important so it also beats the locked and print rules.
   ====================================================================== */

.protected-image.pi-off .pi-media,
html.pi-locked .protected-image.pi-off .pi-media {
    filter: none !important;
    transform: none !important;
    transition: none !important;
}