#vpp-popup {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;

    /* ✅ CENTER FIX */
    justify-content:center;
    align-items:center;

    z-index:9999;
}

/* Soft dark overlay */
#vpp-popup::before {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    
}

/* Content Box */
.vpp-content {
    position: relative;
    width: 90%;
    max-width: 700px;
    /*margin:90px auto;*/
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 10px;
    z-index: 10000;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* Video Wrapper */
.vpp-video-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

/* Thumbnail */
#vpp-thumbnail {
    width:100%;
    display:block;
}

/* ▶ Play Button */
.vpp-play-btn {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:70px;
    height:70px;
    background: rgba(255,255,255,0.9);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#000;
    cursor:pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.vpp-play-btn:hover {
    transform:translate(-50%, -50%) scale(1.1);
}

/* Video */
.vpp-video iframe,
.vpp-video video {
    width:100%;
    height:400px;
    border-radius:12px;
}

/* ❌ CLOSE BUTTON FIX */
.vpp-close {
    position:absolute;
    top:-15px;
    right:-15px;
    width:40px;
    height:40px;
    background:#fff;
    color:#000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    cursor:pointer;
    z-index: 20000; /* FIXED */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.vpp-close:hover {
    background:#ff4d4d;
    color:#fff;
}

/* Mobile Fix */
@media(max-width:768px){
    .vpp-video iframe,
    .vpp-video video {
        height:250px;
    }
}