/**
 * Bellevue Mobile Menu — mobile-menu.css
 * Solo aplica en mobile (max-width: 767px).
 * En desktop todos los elementos del módulo están ocultos.
 */

/* ===========================
   Hidden by default on desktop
   =========================== */
.bmm-overlay,
.bellevue-mobile-menu {
    display: none;
}

/* ===========================
   MOBILE ONLY — max-width 767px
   =========================== */
@media screen and (max-width: 767px) {

    /* ----- Override Porto: evitar que el page-wrapper se desplace ----- */
    html.nav-before-open .page-wrapper,
    html.nav-open .page-wrapper {
        left: 0 !important;
    }

    /* Ocultar el drawer nativo de Porto (nav-sections) */
    .nav-sections {
        display: none !important;
    }

    /* Ocultar el pseudo-overlay de Porto en nav-toggle */
    html.nav-open .nav-toggle::after {
        display: none !important;
    }

    /* ----- Overlay ----- */
    .bmm-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.50);
        z-index: 9998;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    html.nav-open .bmm-overlay {
        display: block;
    }

    /* ----- Drawer ----- */
    .bellevue-mobile-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        width: 88%;
        max-width: 360px;
        height: 100%;
        height: 100dvh;
        background: #ffffff;
        z-index: 9999;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        box-shadow: 6px 0 30px rgba(0, 0, 0, 0.15);
    }

    html.nav-open .bellevue-mobile-menu {
        transform: translateX(0);
    }

    /* ----- Header ----- */
    .bmm-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid #f0f0f0;
        flex-shrink: 0;
        min-height: 58px;
        background: #fff;
    }

    .bmm-logo-link {
        display: flex;
        align-items: center;
        line-height: 0;
    }

    .bmm-logo-img {
        max-height: 40px;
        width: auto;
    }

    .bmm-logo-text {
        font-size: 24px;
        font-family: 'Allura', cursive, serif;
        color: #c97b9f;
        line-height: 1;
    }

    .bmm-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 18px;
        color: #666;
        padding: 0;
        border-radius: 50%;
        transition: background 0.2s;
        flex-shrink: 0;
    }

    .bmm-close-btn:hover,
    .bmm-close-btn:focus {
        background: #f5f5f5;
        outline: none;
    }

    /* ----- Account Row ----- */
    .bmm-account-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 16px;
        border-bottom: 1px solid #f0f0f0;
        background: #fafafa;
        text-decoration: none !important;
        color: #333 !important;
        flex-shrink: 0;
        transition: background 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .bmm-account-row:hover,
    .bmm-account-row:active {
        background: #f2f2f2;
    }

    .bmm-account-icon-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #ede8f5;
        color: #7c5cbf;
        flex-shrink: 0;
    }

    .bmm-account-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .bmm-account-label {
        font-size: 10px;
        letter-spacing: 0.08em;
        color: #999;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1;
    }

    .bmm-account-name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bmm-chevron {
        color: #bbb;
        flex-shrink: 0;
    }

    /* ----- Navigation Wrap ----- */
    .bmm-nav-wrap {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .bmm-nav-wrap::-webkit-scrollbar {
        width: 3px;
    }

    .bmm-nav-wrap::-webkit-scrollbar-thumb {
        background: #e0d0ea;
        border-radius: 2px;
    }

    /* ----- Navigation Items ----- */
    .bmm-navigation {
        margin: 0;
        padding: 0;
    }

    .bmm-navigation ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Level 0 items — flex row para que toggle quede inline */
    .bmm-navigation>ul>li.level0 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid #f4f4f4;
        margin: 0;
        position: relative;
    }

    .bmm-navigation>ul>li.level0>a.level-top {
        display: flex;
        flex: 1;
        order: 1;
        align-items: center;
        min-width: 0;
        padding: 14px 0 14px 16px;
        font-size: 14px;
        font-weight: 500;
        color: #333 !important;
        text-decoration: none !important;
        gap: 10px;
        transition: background 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

    .bmm-navigation>ul>li.level0>a.level-top:hover,
    .bmm-navigation>ul>li.level0>a.level-top:active {
        color: #9b5fb5 !important;
    }

    /* Kill Porto's ::after arrows on parent links */
    #bmm-drawer .bmm-navigation li.parent>a::after {
        display: none !important;
        content: none !important;
    }

    /* Submenu expande al 100% del ancho del li */
    .bmm-navigation>ul>li.level0>.submenu {
        order: 4;
        flex-basis: 100%;
    }

    /* Category icon from megamenu */
    .bmm-navigation>ul>li.level0>a.level-top .cat-icon {
        width: 22px;
        height: 22px;
        margin-right: 4px;
        flex-shrink: 0;
    }

    /* Cat item label */
    .bmm-navigation>ul>li.level0>a.level-top .cat-item-label {
        flex: 1;
    }

    /* ---------------------------------------------------------------
       Toggle independiente de Porto
       Porto pone el toggle como position:absolute dentro de li;
       dentro de nuestro drawer lo reposicionamos como flex-item
       y le dibujamos una flecha propia.
       --------------------------------------------------------------- */

    /* Reset completo del posicionamiento absoluto de Porto */
    #bmm-drawer .open-children-toggle {
        position: static !important;
        /* anula el absolute de Porto */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        flex-shrink: 0;
        order: 3;
        /* va al final del flex row */
        border-radius: 50%;
        background: transparent !important;
        cursor: pointer;
        color: #bbb;
        transition: background 0.2s, color 0.2s;
        z-index: auto !important;
        /* Quitar cualquier pseudo-elemento de Porto */
    }

    /* Flecha propia: chevron derecha */
    #bmm-drawer .open-children-toggle::before {
        content: '' !important;
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg) translate(-1px, -1px);
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Estado expandido: rotar 90° = apunta hacia abajo */
    #bmm-drawer li.bmm-expanded>.open-children-toggle {
        background: #f0e8f8 !important;
        color: #9b5fb5;
    }

    #bmm-drawer li.bmm-expanded>.open-children-toggle::before {
        transform: rotate(45deg) translate(1px, -1px);
    }

    /* Active state */
    .bmm-navigation>ul>li.level0>a.ui-state-active {
        color: #9b5fb5 !important;
        font-weight: 600;
    }

    /* ----- Submenús: nivel 0 (div.submenu) y nivel 1+ (ul.subchildmenu) ----- */

    /* Ocultar por defecto ambos tipos */
    .bmm-navigation .submenu,
    .bmm-navigation .subchildmenu {
        display: none;
        background: #f9f6fd;
        border-top: 1px solid #ede8f5;
        padding: 4px 0;
    }

    /* Mostrar cuando la clase 'opened' está presente */
    .bmm-navigation .submenu.opened,
    .bmm-navigation .subchildmenu.opened {
        display: block;
    }

    /* Items dentro de cualquier submenú — flex row para inline toggle */
    .bmm-navigation .submenu li,
    .bmm-navigation .subchildmenu li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid #ede8f5;
        margin: 0;
    }

    .bmm-navigation .submenu li:last-child,
    .bmm-navigation .subchildmenu li:last-child {
        border-bottom: none;
    }

    /* Links de primer nivel dentro del submenu (nivel 1) */
    .bmm-navigation .submenu>.row>ul>li>a,
    .bmm-navigation .subchildmenu>li>a {
        display: flex;
        flex: 1;
        order: 1;
        align-items: center;
        min-width: 0;
        padding: 12px 0 12px 24px;
        font-size: 13px;
        color: #555 !important;
        text-decoration: none !important;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

    /* Bullet chevron para items de submenu nivel 1 */
    .bmm-navigation .submenu>.row>ul>li>a::before,
    .bmm-navigation .subchildmenu>li>a::before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 5px;
        border-right: 1.5px solid #c9add9;
        border-bottom: 1.5px solid #c9add9;
        transform: rotate(-45deg);
        margin-right: 10px;
        flex-shrink: 0;
    }

    .bmm-navigation .submenu>.row>ul>li>a:hover,
    .bmm-navigation .subchildmenu>li>a:hover {
        color: #9b5fb5 !important;
    }

    /* Links nivel 2+ (subchildmenu dentro de subchildmenu) — más indentados */
    .bmm-navigation .subchildmenu .subchildmenu>li>a {
        padding-left: 40px;
        font-size: 12px;
        color: #777 !important;
    }

    /* Submenús anidados toman todo el ancho */
    .bmm-navigation .submenu li>.subchildmenu,
    .bmm-navigation .subchildmenu li>.subchildmenu {
        order: 4;
        flex-basis: 100%;
    }

    /* Reset wrappers de desktop megamenu de Porto */
    .bmm-navigation .megamenu-wrapper,
    .bmm-navigation .submenu>.container,
    .bmm-navigation .submenu>.row {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    /* Las columnas de Bootstrap del megamenu en mobile deben ser bloque */
    .bmm-navigation .submenu [class*="col-md-"] {
        float: none !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Ocultar bloques decorativos del megamenu (top/left/right/bottom content) */
    .bmm-navigation .menu-top-block,
    .bmm-navigation .menu-left-block,
    .bmm-navigation .menu-right-block,
    .bmm-navigation .menu-bottom-block,
    .bmm-navigation .menu-thumb-img {
        display: none !important;
    }

    /* ----- Sticky Bottom Icons Bar ----- */
    .bmm-sticky-bar {
        display: flex;
        align-items: stretch;
        border-top: 1px solid #f0ecf7;
        background: #ffffff;
        flex-shrink: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -1px 8px rgba(155, 95, 181, 0.07);
    }

    .bmm-sticky-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 12px 4px 10px;
        text-decoration: none !important;
        color: #a0a0a8 !important;
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        transition: color 0.18s, background 0.18s;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }

    .bmm-sticky-item:hover,
    .bmm-sticky-item:active {
        color: #9b5fb5 !important;
        background: #faf5ff;
    }

    /* Icon wrap — force transparent, reset Porto backgrounds */
    .bmm-sticky-icon-wrap {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        line-height: 0;
        background: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        transition: transform 0.15s;
    }

    .bmm-sticky-item:active .bmm-sticky-icon-wrap {
        transform: scale(0.88);
    }

    /* Ensure SVG inherits the item color */
    .bmm-sticky-icon-wrap svg {
        display: block;
        color: inherit;
        flex-shrink: 0;
    }

    .bmm-sticky-label {
        display: block;
        line-height: 1;
        color: inherit;
    }

    /* Cart badge — teal pill, brand accent */
    .bmm-sticky-badge {
        position: absolute;
        top: -4px;
        right: -8px;
        background: #4ecdc4;
        color: #fff;
        border-radius: 20px;
        font-size: 8px;
        font-weight: 700;
        min-width: 15px;
        height: 15px;
        line-height: 15px;
        text-align: center;
        padding: 0 3px;
        border: 1.5px solid #fff;
    }

}

/* end @media max-width: 767px */