/* ── WP Popup Master – Frontend ────────────────────────── */

/* Overlay */
.wppm-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.wppm-overlay[hidden] { display: none; }

/* Position variants */
.wppm-pos-top-left     { align-items: flex-start; justify-content: flex-start; padding: 20px; }
.wppm-pos-top-right    { align-items: flex-start; justify-content: flex-end;   padding: 20px; }
.wppm-pos-bottom-left  { align-items: flex-end;   justify-content: flex-start; padding: 20px; }
.wppm-pos-bottom-right { align-items: flex-end;   justify-content: flex-end;   padding: 20px; }
.wppm-pos-top-center   { align-items: flex-start; justify-content: center;     padding-top: 40px; }
.wppm-pos-bottom-center{ align-items: flex-end;   justify-content: center;     padding-bottom: 40px; }

/* Box */
.wppm-box {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
}
.wppm-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Close button */
.wppm-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s, transform .18s;
    z-index: 10;
}
.wppm-close:hover { background: rgba(0,0,0,.8); transform: scale(1.1); }

/* ══ ANIMATIONS ══════════════════════════════════════════ */

/* Fade */
@keyframes wppm-fadeIn    { from { opacity:0 }             to { opacity:1 } }
@keyframes wppm-fadeOut   { from { opacity:1 }             to { opacity:0 } }

/* Slide Down (enter from top) */
@keyframes wppm-slideDown-in  { from { opacity:0; transform:translateY(-60px) } to { opacity:1; transform:translateY(0) } }
@keyframes wppm-slideDown-out { from { opacity:1; transform:translateY(0) }     to { opacity:0; transform:translateY(-60px) } }

/* Slide Up (enter from bottom) */
@keyframes wppm-slideUp-in    { from { opacity:0; transform:translateY(60px) }  to { opacity:1; transform:translateY(0) } }
@keyframes wppm-slideUp-out   { from { opacity:1; transform:translateY(0) }     to { opacity:0; transform:translateY(60px) } }

/* Slide Left (enter from right) */
@keyframes wppm-slideLeft-in  { from { opacity:0; transform:translateX(60px) }  to { opacity:1; transform:translateX(0) } }
@keyframes wppm-slideLeft-out { from { opacity:1; transform:translateX(0) }     to { opacity:0; transform:translateX(60px) } }

/* Slide Right (enter from left) */
@keyframes wppm-slideRight-in  { from { opacity:0; transform:translateX(-60px) } to { opacity:1; transform:translateX(0) } }
@keyframes wppm-slideRight-out { from { opacity:1; transform:translateX(0) }     to { opacity:0; transform:translateX(-60px) } }

/* Zoom */
@keyframes wppm-zoomIn-in    { from { opacity:0; transform:scale(.4) }  to { opacity:1; transform:scale(1) } }
@keyframes wppm-zoomIn-out   { from { opacity:1; transform:scale(1) }   to { opacity:0; transform:scale(.4) } }
@keyframes wppm-zoomOut-in   { from { opacity:0; transform:scale(1.5) } to { opacity:1; transform:scale(1) } }
@keyframes wppm-zoomOut-out  { from { opacity:1; transform:scale(1) }   to { opacity:0; transform:scale(1.5) } }

/* Bounce */
@keyframes wppm-bounceIn-in {
    0%   { opacity:0; transform:scale(.3) }
    50%  { opacity:1; transform:scale(1.12) }
    80%  { transform:scale(.95) }
    100% { transform:scale(1) }
}
@keyframes wppm-bounceOut-out {
    0%   { transform:scale(1) }
    20%  { transform:scale(1.1) }
    100% { opacity:0; transform:scale(.3) }
}

/* Rotate */
@keyframes wppm-rotateIn-in  { from { opacity:0; transform:rotate(-90deg) scale(.5) } to { opacity:1; transform:rotate(0) scale(1) } }
@keyframes wppm-rotateOut-out { from { opacity:1; transform:rotate(0) scale(1) }      to { opacity:0; transform:rotate(90deg) scale(.5) } }

/* Flip */
@keyframes wppm-flipIn-in  { from { opacity:0; transform:perspective(400px) rotateY(90deg) }  to { opacity:1; transform:perspective(400px) rotateY(0) } }
@keyframes wppm-flipOut-out { from { opacity:1; transform:perspective(400px) rotateY(0) }     to { opacity:0; transform:perspective(400px) rotateY(90deg) } }

/* ── Helper classes applied by JS ─────────────────────── */
.wppm-anim-in  .wppm-box { animation-fill-mode: both; animation-timing-function: ease; }
.wppm-anim-out .wppm-box { animation-fill-mode: both; animation-timing-function: ease; }

/* Closing overlay fade */
@keyframes wppm-overlay-fadeOut { from { opacity:1 } to { opacity:0 } }
.wppm-closing { animation: wppm-overlay-fadeOut .3s ease forwards; pointer-events:none; }

/* ── Video wrapper ───────────────────────────────────────── */
.wppm-video-wrap {
    position:relative; width:100%; padding-bottom:56.25%; /* 16:9 */
    background:#000; border-radius:16px; overflow:hidden;
}
.wppm-video-wrap iframe,
.wppm-video-wrap video {
    position:absolute; inset:0; width:100%; height:100%;
    border:none; border-radius:16px;
}