/* Mobile Sidebar Menu - Hierarchical Category Tree */

/* Shop by Category Section */
.shop-by-category {
    margin-top: 15px;
    padding: 0 20px;
}

.category-title {
    font-family: var(--font-Montserrat);
    font-size: 16px;
    font-weight: bold;
    color: var(--text-brown);
    margin-bottom: 15px;
    padding: 0;
    border: none;
    background: none;
}

/* Category Tree Structure */
.category-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    transform: translateZ(0); /* Enable hardware acceleration */
    backface-visibility: hidden; /* Prevent flickering */
}

/* Tree Items (Main Categories) */
.tree-item {
    margin-bottom: 5px;
    transform: translateZ(0); /* Enable hardware acceleration */
}

.tree-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    will-change: background-color, padding;
}

.tree-toggle:hover {
    background-color: rgba(91, 61, 15, 0.05);
    border-radius: 4px;
    padding-left: 5px;
}

.tree-title {
    font-family: var(--font-Montserrat);
    font-size: 14px;
    font-weight: bold;
    color: var(--text-brown);
    flex: 1;
}

.toggle-icon {
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-teal);
    transition: color 0.1s ease; /* Only animate color, not transform */
    width: 20px;
    text-align: center;
    will-change: color;
    backface-visibility: hidden; /* Prevent flickering */
}

/* Tree toggles should not rotate - they use + and - symbols */
.tree-toggle.expanded .toggle-icon {
    transform: none !important;
}

/* Category toggles should not rotate - they use + and - symbols */
.category-toggle.expanded .toggle-icon {
    transform: none !important;
}

/* Branch Lists (Sub-categories) */
.branch-list {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 20px; /* Left padding for tree visualization */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.15s ease-out,
                padding 0.2s ease-out;
    visibility: hidden;
    opacity: 0;
    position: relative;
    z-index: 1;
    will-change: max-height, opacity, padding;
}

.branch-list.expanded, .branch-list.show {
    max-height: 800px; /* Fixed height to avoid jerky animations */
    padding-top: 5px;
    padding-bottom: 10px;
    visibility: visible;
    opacity: 1;
    transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.15s ease-in,
                padding 0.2s ease-in;
    overflow-y: visible;
}

/* Branch Items (Individual Categories) */
.branch-item {
    margin-bottom: 3px;
}

.branch-item a {
    display: block;
    padding: 6px 0;
    font-family: var(--font-Montserrat);
    font-size: 12px; /* Smaller font size for branches */
    color: var(--text-brown);
    text-decoration: none;
    transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 3px;
    will-change: color, background-color, padding, transform;
}

.branch-item a:hover {
    color: var(--text-teal);
    background-color: rgba(27, 123, 137, 0.05);
    padding-left: 5px;
    transform: translateX(2px);
}

/* Regular navigation items */
.nav-links {
    padding: 0 20px;
}

.nav-links .nav-item {
    display: block;
    padding: 12px 0;
    font-family: var(--font-Montserrat);
    font-size: 16px;
    font-weight: bold;
    color: var(--text-brown);
    text-decoration: none;
    border-bottom: 1px solid rgba(91, 61, 15, 0.1);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: color, padding, background-color;
}

.nav-links .nav-item:hover {
    color: var(--text-teal);
    padding-left: 5px;
    background-color: rgba(27, 123, 137, 0.05);
}

.nav-links .nav-item:last-child {
    border-bottom: 1px solid rgba(91, 61, 15, 0.2);
    margin-bottom: 10px;
}

/* Optimized smooth animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-5px);
    }
}

/* Apply subtle animation to branch items when they appear */
.branch-list.expanded .branch-item,
.branch-list.show .branch-item {
    animation: fadeInUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--item-index, 0) * 0.02s);
}

/* Mobile specific adjustments */
@media (max-width: 767px) {
    .offcanvas-body {
        padding: 0;
        overflow-y: auto !important;
        max-height: 100vh; /* Use full viewport height */
        display: flex;
        flex-direction: column;
        height: 100%;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Make sure the nav section container is scrollable */
    .nav-section {
        overflow-y: visible;
        flex: 1;
        transform: translateZ(0); /* Enable hardware acceleration */
    }
    
    .shop-by-category {
        margin-top: 2px;
        position: relative;
        transform: translateZ(0); /* Enable hardware acceleration */
    }
    
    .category-title {
        font-size: 15px;
        margin-bottom: 12px;
    }
    
    .tree-title {
        font-size: 13px;
    }
    
    .branch-item a {
        font-size: 11px;
    }
    
    /* Ensure the category tree can expand properly */
    .category-tree {
        position: relative;
        width: 100%;
        transform: translateZ(0); /* Enable hardware acceleration */
    }
    
    /* Ensure expanded branches don't get cut off and animate smoothly */
    .branch-list.expanded, .branch-list.show {
        max-height: 800px; /* Fixed height for consistent animations */
        overflow-y: visible;
        transform: translateZ(0); /* Enable hardware acceleration */
    }
    
    /* Faster animations on mobile for better responsiveness */
    .tree-toggle {
        transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .branch-list {
        transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.1s ease-out,
                    padding 0.15s ease-out;
    }
    
    .branch-list.expanded, .branch-list.show {
        transition: max-height 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.1s ease-in,
                    padding 0.15s ease-in;
    }
}

/* Shop by Age Styles - Matching Shop by Category */
.shop-by-age {
    margin-top: 15px;
    padding: 0 20px;
}

/* Styling for age-toggle */
.age-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.age-toggle:hover {
    background-color: rgba(91, 61, 15, 0.05);
    border-radius: 4px;
    padding-left: 5px;
}

.age-toggle.expanded .toggle-icon {
    transform: none !important;
}

.age-title {
    font-family: var(--font-Montserrat);
    font-size: 16px;
    font-weight: bold;
    color: var(--text-brown);
    margin-bottom: 15px;
    padding: 0;
    border: none;
    background: none;
}

/* Age content styles */
.age-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.15s ease-out,
                padding 0.2s ease-out;
    visibility: hidden;
    opacity: 0;
    position: relative;
    z-index: 1;
    will-change: max-height, opacity, padding;
}

.age-content.show {
    max-height: 500px;
    padding-top: 5px;
    padding-bottom: 10px;
    visibility: visible;
    opacity: 1;
    transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.15s ease-in,
                padding 0.2s ease-in;
    overflow-y: visible;
}

/* Age tree styles */
.age-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Apply animation to age items */
.age-content.show .branch-item {
    animation: fadeInUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--item-index, 0) * 0.02s);
}
#shopByAgeContent.show {
  max-height: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding-top: 5px !important;
  padding-bottom: 10px !important;
  overflow-y: visible !important;
}