.whatsapp-popup{

position:fixed;

bottom:25px;

right:25px;

width:380px;

max-width:calc(100vw - 30px);

background:#fff;

border-radius:20px;

overflow:hidden;

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

display:none;

z-index:99999;

animation:popupSlide .5s ease;

}

.popup-header{

background:#075E54;

padding:18px;

display:flex;

align-items:center;

gap:15px;

color:#fff;

}

.popup-header img{

width:52px;

height:52px;

border-radius:50%;

background:#fff;

padding:5px;

object-fit:cover;

}

.popup-header h3{

margin:0;

font-size:18px;

}

.popup-message{

background:#ECE5DD;

padding:22px;

line-height:1.8;

font-size:15px;

color:#333;

}

.popup-button{

display:block;

margin:18px;

padding:14px;

background:#25D366;

color:#fff;

text-align:center;

text-decoration:none;

font-weight:700;

border-radius:40px;

transition:.3s;

}

.popup-button:hover{

background:#1ca851;

transform:translateY(-2px);

}

.popup-close{

position:absolute;

right:15px;

top:12px;

background:none;

border:none;

font-size:28px;

color:#fff;

cursor:pointer;

}

.online-status{

display:flex;

align-items:center;

gap:6px;

font-size:13px;

margin-top:4px;

color:#dfffe3;

}

.online-dot{

width:10px;

height:10px;

background:#25D366;

border-radius:50%;

animation:pulse 1.5s infinite;

}

.message-time{

margin-top:18px;

text-align:right;

font-size:12px;

color:#667781;

}

@keyframes popupSlide{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes pulse{

50%{

transform:scale(1.4);

opacity:.7;

}

}

/* Tablet */

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

.whatsapp-popup{

width:360px;

max-width:90vw;

right:20px;

left:auto;

bottom:20px;

border-radius:18px;

}

}
.popup-header{

padding:15px;

}

.popup-header img{

width:46px;

height:46px;

}

.popup-message{

font-size:14px;

padding:18px;

}

.popup-button{

margin:15px;

padding:13px;

}

}



/* Mobile */

@media (max-width:480px){

.whatsapp-popup{

width:320px;

max-width:88vw;

right:15px;

left:auto;

bottom:15px;

border-radius:18px;

}

.popup-header{

padding:14px;

}

.popup-header img{

width:42px;

height:42px;

}

.popup-header h3{

font-size:16px;

}

.popup-message{

padding:16px;

font-size:13px;

line-height:1.7;

}

.popup-button{

margin:15px;

padding:12px;

font-size:14px;

}

.popup-close{

font-size:24px;

top:10px;

right:12px;

}

}


/* Very Small Phones */

@media (max-width:360px){

.whatsapp-popup{

width:290px;

max-width:85vw;

right:10px;

bottom:10px;

}

}



.whatsapp-ready{

background:#25D366 !important;

border:none;

color:#fff;

font-size:18px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:18px;

border-radius:14px;

cursor:pointer;

transition:.3s;

width:100%;

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

animation:pulseWhatsapp 1.6s infinite;

}

.whatsapp-ready:hover{

background:#1EBE5D !important;

transform:translateY(-2px);

}

.whatsapp-ready svg{

width:24px;

height:24px;

fill:#fff;

}

@keyframes pulseWhatsapp{

0%{

transform:scale(1);

}

50%{

transform:scale(1.02);

}

100%{

transform:scale(1);

}

}