/* ============================================================
   WhatsApp Floating Action Button — site-wide, draggable
   File: static/css/components/whatsapp-fab.css

   Goals:
   • Bottom-left FAB on every customer-facing page.
   • Draggable: user can move it if it covers something.
   • Mobile-safe: lifts above the .bottom-nav and safe-area.
   • Pure WhatsApp green — does not compete with brand purple.
   • Accessible: keyboard-focusable, ARIA, reduced-motion friendly.
   ============================================================ */

.wa-fab {
    --wa-size: 60px;
    --wa-green: #25d366;
    --wa-green-700: #128c7e;
    --wa-shadow: 0 10px 24px -6px rgba(37, 211, 102, .55),
        0 6px 18px -8px rgba(11, 18, 32, .35);

    position: fixed;
    z-index: 70;
    /* Above .bottom-nav (z=60) but below modals (usually 1000+) */

    /* Default anchor — bottom-LEFT corner.
       JS will override with transform once the user moves it. */
    inset-inline-start: 16px;
    bottom: calc(16px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + var(--fixed-viewport-nudge, 0px));

    width: var(--wa-size);
    height: var(--wa-size);
    border-radius: 50%;
    background: var(--wa-green);
    color: #fff;
    border: none;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--wa-shadow);
    text-decoration: none;
    touch-action: none;
    /* required for pointer dragging on touch devices */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;

    transition: background-color .15s ease,
        box-shadow .25s ease,
        transform .15s ease;

    /* Will-change hint while interactive */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* Pulse ring animation */
    animation: wa-pulse 2.4s ease-in-out infinite;
}

/* WhatsApp glyph */
.wa-fab__icon {
    font-size: 30px;
    line-height: 1;
    pointer-events: none;
    /* dragging targets the FAB itself, not the icon */
}

/* Hover / focus — keyboard accessible */
.wa-fab:hover,
.wa-fab:focus-visible {
    background: var(--wa-green-700);
    outline: none;
    box-shadow: 0 12px 28px -6px rgba(37, 211, 102, .65),
        0 8px 22px -8px rgba(11, 18, 32, .45);
}

.wa-fab:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .35);
    outline-offset: 3px;
}

/* While being dragged */
.wa-fab.is-dragging {
    cursor: grabbing;
    transition: none;
    /* instant feedback while dragging */
    animation: none;
    /* pause pulse */
    transform-origin: center;
    box-shadow: 0 16px 36px -6px rgba(37, 211, 102, .7),
        0 10px 28px -8px rgba(11, 18, 32, .55);
}

.wa-fab.is-dragging .wa-fab__icon {
    transform: scale(.92);
}

/* When the user has positioned it manually, kill the default anchor
   so the JS-applied transform is the only positioning rule. */
.wa-fab.is-positioned {
    inset-inline-start: 0;
    inset-inline-end: auto;
    bottom: 0;
    left: 0;
    top: 0;
}

/* Tiny "tap to chat" tooltip — only shown on initial idle hover */
.wa-fab::before {
    content: attr(data-tooltip);
    position: absolute;
    inset-inline-start: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) scale(.9);
    background: #0b1220;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: 0 8px 22px -8px rgba(11, 18, 32, .35);
}

.wa-fab:hover::before,
.wa-fab:focus-visible::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Pulse — subtle expanding ring */
@keyframes wa-pulse {
    0% {
        box-shadow: var(--wa-shadow), 0 0 0 0 rgba(37, 211, 102, .55);
    }

    70% {
        box-shadow: var(--wa-shadow), 0 0 0 18px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: var(--wa-shadow), 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* ============================================================
   Mobile — lift the FAB above .bottom-nav (which is bottom: 0,
   height = var(--bottom-nav-h) + safe-area-inset-bottom). Also
   shrink slightly for one-handed reachability.
   ============================================================ */
@media (max-width: 879px) {
    .wa-fab {
        --wa-size: 54px;
        inset-inline-start: 14px;
        /* keep tooltip OFF on mobile — there's no hover */
        bottom: calc(var(--bottom-nav-h, 64px) + 14px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) + var(--fixed-viewport-nudge, 0px));
    }

    .wa-fab__icon {
        font-size: 26px;
    }

    /* No hover tooltip on touch screens */
    .wa-fab::before {
        display: none;
    }
}

/* Very small phones — slightly smaller still */
@media (max-width: 380px) {
    .wa-fab {
        --wa-size: 50px;
    }

    .wa-fab__icon {
        font-size: 24px;
    }
}

/* Devices without hover (touch) — no hover animations */
@media (hover: none) {

    .wa-fab:hover,
    .wa-fab:focus {
        background: var(--wa-green);
        /* keep default green; no "stuck hover" residue */
    }
}

/* Reduce motion: kill pulse + transforms */
@media (prefers-reduced-motion: reduce) {
    .wa-fab {
        animation: none !important;
        transition: background-color .15s ease !important;
    }
}

/* Print: don't waste ink on a floating button */
@media print {
    .wa-fab {
        display: none !important;
    }
}