/**
 * ============================================================
 * G5 WHATSAPP WIDGET — assets/css/g5-whatsapp.css
 * ============================================================
 * Fully independent stylesheet. Namespaced g5-wa-* only.
 * Animations use ONLY transform + opacity (GPU compositor layer,
 * no layout/paint cost) — safe for 90-100 PageSpeed.
 * ============================================================
 */

.g5-wa-widget,.g5-wa-widget *{box-sizing:border-box;}

:root{
    /* ==========================================================
       ADJUST THIS ONE NUMBER to match your mobile bottom nav bar's
       real height (Home/Categories/Wishlist/Cart/Account strip).
       Open the site on your phone -> browser DevTools -> inspect
       that bottom bar -> check its height in px, put it here.
       Default 64px covers most app-style bottom nav bars.
       ========================================================== */
    --g5-wa-mobile-nav-height: 64px;
}

.g5-wa-widget{
    position:fixed;
    right:calc(16px + env(safe-area-inset-right,0px));
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    z-index:99999;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    pointer-events:none; /* re-enabled on the actual button/bubble below */
    transition:bottom .3s ease;
}

/* Lift ABOVE the mobile bottom nav bar so it never sits on top of
   the Account icon (or any other bottom-nav item). This is the
   direct fix for the overlap seen on /my-account/. */
@media (max-width:767px){
    .g5-wa-widget{
        bottom:calc(var(--g5-wa-mobile-nav-height) + 12px + env(safe-area-inset-bottom,0px));
    }
}

/* ============================================================
   THE BUTTON
   ============================================================ */
.g5-wa-fab{
    position:relative;
    pointer-events:auto;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 6px 22px rgba(37,211,102,.42), 0 2px 8px rgba(0,0,0,.16);
    transform:translate3d(0,0,0) scale(1);
    will-change:transform,opacity;
    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        opacity .35s ease,
        box-shadow .3s ease;
}

.g5-wa-fab svg{
    width:29px;height:29px;fill:#FFFFFF;
    position:relative;z-index:2;
    transition:transform .3s ease;
}

.g5-wa-fab:focus-visible{
    outline:3px solid #2F4F4F;
    outline-offset:3px;
}

/* pulsing ring at rest — cheap, opacity+scale only */
.g5-wa-ring{
    position:absolute;inset:0;border-radius:50%;
    background:#25D366;
    opacity:.5;
    animation:g5-wa-pulse 2.8s ease-out infinite;
    z-index:1;
}
@keyframes g5-wa-pulse{
    0%{transform:scale(1);opacity:.45;}
    70%{transform:scale(1.6);opacity:0;}
    100%{transform:scale(1.6);opacity:0;}
}

/* ---- Desktop-only "breathing" — subtle size shift while idle,
   only on devices with a real pointer (not touch), so it never
   fights with the scroll-dock behaviour on mobile ---- */
@media (hover:hover) and (pointer:fine){
    .g5-wa-fab{ animation:g5-wa-breathe 5.5s ease-in-out infinite; }
    .g5-wa-fab:hover{ animation-play-state:paused; }
}
@keyframes g5-wa-breathe{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.06); }
}

.g5-wa-fab:hover{
    transform:translateY(-3px) scale(1.08);
    box-shadow:0 10px 28px rgba(37,211,102,.5), 0 4px 12px rgba(0,0,0,.2);
}

/* ============================================================
   SCROLL-DOCKED STATE — recedes toward the edge during active
   scroll, leaves a visible sliver, comes back once scroll settles.
   Uses `transform` only (never `right`/`left`) so it can never
   trigger a horizontal scrollbar.
   ============================================================ */
.g5-wa-widget.g5-wa-docked .g5-wa-fab{
    /* leaves ~50% of the icon visible at the screen edge, as requested */
    transform:translate3d(50%,0,0) scale(.82);
    opacity:.85;
    box-shadow:0 4px 14px rgba(37,211,102,.3);
    transition:
        transform .4s cubic-bezier(.4,0,.2,1),
        opacity .3s ease,
        box-shadow .3s ease;
}
.g5-wa-widget.g5-wa-docked .g5-wa-ring{ animation-play-state:paused; opacity:0; }
.g5-wa-widget.g5-wa-docked .g5-wa-fab{ animation:none; } /* pause breathing while docked */

/* ============================================================
   ATTENTION BUBBLE — appears occasionally, self-dismisses
   ============================================================ */
.g5-wa-bubble{
    pointer-events:none;
    position:relative;
    margin:0 12px 14px 0;
    max-width:180px;
    background:#2F4F4F;
    color:#FFFFFF;
    font-size:12.5px;
    font-weight:600;
    line-height:1.35;
    padding:9px 13px;
    border-radius:12px;
    box-shadow:0 8px 20px rgba(47,79,79,.3);
    opacity:0;
    transform:translate3d(8px,6px,0) scale(.92);
    transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.g5-wa-bubble-tail{
    position:absolute;
    right:18px;
    bottom:-6px;
    width:12px;height:12px;
    background:#2F4F4F;
    transform:rotate(45deg);
    border-radius:2px;
}
.g5-wa-bubble.g5-wa-bubble-show{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
}
/* bubble never shows while docked/scrolling */
.g5-wa-widget.g5-wa-docked .g5-wa-bubble{
    opacity:0!important;
    transform:translate3d(8px,6px,0) scale(.92)!important;
}

/* keep clear of a WooCommerce sticky add-to-cart bar ON TOP of the
   mobile bottom nav bar it's already lifted above */
@media (max-width:767px){
    .single-product .g5-wa-widget{
        bottom:calc(var(--g5-wa-mobile-nav-height) + 70px + env(safe-area-inset-bottom,0px));
    }
}
@media (min-width:768px){
    .single-product .g5-wa-widget{
        bottom:calc(84px + env(safe-area-inset-bottom,0px));
    }
}

/* ============================================================
   ACCESSIBILITY — reduced motion: static, no docking, no breathing
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    .g5-wa-fab,
    .g5-wa-ring,
    .g5-wa-bubble{
        animation:none!important;
        transition:none!important;
    }
    .g5-wa-widget.g5-wa-docked .g5-wa-fab{
        transform:none;
        opacity:1;
    }
}

@media (max-width:480px){
    .g5-wa-fab{width:52px;height:52px;}
    .g5-wa-fab svg{width:25px;height:25px;}
    .g5-wa-widget{right:14px;}
    .g5-wa-widget.g5-wa-docked .g5-wa-fab{ transform:translate3d(50%,0,0) scale(.76); }
}