/**
 * Pretpot PRO – Spotlight Beam Effect
 * File: assets/css/spotlight-beam.css
 */

/* ── Wrapper: must form its own stacking context ─────────── */
.pretpot-spotlight-beam {
    position: relative;
    isolation: isolate; /* scope mix-blend-mode to this element only */
}

/* ── Dim overlay: covers all child content ──────────────── */
.pretpot-spotlight-beam > .pretpot-sb-dim {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.75); /* overridden inline by JS */
    transition: opacity 0.3s ease;
}

/* ── Beam overlay: SVG injected by JS ────────────────────── */
.pretpot-spotlight-beam > .pretpot-sb-beam {
    position: absolute;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    mix-blend-mode: screen; /* adds light — never darkens */
    overflow: visible;
}

.pretpot-spotlight-beam > .pretpot-sb-beam svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible; /* allow blur to spill outside SVG bounds */
}

/* ── Editor helper: visible border when selected ─────────── */
.elementor-editor-active .pretpot-spotlight-beam:focus-within {
    outline: 2px dashed rgba(255, 255, 255, 0.3);
    outline-offset: -2px;
}