/* ==========================================================================
   Libelium Mobile Bottom Nav — floating pill, ≤900px only
   Replaces the collapsed top nav as the real mobile navigation surface.
   ========================================================================== */

.lbl-mobile-bottom-nav {
    display: none;
}

/* Products bottom-sheet host, injected in wp_footer on every page. Without an
   own position:relative + display:none-at-rest, its absolutely-positioned
   .lbl-mega-panel child (top: calc(100% + 10px), no positioned ancestor)
   anchors to the initial containing block and floats ~1 viewport below the
   page, adding blank space + a phantom vertical scrollbar site-wide. */
#lblProductsPanelHost {
    position: relative;
    display: none;
}

#lblProductsPanelHost.open {
    display: block;
}

@media (max-width: 900px) {
    .lbl-mobile-bottom-nav {
        display: flex;
        align-items: stretch;
        gap: 4px;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 1202;
        background: rgba(21, 18, 31, 0.92);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 100px;
        padding: 6px;
        box-shadow: 0 16px 40px -8px rgba(21, 18, 31, 0.45), 0 4px 14px -4px rgba(21, 18, 31, 0.25);
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
    }

    .lbl-mobile-bottom-nav.is-hidden {
        transform: translateY(140%);
        opacity: 0;
        pointer-events: none;
    }

    .lbl-mbn-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 4px 8px;
        border-radius: 100px;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.7);
        font-family: 'Konnect', var(--font-display, sans-serif);
        font-size: 11px;
        font-weight: var(--heading-weight, 500);
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease, background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        min-height: 44px;
    }

    .lbl-mbn-item svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .lbl-mbn-item.is-active,
    .lbl-mbn-item[aria-expanded="true"] {
        color: #ffffff;
        background: var(--brand-gradient, linear-gradient(125deg, #4C2889 0%, #7C1B6B 28%, #B4123F 55%, #E8121F 80%, #FF0800 100%));
    }
}

/* Backdrop shared by the "Solutions" bottom-sheet and the "Menú" full-screen overlay */
.lbl-mbn-backdrop {
    display: none;
}

@media (max-width: 900px) {

    body.lbl-mobile-nav-open .lbl-mbn-backdrop,
    body.lbl-mbn-solutions-open .lbl-mbn-backdrop,
    body.lbl-mbn-products-open .lbl-mbn-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1190;
        background: rgba(10, 5, 30, 0.45);
    }

    /* Close button injected by JS at the top of the mobile "Menú" overlay */
    .lbl-mbn-close {
        position: fixed;
        top: calc(20px + env(safe-area-inset-top, 0px));
        right: 20px;
        z-index: 1210;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--line, #E7E2F3);
        background: var(--white, #ffffff);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .lbl-mbn-close svg {
        width: 18px;
        height: 18px;
        stroke: var(--ink, #15121F);
        stroke-width: 2;
        fill: none;
    }
}

.lbl-mbn-item svg.lbl-mbn-logo-svg {
    width: 22px;
    height: 22px;
    stroke: none;
    fill: #ffffff;
}

.lbl-mbn-item svg.lbl-mbn-logo-svg path {
    fill: #ffffff !important;
}