/**
 * BW Model Finder — Search & Filter Pro form + results table.
 *
 * The form markup is the plugin's (.searchandfilter); the table is ours.
 * Weights are kept at parity with the CSS Elementor generates from the
 * controls so the controls win on source order rather than being locked out.
 */

.elementor-widget-bw-model-finder {
    --bw-blue: #005eb8;
    --bw-blue-dk: #00427f;
    --bw-tint: #e8f0f9;
    --bw-orange: #f28120;
    --bw-ink: #101720;
    --bw-body: #5b6570;
    --bw-mute: #8a95a1;
    --bw-line: #e2e6ea;
    --bw-line-soft: #eef1f4;
    --bw-soft: #f7f9fb;
}

.elementor-widget-bw-model-finder * {
    box-sizing: border-box;
}

.elementor-widget-bw-model-finder .bw-mf-heading {
    margin: 0 0 18px;
    font: 800 20px/1.25 'Open Sans', Arial, sans-serif;
    letter-spacing: -.2px;
    color: var(--bw-ink);
}

/* ============================================================ toggle === */
.elementor-widget-bw-model-finder .bw-mf-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding: 0 18px;
    height: 42px;
    border: 1px solid var(--bw-line);
    border-radius: 999px;
    background: #fff;
    font: 800 10.5px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bw-ink);
    cursor: pointer;
    transition: border-color .15s ease;
}

.elementor-widget-bw-model-finder .bw-mf-toggle:hover {
    border-color: #cfd8e3;
}

.elementor-widget-bw-model-finder .bw-mf-toggle[aria-expanded="true"] {
    border-color: var(--bw-blue);
    color: var(--bw-blue);
}

/* the count of filters actually narrowing the results, so a collapsed panel
   never hides the fact that something is applied */
.elementor-widget-bw-model-finder .bw-mf-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--bw-blue);
    font: 700 10px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 0;
    color: #fff;
}

.elementor-widget-bw-model-finder .bw-mf-active[hidden] {
    display: none;
}

/* Filters and table are ONE card — the filters are the table's header, not a
   separate panel hovering above it. Two bordered boxes with a gap is what
   made them read as unrelated things. */
.elementor-widget-bw-model-finder .bw-mf-form[hidden] {
    display: none;
}

/* Only when the panel is hidden does the count bar become the top of the
   card. :has() reads the panel's state, so no JS has to keep a class in
   sync with it. */
.elementor-widget-bw-model-finder .bw-mf:has(.bw-mf-form[hidden]) .bw-mf-count {
    border-radius: 14px 14px 0 0;
    border-top: 1px solid var(--bw-line);
}

/* ============================================================== form === */
/* The filters are the table's toolbar, so they sit ON the table: one card,
   square bottom corners, no gap. Two separate boxes read as two unrelated
   things, which is what made the search box look stranded. */
.elementor-widget-bw-model-finder .bw-mf-form {
    margin: 0;
    padding: 18px 20px 14px;
    border: 1px solid var(--bw-line);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: #fff;
}

/* ------------------------------------------------- select-based fields --
 * When a field's input type is Select in the form settings, it renders as a
 * dropdown instead of a radio list. That turns a 9-value facet from a
 * column of options into a single control, which is what lets the whole
 * toolbar sit in one row above the table. Nothing here forces it — the
 * field type is a form setting — but this is what it looks like when it is
 * set.                                                                     */
