/* ================================================================================================= POPUP 1*/

/* ==========================================
   STYLISH POPUP BACKGROUND
========================================== */

#Fpopup.stylish-popup {
    background: rgba(0, 0, 0, 0.0);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* ==========================================
   POPUP SIZE + OPEN ANIMATION
========================================== */

#Fpopup .popup-dialog {

    width: 680px;
    max-width: 92%;

    margin: 45px auto;

    animation:
        popupZoom 0.65s cubic-bezier(.17,.67,.32,1.3);

}


/* ==========================================
   POPUP BOX
========================================== */

#Fpopup .popup-box {

    position: relative;

    padding: 6px;

    

    border: none;

    border-radius: 22px;

    overflow: visible;

    box-shadow:

        0 0 8px rgba(255,255,255,.8),

        0 0 25px rgba(255,215,0,.65),

        0 0 55px rgba(255,170,0,.5),

        0 30px 80px rgba(0,0,0,.85);

}


/* ==========================================
   INNER GOLD BORDER
========================================== */

#Fpopup .popup-box::before {

    content: "";

    position: absolute;

    inset: 6px;

    border: 2px solid rgba(255,215,0,.8);

    border-radius: 17px;

    pointer-events: none;

    z-index: 5;

}


/* ==========================================
   POPUP IMAGE
========================================== */

#Fpopup .popup-image {

    display: block;

    width: 100%;

    height: auto;

    max-height: 82vh;

    object-fit: contain;

    border-radius: 17px;

    cursor: pointer;

    position: relative;

    z-index: 1;

}


/* ==========================================
   IMAGE SHINE EFFECT
========================================== */

#Fpopup .popup-box::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    background: linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform: skewX(-20deg);

    animation: popupShine 3.5s ease-in-out infinite;

    pointer-events: none;

    z-index: 6;

}


/* ==========================================
   CLOSE BUTTON
========================================== */

#Fpopup .popup-close {

    position: absolute;

    top: -18px;

    right: -18px;

    width: 46px;

    height: 46px;

    padding: 0;

    border-radius: 50%;

    border: 3px solid #fff;

    background: linear-gradient(
        145deg,
        #555,
        #111
    );

    color: #fff;

    font-size: 30px;

    font-weight: 300;

    line-height: 38px;

    text-align: center;

    opacity: 1;

    z-index: 999;

    cursor: pointer;

    box-shadow:

        0 4px 15px rgba(0,0,0,.7),

        0 0 12px rgba(255,215,0,.7);

    transition: all .25s ease;

}


/* Close hover */

#Fpopup .popup-close:hover {

    background: linear-gradient(
        145deg,
        #ff4444,
        #990000
    );

    color: #fff;

    transform:
        rotate(90deg)
        scale(1.12);

    box-shadow:

        0 0 15px #ff0000,

        0 0 30px #ffd700;

}


/* ==========================================
   OPEN ANIMATION
========================================== */

@keyframes popupZoom {

    0% {

        opacity: 0;

        transform:
            scale(.65)
            translateY(70px);

    }

    60% {
        opacity: 1;
        transform: scale(1.04) translateY(-5px);
    }

    100% {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

    }

}


/* ==========================================
   SHINE ANIMATION
========================================== */

@keyframes popupShine {

    0% {
        left: -120%;
    }

    45% {
        left: 130%;
    }

    100% {
        left: 130%;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    #Fpopup .popup-dialog {

        width: 94%;

        max-width: 94%;

        margin: 35px auto;

    }

    #Fpopup .popup-box {

        padding: 4px;

        border-radius: 17px;

    }

    #Fpopup .popup-image {

        max-height: 80vh;

        border-radius: 13px;

    }

    #Fpopup .popup-close {

        width: 40px;

        height: 40px;

        top: -14px;

        right: -14px;

        font-size: 26px;

        line-height: 33px;

    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    #Fpopup .popup-dialog {

        width: 92%;

        margin: 30px auto;

    }

    #Fpopup .popup-close {

        width: 36px;

        height: 36px;

        top: -12px;

        right: -12px;

        font-size: 24px;

        line-height: 29px;

    }

}

/* ================================================================================================= POPUP 2
   PREMIUM ANNIVERSARY POPUP
================================ */

