/* ==========================================================================
   Al Meer Sourcing & Cargo Company
   LOGO SIZING + WHATSAPP BUTTON
   --------------------------------------------------------------------------
   Loaded LAST. Two jobs only:
     A) keep the new horizontal logo at a sensible size everywhere
     B) style the floating WhatsApp button
   No HTML template file or existing CSS file is modified.
   Remove the <link> tag and the WhatsApp <a> tag to revert.
   ========================================================================== */


/* ==========================================================================
   A. LOGO SIZING GUARDS
   The new logo is a wide horizontal file, so it needs a height on every
   breakpoint — otherwise it renders at its natural width on small screens.
   ========================================================================== */

/* header logo — below 1200px (header-fix.css handles 1200px and up) */
.main-menu__logo img {
    height: 72px;
    width: auto;
    max-width: 100%;
}

@media only screen and (max-width: 1199px) {
    .main-menu__logo img {
        height: 62px;
    }
}

@media only screen and (max-width: 767px) {
    .main-menu__logo img {
        height: 50px;
    }
}

/* slide-out side panel logo */
.xs-sidebar-group .content-inner .logo img {
    max-width: 210px;
    height: auto;
}

/* mobile menu drawer logo */
.mobile-nav__content .logo-box img {
    max-width: 170px;
    height: auto;
}


/* ==========================================================================
   B. WHATSAPP FLOATING BUTTON — fixed, bottom right, every page
   ========================================================================== */
.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366;
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .40);
    transition: all 300ms ease;
    z-index: 9999;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
    background-color: #1EBE57;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(37, 211, 102, .55);
}

.whatsapp-float svg {
    width: 30px;
    height: 30px;
    fill: #ffffff;
    display: block;
}

/* soft pulse ring so the button is noticed without being loud */
.whatsapp-float::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: #25D366;
    opacity: .55;
    z-index: -1;
    animation: whatsapp-pulse 2.4s ease-out infinite;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: .55;
    }

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

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

/* label that slides out on hover — desktop only */
.whatsapp-float__label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    white-space: nowrap;
    background-color: var(--tanspot-black);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 14px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 300ms ease;
}

.whatsapp-float:hover .whatsapp-float__label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* the template's "Go Back Top" strip lives in the same corner —
   lift it above the WhatsApp button so the two never overlap */
.scroll-to-top {
    bottom: 165px;
}

@media only screen and (max-width: 767px) {

    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
    }

    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }

    /* no room for the hover label on a phone */
    .whatsapp-float__label {
        display: none;
    }

    .scroll-to-top {
        bottom: 150px;
    }
}

/* respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .whatsapp-float::before {
        animation: none;
        opacity: 0;
    }
}