/* =========================
   WHATSAPP WIDGET
========================= */

.whatsapp-widget{

    position:fixed;
    right:25px;
    bottom:25px;

    width:320px;

    z-index:9999;

    opacity:0;
    transform:translateY(35px);

    transition:.45s;

}

.whatsapp-widget.show{

    opacity:1;
    transform:translateY(0);

    animation:floatUp 6s ease-in-out infinite;

}


/* =========================
   CARD
========================= */

.wa-card{

    background:rgba(255,255,255,0.95);

    border-radius:18px 18px 0 0;

    padding:22px;

    margin-bottom:-12px;

    box-shadow:0 15px 35px rgba(0,0,0,.16);

    overflow:hidden;

    max-height:420px;

    transition:
        max-height .45s ease,
        padding .45s ease,
        opacity .35s ease,
        transform .35s ease;

}


/* Hidden State */

.wa-card.hide{

    max-height:0;

    padding-top:0;
    padding-bottom:0;

    opacity:0;

    transform:translateY(70px);

}


/* =========================
   CLOSE BUTTON
========================= */

.wa-close{

    position:absolute;

    right:15px;
    top:12px;

    width:30px;
    height:30px;

    border:none;

    border-radius:50%;

    background:#eee;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

.wa-close:hover{

    background:#ff4444;
    color:#fff;

}


/* =========================
   TEXT
========================= */

.wa-card h4{

    margin-bottom:15px;

    color:#222;

    font-size:20px;

}

.wa-card p{

    line-height:1.7;

    color:#555;

    margin-bottom:20px;

}


/* =========================
   SUPPORT AGENT
========================= */

.wa-agent{

    display:flex;

    align-items:center;

    gap:12px;

}

.wa-agent img{

    width:58px;
    height:58px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #25D366;

}

.wa-agent-text{

    display:flex;
    flex-direction:column;

}

.wa-agent-text strong{

    font-size:15px;

}

.wa-agent-text span{

    font-size:13px;

    color:#777;

}


/* =========================
   FLOATING BUTTON
========================= */

.wa-chat-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    padding:14px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    border-radius:16px;

    font-weight:700;

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

    transition:.3s;

}

.wa-chat-btn:hover{

    background:#1fb458;

}

.wa-chat-btn i{

    font-size:22px;

}


/* =========================
   FLOAT
========================= */

@keyframes floatUp{

    0%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
    100%{transform:translateY(0);}

}


/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .whatsapp-widget{

        width:270px;

        right:10px;

        bottom:15px;

    }

    .wa-card{

        padding:16px;

    }

    .wa-card h4{

        font-size:17px;

    }

    .wa-card p{

        font-size:13px;

        line-height:1.5;

    }

    .wa-chat-btn{

        padding:12px;

        font-size:14px;

    }

}

.wa-card.hide .wa-close{

    opacity:0;
    visibility:hidden;
    pointer-events:none;

}