/*
 * WooCommerce Drilldown Categories Widget Styles
 * Version: 1.0.1
 */

.drilldown-category-nav-widget-container {
    margin-bottom: 20px; /* Spacing below widget */
    box-sizing: border-box;
}

.drilldown-menu-inner-container {
    position: relative;
    overflow: hidden; /* Key for the sliding panel effect */
    min-height: 250px; /* Default min-height, JS will try to adjust this */
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    border-radius: 4px;
    height: auto; /* Allow JS to control height, will be set to specific pixel value by JS */
    box-sizing: border-box;
}

ul.drilldown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    position: absolute; /* All levels start as absolute to allow sliding */
    top: 0;
    left: 100%; /* Start off-screen (to the right) */
    transition: left 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth slide */
    background-color: #ffffff; /* Ensure it covers content being slid over */
    box-sizing: border-box;
    /* height: 100%; Removed to allow dynamic height per UL, JS will manage parent container height */
    overflow-y: auto; /* Allow scrolling for long lists within this UL */
    max-height: 500px; /* Optional: Add a max-height for very long lists to prevent excessive container growth */
}

/* Active level is on-screen and positioned relatively to contribute to height calculation */
ul.drilldown-menu.active-level {
    left: 0;
    position: relative; /* When active, it should be part of the normal flow for height calculation */
}

/* The root level is active by default and relative */
ul.drilldown-menu[id$="-level-root"].active-level {
    position: relative; /* Already part of the flow */
    left: 0;
}


ul.drilldown-menu li {
    padding: 0; /* Remove padding from li, apply to a/span */
    border-bottom: 1px solid #f0f0f0;
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Push toggle to the right */
    align-items: center; /* Vertically align items */
    box-sizing: border-box;
}

ul.drilldown-menu li:last-child {
    border-bottom: none;
}

ul.drilldown-menu li a,
ul.drilldown-menu li .drilldown-toggle {
    padding: 12px 15px;
    display: block; /* Make them block for full clickable area */
    box-sizing: border-box;
}

ul.drilldown-menu li a.category-link {
    text-decoration: none;
    color: #333;
    flex-grow: 1; /* Allow link to take available space */
    transition: background-color 0.2s ease, color 0.2s ease;
    line-height: 1.4; /* Ensure text is well-spaced */
}

ul.drilldown-menu li a.category-link:hover,
ul.drilldown-menu li a.category-link:focus {
    background-color: #f9f9f9;
    color: #0073aa; /* WordPress blue, adjust to theme */
}

.drilldown-toggle {
    cursor: pointer;
    color: #555;
    user-select: none; /* Prevent text selection on click */
    border-left: 1px solid #f0f0f0; /* Separator */
    flex-shrink: 0; /* Prevent toggle from shrinking */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.drilldown-toggle:hover,
.drilldown-toggle:focus {
    background-color: #f0f0f0;
    color: #0073aa;
}

.drilldown-icon-next,
.drilldown-icon-back {
    vertical-align: middle; /* Align icons nicely with text */
    display: inline-block; /* For proper alignment */
}

/* Header for sub-levels (Back button and Title) */
.drilldown-header {
    background-color: #f7f7f7;
    /* border-bottom: 1px solid #e0e0e0; */ /* Already on li */
    display: flex; /* For layout of back button and title */
    align-items: center;
    padding: 0; /* Handled by children's padding */
    font-size: 1em; /* Base size for header elements */
}

.drilldown-header .drilldown-back {
    font-weight: bold;
    color: #0073aa;
    text-decoration: none;
    padding: 12px 15px; /* Consistent padding */
    border-right: 1px solid #e0e0e0; /* Separator for back button */
    white-space: nowrap; /* Prevent back button text from wrapping */
    flex-shrink: 0;
}

.drilldown-header .drilldown-back:hover,
.drilldown-header .drilldown-back:focus {
    background-color: #efefef;
}

.drilldown-header .drilldown-level-title {
    margin: 0;
    padding: 12px 15px; /* Consistent padding */
    font-size: 1em; /* Relative to header's font size */
    font-weight: 600;
    color: #222;
    flex-grow: 1; /* Title takes remaining space */
    text-align: left; /* Or center if preferred */
    overflow: hidden; /* Prevent long titles from breaking layout */
    text-overflow: ellipsis; /* Show ... for overflowed text */
    white-space: nowrap; /* Keep title on one line */
}

/* "View all in..." link styling */
li.view-all-current-cat-item {
    background-color: #fcfcfc; /* Slightly different background */
    font-size: 0.9em; /* Smaller text */
}

li.view-all-current-cat-item a {
    color: #0073aa;
    font-weight: normal;
    padding: 10px 15px; /* Adjust padding as needed */
}

/* "No subcategories" message */
li.no-children-item {
    padding: 15px;
    text-align: center;
    color: #777;
    font-style: italic;
    display: block; /* Override flex for this specific item */
    border-bottom: none; /* Often the last item if no children */
}