.elementor-widget-bw-model-finder .searchandfilter select {
    height: 44px;
    padding: 0 38px 0 14px;
    border: 1px solid var(--bw-line);
    border-radius: 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a95a1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    font: 400 14px/1 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* A field rendered as a dropdown needs far less room than a radio list, so
   the toolbar packs tighter when every facet is a select. */
.elementor-widget-bw-model-finder .searchandfilter > ul:has(select) {
    gap: 14px 16px;
}

.elementor-widget-bw-model-finder .searchandfilter > ul:has(select) > li {
    flex-basis: 190px;
    max-width: 280px;
}

/* The plugin lays its fields out as a list; a grid keeps each facet in its
   own column the way the storefront pages do.
   align-items:start matters — without it every facet stretches to the height
   of the tallest, so a 9-value pipe-size list left a column of dead space
   under the 3-value ones. */
/* Flex, not grid.
 *
 * With `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))` the
 * search and reset rows span `1 / -1` — and auto-fit only collapses tracks
 * that are EMPTY. A full-width item occupies every track, so nothing could
 * collapse and the grid held six 300px columns for three facets, leaving
 * half the panel blank.
 *
 * Flex has no such notion: a row holds what it holds. Facets take a 300px
 * basis and share the leftover space; the full-width rows simply wrap.
 *
 * Basis is 300px because these labels are long — "0.025 - .25 GPM (0.1 - 1.0
 * LPM) PVDF Float (4)" is about 46 characters — and anything narrower wraps
 * every option onto two lines.
 */
.elementor-widget-bw-model-finder .searchandfilter > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.elementor-widget-bw-model-finder .searchandfilter > ul > li {
    flex: 1 1 var(--bw-mf-facet, 300px);
    /* Stops three facets stretching to 600px each on a wide screen — past a
       point extra width buys nothing, it just separates the label from its
       control. */
    max-width: 420px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

/* Deliberately NOT scrollable. An earlier version capped these at 208px to
   keep the card short, which hid the last two pipe sizes behind a scrollbar
   most people never notice — a filter you cannot see is worse than a taller
   card. Options are compact enough now that the full list costs little. */
.elementor-widget-bw-model-finder .searchandfilter > ul > li ul {
    max-height: none;
    overflow: visible;
}

/* Search spans the full width and leads, rather than sitting in a column
   beside the facets as if it were one of them. It is the primary control:
   people type a part number far more often than they narrow by pipe size.
   data-sf-field-type is on every field li, so this targets the real markup
   rather than a guessed class name. */
.elementor-widget-bw-model-finder .searchandfilter > ul > li[data-sf-field-type="search"] {
    flex: 1 1 100%;
    max-width: none;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bw-line);
}

.elementor-widget-bw-model-finder .searchandfilter > ul > li[data-sf-field-type="search"] input {
    max-width: 480px;
}

.elementor-widget-bw-model-finder .searchandfilter h4 {
    margin: 0 0 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--bw-line-soft);
    font: 800 10px/1.3 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bw-mute);
}

.elementor-widget-bw-model-finder .searchandfilter ul li ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Control and label on ONE line. The plugin emits <input> then <label> as
   siblings, and the theme's list styling was breaking them onto separate
   lines — which is what doubled the height of every facet. */
.elementor-widget-bw-model-finder .searchandfilter ul li ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 2px;
    padding: 3px 0;
    font: 400 13.5px/1.35 'Open Sans', Arial, sans-serif;
    color: var(--bw-body);
    cursor: pointer;
}

.elementor-widget-bw-model-finder .searchandfilter ul li ul li label {
    display: block;
    margin: 0;
    min-width: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.elementor-widget-bw-model-finder .searchandfilter ul li ul li:hover {
    color: var(--bw-ink);
}

.elementor-widget-bw-model-finder .searchandfilter input[type="text"],
.elementor-widget-bw-model-finder .searchandfilter input[type="search"],
.elementor-widget-bw-model-finder .searchandfilter select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--bw-line);
    border-radius: 10px;
    background: #fff;
    font: 400 14px/1 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
}

.elementor-widget-bw-model-finder .searchandfilter input[type="checkbox"],
.elementor-widget-bw-model-finder .searchandfilter input[type="radio"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 2px 0 0;
    accent-color: var(--bw-blue);
}

/* Reset gets its own full-width row under the facets, right-aligned — it is
   an escape hatch, not a sixth filter, so it should not hold a column open.
   :has() covers whatever class the plugin puts on that li; the class rule
   below is the fallback for older browsers. */
.elementor-widget-bw-model-finder .searchandfilter > ul > li:has(.sf-reset),
.elementor-widget-bw-model-finder .searchandfilter > ul > li.sf-field-reset {
    flex: 1 1 100%;
    max-width: none;
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.elementor-widget-bw-model-finder .searchandfilter input[type="submit"],
.elementor-widget-bw-model-finder .searchandfilter .sf-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 22px;
    border: 2px solid var(--bw-blue);
    border-radius: 999px;
    background: #fff;
    font: 800 10.5px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--bw-blue);
    text-decoration: none;
    cursor: pointer;
}

.elementor-widget-bw-model-finder .searchandfilter input[type="submit"]:hover,
.elementor-widget-bw-model-finder .searchandfilter .sf-reset:hover {
    background: var(--bw-blue);
    color: #fff;
}

