/* /wp-content/themes/estore-pro/css/jaksmoge-shop-category-menu.css */

/* Wrapper for the entire shop category menu area */
.jaksmoge-shop-category-menu-wrapper {
    width: 100%;
    margin-bottom: 20px; /* Space below the menu - can be adjusted or removed if no space is needed */
    padding: 0 !important; /* Remove padding */
    background: transparent !important; /* Remove background color */
    box-shadow: none !important; /* Remove box shadow */
    border: none !important; /* Remove border */
    border-radius: 0; /* Reset border-radius as there's no border/bg */
    box-sizing: border-box;
}

/* Container for the two category sections (product and model) */
#jaksmoge-shop-category-menu-container .category-sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    grid-gap: 20px;
    width: 100%;
}

.jaksmoge-shop-toolbar {
    display: flex;
    justify-content: flex-start; /* Align items to the start */
    align-items: flex-start; /* Align items to the top */
    gap: 20px;
    margin-bottom: 20px;
    /* flex-wrap: wrap; /* Removed for desktop to encourage single line */
}

/* Category menu container within the toolbar */
.jaksmoge-shop-toolbar > #jaksmoge-shop-category-menu-container.jaksmoge-shop-category-menu-wrapper {
    flex: 1 1 0%; /* shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    width: auto; /* Override general width: 100% from its own class */
    min-width: 0; /* Allow it to shrink below its content size if necessary */
}

/* WooCommerce sorting dropdown within the toolbar */
.jaksmoge-shop-toolbar > .woocommerce-ordering {
    flex: 0 0 auto; /* shorthand for flex-grow: 0, flex-shrink: 0, flex-basis: auto */
    /* Consider adding a 'width: auto;' or 'max-width' if it's still too wide */
}

/* Responsive adjustments for the toolbar */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    .jaksmoge-shop-toolbar {
        flex-direction: column;
        align-items: stretch; /* Make children full width */
        flex-wrap: nowrap; /* Ensure no wrapping when stacked */
    }

    .jaksmoge-shop-toolbar > #jaksmoge-shop-category-menu-container.jaksmoge-shop-category-menu-wrapper,
    .jaksmoge-shop-toolbar > .woocommerce-ordering {
        width: 100% !important; /* Override any inline/flex widths */
        flex-basis: auto !important;
        margin-bottom: 15px;
    }

    .jaksmoge-shop-toolbar > .woocommerce-ordering {
        margin-bottom: 0; /* Last item */
    }
}

/* Individual category group (e.g., "Kategori by product") */
/* .category-group styling is handled by the grid or can be added here if needed */

/* Styles for the new select dropdowns */
#jaksmoge-shop-category-menu-container .category-dropdown {
    width: 100%;
    padding: 10px 15px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-sizing: border-box;
    -webkit-appearance: none; /* Remove default Sytling in Chrome, Safari, Opera */
    -moz-appearance: none; /* Remove default Sytling in Firefox */
    appearance: none; /* Remove default Sytling in Edge, IE */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23555%22/%3E%3C/svg%3E') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
    cursor: pointer;
}

#jaksmoge-shop-category-menu-container .category-dropdown:focus {
    border-color: #0073aa !important;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #jaksmoge-shop-category-menu-container .category-sections-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
}

/* Clearfix for the wrapper if needed */
.jaksmoge-shop-category-menu-wrapper.clearfix::after {
    content: "";
    clear: both;
    display: table;
}