/* styles.css */

#wccf-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between items */
    align-items: center; /* Align items to the center */
}

.wccf-filter-row {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wccf-filter-row label {
    margin-bottom: 5px; /* Space between label and field */
    font-weight: bold; /* Make labels bold */
}

.wccf-filter-row select,
.wccf-filter-row input[type="text"],
#wccf-filter-form button {
    box-sizing: border-box;
    height: 40px; /* Consistent height for all elements */
}

.wccf-filter-row-inline {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 10px; /* Space between inline items */
}

#wccf-keywords {
    flex: 2; /* Allow keywords field to take more space */
}

#wccf-filter-form button {
    flex: 0 0 120px; /* Fixed width for submit button */
    padding: 0; /* Remove padding for the button */
    font-size: 16px; /* Ensure text fits inside the button */
}

@media (max-width: 768px) {
    #wccf-filter-form {
        flex-direction: column;
        align-items: stretch; /* Align items to stretch the full width */
    }
    
    .wccf-filter-row,
    .wccf-filter-row-inline {
        width: 100%;
    }

    .wccf-filter-row-inline {
        flex-direction: column;
        gap: 5px; /* Space between stacked items */
    }

    #wccf-keywords,
    #wccf-filter-form button {
        width: 100%;
    }

    #wccf-filter-form button {
        flex: none; /* Prevent button from stretching */
    }
}