/* ============================================================= table === */
/* The count sits inside the table's card as a caption bar, so it reads as
   the table's own header rather than loose text between two boxes. */
/* Count bar between the toolbar and the table, part of the same card. */
.elementor-widget-bw-model-finder .bw-mf-count {
    display: block;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid var(--bw-line);
    border-bottom: 0;
    background: var(--bw-soft);
    font: 800 10px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bw-mute);
}

/* A spec table can outgrow its column on a narrow screen; scrolling the
   table is better than shrinking the text to fit. */
.elementor-widget-bw-model-finder .bw-mf-scroll {
    overflow-x: auto;
    border: 1px solid var(--bw-line);
    border-radius: 0 0 14px 14px;
    background: #fff;
}

/* separate, not collapse — border-radius is ignored on a collapsed table */
.elementor-widget-bw-model-finder .bw-mf-table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.elementor-widget-bw-model-finder .bw-mf-table th,
.elementor-widget-bw-model-finder .bw-mf-table td {
    border: 0;
    background-image: none;
}

.elementor-widget-bw-model-finder .bw-mf-table thead th {
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--bw-line);
    text-align: left;
    font: 700 10.5px/1.35 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--bw-ink);
    white-space: nowrap;
}

.elementor-widget-bw-model-finder .bw-mf-table tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--bw-line-soft);
    font: 400 13.5px/1.45 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
    vertical-align: middle;
}

/* the header already draws the line above the first row */
.elementor-widget-bw-model-finder .bw-mf-table tbody tr:first-child td {
    border-top: 0;
}

.elementor-widget-bw-model-finder .bw-mf-table tbody tr:hover td {
    background: var(--bw-soft);
}

.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-img img {
    display: block;
    max-width: 46px;
    height: auto;
    border-radius: 6px;
    mix-blend-mode: multiply;
}

/* the thumbnail as a zoom control */
.elementor-widget-bw-model-finder .bw-mf-zoom {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    line-height: 0;
}

.elementor-widget-bw-model-finder .bw-mf-zoom:focus-visible {
    outline: 2px solid var(--bw-orange);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ---------------------------------------------------------- overlay --- */
/* Appended to <body>, so these selectors are necessarily unscoped. */
body.bw-mf-locked {
    overflow: hidden;
}

.bw-mf-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 5vmin;
    background: rgba(16, 23, 32, .92);
}

/* Sized against the viewport, not the parent — a percentage max-height
   against an auto-height flex parent resolves to none and the image runs off
   the screen. */
.bw-mf-overlay-img {
    max-width: min(100%, calc(100vw - 10vmin));
    max-height: calc(100vh - 16vmin);
    width: auto;
    height: auto;
    display: block;
    background: #fff;
    border-radius: 10px;
}

.bw-mf-overlay-caption {
    margin: 0;
    max-width: 640px;
    text-align: center;
    font: 400 13px/1.5 'Open Sans', Arial, sans-serif;
    color: rgba(255, 255, 255, .82);
}

/* The theme paints button hover and focus orange, and this sits on <body>
   outside any widget wrapper, so those rules reach it. */
.bw-mf-overlay-close {
    position: absolute;
    top: 16px;
    right: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0 !important;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    line-height: 0;
    cursor: pointer;
}

.bw-mf-overlay-close:hover,
.bw-mf-overlay-close:focus,
.bw-mf-overlay-close:active {
    background: rgba(255, 255, 255, .26) !important;
    color: #fff !important;
}

.bw-mf-overlay-close:focus-visible {
    outline: 2px solid #f28120;
    outline-offset: 2px;
}

.bw-mf-overlay-close svg {
    display: block;
}

.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cat {
    font-weight: 600;
    white-space: nowrap;
}

/* The description is the only column that wants to wrap, so it gets the
   width. Without this the spec columns took equal shares and the
   description broke onto three lines while half the table sat empty. */
.elementor-widget-bw-model-finder .bw-mf-table th.bw-mf-c-title,
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-title {
    width: 26%;
    min-width: 220px;
}

.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-title a {
    color: var(--bw-ink);
    text-decoration: none;
}

.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-title a:hover {
    color: var(--bw-blue);
}

/* Specs read as data, so they are quieter than the description and keep
   their own line — a wrapped spec column is what makes these tables hard to
   scan down. */
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-spec {
    color: var(--bw-body);
    white-space: nowrap;
}

