/**
 * Sliding Multi-Layer Menu Styles - ELKO Style
 * Using same approach as mini-cart for reliable animations
 *
 * @package Storedash_Checkout
 * @since 2.1.0
 */

/* Menu Trigger Button - Elementor customizable */
.storedash-menu-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    /* Allow Elementor to control all styling */
    -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
    background-color: transparent; /* Default, can be overridden by Elementor */
    color: #1f2937; /* Default color for icon inheritance, Elementor can override */
    font-size: 16px; /* Default font size */
}

.storedash-menu-trigger:hover {
    opacity: 0.8;
}

.storedash-menu-trigger:focus,
.storedash-menu-trigger:active,
.storedash-menu-trigger:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background-color: inherit !important; /* Prevent browser default active background */
}

/* Remove any browser default button styling */
.storedash-menu-trigger::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Active state (when menu is open) - no visual change */
.storedash-menu-trigger.active {
    /* Maintain same appearance when menu is open */
    /* Elementor styles still apply */
}

/* ============================================
 * Trigger Icon and Text Wrapper Styles
 * ============================================ */
.storedash-menu-trigger .storedash-trigger-text,
.storedash-menu-trigger .storedash-trigger-icon-wrap {
    display: inline-flex;
    align-items: center;
}

.storedash-menu-trigger .storedash-trigger-icon-wrap {
    line-height: 0; /* Remove extra space around icon */
}

/* Trigger icon element styles (SVG, Font Awesome, or Elementor icons) */
/* Default size is 24px, can be overridden by Elementor's trigger_icon_size control */
.storedash-menu-trigger .storedash-trigger-icon {
    display: inline-block !important;
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: inherit;
    fill: currentColor;
    line-height: 1;
}

/* SVG icons inside the trigger - must have explicit dimensions */
.storedash-menu-trigger .storedash-trigger-icon-wrap svg,
.storedash-menu-trigger svg.storedash-trigger-icon {
    display: block !important;
    width: 24px;
    height: 24px;
    fill: currentColor;
    color: inherit;
}

/* Ensure SVG paths inherit fill color */
.storedash-menu-trigger .storedash-trigger-icon-wrap svg path,
.storedash-menu-trigger svg.storedash-trigger-icon path {
    fill: currentColor !important;
}

/* Font Awesome icons (i elements) */
.storedash-menu-trigger .storedash-trigger-icon-wrap i,
.storedash-menu-trigger i.storedash-trigger-icon {
    display: inline-block !important;
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: inherit;
    line-height: 1;
    text-align: center;
}

/* Ensure icon content isn't hidden by any inherited styles */
.storedash-menu-trigger .storedash-trigger-icon-wrap * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
 * Responsive Trigger Type Display
 * Controls visibility of icon/text per breakpoint
 *
 * NOTE: Elementor's prefix_class does NOT add breakpoint-suffixed classes.
 * The classes are added manually in MenuWidget::add_responsive_trigger_classes()
 *
 * Wrapper will have ALL three classes simultaneously:
 * - .storedash-trigger-type-{desktop-value}       (for desktop rules)
 * - .storedash-trigger-type-{tablet-value}-tablet (for tablet rules)
 * - .storedash-trigger-type-{mobile-value}-mobile (for mobile rules)
 *
 * Each breakpoint's media query targets only its specific class.
 * ============================================ */

/* Desktop breakpoint (min-width to not affect tablet/mobile) */
@media (min-width: 1025px) {
    /* Text Only on Desktop */
    .storedash-trigger-type-text .storedash-menu-trigger .storedash-trigger-icon-wrap {
        display: none !important;
    }
    .storedash-trigger-type-text .storedash-menu-trigger .storedash-trigger-text {
        display: inline-flex !important;
    }

    /* Icon Only on Desktop */
    .storedash-trigger-type-icon .storedash-menu-trigger .storedash-trigger-text {
        display: none !important;
    }
    .storedash-trigger-type-icon .storedash-menu-trigger .storedash-trigger-icon-wrap {
        display: inline-flex !important;
    }

    /* Text & Icon on Desktop */
    .storedash-trigger-type-text_icon .storedash-menu-trigger .storedash-trigger-icon-wrap,
    .storedash-trigger-type-text_icon .storedash-menu-trigger .storedash-trigger-text {
        display: inline-flex !important;
    }
}

