/* ===================================
   Mobile live chat button
   Replaces Tawk's own bubble on phones (see chat-button.js).
   "body button" outranks the Elementor kit's red button style.
   =================================== */
.pp-chat-btn {
    display: none;
}

@media (max-width: 768px) {
    body button.pp-chat-btn {
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        margin: 0;
        border: none;
        border-radius: 8px;
        background: #00263e;
        color: #ffffff;
        /* Faint light ring keeps it visible over the navy sections. */
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    body button.pp-chat-btn:hover,
    body button.pp-chat-btn:focus,
    body button.pp-chat-btn:focus-visible {
        background: #003a5c;
    }

    body button.pp-chat-btn:active {
        transform: scale(0.96);
    }

    .pp-chat-btn svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    .pp-chat-btn__badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #c63527;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        box-shadow: 0 0 0 2px #ffffff;
    }

    .pp-chat-btn__badge[hidden] {
        display: none;
    }

    /* Product pages: sits at the end of the sticky Add to Cart bar, same
       height and corners as the buttons beside it. */
    body .sticky-cart-container button.pp-chat-btn {
        position: relative;
        right: auto;
        bottom: auto;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        /* Same uneven margins the Elementor kit gives the bar's other
           buttons, so all three sit on one line. */
        margin: 15px 0 20px auto;
        border-radius: 4px;
        box-shadow: none;
    }

    /* Add to Cart takes the space between the quantity and chat buttons. */
    .sticky-cart-container:has(.pp-chat-btn) .sticky-cart-btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 375px) {
    body .sticky-cart-container button.pp-chat-btn {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
}