/* ==========================================================================
   custom-global.css
   Loaded on every theme2 page from layouts/themes/theme2.blade.php.
   Holds the floating WhatsApp + Messenger chat dock (item 3).
   ========================================================================== */


/* ==========================================================================
   3. FLOATING CHAT BUTTONS - WhatsApp + Messenger
   ========================================================================== */

.cub-chat-dock {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 13px;
    align-items: center;
}

.cub-chat-btn {
    position: relative;
    display: flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 29px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(12, 32, 46, .26);
    transition: transform .2s ease, box-shadow .2s ease;
}

.cub-chat-btn:hover,
.cub-chat-btn:focus-visible {
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 9px 24px rgba(12, 32, 46, .34);
}

.cub-chat-btn i {
    position: relative;
    z-index: 2;
}

.cub-chat-whatsapp {
    background: #25d366;
}

.cub-chat-messenger {
    background: linear-gradient(45deg, #0695ff 10%, #a334fa 60%, #ff5285 100%);
}

/* Expanding ring. ::before and ::after are offset so the pulses alternate. */
.cub-chat-btn::before,
.cub-chat-btn::after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: "";
    opacity: .75;
    animation: cubChatPulse 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}

.cub-chat-btn::after {
    animation-delay: 1.2s;
}

.cub-chat-whatsapp::before,
.cub-chat-whatsapp::after {
    background: rgba(37, 211, 102, .55);
}

.cub-chat-messenger::before,
.cub-chat-messenger::after {
    background: rgba(6, 149, 255, .5);
}

/* A slow tilt so the dock reads as "live" even between pulses. */
.cub-chat-btn i {
    animation: cubChatNudge 3.6s ease-in-out infinite;
}

@keyframes cubChatPulse {
    0% {
        opacity: .7;
        transform: scale(1);
    }

    70% {
        opacity: 0;
        transform: scale(1.85);
    }

    100% {
        opacity: 0;
        transform: scale(1.85);
    }
}

@keyframes cubChatNudge {
    0%, 62%, 100% {
        transform: rotate(0deg);
    }

    68% {
        transform: rotate(-13deg);
    }

    74% {
        transform: rotate(11deg);
    }

    80% {
        transform: rotate(-7deg);
    }

    86% {
        transform: rotate(4deg);
    }
}

@media (max-width: 767.98px) {
    .cub-chat-dock {
        right: 14px;
        bottom: 78px;
        gap: 11px;
    }

    .cub-chat-btn {
        width: 52px;
        height: 52px;
        font-size: 26px;
    }
}

/* The old single WhatsApp bubble is replaced by the dock above. */
.whatsapp-float {
    display: none !important;
}


/* Honour the OS reduced-motion setting. */
@media (prefers-reduced-motion: reduce) {

    .cub-chat-btn::before,
    .cub-chat-btn::after,
    .cub-chat-btn i {
        animation: none;
    }

    .cub-chat-btn {
        transition: none;
    }
}


/* ==========================================================================
   HORIZONTAL OVERFLOW GUARD

   Symptom this addresses: the footer and other full-width blocks stop short of
   the window edge, leaving a white strip on the right. That happens when some
   element is wider than the viewport - the document gains horizontal scroll,
   and blocks sized at 100% resolve against the wrong width.

   The marquee tracks are the most likely source, because they are deliberately
   `width: max-content` and can run several thousand pixels wide. They are
   supposed to be clipped by their wrapper; these rules make that clipping
   unconditional, and stop any other stray element from widening the page.
   ========================================================================== */

html,
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Clip the marquee no matter what the surrounding stylesheet does. */
.cub-marquee {
    position: relative !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.pdf4-partners,
.pdf4-testimonials {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Horizontal scrollers must clip rather than push the page wider. */
.pdf2-scroll-shell,
.pdf3-scroll-shell,
.pdf2-scroll-track,
.pdf3-scroll-track,
.pdf3-rail-track,
.pdf2-category-track {
    max-width: 100% !important;
}

/* Full-bleed sections span the window.
   An earlier revision of this file used a `100vw` + negative-margin full-bleed
   trick here. That was a mistake: the console check showed html, body and
   .page-wrapper were all already exactly viewport width, so nothing needed
   escaping, and the trick shifted the footer sideways instead. Plain 100% is
   correct once the overflow rules above are in place. */
footer,
.footer-two,
.footer-eight,
.footer-eight-area,
.footer-six-area,
.pdf4-partners,
.pdf4-testimonials {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Undo any stray offset a previous build may have left cached. */
footer,
.footer-eight-area,
.footer-six-area {
    left: auto !important;
    right: auto !important;
}

/* Bootstrap gutters on a full-width row are a common overflow source. */
.phase1-storefront .container-fluid,
.phase1-home .container-fluid,
.pdf4-home-container {
    max-width: 100% !important;
    overflow-x: clip;
}

/* Images and embeds must never exceed their column. */
.phase1-storefront img,
.phase1-storefront video,
.phase1-storefront iframe,
.phase1-storefront table {
    max-width: 100% !important;
}