/* A blank spec cell is meaningful here — a metric-only model has no imperial
   pipe size — so it reads as "not applicable" rather than looking like
   missing data. */
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-spec:empty::before {
    content: "—";
    color: var(--bw-line);
}

/* Header labels wrap rather than forcing the table wider than the page. */
.elementor-widget-bw-model-finder .bw-mf-table thead th.bw-mf-c-spec {
    white-space: normal;
    max-width: 130px;
}

.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-price {
    font-weight: 700;
    white-space: nowrap;
}

.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart {
    white-space: nowrap;
}

/* WooCommerce's own loop button, matched to the outline pill used elsewhere.
   `.button` is Woo's class, which the theme styles orange with !important —
   the same fight the product table had — so colour and border are forced.
   Geometry is forced too: the theme's asymmetric vertical padding pushed the
   label off the centre of the pill. */
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart .button,
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart a.button,
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart .add_to_cart_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 18px !important;
    margin: 0 !important;
    line-height: 1 !important;
    border: 2px solid var(--bw-blue) !important;
    border-radius: 999px !important;
    background: #fff !important;
    background-image: none !important;
    font: 800 10px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--bw-blue) !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart .button:hover,
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart a.button:hover,
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart .add_to_cart_button:hover,
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart .button:focus {
    background: var(--bw-blue) !important;
    border-color: var(--bw-blue) !important;
    color: #fff !important;
}

/* the "added to cart" tick Woo appends after an AJAX add */
.elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart .added_to_cart {
    display: inline-block;
    margin-left: 8px;
    font: 700 10px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bw-blue);
}

.elementor-widget-bw-model-finder .bw-mf-empty {
    margin: 0;
    padding: 28px 16px;
    border: 1px solid var(--bw-line);
    border-radius: 0 0 14px 14px;
    text-align: center;
    font: 400 14px/1.6 'Open Sans', Arial, sans-serif;
    color: var(--bw-mute);
}

/* ---------------------------------------------------------- mobile --- */
/* Below 768px each row becomes a stacked block, the same treatment the
   Downloads table uses — a spec table with six columns cannot be read by
   scrolling sideways on a phone. */
@media (max-width: 767px) {
    .elementor-widget-bw-model-finder .bw-mf-form {
        padding: 16px 14px 12px;
    }

    .elementor-widget-bw-model-finder .searchandfilter > ul {
        gap: 14px;
    }

    /* one facet per row on a phone */
    .elementor-widget-bw-model-finder .searchandfilter > ul > li,
    .elementor-widget-bw-model-finder .searchandfilter > ul:has(select) > li {
        flex: 1 1 100%;
        max-width: none;
    }

    .elementor-widget-bw-model-finder .bw-mf-scroll {
        overflow-x: visible;
    }

    .elementor-widget-bw-model-finder .bw-mf-table thead {
        display: none;
    }

    .elementor-widget-bw-model-finder .bw-mf-table,
    .elementor-widget-bw-model-finder .bw-mf-table tbody,
    .elementor-widget-bw-model-finder .bw-mf-table tr,
    .elementor-widget-bw-model-finder .bw-mf-table td {
        display: block;
    }

    .elementor-widget-bw-model-finder .bw-mf-table tbody tr {
        padding: 14px;
        border-top: 1px solid var(--bw-line);
    }

    .elementor-widget-bw-model-finder .bw-mf-table tbody tr:first-child {
        border-top: 0;
    }

    .elementor-widget-bw-model-finder .bw-mf-table tbody td {
        padding: 0;
        border: 0;
    }

    .elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-img {
        margin: 0 0 8px;
    }

    .elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cat,
    .elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-title {
        margin: 0 0 6px;
        font-weight: 600;
    }

    /* specs flow inline, each carrying its own caption from data-label */
    .elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-spec {
        display: inline-block;
        margin: 0 12px 0 0;
        font-size: 12px;
    }

    .elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-spec[data-label]::before {
        content: attr(data-label) " ";
        margin-right: 3px;
        font: 700 9px/1 'Open Sans', Arial, sans-serif;
        letter-spacing: .9px;
        text-transform: uppercase;
        color: var(--bw-mute);
    }

    .elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-price {
        margin: 8px 0 0;
    }

    .elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart {
        margin: 10px 0 0;
    }

    .elementor-widget-bw-model-finder .bw-mf-table td.bw-mf-c-cart .button {
        display: flex;
        width: 100%;
    }
}