/* ==========================================================================
   WhatsApp Widget — Header + Footer
   Scoped, additive stylesheet. Does not alter any existing global styles.
   ========================================================================== */

/* ---- Header icon ---- */
.nav-actions{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}
.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.32);
  background:rgba(255,255,255,0.06);
  color:#fff;
  flex-shrink:0;
  cursor:pointer;
  transition:background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-whatsapp svg{
  width:20px;
  height:20px;
  fill:currentColor;
  transition:transform 0.3s ease;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus-visible{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
  transform:scale(1.08);
  box-shadow:0 8px 20px rgba(37,211,102,0.4);
}
.btn-whatsapp:hover svg{ transform:scale(1.05); }

@media (max-width:1024px){
  .nav-actions{ margin-left:auto; gap:12px; }
}

/* ---- Footer icon ---- */
.footer-social a.footer-whatsapp{
  transition:all 0.3s ease;
}
.footer-social a.footer-whatsapp:hover,
.footer-social a.footer-whatsapp:focus-visible{
  background:#25D366;
  border-color:#25D366;
  transform:scale(1.08);
  box-shadow:0 8px 20px rgba(37,211,102,0.35);
}
.footer-social a.footer-whatsapp:hover svg{ transform:scale(1.05); }
.footer-social a.footer-whatsapp svg{ transition:transform 0.3s ease; }

/* ---- Mobile navigation menu icon ---- */
.mobile-nav-whatsapp{
  display:flex !important;
  align-items:center;
  gap:10px;
  color:#25D366 !important;
}
.mobile-nav-whatsapp svg{
  width:22px;
  height:22px;
  fill:#25D366;
  flex-shrink:0;
}
.mobile-nav-whatsapp:hover{ color:#1ebc5a !important; }
.mobile-nav-whatsapp:hover svg{ fill:#1ebc5a; }

/* ---- Global Floating WhatsApp Button ---- */
.whatsapp-float{
  position:fixed;
  right:28px;
  bottom:28px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.22), 0 2px 8px rgba(37,211,102,0.35);
  z-index:10000;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
}
.whatsapp-float svg{
  width:32px;
  height:32px;
  fill:#fff;
  transition:transform 0.3s ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible{
  transform:scale(1.08);
  box-shadow:0 10px 30px rgba(0,0,0,0.26), 0 0 22px rgba(37,211,102,0.65);
}
.whatsapp-float:hover svg{ transform:scale(1.06); }

@media (max-width:768px){
  .whatsapp-float{
    width:52px;
    height:52px;
    right:20px;
    bottom:20px;
  }
  .whatsapp-float svg{ width:28px; height:28px; }
}

@media (max-width:480px){
  .whatsapp-float{
    right:16px;
    bottom:16px;
  }
}