/* Extracted from module/computer/layout/feet.phtml during audit Step 6c. */

        /*
         * Back-to-top FAB at bottom-right. 22px is a discrete-but-visible
         * utility size that won't dominate the viewport.
         */
        #backToTop{
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            font-size: 22px;
            background: var(--lb-brand-alt);
            color: #FFF;
            border-radius: 4px;
            padding: 6px 12px;
        }
        #backToTop:hover{
            background: #141414;
            cursor: pointer;
        }
        

        #contactWrapper{
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            z-index: 300;
        }
        
        #supportWrapper,
        #whatsAppContactWrapper,
        #cookieConsentWrapper{
            width: 100%;
            color: #FFF;
            margin-bottom: 10px;
        }
        
        
        /*
         * Left-edge floating contact buttons (support / whatsapp / cookie
         * consent). Matches production dimensions: width: 54px with
         * 7px 14px padding (content-box default → outer ~82×35). Icons
         * inherit their per-template `lb-fs-px-*` sizes (21px for support,
         * 24px for whatsapp + cookie) since those values are explicit px
         * and match what production renders.
         */
        #supportContainer,
        #whatsAppContactContainer,
        #cookieConsentContainer{
            padding: 7px 14px 7px 14px;
            text-align: center;
            font-size: 12px;
            border-radius: 0 4px 4px 0;
            width: 54px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1),
                0 2px 6px rgba(0, 0, 0, 0.05),
                0 3px 1px -2px rgba(0, 0, 0, 0.05) !important;
        }

        /*
         * Cookie icon was rendering visually larger because fa-cookie-bite's
         * glyph is wider than fa-headset / fa-whatsapp at the same font-size.
         * Pin the cookie to 21px (matching `lb-fs-px-21` like the support
         * icon) so the 3 FABs read as a uniform set. Whatsapp keeps its 24px
         * (a touch larger but the proportions of the whatsapp glyph absorb
         * the extra height without overflow).
         *
         * NOTE: do NOT add `line-height: 1` here — the template puts
         * `lb-lh-4` (= 40px line-height) on the icon to give the FAB its
         * 40px tall content row. Killing that line-height collapses the
         * cookie button to ~21px tall (icon height only) while the other
         * two stay 40px — observed regression in earlier iteration.
         */
        #cookieConsentContainer .fas{
            font-size: 21px !important;
        }

        /*
         * Support FAB hover expansion is JS-driven (feet.phtml mouseover
         * sets width:220px + reveals .show-phone via inline display).
         * No CSS `transition` here on purpose — the width animation and
         * the content reveal can't be timed to each other from CSS alone,
         * so any easing produced a clipped/compressed reveal during the
         * frames where the container was still narrower than the content.
         * Instant snap (production behaviour) is the visually-coherent
         * choice.
         */
        #supportContainer{
            background: var(--lb-brand);
        }
        #supportContainer a{
            color: #FFF;
        }
        #supportContainer:hover{
            cursor: pointer;
            background: #141414;
        }

        #whatsAppContactContainer{
            background: #0cb942;
            cursor: pointer;
        }
        #whatsAppContactContainer:hover{
            background: #141414;
        }

        #cookieConsentContainer{
            background: #dd9955;
        }
        #cookieConsentContainer:hover{
            cursor: pointer;
            background: #141414;
        }