/* =========================
   MENU & MEGAMENU — #sp-menu
   ========================= */

/* Nível 1 */
#sp-menu .sp-megamenu-parent > li > a,
#sp-menu .sp-megamenu-parent > li > span {
    font-family: var(--font-intro-medium) !important;
    font-size: 16px;
    line-height: 20px;
}

/* Dropdown base */
#sp-menu .sp-megamenu-parent .sp-dropdown {
    z-index: 1500 !important;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-items {
    margin-bottom: 15px !important;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner > .row:not(:first-child) {
    margin-top: 5px !important;
}

#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-family: var(--font-inter) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #000000;
    display: flex;
    align-items: center;
    padding: 6px 0 !important;
}

/* Container do mega */
#sp-menu .mega-menu-coop .sp-dropdown-inner {
    border-radius: 10px;
    line-height: 1.5;
    border-color: var(--ocb-azul-marinho);
}

/* Títulos/colunas do mega + subníveis */
#sp-menu .sp-megamenu-parent .sp-mega-group > li > a,
#sp-menu .sp-megamenu-parent .sp-group-title,
#sp-menu .outros-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
#sp-menu .menu-seja-coop .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
#sp-menu .sp-menu-item.sp-has-child.mega-menu-coop.com-sub-menu .sp-menu-item a {
    font-family: var(--font-intro-light) !important;
    font-size: 18px;
    text-transform: none;
    margin-bottom: 0 !important;
}

/* Peso leve nos itens de grupo */
#sp-menu .sp-megamenu-parent .sp-mega-group > li > a {
    font-weight: 300 !important;
}

/* Remoções/ajustes visuais */
#sp-menu .menu-ocb-lista h3.sp-module-title {
    display: none !important;
}

/* Linha inferior da seção topo (era #4d80cf) */
#sp-menu .sp-page-builder .page-content #section-id-1671257991719 {
    border: none !important;
    border-bottom: 2px solid var(--ocb-azul-ceu) !important;
}

/* Imagens/títulos no mega */
#sp-menu .mega-menu-coop img {
    height: 27px;
}

#sp-menu .mega-menu-coop .image-title {
    display: none !important;
}

/* =========================
   FOOTER MOBILE — #sp-menu
   ========================= */
#sp-menu .footer-mobile .fa,
#sp-menu .footer-mobile .fab,
#sp-menu .footer-mobile .far,
#sp-menu .footer-mobile .fas {
    color: #F7F3F3 !important;
    font-size: 19px !important;
}

#sp-menu .footer-mobile .sppb-addon-content {
    font-family: var(--font-intro-medium) !important;
    font-size: 9px !important;
    line-height: 15px !important;
    font-style: normal !important;
    font-variant: normal !important;
    letter-spacing: 0 !important;
    opacity: 1;
}

#sp-menu .footer-mobile li a {
    text-align: left !important;
    font-family: var(--font-inter) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    color: var(--ocb-branco) !important;
    opacity: 0.7 !important;
}

/* Grid 2 col no footer mobile */
#sp-menu .footer-mobile .footer-mobile-nav .sppb-row-column {
    max-width: 50% !important;
    flex-basis: 50% !important;
}

#sp-menu .footer-mobile .footer-mobile-nav .sppb-row-column .footer-mobile-nav1 ul {
    padding-left: 20px !important;
}

#sp-menu .footer-mobile .footer-mobile-nav .sppb-row-column .footer-mobile-nav2 ul {
    padding-right: 20px !important;
}

/* =========================
   ALINHAMENTO CENTRAL — #sp-menu
   ========================= */
#sp-menu .sp-column {
    display: flex !important;
    justify-content: center !important; /* centraliza o <ul> */
}

#sp-menu .sp-column nav {
    display: flex !important;
    width: 100%;
    justify-content: center;
}

#sp-menu ul.sp-megamenu-parent {
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

#sp-menu ul.sp-megamenu-parent > li {
    margin: 0;
}

/* =========================
   RESPONSIVO — #sp-menu
   ========================= */

/* 1400 */
@media (max-width: 1400px) {
    #sp-menu .sp-megamenu-parent {
        margin-left: 0;
        gap: 20px !important;
    }
}

/* Quebras agrupadas: 1218/1140/1095 */
@media (max-width: 1218px), (max-width: 1140px), (max-width: 1095px) {
    #sp-menu .sp-megamenu-parent {
        margin-left: 0;
        gap: 5px !important;
    }
}

