/* Import modern fonts */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');



/* Popup Background */

.popup-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(30, 30, 30, 0.8));

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 999;

    -webkit-backdrop-filter: blur(5px);

    backdrop-filter: blur(5px);

    animation: fadeIn 0.3s ease-out;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



/* Popup Box */

.popup-box {

    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);

    width: 90%;

    max-width: 450px;

    text-align: center;

    border-radius: 20px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);

    position: relative;

    padding: 40px 30px;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;

    animation: slideUp 0.4s ease-out;

    border: 1px solid rgba(255, 255, 255, 0.1);

}



@keyframes slideUp {

    from { transform: translateY(30px); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }

}





/* Close Button */

.close-btn {

    position: absolute;

    top: 10px;

    right: 20px;

    font-size: 24px;

    cursor: pointer;

    border: none;

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

    width: 35px;

    height: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

}



.close-btn:hover {

    background: rgba(255, 255, 255, 0.2);

    transform: scale(1.1);

}



/* Title */

.popup-box h2 {

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 15px;

    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Description */

.popup-box p {

    font-size: 16px;

    font-weight: 300;

    line-height: 1.6;

    margin-bottom: 25px;

    opacity: 0.9;

}



/* Hand Icon */

.hand-icon {

    width: 50px;

    margin: 20px 0;

    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));

}



/* Subscribe Button */

.subscribe-btn {

    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);

    color: #ffffff;

    padding: 15px 30px;

    font-size: 18px;

    font-weight: 600;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    position: relative;

    overflow: hidden;

    transition: all 0.3s ease;

    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);

    text-transform: uppercase;

    letter-spacing: 1px;

}



.subscribe-btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.5s;

}



.subscribe-btn:hover::before {

    left: 100%;

}



.subscribe-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(255, 107, 107, 0.4);

}



.subscribe-btn:active {

    transform: translateY(0);

}



/* Click hint */

.popup-box p:last-child {

    font-size: 14px;

    opacity: 0.7;

    margin-top: 15px;

    font-style: italic;

}



/* Responsive */

@media (max-width: 600px) {

    .popup-box {

        width: 95%;

        padding: 30px 20px;

    }



    .popup-box h2 {

        font-size: 24px;

    }



    .subscribe-btn {

        padding: 12px 25px;

        font-size: 16px;

    }

}