/* Floating WhatsApp button styles */
#whatsapp-float{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:99999;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  padding:0;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  overflow:visible;
}
#whatsapp-float .wa-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;position:relative}
#whatsapp-float .wa-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
#whatsapp-float .wa-icon svg{display:block}
#whatsapp-float .wa-icon i{font-size:20px;line-height:1;color:#fff;display:inline-block}
#whatsapp-float .wa-text{display:none}
#whatsapp-float:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.22)}

/* ripple element created by JS */
.wa-ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,0.35);
  transform:scale(0);
  animation:wa-ripple 600ms ease-out forwards;
  pointer-events:none;
}

@keyframes wa-ripple{
  to{transform:scale(4);opacity:0}
}

/* subtle pulse behind icon */
#whatsapp-float .wa-icon-wrapper::after{
  content:"";
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,0.2);
  animation:wa-pulse 2.4s infinite;
}
@keyframes wa-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.18)}
  70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

@media (max-width:768px){
  #whatsapp-float{right:14px;bottom:80px;padding:10px 12px;font-size:13px}
}

@media (max-width:420px){
  #whatsapp-float{right:12px;bottom:78px;width:48px;height:48px}
}

/* Floating WeChat — stacked above WhatsApp (same size / interaction feel) */
#wechat-float{
  position:fixed;
  right:18px;
  bottom:158px;
  z-index:99999;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  background:#07C160;
  color:#fff;
  border-radius:50%;
  padding:0;
  border:none;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  overflow:visible;
}
#wechat-float .wc-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;position:relative}
#wechat-float .wc-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
#wechat-float .wc-icon i{font-size:22px;line-height:1;color:#fff;display:inline-block}
#wechat-float:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.22)}

#wechat-float .wc-icon-wrapper::after{
  content:"";
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(7,193,96,0.22);
  animation:wc-pulse 2.4s infinite;
}
@keyframes wc-pulse{
  0%{box-shadow:0 0 0 0 rgba(7,193,96,0.18)}
  70%{box-shadow:0 0 0 8px rgba(7,193,96,0)}
  100%{box-shadow:0 0 0 0 rgba(7,193,96,0)}
}

@media (max-width:768px){
  #wechat-float{right:14px;bottom:150px}
}

@media (max-width:420px){
  #wechat-float{right:12px;bottom:138px;width:48px;height:48px}
  #wechat-float .wc-icon i{font-size:20px}
}

/* WeChat QR lightbox (opened from #wechat-float when no external URL) */
.wechat-float-backdrop{
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:wechat-bd-fade .2s ease;
}
@keyframes wechat-bd-fade{from{opacity:0}to{opacity:1}}

.wechat-float-dialog{
  position:relative;
  background:#fff;
  border-radius:16px;
  max-width:340px;
  width:100%;
  padding:24px 22px 20px;
  box-shadow:0 16px 48px rgba(0,0,0,0.2);
  text-align:center;
  font-family:inherit;
}
.wechat-float-dialog h3{margin:0 0 10px;font-size:1.15rem;color:#111}
.wechat-float-dialog p{margin:0 0 14px;font-size:14px;line-height:1.5;color:#444}
.wechat-float-dialog .wechat-float-qr{
  max-width:220px;
  width:100%;
  height:auto;
  border-radius:8px;
  margin:0 auto 12px;
  display:block;
  border:1px solid rgba(0,0,0,0.06);
}
.wechat-float-dialog .wechat-float-id{
  font-size:14px;
  color:#07C160;
  font-weight:600;
  word-break:break-all;
  margin-bottom:8px;
}
.wechat-float-dialog .wechat-float-close{
  margin-top:8px;
  padding:10px 20px;
  border-radius:10px;
  border:none;
  background:#07C160;
  color:#fff;
  font-size:14px;
  cursor:pointer;
  font-family:inherit;
}
.wechat-float-dialog .wechat-float-close:focus{outline:2px solid #059652;outline-offset:2px}