/*==================================================
FLOATING CART
==================================================*/

.floating-cart{
    position:fixed;
    right:20px;
    bottom:20px;
    background:#ffc107;
    color:#000;
    padding:12px 18px;
    border-radius:30px;
    font-weight:700;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    z-index:9999;
}

.floating-cart:hover{
    color:#000;
    transform:translateY(-3px);
}


/*==================================================
FLOATING CALL BUTTON
==================================================*/

.floating-call{
    position:relative;
    left:0;
    bottom:0;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#49B867;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-decoration:none;
    text-shadow:0 1px 2px rgba(0,0,0,.25);
    font-weight:800;
    font-size:11px;
    line-height:1.1;
    box-shadow:0 10px 24px rgba(23,54,124,.35);
    transition:.25s;
}

.floating-call:hover{
    transform:translateY(-3px) scale(1.05);
    color:#fff;
}


/*==================================================
CALL POPUP
==================================================*/

.call-widget{
    position:fixed;
    left:20px;
    bottom:35px;
    z-index:100;
}

.call-popup{
    position:absolute;
    left:70px;
    bottom:10px;
    width:220px;
    padding:14px;
    background:#9d220d;
    color:#fff;
    border-radius:8px;
    text-align:center;
    opacity:0;
    visibility:hidden;
    transform:translateX(-20px);
    transition:.30s;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.call-popup::before{
    content:"";
    position:absolute;
    left:-10px;
    top:50%;
    transform:translateY(-50%);
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:10px solid #9d220d;
}

.call-popup.show{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}


/*==================================================
WHATSAPP WIDGET
==================================================*/

.whatsapp-widget{
    position:fixed;
    left:20px;
    bottom:110px;
    z-index:100;
}

.floating-whatsapp{
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:11px;
    font-weight:800;
    line-height:1.1;
    text-shadow:0 1px 2px rgba(0,0,0,.25);
    box-shadow:0 10px 24px rgba(0,0,0,.25);
    transition:.25s;
}

.floating-whatsapp:hover{
    transform:translateY(-3px) scale(1.05);
}

.whatsapp-popup{
    position:absolute;
    left:70px;
    bottom:10px;
    width:220px;
    padding:14px;
    background:#128C7E;
    color:#fff;
    border-radius:8px;
    text-align:center;
    opacity:0;
    visibility:hidden;
    transform:translateX(-20px);
    transition:.30s;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.whatsapp-popup::before{
    content:"";
    position:absolute;
    left:-10px;
    top:50%;
    transform:translateY(-50%);
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:10px solid #128C7E;
}

.whatsapp-popup.show{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}


/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

    .floating-cart{
        right:12px;
        bottom:15px;
        padding:9px 14px;
        font-size:13px;
    }

    .call-widget{
        left:12px;
        bottom:18px;
    }

    .whatsapp-widget{
        left:12px;
        bottom:82px;
    }

    .floating-call,
    .floating-whatsapp{
        width:52px;
        height:52px;
        font-size:9px;
    }

    .call-popup,
    .whatsapp-popup{
        width:180px;
    }
}