.floating-whatsapp-cta {
position: fixed;
right: 24px;
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
z-index: 99999;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px 10px 10px;
min-height: 44px;
background: linear-gradient(160deg, #1b9d4f 0%, #25D366 100%);
color: #ffffff;
text-decoration: none;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
font-family: "Figtree", sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
0 20px 50px -12px rgba(0, 0, 0, 0.5),
0 8px 20px -6px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
-webkit-tap-highlight-color: transparent;
transition:
transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 220ms ease,
border-color 220ms ease;
} .floating-whatsapp-cta::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
105deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.04) 40%,
rgba(255, 255, 255, 0.12) 50%,
rgba(255, 255, 255, 0.04) 60%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
transition: left 600ms ease;
}
.floating-whatsapp-cta:hover::before {
left: 125%;
} .floating-whatsapp-cta > * {
position: relative;
z-index: 1;
} .floating-whatsapp-cta:hover {
transform: translateY(-3px);
border-color: rgba(37, 211, 102, 0.3);
box-shadow:
0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
0 24px 56px -12px rgba(0, 0, 0, 0.55),
0 10px 24px -6px rgba(0, 0, 0, 0.4),
0 0 24px -4px rgba(37, 211, 102, 0.2);
} .floating-whatsapp-cta:active {
transform: translateY(-1px);
transition-duration: 80ms;
}
.floating-whatsapp-cta:focus-visible {
outline: 2px solid rgba(37, 211, 102, 0.5);
outline-offset: 3px;
} .floating-whatsapp-cta__icon {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 9999px;
background: #25D366;
box-shadow:
0 0 0 1px rgba(37, 211, 102, 0.25),
0 0 12px rgba(37, 211, 102, 0.3);
}
.floating-whatsapp-cta__icon svg {
width: 16px;
height: 16px;
display: block;
}
.floating-whatsapp-cta__icon svg path {
fill: #ffffff !important;
} .floating-whatsapp-cta__label {
display: inline-block;
white-space: nowrap;
} @media (prefers-reduced-motion: reduce) {
.floating-whatsapp-cta,
.floating-whatsapp-cta::before {
transition: none;
}
.floating-whatsapp-cta:hover {
transform: none;
}
.floating-whatsapp-cta:hover::before {
left: -75%;
}
} @media (max-width: 768px) {
.floating-whatsapp-cta {
right: 16px;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
padding: 10px 16px 10px 10px;
min-height: 44px;
font-size: 13px;
}
}