/* ── WC Flyout Menu — Frontend ────────────────────────────────────── */

/* Drawer trigger button */
.wcfm-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--wcfm-trigger-bg, #1a1a2e);
    color: var(--wcfm-trigger-text, #fff);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background .15s, color .15s;
}
.wcfm-trigger:hover,
.wcfm-trigger:focus {
    background: var(--wcfm-trigger-hover-bg, #2a2a4e);
    color: var(--wcfm-trigger-hover-text, #fff);
}
.wcfm-trigger__icon { flex-shrink: 0; }

/* Backdrop */
.wcfm-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    transition: opacity .25s ease;
}
.wcfm-drawer-backdrop[hidden] { display: none; }
.wcfm-drawer-backdrop.is-open { opacity: 1; }

/* Drawer panel */
.wcfm-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(var(--wcfm-drawer-width, 360px), 95vw);
    background: var(--wcfm-sidebar-bg, #1a1a2e);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.3);
    transition: transform .3s ease;
}
.wcfm-drawer[hidden] { display: none; }
.wcfm-drawer--left  { left: 0;  transform: translateX(-100%); }
.wcfm-drawer--right { right: 0; transform: translateX(100%); }
.wcfm-drawer.is-open { transform: translateX(0); }

.wcfm-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--wcfm-flyout-bg, #fff);
    color: var(--wcfm-flyout-text, #333);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
.wcfm-drawer__title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.wcfm-drawer__close {
    background: none;
    border: none;
    color: var(--wcfm-flyout-text, #333);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: .7;
    transition: opacity .15s;
}
.wcfm-drawer__close:hover { opacity: 1; }

.wcfm-drawer__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar on the left (uses RTL trick) */
.wcfm-drawer--scroll-left .wcfm-drawer__body {
    direction: rtl;
}
.wcfm-drawer--scroll-left .wcfm-drawer__body > * {
    direction: ltr;
}

/* Make the menu inside the drawer fill it */
.wcfm-drawer .wcfm-nav {
    width: 100%;
}
.wcfm-drawer .wcfm-menu { border-radius: 0; }

/* ── Accordion mode inside drawer ─────────────────────────────────
   Children expand inline below their parent instead of popping out
   to the side. This keeps all levels visible within the drawer. */
.wcfm-drawer .wcfm-flyout,
.wcfm-drawer .wcfm-sub {
    position: static;
    display: none;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--wcfm-flyout-bg, #fff);
    animation: none;
}
.wcfm-drawer .wcfm-menu__item.open > .wcfm-flyout,
.wcfm-drawer .wcfm-flyout__item.open > .wcfm-sub,
.wcfm-drawer .wcfm-sub__item.open > .wcfm-sub {
    display: block;
}
/* Submenu items use flyout (light) colours inside the drawer */
.wcfm-drawer .wcfm-flyout__list,
.wcfm-drawer .wcfm-sub {
    padding: 0;
}
.wcfm-drawer .wcfm-flyout__link,
.wcfm-drawer .wcfm-sub__link {
    color: var(--wcfm-flyout-text, #333);
    padding-left: 32px;
}
.wcfm-drawer .wcfm-sub .wcfm-sub__link {
    padding-left: 48px;
}
.wcfm-drawer .wcfm-sub .wcfm-sub .wcfm-sub__link {
    padding-left: 64px;
}
.wcfm-drawer .wcfm-flyout__link:hover,
.wcfm-drawer .wcfm-sub__link:hover {
    background: var(--wcfm-flyout-hover-bg, #f4f7ff);
    color: var(--wcfm-flyout-hover-text, #1a1a2e);
}
.wcfm-drawer .wcfm-flyout__item,
.wcfm-drawer .wcfm-sub__item {
    border-bottom: 1px solid var(--wcfm-divider-color, rgba(0,0,0,.06));
}
.wcfm-drawer .wcfm-item__row .wcfm-sub__toggle {
    color: var(--wcfm-flyout-text, #333);
    border-left-color: rgba(0,0,0,.08);
}
.wcfm-drawer .wcfm-item__row .wcfm-sub__toggle:hover {
    background: rgba(0,0,0,.04);
}

/* Prevent body scroll when drawer open */
body.wcfm-drawer-open { overflow: hidden; }

/* Scoped reset: neutralise theme interference on ul, li, a */
.wcfm-nav *,
.wcfm-nav *::before,
.wcfm-nav *::after { box-sizing: border-box; }

.wcfm-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wcfm-nav li {
    margin: 0;
    padding: 0;
    float: none;
    display: block;
}

.wcfm-nav a {
    text-decoration: none;
    outline: none;
}

:root {
    --wcfm-sidebar-bg:   #1a1a2e;
    --wcfm-sidebar-text: #e8e8f0;
    --wcfm-sidebar-hover-bg:   #2a2a4e;
    --wcfm-sidebar-hover-text: #ffffff;
    --wcfm-flyout-bg:    #ffffff;
    --wcfm-flyout-text:  #333333;
    --wcfm-flyout-hover-bg:   #f4f7ff;
    --wcfm-flyout-hover-text: #1a1a2e;
    --wcfm-trigger-bg:         #1a1a2e;
    --wcfm-trigger-text:       #ffffff;
    --wcfm-trigger-hover-bg:   #2a2a4e;
    --wcfm-trigger-hover-text: #ffffff;
    --wcfm-font-size:    14px;
    --wcfm-menu-width:   220px;
    --wcfm-flyout-width: 260px;
    --wcfm-item-padding: 11px;
    --wcfm-drawer-width: 360px;
}

.wcfm-nav {
    position: relative;
    width: var(--wcfm-menu-width);
    font-family: inherit;
    font-size: var(--wcfm-font-size);
}

/* ── Sidebar list ────────────────────────────────────────────────── */
.wcfm-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--wcfm-sidebar-bg);
    border-radius: 6px;
    overflow: visible; /* must stay visible so flyouts aren't clipped */
}

.wcfm-menu__item {
    position: relative;
}

/* Row wrapper — flex container for link + toggle button */
.wcfm-menu__row {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid var(--wcfm-divider-color, rgba(255,255,255,.7));
}
.wcfm-menu__item:last-child .wcfm-menu__row { border-bottom: none; }

.wcfm-menu__link {
    display: flex;
    flex: 1;
    align-items: center;
    padding: var(--wcfm-item-padding) 16px;
    color: var(--wcfm-sidebar-text);
    text-decoration: none;
    transition: background .15s, color .15s;
    line-height: 1.3;
}

/* Toggle button — visible on all screens for click-to-open */
.wcfm-menu__toggle,
.wcfm-sub__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 14px;
    margin: 0;
    min-height: 0;
    color: var(--wcfm-sidebar-text);
    font-size: 18px;
    line-height: 0;
    transition: transform .2s, background .15s;
    border-left: 1px solid rgba(255,255,255,.08);
}
.wcfm-menu__toggle:hover,
.wcfm-sub__toggle:hover {
    background: rgba(255,255,255,.08);
}

/* Arrow rotation when open (all viewports) */
.wcfm-menu__item.open > .wcfm-menu__row > .wcfm-menu__toggle,
.wcfm-flyout__item.open > .wcfm-item__row > .wcfm-sub__toggle,
.wcfm-sub__item.open > .wcfm-item__row > .wcfm-sub__toggle {
    transform: rotate(90deg);
}

/* Hide the old pseudo-element arrow — replaced by real button */
.wcfm-menu__link::after { display: none; }

.wcfm-menu__item:first-child .wcfm-menu__row { border-radius: 6px 6px 0 0; overflow: hidden; }
.wcfm-menu__item:last-child  .wcfm-menu__row { border-radius: 0 0 6px 6px; overflow: hidden; }

.wcfm-menu__link:hover,
.wcfm-menu__item.has-flyout:hover > .wcfm-menu__row > .wcfm-menu__link {
    background: var(--wcfm-sidebar-hover-bg);
    color: var(--wcfm-sidebar-hover-text);
}

.wcfm-menu__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 10px;
}
.wcfm-menu__name { flex: 1; }

/* ── Flyout panel ────────────────────────────────────────────────── */
.wcfm-flyout {
    display: none; /* shown via :hover on desktop, .open on mobile */
    position: absolute;
    left: 100%;
    top: 0;
    width: var(--wcfm-flyout-width);
    background: var(--wcfm-flyout-bg);
    border: 1px solid #e0e0e0;
    border-radius: 0 6px 6px 6px;
    box-shadow: 4px 6px 20px rgba(0,0,0,.12);
    z-index: 9999;
    animation: wcfm-fadein .12s ease;
}

@keyframes wcfm-fadein {
    from { opacity: 0; transform: translateX(4px); }
    to   { opacity: 1; transform: translateX(0); }
}

.wcfm-menu__item.open > .wcfm-flyout { display: block; }

.wcfm-flyout__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.wcfm-flyout__item {
    position: relative;
    border-bottom: 1px solid var(--wcfm-divider-color, rgba(0,0,0,.06));
}
.wcfm-sub__item {
    border-bottom: 1px solid var(--wcfm-divider-color, rgba(0,0,0,.06));
}
.wcfm-sub__item:last-child { border-bottom: none; }
.wcfm-flyout__item:last-child { border-bottom: none; }

.wcfm-flyout__link {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    align-items: center;
    padding: var(--wcfm-item-padding) 16px;
    color: var(--wcfm-flyout-text);
    text-decoration: none;
    transition: background .12s;
    font-size: var(--wcfm-font-size);
}
.wcfm-flyout__link:hover { background: var(--wcfm-flyout-hover-bg); color: var(--wcfm-flyout-hover-text); }

/* Row wrapper inside flyout/sub items */
.wcfm-item__row {
    display: flex;
    align-items: stretch;
}
.wcfm-item__row .wcfm-sub__toggle {
    color: #666;
    border-left: 1px solid rgba(0,0,0,.08);
}
.wcfm-item__row .wcfm-sub__toggle:hover {
    background: rgba(0,0,0,.04);
}

/* ── Sub-level panels (depth 2+) ────────────────────────────────── */
.wcfm-sub {
    display: none; /* shown via :hover on desktop, .open on mobile */
    position: absolute;
    left: 100%;
    top: 0;
    width: var(--wcfm-flyout-width);
    background: var(--wcfm-flyout-bg);
    border: 1px solid #e0e0e0;
    border-radius: 0 6px 6px 6px;
    box-shadow: 4px 6px 20px rgba(0,0,0,.1);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 10000;
}

/* Each deeper level gets a slightly higher z-index */
.wcfm-sub .wcfm-sub { z-index: 10001; }
.wcfm-sub .wcfm-sub .wcfm-sub { z-index: 10002; }
.wcfm-sub .wcfm-sub .wcfm-sub .wcfm-sub { z-index: 10003; }

/* Open on click (.open) only */
.wcfm-flyout__item.open > .wcfm-sub,
.wcfm-sub__item.open > .wcfm-sub { display: block; }

/* Sub item containers */
.wcfm-sub__item { position: relative; }

/* Links inside any sub panel */
.wcfm-sub li a,
.wcfm-sub__link {
    display: flex;
    flex: 1 1 0%;
    min-width: 0;
    align-items: center;
    padding: var(--wcfm-item-padding) 16px;
    color: var(--wcfm-flyout-text);
    font-size: var(--wcfm-font-size);
    text-decoration: none;
    transition: background .12s;
}
.wcfm-sub li a:hover,
.wcfm-sub__link:hover { background: var(--wcfm-flyout-hover-bg); color: var(--wcfm-flyout-hover-text); }

/* ── Responsive: mobile accordion ─────────────────────── */
@media (max-width: 768px) {
    .wcfm-nav  { width: 100%; }
    .wcfm-menu { overflow: visible; }

    /* Larger tap targets on mobile */
    .wcfm-menu__toggle,
    .wcfm-sub__toggle {
        min-width: 48px;
    }
    .wcfm-sub__toggle {
        color: #666;
        border-left: 1px solid #eee;
        padding: 0 12px;
    }

    /*
     * Mobile accordion — panels always in flow, height-controlled only.
     * No visibility, no display toggling. overflow:hidden + max-height:0
     * hides content. :hover can't interfere because it only sets display
     * (already overridden by !important).
     */
    .wcfm-flyout,
    .wcfm-sub {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 0;
        overflow: hidden;
        box-shadow: none;
        border-radius: 0;
        border: none;
        background: rgba(0,0,0,.04);
        animation: none;
        transition: max-height .3s ease;
    }

    /* Open state — JS adds .open class */
    .wcfm-menu__item.open > .wcfm-flyout,
    .wcfm-flyout__item.open > .wcfm-sub,
    .wcfm-sub__item.open > .wcfm-sub {
        max-height: 2000px;
        border-top: 1px solid rgba(0,0,0,.08);
    }

    /* Progressive left indent per depth */
    .wcfm-item__row > .wcfm-flyout__link { padding-left: 28px; }
    .wcfm-item__row > .wcfm-sub__link    { padding-left: 28px; }

    .wcfm-sub .wcfm-item__row > .wcfm-sub__link         { padding-left: 44px; }
    .wcfm-sub .wcfm-sub .wcfm-item__row > .wcfm-sub__link     { padding-left: 60px; }
    .wcfm-sub .wcfm-sub .wcfm-sub .wcfm-item__row > .wcfm-sub__link { padding-left: 76px; }

    /* 48px minimum tap targets */
    .wcfm-menu__link,
    .wcfm-flyout__link,
    .wcfm-sub__link { min-height: 48px; }
}