/* ============================================================
   LocalDesign — Floating Action Buttons (FAB stack)
   Shared by WhatsApp float + chat widget
   ============================================================ */

:root {
    --ld-fab-size: 64px;
    --ld-fab-gap: 14px;
    --ld-fab-offset-x: 24px;
    --ld-fab-offset-y: 24px;
    --ld-fab-stack-1: var(--ld-fab-offset-y);
    --ld-fab-stack-2: calc(var(--ld-fab-offset-y) + var(--ld-fab-size) + var(--ld-fab-gap));
}

/* ── Base FAB ─────────────────────────────────────────────── */
.ld-fab,
.whatsapp-float,
a[aria-label="WhatsApp"].fixed.bottom-6.right-6 {
    position: fixed;
    right: var(--ld-fab-offset-x);
    bottom: var(--ld-fab-stack-1);
    z-index: 99998;
    width: var(--ld-fab-size);
    height: var(--ld-fab-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
}

.ld-fab:hover,
.whatsapp-float:hover,
a[aria-label="WhatsApp"].fixed.bottom-6.right-6:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.ld-fab:active,
.whatsapp-float:active {
    transform: scale(0.96);
}

/* WhatsApp sits above chat when assistant is active */
.ld-has-chat .ld-fab-wa,
.ld-has-chat .whatsapp-float,
.ld-has-chat a[aria-label="WhatsApp"].fixed.bottom-6.right-6 {
    bottom: var(--ld-fab-stack-2);
}

/* ── WhatsApp variant ─────────────────────────────────────── */
.ld-fab-wa,
.whatsapp-float,
a[aria-label="WhatsApp"].fixed.bottom-6.right-6 {
    background-color: #25D366 !important;
}

.ld-fab-wa:hover,
.whatsapp-float:hover,
a[aria-label="WhatsApp"].fixed.bottom-6.right-6:hover {
    background-color: #22c55e !important;
}

.ld-fab-icon,
.ld-fab-wa svg,
.whatsapp-float svg,
a[aria-label="WhatsApp"].fixed.bottom-6.right-6 svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Legacy tailwind classes on old deploys — neutralize size overrides */
a[aria-label="WhatsApp"].fixed.bottom-6.right-6.w-16,
a[aria-label="WhatsApp"].fixed.bottom-6.right-6 {
    width: var(--ld-fab-size) !important;
    height: var(--ld-fab-size) !important;
    padding: 0 !important;
}

a[aria-label="WhatsApp"].fixed.bottom-6.right-6 svg.w-8 {
    width: 32px !important;
    height: 32px !important;
}

/* ── Pulse ring (shared effect) ───────────────────────────── */
@keyframes ld-fab-pulse {
    0%   { transform: scale(1);   opacity: 0.35; }
    100% { transform: scale(1.8); opacity: 0;   }
}

.ld-fab-pulse::after,
.ld-chat-bubble.ld-fab-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: ld-fab-pulse 2.4s ease-out 2;
}

.ld-fab-pulse--chat::after,
.ld-chat-bubble.ld-fab-pulse--chat::after {
    background: var(--ld-primary, #2563EB);
    animation-delay: 1.5s;
}

.ld-fab-pulse--wa::after {
    background: #25D366;
    animation-delay: 2.8s;
    animation-iteration-count: 1;
}

/* ── Chat widget position (uses same stack slot 1) ────────── */
#ld-chat-widget {
    bottom: var(--ld-fab-offset-y);
    right: var(--ld-fab-offset-x);
}

#ld-chat-widget .ld-chat-bubble {
    width: var(--ld-fab-size);
    height: var(--ld-fab-size);
}

/* ── WhatsApp popup — sit above FAB stack ─────────────────── */
#ld-wa-popup {
    bottom: calc(var(--ld-fab-stack-1) + var(--ld-fab-size) + 16px) !important;
}

.ld-has-chat #ld-wa-popup {
    bottom: calc(var(--ld-fab-stack-2) + var(--ld-fab-size) + 16px) !important;
}

@media (max-width: 480px) {
    :root {
        --ld-fab-offset-x: 16px;
        --ld-fab-offset-y: 16px;
    }
}