/* Tablet breakpoint (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Text Only on Tablet */
    .storedash-trigger-type-text-tablet .storedash-menu-trigger .storedash-trigger-icon-wrap {
        display: none !important;
    }
    .storedash-trigger-type-text-tablet .storedash-menu-trigger .storedash-trigger-text {
        display: inline-flex !important;
    }

    /* Icon Only on Tablet */
    .storedash-trigger-type-icon-tablet .storedash-menu-trigger .storedash-trigger-text {
        display: none !important;
    }
    .storedash-trigger-type-icon-tablet .storedash-menu-trigger .storedash-trigger-icon-wrap {
        display: inline-flex !important;
    }

    /* Text & Icon on Tablet */
    .storedash-trigger-type-text_icon-tablet .storedash-menu-trigger .storedash-trigger-icon-wrap,
    .storedash-trigger-type-text_icon-tablet .storedash-menu-trigger .storedash-trigger-text {
        display: inline-flex !important;
    }
}

/* Mobile breakpoint (max-width: 767px) */
@media (max-width: 767px) {
    /* Text Only on Mobile */
    .storedash-trigger-type-text-mobile .storedash-menu-trigger .storedash-trigger-icon-wrap {
        display: none !important;
    }
    .storedash-trigger-type-text-mobile .storedash-menu-trigger .storedash-trigger-text {
        display: inline-flex !important;
    }

    /* Icon Only on Mobile */
    .storedash-trigger-type-icon-mobile .storedash-menu-trigger .storedash-trigger-text {
        display: none !important;
    }
    .storedash-trigger-type-icon-mobile .storedash-menu-trigger .storedash-trigger-icon-wrap {
        display: inline-flex !important;
    }

    /* Text & Icon on Mobile */
    .storedash-trigger-type-text_icon-mobile .storedash-menu-trigger .storedash-trigger-icon-wrap,
    .storedash-trigger-type-text_icon-mobile .storedash-menu-trigger .storedash-trigger-text {
        display: inline-flex !important;
    }
}

/* Menu Overlay */
.storedash-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    /* Performance optimizations */
    will-change: opacity;
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden;
}

/* Elementor editor compatibility - ensure menu doesn't interfere */
body.storedash-menu-elementor-editor .storedash-menu-overlay {
    /* Lower z-index in editor to prevent interference */
    z-index: 9999;
}

.storedash-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* Menu Layers - Using left positioning like mini-cart */
.menu-layer {
    position: fixed;
    top: 0;
    left: -380px;
    width: 380px;
    height: 100%;
    background: #ffffff;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    will-change: left;
    transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999999;
    overflow: hidden; /* Required for border-radius to clip child elements */
    transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.2s ease;
    /* Performance optimizations */
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden;
    contain: layout style paint; /* CSS containment for performance */
}

/* Elementor editor compatibility - ensure menu layers don't interfere */
body.storedash-menu-elementor-editor .menu-layer {
    /* Lower z-index in editor to prevent interference */
    z-index: 9999;
}

/* Only Layer 1 moves to left: 0 when active */
.menu-layer-1.active {
    left: 0;
}

