/* wpce.css */

/*
 * WPCE Filter Layout Adjustments for Desktop
 * This section aims to control the layout of the WPCE filter fields
 * using flexbox, assuming filter-visibility.js has wrapped them in
 * .wpce-filter-fields-wrapper.
 *
 * This CSS targets and overrides the default 'flex: 1 1 auto;' or similar
 * rules applied by other stylesheets (like styles.css) to .woo-vpf-field.
 */

/* 1. Ensure the wrapper is a flex container and allows wrapping */
.wpce-filter-fields-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows items to break to the next line */
    align-items: flex-start; /* Align items to the top */
    gap: 15px; /* Consistent spacing between fields */
    width: 100%; /* Ensure it takes full width of its parent */
    box-sizing: border-box; /* Include padding/border in width calculation */
    /* Add any other specific wrapper styles if needed */
}

/* 2. Default styling for all filter fields within the wrapper */
.wpce-filter-fields-wrapper .woo-vpf-field {
    /* Critical: Override flex: 1 1 auto; from styles.css */
    flex-grow: 0 !important;   /* Prevent them from growing equally */
    flex-shrink: 0 !important;  /* Prevent them from shrinking too much if not desired */
    /* Ensure no floats or other conflicting display properties */
    float: none !important;
    display: block !important; /* Or 'initial' or 'flex' depending on internal field structure */
    margin: 0 !important; /* Remove any external margins, rely on 'gap' */
    box-sizing: border-box !important; /* Crucial for width calculations */
    /* Add internal padding or other spacing if the select boxes themselves need it */
    padding: 0;
}

/* 3. Specific widths for each field - Adjust these percentages as needed */
/* The :nth-of-type selectors are based on the assumption of 4 main dropdowns */

/* Select Year (first field) */
.wpce-filter-fields-wrapper .woo-vpf-field:nth-of-type(1) {
    flex-basis: calc(15% - 15px); /* Year: Make it shorter, accounting for gap */
    min-width: 100px; /* Minimum width to prevent squishing */
    max-width: 150px; /* Optional: max width to keep it compact */
}

/* Select Model (second field) */
.wpce-filter-fields-wrapper .woo-vpf-field:nth-of-type(2) {
    flex-basis: calc(35% - 15px); /* Model: Wider, accounting for gap */
    min-width: 180px;
    flex-grow: 1; /* Allow it to grow to fill space */
}

/* Select Series (third field) */
.wpce-filter-fields-wrapper .woo-vpf-field:nth-of-type(3) {
    flex-basis: calc(20% - 15px); /* Series: Medium width, accounting for gap */
    min-width: 120px;
}

/* Select Engine (fourth field) */
.wpce-filter-fields-wrapper .woo-vpf-field:nth-of-type(4) {
    flex-basis: calc(25% - 15px); /* Engine: Wider, accounting for gap */
    min-width: 180px;
    flex-grow: 1; /* Allow it to grow to fill space */
}

/* If there are more fields, assign them a default flex-basis to ensure proper wrapping */
.wpce-filter-fields-wrapper .woo-vpf-field:nth-of-type(n+5) { /* For 5th field and beyond */
    flex-basis: calc(24% - 15px); /* Example: try to fit 4 per line with remaining space */
    min-width: 150px;
    flex-grow: 1;
}

/* 4. Ensure the select elements themselves fill their parent field's width */
.wpce-filter-fields-wrapper .woo-vpf-field select {
    width: 100% !important; /* Force select box to fill its parent */
    box-sizing: border-box;
}

/* 5. Styling for the buttons (e.g., Search, Reset) */
.wpce-filter-fields-wrapper .wpce-field-buttons {
    flex-basis: 100%; /* Force buttons to a new line, taking full width */
    display: flex; /* Make buttons container a flex container */
    justify-content: flex-end; /* Align buttons to the right */
    gap: 10px; /* Space between buttons */
    margin-top: 10px; /* Space above buttons */
    box-sizing: border-box;
    /* Add any other specific styles for the button container */
}

/* Style individual buttons within the button container */
.wpce-filter-fields-wrapper .wpce-field-buttons .wpce-button {
    flex-grow: 0;
    flex-shrink: 0;
    /* Adjust padding, background, etc. as desired */
    padding: 10px 20px;
    background-color: #5098B7; /* Coordinated with #toggle-filters-button */
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}
.wpce-filter-fields-wrapper .wpce-field-buttons .wpce-button[type="reset"] {
    background-color: #6c757d; /* Different color for reset or secondary action */
}
.wpce-filter-fields-wrapper .wpce-field-buttons .wpce-button:hover {
    background-color: #3e7a93; /* Darker hover state */
}