.sppb-animated { opacity: 1 !important; visibility: visible !important; animation: none !important; }

/* BRUTAL VISIBILITY OVERRIDE FOR OVERLAY */
.sidebar-menu .sppb-addon, 
.sidebar-menu .sppb-addon-feature, 
.sidebar-menu .sppb-addon-text, 
.sidebar-menu .sppb-addon-module, 
.sidebar-menu ul.menu,
.sidebar-menu li {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    animation: none !important;
    transform: none !important;
}

.sppb-animated { opacity: 1 !important; visibility: visible !important; animation: none !important; }

.sppb-animated { opacity: 1 !important; visibility: visible !important; animation: none !important; }


/* JOOMLA 4 FIX: Offcanvas Master Fix Matching Original Design */

/* Kill horizontal flex for the entire offcanvas */
.offcanvas-inner .sppb-addon-module ul.nav,
.offcanvas-inner ul.nav.menu,
.offcanvas-inner ul.menu,
.offcanvas-inner .mod-languages ul.lang-inline {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Base list item tight spacing */
.offcanvas-inner .sppb-addon-module ul.nav > li,
.offcanvas-inner ul.nav.menu > li,
.offcanvas-inner ul.menu > li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0px !important; /* Very tight spacing like original */
    list-style: none !important;
    position: relative;
}

/* Master font styling for all offcanvas links */
.offcanvas-inner .sppb-addon-module ul.nav > li > a,
.offcanvas-inner ul.nav.menu > li > a,
.offcanvas-inner ul.menu > li > a,
.offcanvas-inner .mod-languages ul.lang-inline li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 700 !important; /* Bold like original */
    color: #40a0ce !important; /* Constra Blue */
}

/* Proper Submenu styling - allowing JS toggling */
/* NOTE: We removed the display !important here so JS can control display:none/display:block */
.offcanvas-inner ul.menu-child {
    flex-direction: column;
    padding-left: 20px !important;
    margin-top: 0px !important;
}

.offcanvas-inner ul.menu-child > li {
    width: 100% !important;
    list-style: none !important;
}

.offcanvas-inner ul.menu-child > li > a {
    font-weight: normal !important; /* Submenus are usually lighter font weight */
    font-size: 15px !important;
}

/* Specific styling for the + icon to perfectly match original Image 1 */
.offcanvas-inner ul.nav.menu .menu-toggler {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 22px !important;
    height: 22px !important;
    background-color: #7b8084 !important; /* Gray circle */
    border-radius: 50% !important;
    color: #2b2e31 !important; /* Dark text inside */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 100 !important;
}

/* Mod languages specific overrides - Stack vertically, no box */
.offcanvas-inner .mod-languages {
    margin-top: 25px !important;
    display: block !important;
    width: 100% !important;
}

.offcanvas-inner .mod-languages ul.lang-inline {
    display: flex !important;
    flex-direction: column !important; /* Match original EUS/ES stack */
    gap: 0px !important;
}

.offcanvas-inner .mod-languages ul.lang-inline li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important; /* Kill the white box on ES */
}

.offcanvas-inner .mod-languages ul.lang-inline li a {
    background: transparent !important; /* Kill any background */
}