/* =========================
   VARNIX MINI FLOATING AD
========================= */

#adPopup{
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: 220px;
    background: rgba(17,24,39,.96);
    border: 1px solid rgba(255,46,77,.25);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0,0,0,.3), 0 0 15px rgba(255,46,77,.12);
    overflow: hidden;
    z-index: 999999;
    transition: .3s;
}

#adPopup::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, rgba(255,46,77,.08), transparent 40%);
    pointer-events:none;
}

.close-ad{
    position:absolute;
    top:6px;
    right:6px;
    width:20px;
    height:20px;
    border:none;
    border-radius:50%;
    background:rgba(255,46,77,.15);
    color:#ff2e4d;
    font-size:10px;
    font-weight:bold;
    cursor:pointer;
    z-index:1000000;
    transition:.25s;
}

.close-ad:hover{
    background:#ff2e4d;
    color:#fff;
    transform:scale(1.1);
}

.show-ad{
    animation:showAd .35s cubic-bezier(.175,.885,.32,1.275);
}

.hide-ad{
    animation:hideAd .25s ease forwards;
}

@keyframes showAd{
    0%{ opacity:0; transform: translateY(30px) scale(.9); }
    100%{ opacity:1; transform: translateY(0) scale(1); }
}

@keyframes hideAd{
    0%{ opacity:1; transform: translateY(0) scale(1); }
    100%{ opacity:0; transform: translateY(20px) scale(.9); }
}

@media(max-width:480px){
    #adPopup{
        width:180px;
        left:8px;
        bottom:8px;
    }
}