/* ==============================
   ShebaHost WhatsApp Widget
   ============================== */

#sh-wa-widget{
    position:fixed;
    left:15px;
    bottom:18px;
    z-index:999999;
    font-family:Arial,Helvetica,sans-serif;
    box-sizing:border-box;
}

#sh-wa-widget *,
#sh-wa-widget *::before,
#sh-wa-widget *::after{
    box-sizing:border-box;
}

#sh-wa-widget #sh-wa-box{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:40px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    animation:shWaSlide .5s ease;
}

@keyframes shWaSlide{
    from{
        opacity:0;
        transform:translateX(-25px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

#sh-wa-widget #sh-wa-button{
    width:56px;
    height:56px;
    min-width:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#25D366;
    border-radius:50%;
    text-decoration:none;
    position:relative;
    margin:8px;
    transition:.25s;
}

#sh-wa-widget #sh-wa-button:hover{
    transform:scale(1.08);
}

#sh-wa-widget #sh-wa-button svg{
    width:30px;
    height:30px;
    fill:#fff;
    position:relative;
    z-index:2;
}

/* Pulse */

#sh-wa-widget #sh-wa-button::before,
#sh-wa-widget #sh-wa-button::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid rgba(37,211,102,.45);
    animation:shWaPulse 2s infinite;
}

#sh-wa-widget #sh-wa-button::after{
    animation-delay:1s;
}

@keyframes shWaPulse{
    0%{
        transform:scale(1);
        opacity:1;
    }
    100%{
        transform:scale(1.65);
        opacity:0;
    }
}

#sh-wa-widget #sh-wa-content{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 14px 10px 0;
    transition:.3s;
    overflow:hidden;
    white-space:nowrap;
}

#sh-wa-widget #sh-wa-text{
    line-height:1.3;
}

#sh-wa-widget #sh-wa-title{
    font-size:14px;
    font-weight:700;
    color:#222;
}

#sh-wa-widget #sh-wa-sub{
    font-size:12px;
    color:#666;
    display:flex;
    align-items:center;
    gap:6px;
}

#sh-wa-widget .sh-wa-online{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#25D366;
    position:relative;
}

#sh-wa-widget .sh-wa-online::after{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    background:rgba(37,211,102,.25);
    animation:shWaDot 1.5s infinite;
}

@keyframes shWaDot{
    from{
        transform:scale(.5);
        opacity:1;
    }
    to{
        transform:scale(2);
        opacity:0;
    }
}

#sh-wa-widget #sh-wa-close{
    cursor:pointer;
    font-size:18px;
    color:#999;
    margin-left:8px;
    transition:.2s;
    user-select:none;
}

#sh-wa-widget #sh-wa-close:hover{
    color:#222;
}

#sh-wa-widget .hideText #sh-wa-content{
    width:0;
    padding:0;
    opacity:0;
}

@media(max-width:768px){

#sh-wa-widget{
    left:12px;
    bottom:12px;
}

#sh-wa-widget #sh-wa-button{
    width:50px;
    height:50px;
    min-width:50px;
}

#sh-wa-widget #sh-wa-button svg{
    width:26px;
    height:26px;
}

#sh-wa-widget #sh-wa-title{
    font-size:13px;
}

#sh-wa-widget #sh-wa-sub{
    font-size:11px;
}

}