.rmtfb-wrap {
--rmtfb-label-bg: #0c3a5c;
--rmtfb-bubble-bg: #25d366;
--rmtfb-text-color: #ffffff;
--rmtfb-icon-color: #ffffff;
--rmtfb-pulse-color: rgba(37, 211, 102, 0.2);
--rmtfb-halo-color: rgba(37, 211, 102, 0.16);
--rmtfb-bubble-glow: rgba(37, 211, 102, 0.3);
--rmtfb-label-glow: rgba(12, 58, 92, 0.22);
--rmtfb-call-bg: #ff2b1c;
--rmtfb-call-glow: rgba(255, 43, 28, 0.3);
--rmtfb-bubble-size: 62px;
--rmtfb-icon-size: 34px;
--rmtfb-label-font-size: 12px;
--rmtfb-label-font-weight: 700;
position: fixed;
right: 18px;
bottom: 18px;
z-index: 99999;
}
.rmtfb-stack {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
}
.rmtfb-link {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.rmtfb-call-link {
display: none;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.rmtfb-label {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 33px;
padding: 6px 13px 6px 11px;
border-radius: 4px;
background: var(--rmtfb-label-bg);
color: var(--rmtfb-text-color);
font-family: "Poppins", "Segoe UI", sans-serif;
font-size: var(--rmtfb-label-font-size);
font-weight: var(--rmtfb-label-font-weight);
letter-spacing: 0;
line-height: 1;
text-transform: uppercase;
box-shadow: 0 12px 24px var(--rmtfb-label-glow);
}
.rmtfb-bubble {
position: relative;
display: inline-grid;
place-items: center;
width: var(--rmtfb-bubble-size);
height: var(--rmtfb-bubble-size);
border-radius: 999px;
background: var(--rmtfb-bubble-bg);
box-shadow: 0 16px 28px var(--rmtfb-bubble-glow);
z-index: 1;
overflow: visible;
}
.rmtfb-call-bubble {
position: relative;
display: inline-grid;
place-items: center;
width: var(--rmtfb-bubble-size);
height: var(--rmtfb-bubble-size);
border-radius: 999px;
background: var(--rmtfb-call-bg);
box-shadow: 0 16px 28px var(--rmtfb-call-glow);
z-index: 1;
}
.rmtfb-bubble::after {
content: "";
position: absolute;
inset: -8px;
border-radius: 999px;
background: var(--rmtfb-halo-color);
z-index: -2;
}
.rmtfb-pulse {
position: absolute;
inset: -6px;
border-radius: 999px;
border: 8px solid var(--rmtfb-pulse-color);
background: transparent;
animation: rmtfb-pulse-ring 2.8s cubic-bezier(0.16, 0.7, 0.25, 1) infinite;
pointer-events: none;
filter: blur(0.4px);
}
.rmtfb-pulse-two {
animation-delay: 1.4s;
}
.rmtfb-icon {
position: relative;
z-index: 1;
display: inline-grid;
place-items: center;
width: var(--rmtfb-icon-size);
height: var(--rmtfb-icon-size);
}
.rmtfb-icon svg {
display: block;
width: 100%;
height: 100%;
fill: var(--rmtfb-icon-color);
}
.rmtfb-call-bubble .rmtfb-icon {
width: calc(var(--rmtfb-icon-size) - 1px);
height: calc(var(--rmtfb-icon-size) - 1px);
}
.rmtfb-call-bubble .rmtfb-phone-icon {
transform: translate(0.5px, 0.5px) scale(0.95);
transform-origin: center;
}
.rmtfb-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 6px;
}
.rmtfb-link:hover .rmtfb-label,
.rmtfb-link:hover .rmtfb-bubble,
.rmtfb-call-link:hover .rmtfb-call-bubble,
.rmtfb-link:focus-visible .rmtfb-label,
.rmtfb-link:focus-visible .rmtfb-bubble,
.rmtfb-call-link:focus-visible .rmtfb-call-bubble {
transform: translateY(-1px);
}
.rmtfb-link:focus-visible,
.rmtfb-call-link:focus-visible {
outline: none;
}
.rmtfb-link:focus-visible .rmtfb-label,
.rmtfb-link:focus-visible .rmtfb-bubble {
box-shadow:
0 0 0 3px rgba(12, 58, 92, 0.2),
0 16px 28px var(--rmtfb-bubble-glow);
}
.rmtfb-call-link:focus-visible .rmtfb-call-bubble {
box-shadow:
0 0 0 3px rgba(12, 58, 92, 0.2),
0 16px 28px var(--rmtfb-call-glow);
}
@keyframes rmtfb-pulse-ring {
0% {
transform: scale(0.78);
opacity: 0;
}
18% {
opacity: 0.78;
}
46% {
opacity: 0.34;
}
100% {
transform: scale(1.65);
opacity: 0;
}
}
@media (max-width: 767px) {
.rmtfb-wrap {
right: 18px;
bottom: 28px;
}
.rmtfb-stack {
gap: 14px;
}
.rmtfb-link {
gap: 0;
}
.rmtfb-call-link {
display: inline-flex;
}
.rmtfb-label {
display: none;
}
.rmtfb-bubble,
.rmtfb-call-bubble {
width: min(max(var(--rmtfb-bubble-size), 60px), 64px);
height: min(max(var(--rmtfb-bubble-size), 60px), 64px);
}
.rmtfb-icon {
width: min(max(var(--rmtfb-icon-size), 34px), 38px);
height: min(max(var(--rmtfb-icon-size), 34px), 38px);
}
.rmtfb-pulse,
.rmtfb-bubble::after {
display: none;
}
}
@media (max-width: 380px) {
.rmtfb-bubble,
.rmtfb-call-bubble {
width: min(max(var(--rmtfb-bubble-size), 58px), 62px);
height: min(max(var(--rmtfb-bubble-size), 58px), 62px);
}
}
@media (prefers-reduced-motion: reduce) {
.rmtfb-pulse {
animation: none;
}
.rmtfb-link:hover .rmtfb-label,
.rmtfb-link:hover .rmtfb-bubble,
.rmtfb-call-link:hover .rmtfb-call-bubble,
.rmtfb-link:focus-visible .rmtfb-label,
.rmtfb-link:focus-visible .rmtfb-bubble,
.rmtfb-call-link:focus-visible .rmtfb-call-bubble {
transform: none;
}
}