/* <= 992 */
@media screen and (max-width: 992px) {
    .offcanvas-menu {
        ext-align: left;
    }

    .offcanvas-menu .d-flex.align-items-center {
        justify-content: center !important;
        align-content: center !important;
        height: 80px !important;
        position: relative;
        z-index: 9999 !important;
        padding-top: 1rem !important;
    }

    .offcanvas-menu .offcanvas-inner {
        padding: 0 !important;
    }

    .offcanvas-menu .offcanvas-inner .sp-module:not(:last-child) {
        padding: 0 !important;
        margin-bottom: 0 !important;
        margin-right: 0 !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu,
    .offcanvas-menu .offcanvas-inner ul.menu li,
    .offcanvas-menu .offcanvas-inner ul.menu li ul,
    .offcanvas-menu .offcanvas-inner ul.menu li ul li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu {
        margin-top: 60px !important;
    }

    .offcanvas-menu.border-menu .offcanvas-inner ul.menu > li {
        border-bottom: 0 !important;
    }

    /* Regra geral para a e span (menos image-title) */
    .offcanvas-menu .offcanvas-inner ul.menu li a,
    .offcanvas-menu .offcanvas-inner ul.menu li span:not(.image-title),
    .offcanvas-menu .offcanvas-inner ul.menu li ul li a,
    .offcanvas-menu .offcanvas-inner ul.menu li ul li span:not(.image-title) {
        text-align: left !important;
        opacity: 1 !important;
        margin: 0 !important;
        display: block !important;
        font-family: var(--font-intro-medium) !important;
        font-size: 16px !important;
        line-height: 20px !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
        padding-right: 26px !important;
    }

    /* Bordas e padding normal, exceto image-title */
    .offcanvas-menu .offcanvas-inner ul.menu li a,
    .offcanvas-menu .offcanvas-inner ul.menu li span:not(.image-title) {
        border-bottom: 1px solid rgba(138, 128, 152, 0.2) !important;
        padding-left: 26px !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu li ul li a,
    .offcanvas-menu .offcanvas-inner ul.menu li ul li span:not(.image-title) {
        padding-left: 36px !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu li ul li ul li a,
    .offcanvas-menu .offcanvas-inner ul.menu li ul li ul li span:not(.image-title) {
        padding-left: 46px !important;
    }

    /* Regras específicas para image-title */
    .offcanvas-menu .offcanvas-inner ul.menu li a span.image-title {
        padding: 0 !important;
        border: 0 !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu li span .menu-toggler,
    .offcanvas-menu .offcanvas-inner ul.menu li a .menu-toggler {
        right: 0 !important;
        padding: 18px 25px !important;
        position: absolute !important;
        top: 50% !important;
        cursor: pointer !important;
        transform: translateY(-50%) !important;
        -webkit-transform: translateY(-50%) !important;
    }

    /* Garante que cada item pai tenha posição relativa */
    .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent,
    .offcanvas-menu .offcanvas-inner ul.menu li.menu-parent,
    .offcanvas-menu .offcanvas-inner ul.menu li.menu-parent > .nav-header,
    .offcanvas-menu .offcanvas-inner ul.menu li.menu-parent > a {
        position: relative !important;
    }

    /* Ajuste do toggler em qualquer nível */
    .offcanvas-menu .offcanvas-inner ul.menu li.menu-parent > .nav-header .menu-toggler,
    .offcanvas-menu .offcanvas-inner ul.menu li.menu-parent > a .menu-toggler {
        position: absolute !important;
        top: 50% !important;
        right: 15px !important;
        transform: translateY(-50%) !important;
        -webkit-transform: translateY(-50%) !important;
        cursor: pointer !important;
        padding: 0 !important;
        line-height: 1 !important;
        border: 0 !important;
    }

    .offcanvas-menu .offcanvas-inner ul.menu li img {
        display: none !important;
    }

    .offcanvas-menu .mod-sppagebuilder ul {
        margin: 0 auto !important; /* centraliza a UL no contêiner */
        padding: 0 !important;
        display: flex !important; /* coloca os <li> lado a lado */
        justify-content: space-around !important; /* centraliza os itens */
        align-items: center !important;
        list-style: none !important;
    }

    .offcanvas-menu .mod-sppagebuilder #nav-menu {
        flex-direction: column !important;
    }

    .offcanvas-menu .mod-sppagebuilder ul > li {
        height: 36px !important;
        display: flex !important;
        align-items: center !important; /* centraliza verticalmente */
        justify-content: center !important; /* centraliza horizontalmente */
    }

    .offcanvas-menu .mod-sppagebuilder ul > li > a .fa-brands,
    .offcanvas-menu .mod-sppagebuilder ul > li > a .fab {
        color: var(--ocb-branco) !important;
        font-size: 26px !important;
        margin: 0 !important; /* zera a margem para não desalinhar */
    }

    /* Cor padrão dos links do menu mobile */
    .offcanvas-menu .mod-sppagebuilder .sppb-link-list-wrap #nav-menu li a {
        color: var(--ocb-branco) !important;
    }

    /* Hover, focus, active e item ativo */
    .offcanvas-menu .mod-sppagebuilder .sppb-link-list-wrap #nav-menu li a:hover,
    .offcanvas-menu .mod-sppagebuilder .sppb-link-list-wrap #nav-menu li a:focus,
    .offcanvas-menu .mod-sppagebuilder .sppb-link-list-wrap #nav-menu li a:active,
    .offcanvas-menu .mod-sppagebuilder .sppb-link-list-wrap #nav-menu li.sppb-active a {
        color: var(--ocb-azul-ceu) !important;
    }


    /* Botão hambúrguer respeitando variáveis */
    .offcanvas-menu .mod-sppagebuilder .sppb-responsive-bars {
        background-color: var(--ocb-azul-marinho) !important;
    }

    .offcanvas-menu .mod-sppagebuilder .sppb-responsive-bar {
        color: var(--ocb-azul-ceu) !important;
    }

    .offcanvas-menu .mod-sppagebuilder .sppb-responsive-bars.open {
        background-color: var(--ocb-azul-ceu) !important;
    }

    .offcanvas-menu .mod-sppagebuilder .sppb-responsive-bars.open .sppb-responsive-bar {
        color: var(--ocb-branco) !important;
    }

    /* Container: tudo na mesma linha e centralizado */
    .offcanvas-menu .mod-sppagebuilder .sppb-icons-group-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Cada item com caixa 26x26 e ícone no centro */
    .offcanvas-menu .mod-sppagebuilder .sppb-icons-group-list li,
    .offcanvas-menu .mod-sppagebuilder .sppb-icons-group-list li a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        width: 26px !important;
        height: 26px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* Tamanho do glifo do ícone (Font Awesome) */
    .offcanvas-menu .mod-sppagebuilder .sppb-icons-group-list li a .fab,
    .offcanvas-menu .mod-sppagebuilder .sppb-icons-group-list li a .far,
    .offcanvas-menu .mod-sppagebuilder.sppb-icons-group-list li a .fas {
        font-size: 26px !important; /* ajuste fino dentro da caixa 26x26 */
        line-height: 1 !important;
        color: var(--ocb-branco) !important; /* branco do seu palette */
    }

    #sp-menu .header-ocb.sescoop,
    #sp-menu .header-ocb.unidades,
    #sp-menu .menu-ocb-lista h3.sp-module-title,
    #sp-menu .menu-ocb-lista .sp-megamenu-wrapper.d-flex {
        display: none !important;
    }

    #sp-menu #sp-top-header {
        display: block !important;
    }

    #sp-menu #sp-top-header .top-ocb .sp-page-builder .page-content #section-id-1671257991719 {
        display: none !important;
    }

    #sp-menu #sp-top-header .top-ocb .sp-pagebuilder-row,
    #sp-menu #sp-top-header .top-ocb .sppb-row {
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }

    #sp-menu .offcanvas-menu .logo-image-phone {
        margin: 0 50px 0 10px !important;
    }

    #sp-menu .header-ocb .fa-solid.lupa-direita,
    #sp-menu .menu-ocb .fa-solid.lupa-direita {
        background-color: inherit !important;
    }

    #sp-menu .menu-ocb .row {
        height: 70px !important;
    }

    #sp-menu #sp-header #sp-logo .burger-icon {
        display: block !important;
    }

    #sp-menu #sp-header {
        height: 70px !important;
        border-bottom: 1px solid var(--ocb-azul-ceu) !important; /* era #4D80CF */
    }

    #sp-menu #sp-header .sp-module {
        margin-right: 20px;
    }
}

