/* Copyright (c) ICT Services Bohemia, s.r.o. Všechna práva vyhrazena. */

body {
    padding-bottom: 110px;
}

.call-banner {
    opacity: 0;
    transition: opacity .8s ease;
    filter: blur(8px);
    
    position: fixed;
    left: 26px;
    bottom: 26px;
    z-index: 99999;
    
    
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
    

    /* Plynulé přizpůsobení velikosti */
    width: clamp(180px, 22vw, 320px);

    // animation: callBannerPulse 1.5s ease-in-out infinite;
    animation:
        callBannerShow 1.9s cubic-bezier(.22,1,.36,1) forwards,
        callBannerPulse 1.5s ease-in-out infinite .9s;
}

.call-banner.show {
    opacity: 1;
}

.call-banner img {
    display: block;
    width: 100%;
    height: auto;

    // border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.call-banner img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(0,0,0,.45);
}

.call-banner img:active {
    transform: scale(.98);
}

@keyframes callBannerShow {
    from {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(35px) scale(.92);
    }

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

/* Tablet */
@media (max-width: 992px) {
    .call-banner {
        opacity: 0;
    filter: blur(8px);

    animation:
        callBannerShow .9s cubic-bezier(.22,1,.36,1) forwards,
        callBannerPulse 1.5s ease-in-out infinite .9s;
        
        
        width: clamp(170px, 28vw, 280px);
        left: 12px;
        bottom: 12px;
    }
}

/* Mobil */
@media (max-width: 768px) {
    body {
        padding-bottom: 90px;
    }

    .call-banner {
    
        opacity: 0;
    filter: blur(8px);

    animation:
        callBannerShow .9s cubic-bezier(.22,1,.36,1) forwards,
        callBannerPulse 1.5s ease-in-out infinite .9s;
        
        
        width: clamp(150px, 42vw, 240px);
        left: 10px;
        bottom: 10px;
    }

    .call-banner img {
        // border-radius: 10px;
    }
}

/* Malé telefony */
@media (max-width: 480px) {
    .call-banner {
    
        opacity: 0;
    filter: blur(8px);

    animation:
        callBannerShow .9s cubic-bezier(.22,1,.36,1) forwards,
        callBannerPulse 1.5s ease-in-out infinite .9s;
        
        
        width: clamp(140px, 48vw, 200px);
        left: 8px;
        bottom: 8px;
    }
}