/* Remove right-side border-radius from Layer 1 when Layer 2+ is active */
body.storedash-menu-has-child-layer .menu-layer-1.active {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Remove right-side border-radius from layers 2+ when next layer is active */
.menu-layer.has-child-active {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* All layers beyond layer 1 are positioned off-screen */
.menu-layer:not(.menu-layer-1) {
    box-shadow: none;
    border-left: 1px solid #e5e7eb;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s 0.2s, border-radius 0.2s ease;
}

.menu-layer:not(.menu-layer-1).active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s 0s, border-radius 0.2s ease;
}

/* Remove left-side border-radius from layers 2+ when active (they connect to previous layer) */
.menu-layer-2.active,
.menu-layer-3.active,
.menu-layer-4.active,
.menu-layer-5.active,
.menu-layer-6.active,
.menu-layer-7.active,
.menu-layer-8.active,
.menu-layer-9.active,
.menu-layer-10.active {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Remove right-side border-radius from layers 2+ when next layer is active */
.menu-layer.has-child-active {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Dynamic positioning for layers 2+ - Desktop only */
@media screen and (min-width: 769px) {
    .menu-layer-2 { left: 380px; }
    .menu-layer-3 { left: 760px; }
    .menu-layer-4 { left: 1140px; }
    .menu-layer-5 { left: 1520px; }
    .menu-layer-6 { left: 1900px; }
    .menu-layer-7 { left: 2280px; }
    .menu-layer-8 { left: 2660px; }
    .menu-layer-9 { left: 3040px; }
    .menu-layer-10 { left: 3420px; }

    /* When active, layers maintain their position */
    .menu-layer-2.active { left: 380px; }
    .menu-layer-3.active { left: 760px; }
    .menu-layer-4.active { left: 1140px; }
    .menu-layer-5.active { left: 1520px; }
    .menu-layer-6.active { left: 1900px; }
    .menu-layer-7.active { left: 2280px; }
    .menu-layer-8.active { left: 2660px; }
    .menu-layer-9.active { left: 3040px; }
    .menu-layer-10.active { left: 3420px; }
}

/* Layer Header */
.menu-layer-header {
    flex-shrink: 0;
    background: #ffffff;
}

.menu-header-top {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8ebef;
    border-bottom-style: solid; /* Default, can be toggled off by Elementor */
}

/* Logo in Layer 1 Header */
.menu-header-logo {
    display: flex;
    align-items: center;
    flex: 1;
}

.menu-header-logo img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
 * Menu Tabs (Dual Menu Feature)
 * IMPORTANT: Aggressive resets to override WP/Elementor defaults
 * ============================================ */
.menu-tabs-container {
    padding: 12px 16px !important;
    background: #f3f4f6 !important;
    border: none !important;
    margin: 0 !important;
}

.menu-tabs-inner {
    display: flex !important;
    background: #e5e7eb !important;
    border-radius: 8px !important;
    padding: 4px !important;
    gap: 4px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Full CSS reset for tab buttons - override ALL WordPress/Elementor button styles */
.menu-tab-btn,
.menu-tab-btn:link,
.menu-tab-btn:visited,
.storedash-sliding-menu .menu-tab-btn,
.storedash-menu-overlay ~ .storedash-sliding-menu .menu-tab-btn,
body .menu-tab-btn,
body .storedash-sliding-menu .menu-tab-btn,
#storedash-menu-layers-container .menu-tab-btn {
    all: unset !important; /* Nuclear reset */
    display: block !important;
    flex: 1 !important;
    padding: 10px 20px !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.menu-tab-btn:hover:not(.active),
body .menu-tab-btn:hover:not(.active),
.storedash-sliding-menu .menu-tab-btn:hover:not(.active),
#storedash-menu-layers-container .menu-tab-btn:hover:not(.active) {
    color: #1f2937 !important;
    background: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
}

.menu-tab-btn.active,
body .menu-tab-btn.active,
.storedash-sliding-menu .menu-tab-btn.active,
#storedash-menu-layers-container .menu-tab-btn.active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
}

.menu-tab-btn:focus,
.menu-tab-btn:focus-visible,
.menu-tab-btn:active,
body .menu-tab-btn:focus,
body .menu-tab-btn:focus-visible,
body .menu-tab-btn:active,
.storedash-sliding-menu .menu-tab-btn:focus,
.storedash-sliding-menu .menu-tab-btn:focus-visible,
.storedash-sliding-menu .menu-tab-btn:active,
#storedash-menu-layers-container .menu-tab-btn:focus,
#storedash-menu-layers-container .menu-tab-btn:focus-visible,
#storedash-menu-layers-container .menu-tab-btn:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
}

/* Mobile responsive tabs */
@media screen and (max-width: 480px) {
    .menu-tabs-container {
        padding: 10px 12px !important;
    }

    .menu-tabs-inner {
        padding: 3px !important;
        gap: 3px !important;
    }

    .menu-tab-btn,
    body .menu-tab-btn,
    .storedash-sliding-menu .menu-tab-btn,
    #storedash-menu-layers-container .menu-tab-btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
}

.menu-close-btn,
.menu-back-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    transition: color 0.15s ease;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.menu-close-btn:hover,
.menu-back-btn:hover {
    color: #666;
}

.menu-close-btn svg,
.menu-back-btn svg {
    width: 24px;
    height: 24px;
}

/* All layers beyond Layer 1 have back button + title header */
.menu-layer:not(.menu-layer-1) .menu-layer-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e8ebef;
    border-bottom-style: solid; /* Default, can be toggled off by Elementor */
}