/* =========================
   ANO INTERNACIONAL DO COOP — #sp-menu
   ========================= */
#sp-menu .menu-ano-internacional {
    padding: 0 !important;
}

#sp-menu .menu-ano-internacional .image-title {
    display: none;
}

#sp-menu .menu-ano-internacional-img {
    height: 42px !important;
}

@media (max-width: 768px) {
    #sp-menu .menu-ano-internacional .image-title {
        display: block !important;
        color: #8A8098 !important;
    }

    #sp-menu .menu-ano-internacional-img {
        display: none !important;
    }
}

/* =========================================================
   ===== PATCH: stacking & pequenos fixes (acrescentado) ===
   ========================================================= */

/* 1) Megamenu sempre acima do breadcrumb (que às vezes tem z-index alto) */
#sp-menu .sp-megamenu-parent {
    position: relative !important;
    z-index: 99 !important; /* acima do breadcrumb mesmo quando sticky */
    overflow: visible !important;
}

#sp-menu .sp-megamenu-parent .sp-dropdown {
    position: absolute !important;
    z-index: 12000 !important; /* garante dropdown por cima de tudo do header */
    overflow: visible !important;
}

/* 2) Evitar que wrappers do header “cortem” o dropdown (stacking context) */
#sp-header,
.header-sticky,
.site-header,
.sp-megamenu-wrapper {
    overflow: visible !important;
    transform: none !important; /* remove novo stacking context criado por transform */
    will-change: auto !important;
}

/* 3) Corrigir bug de digitação no mobile (ext-align -> text-align) sem alterar o bloco original */
@media screen and (max-width: 992px) {
    .offcanvas-menu {
        text-align: left; /* override para corrigir */
    }
}