<div id="custom-popup" class="custom-popup">
    <div class="popup-inner">
        <span class="popup-close">×</span>
        <div id="popup-dynamic-content"></div>
    </div>
</div>

.custom-popup {
    position: static !important;
    inset: 0;
    background: rgba(0,0,0,0.0) !important;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.custom-popup.active {
    display: flex;
}

.popup-inner {
    background: #fff !important;
    padding: 50px 0px !important;
    border-radius: 20px !important;
    max-width: 25% !important;
    width: 100% !important;
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    bottom: 20px !important;
    z-index: 100 !important;
    overflow: hidden !important;
    animation: popupFade 0.25s 
ease;
}

.popup-close {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 30px;
    cursor: pointer;
    background: #f1f5f9;
    border-radius: 100px;
    padding: 5px 10px 10px 10px !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#popup-dynamic-content{
    position: static !important;
}

@keyframes popupFade {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media only screen and (max-width:767px){
  .popup-inner {
    background: #fff !important;
    padding: 50px 0px !important;
    border-radius: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    bottom: 20px !important;
    z-index: 100 !important;
    overflow: hidden !important;
    animation: popupFade 0.25s 
ease;
}
}

document.addEventListener("click", function(e) {
    const btn = e.target.closest(".open-popup-btn");
    if(btn){
        e.preventDefault();

        // Get dynamic content from button
        const content = btn.dataset.content;

        // Insert into popup
        document.getElementById("popup-dynamic-content").innerHTML = content;

        // Show popup
        document.getElementById("custom-popup").classList.add("active");
    }

    // Close popup
    if(e.target.classList.contains("popup-close") || e.target.id === "custom-popup"){
        document.getElementById("custom-popup").classList.remove("active");
    }
});