/* Apeks Custom Shop Page Styles - Robust Override using Body Class */

/* Overall Page Container - Centered and Max-Width */
body.apeks-custom-shop-active .apeks-custom-shop-container {
    max-width: 1200px !important; /* Adjust max-width as needed */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px !important; /* Optional padding */
    box-sizing: border-box !important; /* Ensures padding doesn't add to max-width */
}

/* Controls Bar - Category Filter Left, Search Right */
body.apeks-custom-shop-active .apeks-controls-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important; /* Allow wrapping on smaller screens */
}

body.apeks-custom-shop-active .apeks-category-filters-container,
body.apeks-custom-shop-active .apeks-search-filter-container {
    margin-bottom: 10px !important; /* Add some margin for wrapped items */
}

body.apeks-custom-shop-active .apeks-category-filters-container label {
    margin-right: 8px !important;
    font-weight: bold !important;
}

body.apeks-custom-shop-active #apeks-category-filter-select,
body.apeks-custom-shop-active #apeks-product-search {
    padding: 8px 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    font-size: 14px !important; /* Consistent font size */
}

body.apeks-custom-shop-active #apeks-category-filter-select {
    min-width: 200px !important; /* Adjust as needed */
}

body.apeks-custom-shop-active #apeks-product-search {
    min-width: 250px !important; /* Adjust as needed */
}

/* Product Table Styling */
body.apeks-custom-shop-active .apeks-product-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
    border: 1px solid #e0e0e0 !important; /* Add a border around the whole table */
}

body.apeks-custom-shop-active .apeks-product-table th,
body.apeks-custom-shop-active .apeks-product-table td {
    border: 1px solid #e0e0e0 !important;
    padding: 10px 12px !important;
    text-align: left !important; /* Default to left */
    vertical-align: middle !important;
    font-size: 14px !important; /* Consistent font size in table */
}

body.apeks-custom-shop-active .apeks-product-table th {
    background-color: #f9f9f9 !important;
    font-weight: bold !important;
}

/* Centering specific columns - adjust as needed */
body.apeks-custom-shop-active .apeks-product-table th:nth-child(1), /* Image */
body.apeks-custom-shop-active .apeks-product-table td:nth-child(1),
body.apeks-custom-shop-active .apeks-product-table th:nth-child(3), /* Category */
body.apeks-custom-shop-active .apeks-product-table td:nth-child(3),
body.apeks-custom-shop-active .apeks-product-table th:nth-child(4), /* SKU */
body.apeks-custom-shop-active .apeks-product-table td:nth-child(4),
body.apeks-custom-shop-active .apeks-product-table th:nth-child(5), /* Price */
body.apeks-custom-shop-active .apeks-product-table td:nth-child(5),
body.apeks-custom-shop-active .apeks-product-table th:nth-child(7), /* Quantity */
body.apeks-custom-shop-active .apeks-product-table td:nth-child(7) {
    text-align: center !important;
}

/* Keep Product Name and Description left-aligned */
body.apeks-custom-shop-active .apeks-product-table th:nth-child(2), /* Name */
body.apeks-custom-shop-active .apeks-product-table td:nth-child(2),
body.apeks-custom-shop-active .apeks-product-table th:nth-child(6), /* Description */
body.apeks-custom-shop-active .apeks-product-table td:nth-child(6) {
    text-align: left !important;
}

body.apeks-custom-shop-active .apeks-product-table img {
    max-width: 60px !important;
    height: auto !important;
    border-radius: 4px !important;
    display: block !important; /* Helps with centering if margin auto is used */
    margin: 0 auto !important; /* Center image in cell */
}

/* Quantity Input Styling */
body.apeks-custom-shop-active .apeks-quantity-input {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Center within the table cell */
}

body.apeks-custom-shop-active .apeks-quantity-input button.plus,
body.apeks-custom-shop-active .apeks-quantity-input button.minus {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 28px !important; /* Adjusted for vertical centering */
    text-align: center !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
    border-radius: 0 !important; /* Reset theme radius for buttons first */
}
body.apeks-custom-shop-active .apeks-quantity-input button.plus:hover,
body.apeks-custom-shop-active .apeks-quantity-input button.minus:hover {
    background-color: #e0e0e0 !important;
}

body.apeks-custom-shop-active .apeks-quantity-input button.minus {
    border-radius: 15px 0 0 15px !important; /* Rounded left corners */
}

body.apeks-custom-shop-active .apeks-quantity-input button.plus {
    border-radius: 0 15px 15px 0 !important; /* Rounded right corners */
}

body.apeks-custom-shop-active .apeks-quantity-input input.qty {
    width: 50px !important;
    height: 30px !important;
    text-align: center !important;
    border-top: 1px solid #ccc !important;
    border-bottom: 1px solid #ccc !important;
    border-left: none !important;
    border-right: none !important;
    padding: 0 5px !important; /* Adjusted padding */
    box-sizing: border-box !important;
    font-size: 14px !important;
    color: #333 !important;
    background-color: #fff !important; /* Ensure background is white */
    -moz-appearance: textfield !important; /* Firefox */
    border-radius: 0 !important; /* No radius for the input field itself */
}

/* Hide spinners for number input */
body.apeks-custom-shop-active .apeks-quantity-input input.qty::-webkit-outer-spin-button,
body.apeks-custom-shop-active .apeks-quantity-input input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* "Add All Selected to Cart" Button */
body.apeks-custom-shop-active #apeks-add-all-to-cart-button {
    display: block !important;
    margin: 20px auto !important; /* Center the button */
    padding: 12px 25px !important;
    font-size: 16px !important;
    background-color: #28a745 !important; /* Example: Green */
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    text-transform: none !important; /* Ensure no theme text transform */
}

body.apeks-custom-shop-active #apeks-add-all-to-cart-button:hover {
    background-color: #218838 !important; /* Darker green on hover */
}

/* Responsive adjustments for controls bar */
@media (max-width: 768px) {
    body.apeks-custom-shop-active .apeks-controls-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.apeks-custom-shop-active .apeks-category-filters-container,
    body.apeks-custom-shop-active .apeks-search-filter-container {
        width: 100% !important; /* Make them full width on small screens */
        margin-bottom: 15px !important;
    }

    body.apeks-custom-shop-active #apeks-category-filter-select,
    body.apeks-custom-shop-active #apeks-product-search {
        width: 100% !important;
    }
}

/* Hide the default ugly category list if it appears from WooCommerce hooks */
body.apeks-custom-shop-active .product-categories {
    display: none !important;
}
/* Additional styling for the category links inside the table if needed */
body.apeks-custom-shop-active .apeks-product-table td a[rel="tag"] {
    /* Your styles for category tags, e.g., background, padding */
    /* Example: 
    background-color: #eee !important;
    padding: 3px 7px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    color: #555 !important;
    */
}

/* Hide empty span.posted_in */
body.apeks-custom-shop-active .apeks-product-table td span.posted_in:empty {
    display: none !important;
}

/* Fallback/Original less specific rules from previous attempts (should be overridden by above or removed) */
/* Ensuring high specificity */
/* body.page-template-page-custom-shop .apeks-product-table .apeks-quantity-input { ... } */
/* ... other older rules ... */