.layer-title {
    margin: 0;
    color: #8b95a0;
    text-transform: uppercase;
}

/* Layer Content */
.menu-layer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    background: #f7f8fa;
}

/* Menu Items List */
.menu-layer .menu-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menu Item - CRITICAL: Scope to .storedash-sliding-menu to avoid affecting WordPress menus */
.storedash-sliding-menu .menu-layer .menu-item {
    border-bottom: 1px solid #e8ebef;
    border-bottom-style: solid; /* Default style, can be overridden by Elementor */
}

.storedash-sliding-menu .menu-layer .menu-item:last-child {
    border-bottom: none;
}

.storedash-sliding-menu .menu-layer .menu-item-btn,
.storedash-sliding-menu .menu-layer .menu-item-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    background: #ffffff;
    border: none;
    font-family: inherit; /* Allow Elementor to override */
    font-size: 17px; /* Default, can be overridden */
    font-weight: 600; /* Default, can be overridden */
    color: #1a2332;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
    gap: 12px;
    letter-spacing: normal; /* Allow Elementor to override */
}

/* Hover colors now handled by Elementor widget CSS */
/* Active colors now handled by Elementor widget CSS */

.storedash-sliding-menu .menu-layer .menu-item-btn span,
.storedash-sliding-menu .menu-layer .menu-item-link span {
    flex: 1;
}

.storedash-sliding-menu .menu-layer .menu-item-btn svg,
.storedash-sliding-menu .menu-layer .menu-item-link svg {
    flex-shrink: 0;
    color: #b8c1cc;
    transition: color 0.15s ease;
    width: 18px;
    height: 18px;
}

