/* Вкладки: підключення динамічних змінних */
.wfh-mobile-menu-wrapper { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--m-bg, #ffffff); }
.wfh-mobile-tabs { display: flex; background: var(--m-bg, #ffffff); border-bottom: 1px solid var(--m-border, #eeeeee); }
.wfh-tab { flex: 1; text-align: center; padding: 15px 10px; cursor: pointer; font-weight: 600; font-family: var(--m-ff, inherit); font-size: 14px; text-transform: uppercase; color: var(--m-tc, #777); transition: all 0.3s; }
.wfh-tab.active { background: transparent; color: var(--m-tc-act, #333); border-bottom: 2px solid var(--m-tc-act, #333); }
.wfh-menu-content { display: none; flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }
.wfh-menu-content.active { display: block; }

.wfh-mobile-nav-list, .wfh-mobile-nav-list ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.wfh-mobile-nav-list li { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--m-border, #eeeeee); position: relative; }

/* ФІКС: Ховаємо подвійні стрілки від теми WoodMart, але залишаємо стрілку "Назад" */
.wfh-mobile-nav-list li:not(.wfh-menu-back-btn) > a::after, 
.wfh-mobile-nav-list li:not(.wfh-menu-back-btn) > a::before { 
    display: none !important; 
    content: none !important; 
}

.wfh-mobile-nav-list li > a { 
    flex: 1; 
    padding: var(--m-pad, 15px 20px);
    color: var(--m-tc, #333);
    text-decoration: none; 
    font-size: var(--m-fs, 16px);
    font-family: var(--m-ff);
    font-weight: var(--m-fw, 400);
    text-transform: var(--m-tt, none);
    display: flex; align-items: center; 
    gap: var(--m-gap, 10px);
    transition: color 0.3s;
}

.wfh-submenu-toggle {
    width: 54px; display: flex !important; align-items: center; justify-content: center; cursor: pointer; 
    border-left: 1px solid var(--m-border, #eee) !important; background: transparent; position: static !important; flex-shrink: 0;
    margin: 0 !important; padding: 0 !important;
}
.wfh-submenu-toggle i { display: inline-block !important; font-family: dashicons; font-size: 20px; line-height: 1; color: var(--m-arr-c, #333); font-style: normal; transition: transform 0.3s; }
.dashicons-arrow-right-alt2:before { content: "\f345"; }

body .wfh-mobile-menu-wrapper .wfh-submenu-toggle { display: flex !important; position: static !important; visibility: visible !important; opacity: 1 !important; }

/* ================================ */
/* 1. АКОРДЕОН (ОРИГІНАЛ)           */
/* ================================ */
[data-behavior="accordion"] .sub-menu { display: none; width: 100%; background: var(--m-bg, #f9f9f9); border-top: 1px solid var(--m-border, #eee); }
[data-behavior="accordion"] li.is-open > .wfh-submenu-toggle i { transform: rotate(90deg); }

/* ================================ */
/* 2. СЛАЙД (ОРИГІНАЛ)              */
/* ================================ */
[data-behavior="slide"] .wfh-menu-content { overflow: hidden !important; }
[data-behavior="slide"] .wfh-mobile-nav-list li { position: static !important; }

.wfh-slide-sub-menu {
    position: absolute !important; top: 0 !important; left: 100% !important; width: 100% !important; height: 100% !important;
    background: var(--m-bg, #fff) !important; z-index: 100 !important; overflow-y: none !important;
    transition: transform 0.3s ease-in-out !important; display: block !important; margin: 0 !important; padding: 0 !important;
    transform: translateX(0);
}
.wfh-slide-sub-menu.is-active { transform: translateX(-100%) !important; }

.wfh-menu-back-btn { width: 100%; border-bottom: 1px solid var(--m-border, #eee); }
.wfh-menu-back-btn a { background: transparent !important; font-weight: 700 !important; text-transform: uppercase; font-size: 14px; color: var(--m-tc, #333) !important; display: flex !important; align-items: center; padding: 15px 20px; }
.wfh-menu-back-btn a::before { content: "\f341"; font-family: dashicons; margin-right: 10px; font-size: 20px; color: var(--m-arr-c, #333); }

/* ІКОНКИ */
.wfh-menu-item-img { width: var(--m-ic-s, 18px); height: auto; flex-shrink: 0; }
.wfh-menu-item-svg {
    display: inline-block; width: var(--m-ic-s, 18px); height: var(--m-ic-s, 18px);
    background-color: var(--m-ic-c, currentColor);
    -webkit-mask-image: var(--wfh-ic-url); mask-image: var(--wfh-ic-url);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    flex-shrink: 0; transition: background-color 0.3s ease;
}
.wfh-mobile-nav-list li.current-menu-item > a .wfh-menu-item-svg,
.wfh-mobile-nav-list li.current-menu-ancestor > a .wfh-menu-item-svg { background-color: var(--m-ic-c-act, #2271b1); }

/* ================================ */
/* КОЛЬОРИ АКТИВНИХ ПУНКТІВ МЕНЮ    */
/* ================================ */
/* Базове меню: активний пункт та батьківський пункт (ancestor) */
.wfh-mobile-nav-list li.current-menu-item > a,
.wfh-mobile-nav-list li.current-menu-ancestor > a {
    color: var(--m-tc-act, #2271b1);
}

/* Фарбуємо стрілочку розгортання для активного батьківського пункту, щоб виглядало гармонійно */
.wfh-mobile-nav-list li.current-menu-item > .wfh-submenu-toggle i,
.wfh-mobile-nav-list li.current-menu-ancestor > .wfh-submenu-toggle i {
    color: var(--m-tc-act, #2271b1);
}

/* ================================ */
/* СТИЛІ ДЛЯ ПІДМЕНЮ (SUBMENU)      */
/* ================================ */

/* 1. Колір тексту в підменю */
.wfh-mobile-nav-list .sub-menu li > a,
.wfh-mobile-nav-list .wfh-slide-sub-menu li > a {
    color: var(--m-sub-tc, #555555);
}

/* 2. Активний колір тексту в підменю (вкл. батьківські пункти) */
.wfh-mobile-nav-list .sub-menu li.current-menu-item > a,
.wfh-mobile-nav-list .sub-menu li.current-menu-ancestor > a,
.wfh-mobile-nav-list .wfh-slide-sub-menu li.current-menu-item > a,
.wfh-mobile-nav-list .wfh-slide-sub-menu li.current-menu-ancestor > a {
    color: var(--m-sub-tc-act, #2271b1);
}

/* 3. Колір ліній між пунктами в підменю */
.wfh-mobile-nav-list .sub-menu li,
.wfh-mobile-nav-list .wfh-slide-sub-menu li {
    border-bottom: 1px solid var(--m-sub-border, #eeeeee);
}

/* 4. Фон підменю для АКОРДЕОНА (Оновлюємо існуючий рядок) */
[data-behavior="accordion"] .sub-menu { 
    background: var(--m-sub-bg, #f9f9f9); 
    border-top: 1px solid var(--m-sub-border, #eeeeee);
    padding-left: 20px !important;
}

/* 5. Фон підменю для СЛАЙДА (Оновлюємо існуючий рядок) */
.wfh-slide-sub-menu {
    background: var(--m-sub-bg, #ffffff) !important; 
}

/* 6. Стилізація кнопки "Назад" (в режимі Слайд) під стилі підменю */
.wfh-menu-back-btn { 
    border-bottom: 1px solid var(--m-sub-border, #eeeeee) !important; 
}
.wfh-menu-back-btn a { 
    color: var(--m-sub-tc, #333333) !important; 
}
.wfh-menu-back-btn a::before { 
    color: var(--m-sub-tc, #333333); 
}