.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    }

.whatsapp-button img {
  width: 75px;
  height: 75px;
} 

:root{
  --wa-green:#25D366;
  --wa-green-dark:#1fb457;
  --wa-text:#2b2b2b;
  --wa-muted:#6b7280;
  --wa-border:#e5e7eb;
  --wa-bg:#ffffff;
}

.wa-float-container{
  position:fixed;
  bottom:88px;          /* ajuste fino pra ficar acima do botão */
  right:22px;
  z-index:9999;
  width:320px;
  max-width:92vw;
  display:none;
  background:var(--wa-bg);
  border:1px solid var(--wa-border);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  overflow:hidden;                    /* para o focus-ring não vazar */
  animation:wa-pop .18s ease-out;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Triângulo apontando para o botão do WhatsApp */
.wa-float-container::after{
  content:"";
  position:absolute;
  right:18px;
  bottom:-9px;
  width:16px;height:16px;
  transform:rotate(45deg);
  background:var(--wa-bg);
  border-right:1px solid var(--wa-border);
  border-bottom:1px solid var(--wa-border);
  box-shadow: 4px 4px 10px rgba(0,0,0,.06);
}

/* Cabeçalho */
.wa-float-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  background:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-bottom:1px solid var(--wa-border);
}
.wa-float-header h3{
  margin:0;font-size:15px;font-weight:700;color:var(--wa-text);
  letter-spacing:.2px;
}
.wa-float-header button{
  border:none;background:transparent;cursor:pointer;
  font-size:18px;line-height:1;color:#9CA3AF;
  border-radius:8px;padding:2px 6px;
}
.wa-float-header button:hover{ background:#f3f4f6; color:#6b7280; }

/* Form */
.wa-float-container form{ padding:14px; }
.wa-float-container input{
  width:100%;
  height:42px;
  padding:10px 12px;
  margin-bottom:10px;
  border:1px solid var(--wa-border);
  border-radius:10px;
  background:#f9fafb;
  color:var(--wa-text);
  font-size:14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wa-float-container input::placeholder{ color:#9ca3af; }
.wa-float-container input:focus{
  outline:none;
  background:#fff;
  border-color:var(--wa-green);
  box-shadow:0 0 0 3px rgba(37,211,102,.16);
}

/* Botão */
.wa-float-container button[type="submit"]{
  width:100%;
  height:44px;
  border:0; border-radius:10px;
  background:linear-gradient(180deg, var(--wa-green) 0%, var(--wa-green-dark) 100%);
  color:#fff; font-weight:800; font-size:14px; letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(37,211,102,.32);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.wa-float-container button[type="submit"]:hover{
  filter:brightness(.98);
  box-shadow:0 8px 18px rgba(37,211,102,.34);
}
.wa-float-container button[type="submit"]:active{
  transform:translateY(1px);
}

/* Responsivo: aproxima um pouco do canto em telas pequenas */
@media (max-width: 420px){
  .wa-float-container{ right:14px; bottom:78px; width:92vw; }
  .wa-float-container::after{ right:16px; }
}

@keyframes wa-pop{
  from{ opacity:0; transform:translateY(10px) scale(.98); }
  to  { opacity:1; transform:translateY(0)    scale(1); }
}