/* Dark luxury overlay */
#Fpopup2.modal {
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Center popup */
#Fpopup2 .modal-dialog {
    width: 620px;
    max-width: 90%;
    margin: 40px auto;
    position: relative;

    transform: translateY(0);
    animation: popupEnter 0.6s cubic-bezier(.17,.67,.32,1.3);
}

/* Main popup */
#Fpopup2 .modal-content {
    position: relative;
    padding: 7px;

    background: linear-gradient(
        135deg,
        #fff2a6,
        #d4a72c 25%,
        #fff4b0 50%,
        #b8860b 75%,
        #ffe88a
    );

    border: none;
    border-radius: 24px;

    box-shadow:
        0 0 10px rgba(255,255,255,.8),
        0 0 30px rgba(255,215,0,.9),
        0 0 70px rgba(255,170,0,.65),
        0 30px 80px rgba(0,0,0,.8);

    overflow: visible;
}

/* Inner black frame */
#Fpopup2 .modal-content::before {
    content: "";
    position: absolute;
    inset: 7px;

    border: 2px solid rgba(255,255,255,.5);
    border-radius: 18px;

    pointer-events: none;
    z-index: 2;
}

/* Anniversary image */
#Fpopup2 .anniversary-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 82vh;

    object-fit: contain;

    border-radius: 18px;

    cursor: pointer;

    position: relative;
    z-index: 1;
}

/* ================================
   GOLD SHINE
================================ */

#Fpopup2 .modal-content::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        100deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform: skewX(-20deg);

    animation: goldShine 3s ease-in-out infinite;

    pointer-events: none;

    z-index: 3;
}

/* ================================
   CLOSE BUTTON
================================ */

#Fpopup2 .popup-close {

    position: absolute;

    top: -20px;
    right: -20px;

    width: 46px;
    height: 46px;

    padding: 0;

    border-radius: 50%;

    border: 3px solid #fff;

    background:
        linear-gradient(
            145deg,
            #777,
            #222
        );

    color: #fff;

    font-size: 30px;
    font-weight: 300;

    line-height: 38px;

    text-align: center;

    opacity: 1;

    z-index: 9999;

    box-shadow:
        0 4px 12px rgba(0,0,0,.7),
        0 0 15px rgba(255,215,0,.7);

    transition: all .25s ease;
}

/* Close hover */
#Fpopup2 .popup-close:hover {

    background:
        linear-gradient(
            145deg,
            #ff4d4d,
            #a00000
        );

    color: #fff;

    transform: rotate(90deg) scale(1.12);

    box-shadow:
        0 0 15px #ff0000,
        0 0 30px #ffd700;
}


/* ================================
   POPUP ENTER ANIMATION
================================ */

@keyframes popupEnter {

    0% {
        opacity: 0;
        transform:
            scale(.65)
            translateY(60px);
    }

    70% {
        opacity: 1;
        transform:
            scale(1.04)
            translateY(-5px);
    }

    100% {
        opacity: 1;
        transform:
            scale(1)
            translateY(0);
    }
}


/* ================================
   GOLD SHINE ANIMATION
================================ */

@keyframes goldShine {

    0% {
        left: -120%;
    }

    45% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}


/* ================================
   MOBILE
================================ */

@media (max-width: 767px) {

    #Fpopup2 .modal-dialog {

        width: 94%;
        max-width: 94%;

        margin: 35px auto;
    }

    #Fpopup2 .modal-content {

        padding: 5px;

        border-radius: 18px;
    }

    #Fpopup2 .anniversary-image {

        max-height: 78vh;

        border-radius: 14px;
    }

    #Fpopup2 .popup-close {

        width: 40px;
        height: 40px;

        top: -14px;
        right: -14px;

        font-size: 26px;

        line-height: 33px;
    }
}


/* ================================
   VERY SMALL MOBILE
================================ */

@media (max-width: 480px) {

    #Fpopup2 .modal-dialog {

        width: 92%;
        margin: 30px auto;
    }

    #Fpopup2 .modal-content {

        padding: 4px;
    }

    #Fpopup2 .popup-close {

        width: 36px;
        height: 36px;

        top: -12px;
        right: -12px;

        font-size: 24px;
        line-height: 29px;
    }
}