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

.call-float{
  position:fixed;
  bottom:96px;
  right:24px;
  width:58px;
  height:58px;
  border-radius:50%;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#F87171;
  box-shadow:0 10px 25px rgba(37,211,102,0.45);

  cursor:pointer;
  transition:transform .25s ease;
}

/* HOVER */

.call-float:hover{
  transform:scale(1.08);
}

/* PHONE ICON */

.call-float svg{
  width:28px;
  height:28px;
  fill:#ffffff;
}

/* MOBILE */

@media(max-width:480px){

.call-float{
  width:54px;
  height:54px;
  right:20px;
  bottom:90px;
}

.call-float svg{
  width:26px;
  height:26px;
}

}

















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

.wa-float{
position:fixed;
bottom:24px;
right:24px;
width:58px;
height:58px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
z-index:9999;
cursor:pointer;
transition:.3s;
}

.wa-float:hover{
transform:scale(1.08);
}

.wa-float img{
width:30px;
}

/* ===== CHAT BOX ===== */

.wa-chat{
position:fixed;
bottom:150px;
right:24px;
width:320px;
max-width:92vw;
background:#ffffff;
border-radius:16px;
box-shadow:0 25px 70px rgba(0,0,0,0.35);
overflow:hidden;
z-index:9999;
animation:fadeUp .35s ease;
}

/* HEADER */

.wa-header{
background:#075e54;
color:#ffffff;
padding:14px;
display:flex;
align-items:center;
gap:12px;
}

.wa-avatar{
width:42px;
height:42px;
border-radius:50%;
object-fit:contain;
background:#ffffff;
padding:4px;
}

.wa-name{
font-weight:800;
font-size:15px;
}

.wa-status{
font-size:12px;
color:#c8f7dc;
}

.wa-close{
margin-left:auto;
cursor:pointer;
font-size:18px;
opacity:.9;
}

/* BODY */

.wa-body{
background:#ece5dd;
padding:14px;
}

.wa-bubble{
background:#000000;
padding:10px 12px;
border-radius:12px;
font-size:14px;
width:fit-content;
max-width:85%;
line-height:1.5;
color:#fff;
}

/* INPUT */

.wa-input{
display:flex;
align-items:center;
padding:10px;
gap:10px;
border-top:1px solid #eee;
}

.wa-input input{
flex:1;
border:none;
outline:none;
font-size:14px;
}

.wa-send{
width:38px;
height:38px;
border-radius:50%;
background:#25D366;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
cursor:pointer;
transition:.25s;
}

.wa-send:hover{
transform:scale(1.1);
}

/* ANIMATION */

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(12px)
}
to{
opacity:1;
transform:none
}
}

/* MOBILE */

@media(max-width:480px){

.wa-chat{
right:16px;
bottom:150px;
}

.wa-float{
width:54px;
height:54px;
bottom:20px;
right:20px;
}

}