/* =========================================================
   PanPodloga.pl — Mobile Menu Modern Redesign
   Organic Modern Layout (Tabs + Search + Nav)
   ========================================================= */

:root {
    --mm-bg: #ffffff;
    --mm-text: #1e293b;
    --mm-text-muted: #64748b;
    --mm-border: #f1f5f9;
    --mm-pill-bg: #f8fafc;
}

/* 1. CONTAINER & DRAWER */
.mobile-sidebar {
    background-color: var(--mm-bg) !important;
    border-top-left-radius: 30px !important;
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.1) !important;
    width: 335px !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 99999 !important;
    /* Above FAB and headers */
}

/* Ensure backdrop is also on top but under the menu */
.mfp-bg.mfp-ready {
    z-index: 99998 !important;
}

.mfp-wrap.mfp-ready {
    z-index: 99999 !important;
}

/* Ensure the wrapper also respects the width + solid bg */
.off-canvas-right .mfp-content,
.off-canvas-left .mfp-content {
    width: 335px !important;
    background: #fff !important;
}

.mobile-sidebar .sidebar-menu {
    padding: 0 !important;
}

/* 2. TABS (Kategorie / Menu) */
.sidebar-menu-tabs {
    background: #fff !important;
    padding: 10px 20px 0 !important;
    border-bottom: 1px solid var(--mm-border) !important;
    justify-content: space-around !important;
}

.sidebar-menu-tabs__tab {
    flex: 1 !important;
    text-align: center !important;
}

.sidebar-menu-tabs__tab-link {
    padding: 15px 0 !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    /* Slightly increased */
    letter-spacing: 0.08em !important;
    color: #cbd5e1 !important;
    /* Lighter unselected color */
    text-transform: uppercase !important;
    position: relative !important;
    transition: color 0.3s ease !important;
}

.sidebar-menu-tabs__tab.active .sidebar-menu-tabs__tab-link {
    color: var(--mm-text) !important;
}

.sidebar-menu-tabs__tab.active .sidebar-menu-tabs__tab-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--pp-primary);
}

/* Ensure the active tab indicator is very bold */
.sidebar-menu-tabs__tab {
    background: transparent !important;
}

.sidebar-menu-tabs__tab.active {
    background: #fff !important;
}

/* 3. SEARCH BAR */
.mobile-sidebar .header-search-form {
    padding: 20px !important;
    background: transparent !important;
}

.mobile-sidebar .searchform-wrapper {
    background-color: var(--mm-pill-bg) !important;
    border: 1px solid var(--mm-border) !important;
    border-radius: 999px !important;
    padding: 2px 5px !important;
}

.mobile-sidebar .search-field {
    background: transparent !important;
    border: none !important;
    height: 48px !important;
    padding-left: 20px !important;
    font-size: 15px !important;
    color: var(--mm-text) !important;
    font-family: var(--font-heading) !important;
}

.mobile-sidebar .ux-search-submit {
    background: transparent !important;
    color: var(--mm-text) !important;
    padding: 0 15px !important;
    border: none !important;
}

.mobile-sidebar .searchform-wrapper .icon-search::before {
    font-size: 20px !important;
    font-weight: bold !important;
}

/* Placeholder refinement */
.mobile-sidebar .search-field::placeholder {
    color: #94a3b8 !important;
    font-size: 15px !important;
}

/* 4. MENU ITEMS */
.mobile-sidebar .nav-sidebar>li>a {
    padding: 15px 20px !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--mm-text) !important;
    border-bottom: 1px solid #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

/* Ensure text doesn't push arrow off for long menu items */
.mobile-sidebar .nav-sidebar>li>a>*:not(.pp-menu-icon):not(i):not([class*="icon"]) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

/* Green highlight for "Promocje i Outlet" */
.mobile-sidebar .nav-sidebar>li.pp-menu-promo>a {
    color: #059669 !important;
}

.mobile-sidebar .nav-sidebar>li.pp-menu-promo .pp-menu-icon {
    background-color: #e6f6ed !important;
    color: #059669 !important;
}

/* Light green background row for promo items */
.mobile-sidebar .nav-sidebar>li.pp-menu-promo {
    background-color: #f0fdf4 !important;
}

/* Hide stray Flatsome elements that break flex layout */
.mobile-sidebar .nav-sidebar>li>a>.button,
.mobile-sidebar .nav-sidebar>li>a>.count,
.mobile-sidebar .nav-sidebar>li>a>img:not(.pp-menu-icon img) {
    display: none !important;
}

/* Fix double icon/arrow misalignment */
.mobile-sidebar .nav-sidebar li>a .icon-angle-right {
    display: none !important;
    /* Disable default Flatsome arrow */
}

.pp-menu-icon {
    width: 42px;
    height: 42px;
    margin-right: 18px;
    background-color: #f8fafc;
    border-radius: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Menu text span — takes available space */
.pp-menu-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Toggle arrow button — Flatsome's native <button class="toggle"> sibling of <a> */
.mobile-sidebar .nav-sidebar>li.has-child {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.mobile-sidebar .nav-sidebar>li.has-child>a {
    flex: 1 1 auto !important;
    border-bottom: none !important;
    border-right: 1px solid #f1f5f9 !important;
    transition: background-color 0.15s ease !important;
}

/* Hover/active on TEXT link — independent from arrow */
.mobile-sidebar .nav-sidebar>li.has-child>a:hover,
.mobile-sidebar .nav-sidebar>li.has-child>a:active {
    background-color: #f8fafc !important;
}

/* Style the Flatsome toggle button (arrow >) */
.mobile-sidebar .nav-sidebar>li.has-child>.toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hover/active on ARROW — independent from text */
.mobile-sidebar .nav-sidebar>li.has-child>.toggle:hover,
.mobile-sidebar .nav-sidebar>li.has-child>.toggle:active {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
}

.mobile-sidebar .nav-sidebar>li.has-child>.toggle i {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* 4b. SUBCATEGORY SLIDE PANEL */
.mobile-sidebar li.nav-slide-header {
    border-bottom: 1px solid var(--mm-border) !important;
    padding: 0 !important;
}

.mobile-sidebar li.nav-slide-header button {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    color: var(--mm-text) !important;
    letter-spacing: 0.03em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px 20px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
}



/* Subcategory items — clean, no icons, good spacing */
.mobile-sidebar .nav-sidebar .children>li>a {
    padding: 14px 20px 14px 24px !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: var(--mm-text) !important;
    border-bottom: 1px solid #f8fafc !important;
    display: block !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* 5. BOTTOM NAVIGATION (Fixed Icons) */
/* We will likely need a hook to inject this or restyle the account-item */
.mobile-sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
    border-top: 1px solid var(--mm-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100 !important;
}

.pp-mm-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
}

.pp-mm-footer-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mm-text);
    border: 1px solid var(--mm-border);
    transition: all 0.2s ease;
}

.pp-mm-footer-icon.pp-mm-highlight {
    background: #e6f6ed;
    color: #059669;
    border-color: #d1fae5;
}

.pp-mm-footer-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.pp-mm-footer-label.pp-mm-label-active {
    color: #059669;
    font-weight: 900;
}

/* Hide original account link in menu if we have the footer */
.mobile-sidebar .account-item {
    display: none !important;
}

/* Fix for Flatsome "Close" button overlaying the tabs */
.mobile-sidebar .mfp-close {
    top: 5px !important;
    right: 5px !important;
    color: var(--mm-text-muted) !important;
    font-size: 24px !important;
}