/* ==========================================================
   Francherry Beauty Install Banner
   Version: 3.1
========================================================== */

#fb-install{

    position:fixed;

    left:20px;

    right:20px;

    bottom:20px;

    background:#ffffff;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,.18);

    padding:18px;

    z-index:999998;

    display:flex;

    align-items:center;

    gap:18px;

    transform:translateY(180%);

    opacity:0;

    visibility:hidden;

    overflow:hidden;

    transition:
        transform .35s ease,
        opacity .35s ease,
        visibility .35s;

}

/* ==========================================================
   Luxury Gold Accent
========================================================== */

#fb-install::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:6px;

    background:linear-gradient(
        to bottom,
        #D4AF37,
        #B88A16
    );

}

/* ==========================================================
   Banner Visible
========================================================== */

#fb-install.show{

    transform:translateY(0);

    opacity:1;

    visibility:visible;

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

}

@keyframes fbInstallFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==========================================================
   Content
========================================================== */

#fb-install-content{

    display:flex;

    align-items:center;

    gap:16px;

    flex:1;

}

#fb-install-logo{

    width:56px;

    height:56px;

    border-radius:14px;

    flex-shrink:0;

}

#fb-install-text{

    flex:1;

}

#fb-install-text h3{

    margin:0;

    font-size:18px;

    color:#111;

    font-weight:700;

}

#fb-install-text p{

    margin:6px 0 0;

    font-size:14px;

    color:#666;

    line-height:1.5;

}

/* ==========================================================
   Install Button
========================================================== */

#fb-install-button{

    border:none;

    background:linear-gradient(
        135deg,
        #D4AF37,
        #E8C55B
    );

    color:#111;

    font-weight:700;

    padding:14px 24px;

    border-radius:14px;

    cursor:pointer;

    transition:all .25s ease;

    white-space:nowrap;

    flex-shrink:0;

}

#fb-install-button:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(212,175,55,.35);

}

/* ==========================================================
   Close Button
========================================================== */

#fb-install-close{

    position:absolute;

    top:12px;

    right:12px;

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    color:#666;

    font-size:18px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:all .25s ease;

    z-index:2;

}

#fb-install-close:hover{

    background:#e8e8e8;

    color:#111;

    transform:rotate(90deg);

}

/* ==========================================================
   Mobile
========================================================== */

@media(max-width:768px){

    #fb-install{

        left:12px;

        right:12px;

        bottom:12px;

        padding:18px;

        flex-direction:column;

        align-items:stretch;

    }

    #fb-install-content{

        width:100%;

        align-items:flex-start;

    }

    #fb-install-logo{

        width:50px;

        height:50px;

    }

    #fb-install-text h3{

        font-size:17px;

    }

    #fb-install-text p{

        font-size:13px;

    }

    #fb-install-button{

        width:100%;

        margin-top:14px;

    }

}

/* ==========================================================
   Small Phones
========================================================== */

@media(max-width:420px){

    #fb-install{

        left:10px;

        right:10px;

        bottom:10px;

    }

    #fb-install-logo{

        width:46px;

        height:46px;

    }

}