.whatsapp-widget{

position:fixed;

right:25px;

bottom:25px;

z-index:99999;

font-family:'DM Sans',sans-serif;

}
.chat-card{

width:min(360px, calc(100vw - 30px));

max-width:360px;

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 20px 50px rgba(0,0,0,.18);

display:none;

animation:slideUp .45s ease;

margin-bottom:15px;

}

.chat-header{

background:#0c7c48;

padding:18px;

display:flex;

align-items:center;

gap:12px;

color:#fff;

position:relative;

}

.chat-avatar img{

width:55px;

height:55px;

border-radius:50%;

background:#fff;

padding:4px;

}

.chat-info h4{

margin:0;

font-size:18px;

}

.chat-info span{

font-size:13px;

opacity:.9;

}

#closeChat{

position:absolute;

right:15px;

top:15px;

border:none;

background:none;

font-size:24px;

color:#fff;

cursor:pointer;

}

.chat-body{

padding:25px;

line-height:1.7;

color:#555;

font-size:15px;

}

.wave{

font-size:22px;

margin-bottom:15px;

}

.chat-button{

display:block;

margin:0 20px 20px;

background:#25D366;

color:#fff;

text-decoration:none;

padding:15px;

border-radius:50px;

text-align:center;

font-weight:700;

transition:.3s;

}

.chat-button:hover{

background:#1da851;

transform:translateY(-2px);

}

.floating-btn{

width:58px;

height:58px;

border:none;

border-radius:50%;

background:#25D366;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 10px 25px rgba(37,211,102,.35);

animation:pulse 2s infinite;

transition:.3s;

}

.floating-btn:hover{

transform:scale(1.08);

}

.floating-btn img{

width:28px;

height:28px;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
@media (max-width:768px){

.whatsapp-widget{

right:15px;

bottom:15px;

}

.chat-card{

width:calc(100vw - 30px);

max-width:340px;

border-radius:18px;

margin-bottom:12px;

}

.chat-header{

padding:15px;

}

.chat-avatar img{

width:48px;

height:48px;

}

.chat-info h4{

font-size:16px;

}

.chat-info span{

font-size:12px;

}

.chat-body{

padding:18px;

font-size:14px;

line-height:1.6;

}

.chat-button{

margin:0 15px 15px;

padding:13px;

font-size:15px;

}

.floating-btn{

width:52px;

height:52px;

}

.floating-btn img{

width:24px;

height:24px;

}

}

@media (max-width:400px){

.chat-card{

width:calc(100vw - 20px);

left:10px;

right:10px;

}

.chat-header{

gap:10px;

}

.chat-avatar img{

width:42px;

height:42px;

}

.chat-info h4{

font-size:15px;

}

.chat-info span{

font-size:11px;

}

.chat-body{

padding:16px;

font-size:13px;

}

.chat-button{

padding:12px;

font-size:14px;

}

}