/* Custom Floating Buttons — Frontend CSS
 * Pure CSS custom-property architecture. No !important except z-index.
 * Prefixed: cfb-*
 */

/* ── Container ─────────────────────────────────────────────────────────── */
.cfb-container {
    position: fixed !important;
    bottom: var(--cfb-margin-bottom, 20px);
    z-index: 2147483647 !important;
    display: flex;
    pointer-events: none;
}
.cfb-pos-right { right: var(--cfb-margin-side, 20px); left: auto; }
.cfb-pos-left  { left: var(--cfb-margin-side, 20px);  right: auto; }
.cfb-align-vertical   { flex-direction: column; }
.cfb-align-horizontal { flex-direction: row; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.cfb-container a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--cfb-size, 3rem);
    height: var(--cfb-size, 3rem);
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: auto;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
    will-change: transform;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4);
    animation: cfb-shake .6s ease-in-out backwards;
}
.cfb-align-vertical   a + a { margin-top: var(--cfb-spacing, 10px); }
.cfb-align-horizontal a + a { margin-left: var(--cfb-spacing, 10px); }
.cfb-container a:hover { transform: scale(1.1); }

.cfb-container img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border-radius: 50%;
    position: relative; z-index: 2;
}

@keyframes cfb-shake {
    0%,100% { transform: translateX(0); }
    25%,75%  { transform: translateX(-2px); }
    50%      { transform: translateX(2px); }
}

/* ── Hide on desktop ────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .cfb-hide-desktop { display: none !important; }
}

/* ── Hide on mobile ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .cfb-hide-mobile { display: none !important; }
}

/* ── Animation speed ────────────────────────────────────────────────────── */
.cfb-speed-slow   { --cfb-dur: 3s; --cfb-orbit-dur: 6s; }
.cfb-speed-medium { --cfb-dur: 2s; --cfb-orbit-dur: 4s; }
.cfb-speed-fast   { --cfb-dur: 1s; --cfb-orbit-dur: 2s; }

/* ── Pulse (1 color) ────────────────────────────────────────────────────── */
@keyframes cfb-pulse {
    0%   { box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4), 0 0 0 0 var(--cfb-c); }
    70%  { box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4), 0 0 0 12px transparent; }
    100% { box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4), 0 0 0 0 transparent; }
}
.cfb-btn-call.cfb-glow-pulse      { --cfb-c: var(--cfb-call-orbit-color);      animation: cfb-pulse var(--cfb-dur,2s) infinite ease-out .6s; }
.cfb-btn-zalo.cfb-glow-pulse      { --cfb-c: var(--cfb-zalo-orbit-color);      animation: cfb-pulse var(--cfb-dur,2s) infinite ease-out .6s; }
.cfb-btn-messenger.cfb-glow-pulse { --cfb-c: var(--cfb-messenger-orbit-color); animation: cfb-pulse var(--cfb-dur,2s) infinite ease-out .6s; }
.cfb-btn-whatsapp.cfb-glow-pulse  { --cfb-c: var(--cfb-whatsapp-orbit-color);  animation: cfb-pulse var(--cfb-dur,2s) infinite ease-out .6s; }
.cfb-btn-custom.cfb-glow-pulse    { --cfb-c: var(--cfb-custom-orbit-color);    animation: cfb-pulse var(--cfb-dur,2s) infinite ease-out .6s; }

/* ── Orbit (1 color) ────────────────────────────────────────────────────── */
@keyframes cfb-orbit-spin { to { transform: rotate(360deg); } }

.cfb-container a.cfb-glowing.cfb-glow-orbit::before,
.cfb-container a.cfb-glowing.cfb-glow-rainbow-orbit::before {
    content: '';
    position: absolute; z-index: -1;
    box-sizing: border-box; border-radius: 50%;
    will-change: transform;
    animation: cfb-orbit-spin var(--cfb-orbit-dur,4s) linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0) content-box;
    -webkit-mask-composite: destination-out;
    mask-composite: subtract;
}

.cfb-btn-call.cfb-glow-orbit::before      { inset: calc(-1*var(--cfb-call-orbit-width));      padding: var(--cfb-call-orbit-width);      background: conic-gradient(from 90deg, transparent 0%, var(--cfb-call-orbit-color)      30%, transparent 50%); }
.cfb-btn-zalo.cfb-glow-orbit::before      { inset: calc(-1*var(--cfb-zalo-orbit-width));      padding: var(--cfb-zalo-orbit-width);      background: conic-gradient(from 90deg, transparent 0%, var(--cfb-zalo-orbit-color)      30%, transparent 50%); }
.cfb-btn-messenger.cfb-glow-orbit::before { inset: calc(-1*var(--cfb-messenger-orbit-width)); padding: var(--cfb-messenger-orbit-width); background: conic-gradient(from 90deg, transparent 0%, var(--cfb-messenger-orbit-color) 30%, transparent 50%); }
.cfb-btn-whatsapp.cfb-glow-orbit::before  { inset: calc(-1*var(--cfb-whatsapp-orbit-width));  padding: var(--cfb-whatsapp-orbit-width);  background: conic-gradient(from 90deg, transparent 0%, var(--cfb-whatsapp-orbit-color)  30%, transparent 50%); }
.cfb-btn-custom.cfb-glow-orbit::before    { inset: calc(-1*var(--cfb-custom-orbit-width));    padding: var(--cfb-custom-orbit-width);    background: conic-gradient(from 90deg, transparent 0%, var(--cfb-custom-orbit-color)    30%, transparent 50%); }

