/* ===== OVERLAY ===== */
    .popup-overlay{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,0.65);
        display:flex;
        justify-content:center;
        align-items:center;
        z-index:99999;
        padding:20px;

        opacity:0;
        visibility:hidden;
        transition:0.4s ease;
    }

    .popup-overlay.active{
        opacity:1;
        visibility:visible;
    }

    /* ===== POPUP ===== */
    .popup-box{
        position:relative;
        width:100%;
        max-width:850px;
        border-radius:25px;
        overflow:hidden;
        background:#fff;
        box-shadow:0 15px 40px rgba(0,0,0,0.35);

        transform:scale(0.7) translateY(80px);
        opacity:0;
    }

    .popup-overlay.active .popup-box{
        animation:popupIn 0.7s ease forwards;
    }

    .popup-box.closing{
        animation:popupOut 0.5s ease forwards;
    }

    /* ===== IMAGE ===== */
    .popup-box img{
        width:100%;
        display:block;
    }

    /* ===== CLOSE BUTTON ===== */
    .close-btn{
        position:absolute;
        top:12px;
        right:12px;
        width:42px;
        height:42px;
        border:none;
        border-radius:50%;
        background:#ff2f7b;
        color:#fff;
        font-size:22px;
        cursor:pointer;
        font-weight:bold;
        box-shadow:0 5px 15px rgba(0,0,0,0.25);
        transition:0.3s ease;
        z-index:10;
    }

    .close-btn:hover{
        transform:rotate(90deg) scale(1.08);
        background:#e4005e;
    }

    /* ===== TIMER ===== */
    .timer{
        position:absolute;
        bottom:15px;
        right:15px;
        background:rgba(0,0,0,0.75);
        color:#fff;
        padding:10px 16px;
        border-radius:40px;
        font-size:14px;
        font-weight:bold;
        backdrop-filter:blur(4px);
    }

    /* ===== ANIMATIONS ===== */
    @keyframes popupIn{
        0%{
            transform:scale(0.7) translateY(80px);
            opacity:0;
        }
        60%{
            transform:scale(1.03) translateY(-10px);
            opacity:1;
        }
        100%{
            transform:scale(1) translateY(0);
            opacity:1;
        }
    }

    @keyframes popupOut{
        0%{
            transform:scale(1);
            opacity:1;
        }
        100%{
            transform:scale(0.7) translateY(80px);
            opacity:0;
        }
    }

    /* ===== RESPONSIVE ===== */
    @media(max-width:768px){

        .popup-box{
            border-radius:18px;
        }

        .close-btn{
            width:36px;
            height:36px;
            font-size:18px;
            top:8px;
            right:8px;
        }

        .timer{
            font-size:12px;
            padding:8px 12px;
        }
    }