/* Advanced Search — frontend search form layout + appearance.
 *
 * Consumes the CSS custom properties output by the module's wp_head hook
 * (Thrive_Advanced_Search::output_appearance_styles). These rules are what make
 * the category dropdown, search field and button sit inline on one row; without
 * this stylesheet the form falls back to the browser's default block layout and
 * the three controls stack vertically.
 *
 * NOTE: the admin live-preview uses the equivalent rules baked into
 * assets/css/thv_bundle.css. This file exists because that bundle is only
 * enqueued in wp-admin, not on the frontend.
 */

.woocommerce-product-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
}

.woocommerce-product-search input[type="search"],
.woocommerce-product-search .search-field {
    font-family: var(--thv-as-font-family);
    font-weight: var(--thv-as-font-weight);
    font-size: var(--thv-as-font-size);
    border-radius: var(--thv-as-border-radius);
    flex: 2 1 0;
    min-width: 0;
    background-color: var(--thv-as-bg-color);
    color: var(--thv-as-text-color);
    border: 1px solid var(--thv-as-border-color);
    padding: 6px 10px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-product-search button[type="submit"],
.woocommerce-product-search .search-submit {
    font-family: var(--thv-as-font-family);
    font-weight: var(--thv-as-font-weight);
    background-color: var(--thv-as-button-bg);
    color: var(--thv-as-button-color);
    border: var(--thv-as-btn-border-size) solid var(--thv-as-btn-border-color);
    border-radius: var(--thv-as-border-radius);
    font-size: var(--thv-as-font-size);
    cursor: pointer;
    flex: 0 1 auto;
    white-space: nowrap;
    padding: 6px 16px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-product-search button[type="submit"]:hover,
.woocommerce-product-search .search-submit:hover {
    background-color: var(--thv-as-button-hover-bg);
    color: var(--thv-as-button-hover-color);
    border-color: var(--thv-as-btn-hover-border-color);
}

.woocommerce-product-search input[type="search"]:hover,
.woocommerce-product-search .search-field:hover,
.woocommerce-product-search .thv-category-filter:hover {
    background-color: var(--thv-as-hover-bg-color);
    color: var(--thv-as-hover-text-color);
    border: var(--thv-as-hover-border-size) solid var(--thv-as-hover-border-color);
}

.woocommerce-product-search .thv-category-filter {
    font-family: var(--thv-as-font-family);
    font-weight: var(--thv-as-font-weight);
    font-size: var(--thv-as-font-size);
    background-color: var(--thv-as-bg-color);
    color: var(--thv-as-text-color);
    border: 1px solid var(--thv-as-border-color);
    border-radius: var(--thv-as-border-radius);
    padding: 6px 10px;
    cursor: pointer;
    height: auto;
    flex: 1 1 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

@media (max-width: 600px) {
    .woocommerce-product-search { flex-direction: column; }
    .woocommerce-product-search > * { width: 100%; flex: none; }
}