/* ── Rainbow Pulse (3 colors) ───────────────────────────────────────────── */
@keyframes cfb-rainbow-pulse {
    0%   { box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4), 0 0 0 0   var(--cfb-r1); }
    33%  { box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4), 0 0 0 6px  var(--cfb-r2); }
    66%  { box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4), 0 0 0 12px var(--cfb-r3); }
    100% { box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 2px 4px rgba(255,255,255,.4), 0 0 0 18px transparent; }
}
.cfb-btn-call.cfb-glow-rainbow-pulse      { --cfb-r1:var(--cfb-call-rb1);      --cfb-r2:var(--cfb-call-rb2);      --cfb-r3:var(--cfb-call-rb3);      animation: cfb-rainbow-pulse var(--cfb-dur,2s) infinite cubic-bezier(.1,.7,.3,1) .6s; }
.cfb-btn-zalo.cfb-glow-rainbow-pulse      { --cfb-r1:var(--cfb-zalo-rb1);      --cfb-r2:var(--cfb-zalo-rb2);      --cfb-r3:var(--cfb-zalo-rb3);      animation: cfb-rainbow-pulse var(--cfb-dur,2s) infinite cubic-bezier(.1,.7,.3,1) .6s; }
.cfb-btn-messenger.cfb-glow-rainbow-pulse { --cfb-r1:var(--cfb-messenger-rb1); --cfb-r2:var(--cfb-messenger-rb2); --cfb-r3:var(--cfb-messenger-rb3); animation: cfb-rainbow-pulse var(--cfb-dur,2s) infinite cubic-bezier(.1,.7,.3,1) .6s; }
.cfb-btn-whatsapp.cfb-glow-rainbow-pulse  { --cfb-r1:var(--cfb-whatsapp-rb1);  --cfb-r2:var(--cfb-whatsapp-rb2);  --cfb-r3:var(--cfb-whatsapp-rb3);  animation: cfb-rainbow-pulse var(--cfb-dur,2s) infinite cubic-bezier(.1,.7,.3,1) .6s; }
.cfb-btn-custom.cfb-glow-rainbow-pulse    { --cfb-r1:var(--cfb-custom-rb1);    --cfb-r2:var(--cfb-custom-rb2);    --cfb-r3:var(--cfb-custom-rb3);    animation: cfb-rainbow-pulse var(--cfb-dur,2s) infinite cubic-bezier(.1,.7,.3,1) .6s; }

/* ── Rainbow Orbit (3 colors) ───────────────────────────────────────────── */
.cfb-btn-call.cfb-glow-rainbow-orbit::before      { inset: calc(-1*var(--cfb-call-orbit-width));      padding: var(--cfb-call-orbit-width);      background: conic-gradient(from 0deg, var(--cfb-call-rb1)      0%, var(--cfb-call-rb2)      33%, var(--cfb-call-rb3)      66%, var(--cfb-call-rb1)      100%); }
.cfb-btn-zalo.cfb-glow-rainbow-orbit::before      { inset: calc(-1*var(--cfb-zalo-orbit-width));      padding: var(--cfb-zalo-orbit-width);      background: conic-gradient(from 0deg, var(--cfb-zalo-rb1)      0%, var(--cfb-zalo-rb2)      33%, var(--cfb-zalo-rb3)      66%, var(--cfb-zalo-rb1)      100%); }
.cfb-btn-messenger.cfb-glow-rainbow-orbit::before { inset: calc(-1*var(--cfb-messenger-orbit-width)); padding: var(--cfb-messenger-orbit-width); background: conic-gradient(from 0deg, var(--cfb-messenger-rb1) 0%, var(--cfb-messenger-rb2) 33%, var(--cfb-messenger-rb3) 66%, var(--cfb-messenger-rb1) 100%); }
.cfb-btn-whatsapp.cfb-glow-rainbow-orbit::before  { inset: calc(-1*var(--cfb-whatsapp-orbit-width));  padding: var(--cfb-whatsapp-orbit-width);  background: conic-gradient(from 0deg, var(--cfb-whatsapp-rb1)  0%, var(--cfb-whatsapp-rb2)  33%, var(--cfb-whatsapp-rb3)  66%, var(--cfb-whatsapp-rb1)  100%); }
.cfb-btn-custom.cfb-glow-rainbow-orbit::before    { inset: calc(-1*var(--cfb-custom-orbit-width));    padding: var(--cfb-custom-orbit-width);    background: conic-gradient(from 0deg, var(--cfb-custom-rb1)    0%, var(--cfb-custom-rb2)    33%, var(--cfb-custom-rb3)    66%, var(--cfb-custom-rb1)    100%); }

/* ── Tooltip / Label ────────────────────────────────────────────────────── */
.cfb-tooltip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.78);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 3;
    line-height: 1.3;
}
/* Arrow */
.cfb-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
}
.cfb-tip-left {
    right: calc(100% + 10px);
}
.cfb-tip-left::after {
    left: 100%;
    border-left-color: rgba(0,0,0,.78);
}
.cfb-tip-right {
    left: calc(100% + 10px);
}
.cfb-tip-right::after {
    right: 100%;
    border-right-color: rgba(0,0,0,.78);
}
.cfb-container a:hover .cfb-tooltip {
    opacity: 1;
}