/* ==========================================================================
   JX Mega Menu - mobilne menu kategorii (panel wysuwany)
   Zastepuje stary mechanizm openMobileMenu()/closeMobileMenu() z custom.css
   ========================================================================== */

/* --- desktop: panel "znika" z ukladu, menu wyglada jak dotad --- */
@media (min-width: 992px) {
    .jxmm-panel,
    .jxmm-panel__body {
        display: contents;
    }

    .jxmm-trigger,
    .jxmm-overlay,
    .jxmm-panel__header {
        display: none !important;
    }
}

/* --- mobile --- */
@media (max-width: 991px) {

    .jxmm-trigger {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    /* Hamburger rysowany w CSS - dziala nawet, gdy FontAwesome sie nie zaladuje.
       Ikona <i> z szablonu jest wtedy zbedna. */
    .jxmm-trigger .fa-bars {
        display: block;
        width: 26px;
        height: 2px;
        background: #009899;
        font-size: 0;
        color: transparent;
    }

    .jxmm-trigger .fa-bars::before,
    .jxmm-trigger .fa-bars::after {
        content: "";
        position: absolute;
        left: 9px;
        width: 26px;
        height: 2px;
        background: #009899;
    }

    .jxmm-trigger .fa-bars::before {
        top: 14px;
    }

    .jxmm-trigger .fa-bars::after {
        top: 28px;
    }

    .jxmm-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .jxmm-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    .jxmm-panel {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        display: flex;
        flex-direction: column;
        width: 86%;
        max-width: 340px;
        height: 100%;
        background: #fff;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .18);
        transform: translateX(-100%);
        transition: transform .25s ease;
        text-align: left;
        overscroll-behavior: contain;
    }

    .jxmm-panel.is-open {
        transform: translateX(0);
    }

    .jxmm-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding: 8px 8px 8px 16px;
        border-bottom: 1px solid #ebebeb;
    }

    .jxmm-panel__title {
        font-size: 15px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .jxmm-panel__close {
        margin-left: auto;
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent;
        border: 0;
        font-size: 30px;
        line-height: 1;
        color: #7a7a7a;
        cursor: pointer;
    }

    .jxmm-panel__body {
        flex: 1 1 auto;
        padding-top: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 24px;
    }

    body.jxmm-open {
        overflow: hidden;
    }

    /* menu wewnatrz panelu - nadpisuje stare reguly z custom.css */
    .mobile .jxmm-panel ul.jxmegamenu.clearfix.top-level-menu.jxmegamenu_item.jxmen,
    .jxmm-panel ul.jxmegamenu.clearfix.top-level-menu.jxmegamenu_item.jxmen {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        background: none;
        box-shadow: none;
        animation: none;
        list-style: none;
    }

    .mobile .jxmm-panel ul.jxmen > li,
    .jxmm-panel ul.jxmen > li {
        position: relative;
        width: 100% !important;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #f0f0f0;
        text-align: left;
        float: none;
    }

    .jxmm-panel ul.jxmen > li > a,
    .jxmm-panel ul.jxmen > li > span {
        display: block;
        padding: 10px 52px 10px 16px;
        color: #232323;
        font-size: 15px;
        line-height: 1.3;
        text-decoration: none;
    }

    .jxmm-panel ul.jxmen > li > a p,
    .jxmm-panel .is-simplemenu a p,
    .jxmm-panel .is-megamenu a p {
        margin: 0;
        line-height: 1.3;
    }

    /* puste akapity zostawione przez szablon menu */
    ul.jxmen > p:empty,
    ul.jxmen > li:empty {
        display: none;
    }

    /* przycisk rozwijania (dodawany przez JS) */
    .jxmm-submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 100%;
        background: transparent;
        border: 0;
        border-left: 1px solid #f0f0f0;
        color: #7a7a7a;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    .jxmm-submenu-toggle::before {
        content: "+";
    }

    .jxmm-panel li.jxmm-expanded > .jxmm-submenu-toggle::before {
        content: "\2212";
    }

    /* podmenu: zwiniete, statyczne, bez pozycjonowania z wersji desktop */
    .jxmm-panel .is-simplemenu,
    .jxmm-panel .is-megamenu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        padding: 0;
        background: #fafafa;
        border: 0;
        box-shadow: none;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .jxmm-panel li.jxmm-expanded > .is-simplemenu,
    .jxmm-panel li.jxmm-expanded > .is-megamenu {
        display: block !important;
    }

    .jxmm-panel .is-megamenu .megamenu-row,
    .jxmm-panel .is-megamenu .megamenu-col {
        display: block;
        width: 100% !important;
        max-width: 100%;
        margin: 0;
        padding: 0;
        flex: none;
    }

    .jxmm-panel .is-simplemenu li,
    .jxmm-panel .is-megamenu li {
        width: 100% !important;
        margin: 0;
        list-style: none;
        border-top: 1px solid #f0f0f0;
    }

    .jxmm-panel .is-simplemenu a,
    .jxmm-panel .is-megamenu a {
        display: block;
        padding: 9px 16px 9px 32px;
        color: #454545;
        font-size: 14px;
        text-decoration: none;
    }

    .jxmm-panel .is-megamenu img,
    .jxmm-panel .is-simplemenu img {
        max-width: 100%;
        height: auto;
    }

    /* blok z blogiem, FAQ i terminologia - w szablonie jest to <div>
       wewnatrz <ul>, wiec wymaga wlasnych regul */
    .jxmm-panel .submenu-jx {
        display: block;
        width: 100%;
        border-top: 0px solid #ebebeb;
    }

    .jxmm-panel .submenu-jx > li {
        display: flex;
        align-items: center;
        width: 100% !important;
        margin: 0;
        padding: 0 0 0 16px;
        border-bottom: 1px solid #f0f0f0;
        list-style: none;
    }

    .jxmm-panel .submenu-jx > li > i {
        flex: 0 0 auto;
        width: 22px;
        color: #009899;
        font-size: 15px;
        text-align: center;
    }

    .jxmm-panel .submenu-jx > li > a {
        flex: 1 1 auto;
        display: block;
        padding: 10px 16px 10px 8px;
        color: #232323;
        font-size: 15px;
        line-height: 1.3;
        text-decoration: none;
    }

    .jxmm-panel .submenu-jx > li > a p {
        margin: 0;
    }

    /* stary przycisk zamykania wstrzykiwany przez custom.js */
    .jxmm-panel ul.jxmen > li.close {
        display: none;
    }
}

/* Puste <p></p> i <li></li>, ktore szablon menu zostawia po pozycjach
   blog / faq / terminologia - widoczne jako nadmiarowe odstepy. */
ul.jxmegamenu.jxmen > p:empty,
ul.jxmegamenu.jxmen > li:empty {
    display: none !important;
}

.mobile .jxmegamenu.clearfix.top-level-menu.jxmegamenu_item.jxmen li{
    margin: 0px !important;
}