/* ==========================================================================
Trends CORE WhatsApp Commerce — site-wide floating button
Deliberately standalone: no dependency on tcwc.css/tcwc.js, so it can be
enqueued on every front-end page without pulling in the modal-checkout
bundle that's only needed on product/cart pages.
========================================================================== */
.tcwc-float-btn{
position:fixed;
bottom:20px;
z-index:99990; /* below the checkout modal overlay (100000), above normal page content */
width:58px;
height:58px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
box-shadow:0 8px 24px rgba(7,94,84,.32);
text-decoration:none;
transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
/* keep clear of iOS home-indicator / notch safe areas */
margin-bottom:env(safe-area-inset-bottom, 0);
}
.tcwc-float-btn:hover{
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(7,94,84,.4);
}
.tcwc-float-btn:active{ transform:translateY(-1px); }
.tcwc-float-right{ right:20px; }
.tcwc-float-left{ left:20px; }
.tcwc-float-icon{
width:30px;
height:30px;
background-color:#FFFFFF;
-webkit-mask:url("data:image/svg+xml;utf8,");
mask:url("data:image/svg+xml;utf8,");
mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat;
mask-size:contain; -webkit-mask-size:contain;
}
/* subtle one-time pulse so it catches the eye without being annoying on every page load */
.tcwc-float-btn{ animation:tcwc-float-pulse 2.4s cubic-bezier(.4,0,.2,1) 1s 1; }
@keyframes tcwc-float-pulse{
0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5), 0 8px 24px rgba(7,94,84,.32); }
70%{ box-shadow:0 0 0 16px rgba(37,211,102,0), 0 8px 24px rgba(7,94,84,.32); }
100%{ box-shadow:0 8px 24px rgba(7,94,84,.32); }
}
@media (max-width:480px){
.tcwc-float-btn{ width:52px; height:52px; bottom:16px; }
.tcwc-float-right{ right:16px; }
.tcwc-float-left{ left:16px; }
.tcwc-float-icon{ width:26px; height:26px; }
}