.arcu-whatsapp-container {
position: fixed;
bottom: 20px;
z-index: 99999;
}
.arcu-whatsapp-container.arcu-right {
right: 20px;
}
.arcu-whatsapp-container.arcu-left {
left: 20px;
}
.arcu-whatsapp-link {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background-color: #25d366;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-decoration: none;
color: #fff;
}
.arcu-whatsapp-link:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
color: #fff;
}
.arcu-whatsapp-link:focus {
outline: 2px solid #fff;
outline-offset: 2px;
}
.arcu-whatsapp-icon {
width: 32px;
height: 32px;
fill: #fff;
color: #fff;
} .arcu-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
margin-bottom: 10px;
pointer-events: none;
}
.arcu-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333;
}
.arcu-whatsapp-container:hover .arcu-tooltip {
opacity: 1;
visibility: visible;
} .arcu-right .arcu-tooltip {
left: auto;
right: 0;
transform: none;
}
.arcu-right .arcu-tooltip::after {
left: auto;
right: 20px;
transform: none;
} .arcu-left .arcu-tooltip {
left: 0;
transform: none;
}
.arcu-left .arcu-tooltip::after {
left: 20px;
transform: none;
} @keyframes arcu-pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
.arcu-whatsapp-link {
animation: arcu-pulse 2s infinite;
}
.arcu-whatsapp-link:hover {
animation: none;
} @media (max-width: 768px) {
.arcu-whatsapp-container {
bottom: 15px;
}
.arcu-whatsapp-container.arcu-right {
right: 15px;
}
.arcu-whatsapp-container.arcu-left {
left: 15px;
}
.arcu-whatsapp-link {
width: 55px;
height: 55px;
}
.arcu-whatsapp-icon {
width: 28px;
height: 28px;
}
}