/*
 * Shared floating WhatsApp button - ONE file, two states via a modifier
 * class on the wrap, set by the Blade component
 * (resources/views/components/whatsapp-fab.blade.php):
 *
 *   <x-whatsapp-fab />                    guest position (Home/Login/Register)
 *   <x-whatsapp-fab :has-bottom-nav="true" />   authenticated pages with the
 *                                          fixed bottom nav (bottom-nav.css)
 *
 * The button is always position:fixed directly against the viewport
 * corner (not absolute/sticky/content-relative), so it stays in that same
 * screen corner while the page scrolls, on every breakpoint. The wrap is
 * not a positioning container - it exists only so pages have a stable
 * place to include the markup - so it is collapsed out of layout with
 * display:contents.
 */
.whatsapp-fab-wrap{
    display:contents;
}

.whatsapp-fab{
    position:fixed;
    right:14px;
    /* Guest default: low corner position, matches the public pages'
       existing scroll-to-top button height band. */
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    width:48px;
    height:48px;
    display:block;
    /* Above ordinary content; below the sidebar overlay/drawer (1400/1500)
       and the package-lock modal (99999) on authenticated pages. */
    z-index:960;
}

/* Authenticated state: clear the fixed bottom nav using its actual
   offset + height (declared in bottom-nav.css) plus a small gap, instead
   of a page-specific guessed value. */
.whatsapp-fab-wrap.has-bottom-nav .whatsapp-fab{
    bottom:calc(var(--bottom-nav-offset, 14px) + var(--bottom-nav-height, 60px) + 12px + env(safe-area-inset-bottom, 0px));
}

.whatsapp-fab img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}