body {
margin: 0;
padding: 0;
min-height: 100vh;
} .fbw-floating-buttons {
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--fbw-main-sub-gap, 15px);
z-index: 9999;
}
.fbw-position-bottom-right {
bottom: 20px;
right: 20px;
align-items: flex-end;
}
.fbw-position-bottom-left {
bottom: 20px;
left: 20px;
align-items: flex-start;
}
.fbw-floating-button {
width: var(--fbw-button-size, 60px);
height: var(--fbw-button-size, 60px);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
background-color: #6200ee;
position: relative;
}
.fbw-floating-button:hover {
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
background-color: var(--fbw-hover-color, #ff0000);
}
.fbw-floating-button svg,
.fbw-floating-button img {
width: var(--fbw-icon-size, 50%);
height: var(--fbw-icon-size, 50%);
}
.fbw-floating-button span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.fbw-sub-buttons {
display: none;
flex-direction: column;
gap: var(--fbw-button-gap, 10px);
}
.fbw-sub-buttons.fbw-active {
display: flex;
} @keyframes fbw-fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fbw-slideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fbw-scaleIn {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@keyframes fbw-bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
@keyframes fbw-flip {
from { transform: rotateY(0deg); }
to { transform: rotateY(180deg); }
}
@keyframes fbw-colorChange {
0% { background-color: #4CAF50; }
50% { background-color: #2196F3; }
100% { background-color: #4CAF50; }
}
.fbw-fade-in { animation: fbw-fadeIn 0.5s ease-out; }
.fbw-slide-in { animation: fbw-slideIn 0.5s ease-out; }
.fbw-scale-in { animation: fbw-scaleIn 0.5s ease-out; }
.fbw-bounce { animation: fbw-bounce 1s infinite; }
.fbw-flip { animation: fbw-flip 0.6s ease-in-out; }
.fbw-color-change { animation: fbw-colorChange 2s infinite; }
.fbw-sub-buttons.fbw-active .fbw-floating-button {
animation-fill-mode: backwards;
}  @media (max-width: 768px) {
.fbw-hide-mobile {
display: none !important;
}
}
@media (max-width: 1024px) {
.fbw-hide-tablet {
display: none !important;
}
}