/* Corrige conflitos com SP Page Builder */
.area-bx-menu {
    overflow: visible !important;
    position: relative !important;
    z-index: 0 !important;
}

/* Container principal do menu */
.megamenu-ocb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    z-index: 10;
}

/* Cada item ocupa o mesmo espaço */
.megamenu-ocb > li {
    flex: 1;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

/* Itens com link */
.megamenu-ocb > li > a {
    display: block;
    width: 100%;
    text-decoration: none;
    font: normal normal normal 14px/20px 'Intro', sans-serif;
    text-transform: uppercase;
    padding: 15px 10px;
    box-sizing: border-box;
}

/* Itens sem link */
.megamenu-ocb > li > span,
.megamenu-ocb > li > .nav-header {
    display: block;
    width: 100%;
    cursor: pointer;
    font: normal normal normal 14px/20px 'Intro', sans-serif;
    text-transform: uppercase;
    padding: 15px 10px;
    box-sizing: border-box;
}

/* Item pai */
.megamenu-ocb li.parent {
    position: relative;
}

/* Submenu de primeiro nível */
.megamenu-ocb li.parent ul.mod-menu__sub {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 20px 30px;
    display: flex;
    flex-wrap: wrap;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 9999;
    box-sizing: border-box;
}

/* Mostrar submenu ao hover */
.megamenu-ocb li.parent:hover ul.mod-menu__sub,
.megamenu-ocb li.parent ul.mod-menu__sub:hover {
    visibility: visible;
    opacity: 1;
}

/* Itens dentro do submenu */
.megamenu-ocb li > ul.mod-menu__sub > li {
    width: 100%;
    padding: 5px 0;
    box-sizing: border-box;
}

/* Linha branca no final de cada item, exceto o último */
.megamenu-ocb ul.mod-menu__sub > li:not(:last-child) {
    border-bottom: 1px solid #fff;
}

/* Links do submenu */
.megamenu-ocb ul.mod-menu__sub a {

    text-decoration: none !important;
    font-weight: 500;
    font-size: 14px;
    display: block;
    padding: 5px 0;
    text-align: left;
}

/* Hover nos links do submenu */
.megamenu-ocb ul.mod-menu__sub a:hover {
    text-decoration: none;
}

/* Submenus de subníveis (abrem à direita) */
.megamenu-ocb ul.mod-menu__sub li.parent {
    position: relative;
}

.megamenu-ocb ul.mod-menu__sub li.parent > ul.mod-menu__sub {
    position: absolute;
    top: 0;
    left: 100%;
    width: 240px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 1001;
}

/* Mostrar sub-submenu */
.megamenu-ocb ul.mod-menu__sub li.parent:hover > ul.mod-menu__sub {
    visibility: visible;
    opacity: 1;
}

/* Remove setas automáticas */
.megamenu-ocb li.parent > a::after,
.megamenu-ocb li.parent > span::after,
.megamenu-ocb li.parent > .nav-header::after {
    content: none;
}

.mod-menu__sub--columns {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 550px !important;
    gap: 0 !important;
    padding: 20px 30px;
}

.mod-menu__sub--columns > ul.coluna-1 > li,
.mod-menu__sub--columns > ul.coluna-2 > li {
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #fff !important;
    padding: 5px 0;
}

.mod-menu__sub--columns > ul.coluna-1 > li:nth-last-child(-n+1),
.mod-menu__sub--columns > ul.coluna-2 > li:nth-last-child(-n+1) {
    border-bottom: none !important;
}

.mod-menu__sub--columns > li.col-esq {
    margin-right: 15px !important;
}

.mod-menu__sub--columns > li.col-dir {
    margin-left: 15px !important;
}

/* Responsivo para mobile */
@media screen and (max-width: 992px) {
    .megamenu-ocb {
        flex-direction: column;
    }

    .megamenu-ocb > li {
        flex: none;
        text-align: left;
        width: 100%;
    }

    .megamenu-ocb > li > a,
    .megamenu-ocb > li > span,
    .megamenu-ocb > li > .nav-header {
        padding: 12px 20px;
        border-bottom: 1px solid #ccc;
    }

    .megamenu-ocb li ul.mod-menu__sub {
        display: none;
        flex-direction: column;
        background: #f9f9f9;
        width: 100%;
        padding: 10px 20px;
        box-shadow: none;
        position: static;
        visibility: hidden !important;
        opacity: 1 !important;
    }

    .megamenu-ocb li.open > ul.mod-menu__sub {
        display: block !important;
    }

    .megamenu-ocb li ul.mod-menu__sub > li {
        width: 100%;
        padding: 6px 0;
        border-bottom: 1px solid #ccc;
    }

    .megamenu-ocb ul.mod-menu__sub li.parent > ul.mod-menu__sub {
        position: static;
        padding-left: 15px;
        margin-top: 5px;
        width: 100%;
        box-shadow: none;
    }

    /* Botão fixo no canto inferior direito (mobile) */
    .btn-menu-mobile {
        position: fixed;
        bottom: 100px;
        right: 20px;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 50%;
        z-index: 1055; /* acima do conteúdo normal */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Ícone hamburguer com 3 listras */
    .btn-menu-mobile .menu-icon {
        display: inline-block;
        width: 24px;
        height: 16px;
        position: relative;
    }

    .btn-menu-mobile .menu-icon span {
        background: white;
        height: 3px;
        width: 100%;
        position: absolute;
        left: 0;
        transition: 0.3s;
        border-radius: 2px;
    }

    .btn-menu-mobile .menu-icon span:nth-child(1) {
        top: 0;
    }

    .btn-menu-mobile .menu-icon span:nth-child(2) {
        top: 6px;
    }

    .btn-menu-mobile .menu-icon span:nth-child(3) {
        top: 12px;
    }

    /* Garante que o offcanvas fique acima de todos os elementos */
    .offcanvas {
        z-index: 12000 !important; /* Aumenta o z-index, acima de headers, modais, etc */
        box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2); /* Sombra suave à esquerda */
        width: 80% !important;
    }

    /* Estilo interno do menu */
    .offcanvas .nav-link {
        font: normal normal 400 14px/17px Intro;
        padding: 20px 1rem;
    }

    .offcanvas .nav-link:hover {
        background-color: #f0f0f0;
        color: #0056b3;
    }

    /* Estilo do título e botão de fechar */
    .offcanvas-header {
        border-bottom: 1px solid #ddd;
    }

    .offcanvas-title {
        font: normal normal 500 16px/20px Intro;
        font-size: 1.25rem;
    }

    .offcanvas .btn-close {
        background: none;
        position: relative;
        width: 1.5rem;
        height: 1.5rem;
        opacity: unset;
    }

    .offcanvas .btn-close::before {
        content: "×";
        font-size: 3rem;
        position: absolute;
        bottom: -10px;
        left: 2px;
    }

    .zindex-zero {
        z-index: 0 !important;
    }

    /* ===================== */
    /* 1. FILHOS DO MENU     */
    /* ===================== */
    .menu-filho {
        padding-left: 15px;
        list-style: none;
    }

    .offcanvas ul li.nav-item {
        height: 60px;
    }

    .menu-filho > .nav-link::before {
        content: "▸"; /* marcador à esquerda */
        margin-right: 5px;
        color: #ccc;
    }

    /* ============================== */
    /* 2. ITENS COM SUBMENU (PAIS)   */
    /* ============================== */
    .menu-tem-filhos > .nav-link::after {
        content: "▸"; /* seta à direita */
        transition: transform 0.3s ease;
        float: right;
        margin-left: 10px;
        color: #fff;
    }

    /* ===================== */
    /* 3. RESET UL INTERNO   */
    /* ===================== */
    .nav ul {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Estilo inicial do botão com a seta */
    .nav-item .btn-toggle-submenu {
        font-size: 16px !important;
        transition: transform 0.3s ease !important;
        transform: rotate(0deg) !important; /* seta apontando para direita */
        width: 20% !important;
        height: 55px;
        display: flex !important;
        justify-content: center !important; /* horizontal */
        align-items: center !important; /* vertical */
        border: none !important;
        background: transparent !important;
    }

    /* Quando o botão estiver expandido */
    .nav-item .btn-toggle-submenu[aria-expanded="true"] {
        transform: rotate(90deg) !important; /* seta aponta para baixo */
    }
}