/* Floating WhatsApp Button – KVN Promotions v1.4.0 */

.fwk-wrap {
    --fwk-size:   65px;
    --fwk-green:  #25d366;
    --fwk-shadow: rgba(37, 211, 102, 0.45);
}

/* ── Floating: position set via inline style from PHP (offset x/y) ── */
.fwk-floating {
    position: fixed;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Direction of tooltip relative to corner */
.fwk-pos-bottom-right,
.fwk-pos-top-right    { flex-direction: row-reverse; }
.fwk-pos-bottom-left,
.fwk-pos-top-left     { flex-direction: row; }
.fwk-pos-top-right,
.fwk-pos-top-left     { align-items: flex-start; }

.fwk-inline { display:inline-flex; align-items:center; gap:10px; vertical-align:middle; }

/* ── Button ── */
.fwk-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--fwk-size);
    height: var(--fwk-size);
    border-radius: 50%;
    background: var(--fwk-green);
    box-shadow: 0 4px 18px var(--fwk-shadow);
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
    animation: fwk-bounce-in .6s cubic-bezier(.34,1.56,.64,1) both;
    will-change: transform;
    flex-shrink: 0;
}
.fwk-btn:hover  { transform:scale(1.08); box-shadow:0 8px 28px var(--fwk-shadow); }
.fwk-btn:active { transform:scale(.95); }

/* Pulse ring */
.fwk-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--fwk-green);
    z-index: -1;
    animation: fwk-pulse 2.4s ease-out infinite;
}

/* ── Lottie mode: fully transparent wrapper, animation provides everything ── */
.fwk-btn.fwk-has-lottie {
    background:    transparent !important;
    box-shadow:    none !important;
    border-radius: 0 !important;
    overflow:      visible !important;
}
.fwk-btn.fwk-has-lottie::before { display: none; }
.fwk-btn.fwk-has-lottie > svg {
    width:  var(--fwk-size) !important;
    height: var(--fwk-size) !important;
    display: block;
    overflow: visible;
}

/* ── Tooltip ── */
.fwk-tooltip {
    display: inline-block;
    background: #1a1a1a;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .2s, transform .2s;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.fwk-wrap:hover .fwk-tooltip { opacity:1; transform:translateX(0); }

.fwk-pos-bottom-left .fwk-tooltip,
.fwk-pos-top-left    .fwk-tooltip { transform:translateX(-8px); }
.fwk-pos-bottom-left .fwk-wrap:hover .fwk-tooltip,
.fwk-pos-top-left    .fwk-wrap:hover .fwk-tooltip { transform:translateX(0); }

.fwk-tooltip-hidden { display:none !important; }

/* ── Keyframes ── */
@keyframes fwk-bounce-in {
    0%   { opacity:0; transform:scale(0) rotate(-10deg); }
    60%  { transform:scale(1.15) rotate(3deg); }
    100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes fwk-pulse {
    0%   { transform:scale(1);    opacity:.65; }
    70%  { transform:scale(1.55); opacity:0; }
    100% { transform:scale(1.55); opacity:0; }
}

@media (prefers-reduced-motion: reduce) {
    .fwk-btn, .fwk-btn::before { animation:none; }
}