/* Custom icon support - wrapper span */
/* Uses CSS custom properties for responsive sizing from Elementor widget */
.storedash-sliding-menu .menu-layer .menu-item-btn .menu-chevron-icon,
.storedash-sliding-menu .menu-layer .menu-item-link .menu-chevron-icon {
    flex-shrink: 0;
    color: var(--storedash-chevron-color, #b8c1cc);
    transition: color 0.15s ease;
    display: inline-flex !important; /* Ensure icon is always visible */
    align-items: center;
    justify-content: center;
    visibility: visible !important; /* Prevent hiding */
    opacity: 1 !important; /* Ensure full opacity */
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    max-width: var(--storedash-chevron-size, 18px);
    max-height: var(--storedash-chevron-size, 18px);
}

/* Chevron hover state using CSS variable */
.storedash-sliding-menu .menu-layer .menu-item-btn:hover .menu-chevron-icon,
.storedash-sliding-menu .menu-layer .menu-item-link:hover .menu-chevron-icon {
    color: var(--storedash-chevron-hover-color, #E65500);
}

/* Category Images */
.storedash-sliding-menu .menu-layer .menu-item-image {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
    margin-right: 12px;
    display: inline-block;
    border-radius: 4px;
    background: #f3f4f6; /* Placeholder background */
    /* Performance optimizations */
    will-change: auto;
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden;
}

/* Lazy loading support */
.storedash-sliding-menu .menu-layer .menu-item-image[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.storedash-sliding-menu .menu-layer .menu-item-image[loading="lazy"].loaded,
.storedash-sliding-menu .menu-layer .menu-item-image:not([loading="lazy"]) {
    opacity: 1;
}

/* Menu item content wrapper */
.storedash-sliding-menu .menu-layer .menu-item-content {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0; /* Allow text to truncate properly */
}

.storedash-sliding-menu .menu-layer .menu-item-btn,
.storedash-sliding-menu .menu-layer .menu-item-link {
    display: flex;
    align-items: center;
    gap: 0; /* Remove gap, use margin on individual elements */
}

.storedash-sliding-menu .menu-layer .menu-item-btn span,
.storedash-sliding-menu .menu-layer .menu-item-link span {
    flex: 1;
    min-width: 0; /* Allow text truncation */
}

.storedash-sliding-menu .menu-layer .menu-item-btn .menu-chevron-icon-fa,
.storedash-sliding-menu .menu-layer .menu-item-link .menu-chevron-icon-fa {
    font-size: var(--storedash-chevron-size, 18px);
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    display: inline-flex !important; /* Ensure Font Awesome icons are visible */
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
}

.storedash-sliding-menu .menu-layer .menu-item-btn .menu-chevron-icon-fa i,
.storedash-sliding-menu .menu-layer .menu-item-link .menu-chevron-icon-fa i {
    font-size: var(--storedash-chevron-size, 18px);
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.storedash-sliding-menu .menu-layer .menu-item-btn .menu-chevron-icon-svg,
.storedash-sliding-menu .menu-layer .menu-item-link .menu-chevron-icon-svg {
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    display: inline-flex !important; /* Ensure SVG icons are visible */
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure SVG elements inside chevron icons are visible */
.storedash-sliding-menu .menu-layer .menu-item-btn .menu-chevron-icon-svg svg,
.storedash-sliding-menu .menu-layer .menu-item-link .menu-chevron-icon-svg svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    max-width: var(--storedash-chevron-size, 18px);
    max-height: var(--storedash-chevron-size, 18px);
}

/* Support for SVG icons loaded as img tags (URL-based uploads) */
.storedash-sliding-menu .menu-layer .menu-item-btn .menu-chevron-icon-svg img,
.storedash-sliding-menu .menu-layer .menu-item-link .menu-chevron-icon-svg img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    max-width: var(--storedash-chevron-size, 18px);
    max-height: var(--storedash-chevron-size, 18px);
    object-fit: contain;
}

/* Elementor eicon support */
.storedash-sliding-menu .menu-layer .menu-item-btn .menu-chevron-icon-eicon,
.storedash-sliding-menu .menu-layer .menu-item-link .menu-chevron-icon-eicon {
    font-size: var(--storedash-chevron-size, 18px);
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
}

.storedash-sliding-menu .menu-layer .menu-item-btn .menu-chevron-icon-eicon i,
.storedash-sliding-menu .menu-layer .menu-item-link .menu-chevron-icon-eicon i {
    font-size: var(--storedash-chevron-size, 18px);
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Additional defensive CSS: Ensure chevrons are visible even without .storedash-sliding-menu wrapper */
/* Uses CSS variables for responsive sizing while maintaining visibility fallbacks */
.menu-layer .menu-item-btn .menu-chevron-icon,
.menu-layer .menu-item-link .menu-chevron-icon,
.menu-layer .menu-item-btn svg.menu-chevron-icon,
.menu-layer .menu-item-link svg.menu-chevron-icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
}

/* Ensure Font Awesome chevron icons are visible */
.menu-layer .menu-item-btn .menu-chevron-icon-fa,
.menu-layer .menu-item-link .menu-chevron-icon-fa {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: var(--storedash-chevron-size, 18px);
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
}

.menu-layer .menu-item-btn .menu-chevron-icon-fa i,
.menu-layer .menu-item-link .menu-chevron-icon-fa i {
    font-size: var(--storedash-chevron-size, 18px);
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    line-height: 1 !important;
}

/* Elementor eicon support */
.menu-layer .menu-item-btn .menu-chevron-icon-eicon,
.menu-layer .menu-item-link .menu-chevron-icon-eicon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: var(--storedash-chevron-size, 18px);
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
}

.menu-layer .menu-item-btn .menu-chevron-icon-eicon i,
.menu-layer .menu-item-link .menu-chevron-icon-eicon i {
    font-size: var(--storedash-chevron-size, 18px);
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    line-height: 1 !important;
}

/* Ensure SVG chevron icons are visible */
.menu-layer .menu-item-btn .menu-chevron-icon-svg,
.menu-layer .menu-item-link .menu-chevron-icon-svg {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
}

/* Ensure SVG elements inside chevron icons are visible */
.menu-layer .menu-item-btn .menu-chevron-icon-svg svg,
.menu-layer .menu-item-link .menu-chevron-icon-svg svg,
.menu-layer .menu-item-btn svg.menu-chevron-icon,
.menu-layer .menu-item-link svg.menu-chevron-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: var(--storedash-chevron-size, 18px);
    height: var(--storedash-chevron-size, 18px);
    max-width: var(--storedash-chevron-size, 18px);
    max-height: var(--storedash-chevron-size, 18px);
}

/* Icon hover colors now handled by Elementor widget CSS */

/* Scrollbar Styling */
.menu-layer-content::-webkit-scrollbar {
    width: 4px;
}

.menu-layer-content::-webkit-scrollbar-track {
    background: transparent;
}

.menu-layer-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.menu-layer-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive Design - Mobile: Single layer view (replace instead of stack) */
@media screen and (max-width: 768px) {
    .menu-layer {
        /* Width controlled by Elementor responsive control - defaults to 85vw */
        /* Removed hardcoded width to allow Elementor customization */
        left: 0 !important;
        /* On mobile, layers fade in/out instead of sliding */
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
        will-change: opacity;
        transform: translateZ(0); /* Force GPU acceleration */
    }

    /* On mobile, all layers use left: 0 when active (single layer view) */
    .menu-layer-1.active,
    .menu-layer-2.active,
    .menu-layer-3.active,
    .menu-layer-4.active,
    .menu-layer-5.active,
    .menu-layer-6.active,
    .menu-layer-7.active,
    .menu-layer-8.active,
    .menu-layer-9.active,
    .menu-layer-10.active {
        left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Layers not active are hidden with opacity/visibility */
    .menu-layer:not(.active) {
        left: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media screen and (max-width: 480px) {
    .menu-layer {
        /* Width controlled by Elementor responsive control - defaults to 100vw */
        /* Removed hardcoded width to allow Elementor customization */
        left: 0 !important;
        /* On mobile, layers fade in/out instead of sliding */
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
        will-change: opacity;
        transform: translateZ(0); /* Force GPU acceleration */
    }

    /* On mobile, all layers use left: 0 when active (single layer view) */
    .menu-layer-1.active,
    .menu-layer-2.active,
    .menu-layer-3.active,
    .menu-layer-4.active,
    .menu-layer-5.active,
    .menu-layer-6.active,
    .menu-layer-7.active,
    .menu-layer-8.active,
    .menu-layer-9.active,
    .menu-layer-10.active {
        left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Layers not active are hidden with opacity/visibility */
    .menu-layer:not(.active) {
        left: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .menu-header-top {
        padding: 16px 20px;
    }

    .storedash-sliding-menu .menu-layer .menu-item-btn,
    .storedash-sliding-menu .menu-layer .menu-item-link {
        padding: 16px 20px;
    }
}

/* Body scroll lock */
body.storedash-menu-open {
    overflow: hidden;
}

/* Elementor editor compatibility - don't lock body scroll in editor */
body.storedash-menu-elementor-editor.storedash-menu-open {
    overflow: visible;
}

/* Performance optimizations for menu items */
.storedash-sliding-menu .menu-layer .menu-item {
    contain: layout style; /* CSS containment for better performance */
}

.storedash-sliding-menu .menu-layer .menu-item-btn,
.storedash-sliding-menu .menu-layer .menu-item-link {
    contain: layout style; /* CSS containment for better performance */
}