/**
 * Blue-White styling for the Barn2 WooCommerce Product Table.
 *
 * This is not a widget — the table comes from the [product_table] shortcode,
 * so the selectors target Barn2's own markup rather than an Elementor wrapper:
 *
 *   .wc-product-table-wrapper                 outer wrapper
 *   .wc-product-table-controls.-above/-below  the rows above/below the table
 *   .wc-product-table-select-filters          the filter dropdowns
 *   .dataTables_filter / _length / _info / _paginate   DataTables chrome
 *   table.wc-product-table                    the table itself
 *
 * Applies to every product table on the site, which is intentional — they
 * should all look the same. To limit it to one, wrap the shortcode in a
 * container and prefix these rules with its class.
 *
 * The theme styles WooCommerce tables and buttons hard (blue header bar,
 * orange outline buttons, uppercase bold cell text). Several rules below are
 * resets against that, not fresh styling — they are marked where it matters.
 * Weights are kept just high enough to win and no higher.
 */

.wc-product-table-wrapper {
    --bw-blue: #005eb8;
    --bw-blue-dk: #00427f;
    --bw-blue-tint: #e8f0f9;
    --bw-orange: #f28120;
    --bw-ink: #101720;
    --bw-body: #5b6570;
    --bw-mute: #8a95a1;
    --bw-line: #e2e6ea;
    /* one step lighter than --bw-line: enough to separate rows without the
       table reading as a grid */
    --bw-line-soft: #eef1f4;
    --bw-soft: #f7f9fb;

    font-family: 'Open Sans', Arial, sans-serif;
}

.wc-product-table-wrapper * {
    box-sizing: border-box;
}

/* ------------------------------------------------------------ controls --- */
/* The theme paints this strip grey; the preview has it sit on the page. */
.wc-product-table-wrapper .wc-product-table-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    background: none;
    border: 0;
}

.wc-product-table-wrapper .wc-product-table-below {
    margin: 18px 0 0;
    justify-content: space-between;
}

/* Barn2 always emits the controls div, even when the DataTables `dom` string
   puts nothing in it (no search box, no page length, no totals). Empty, it
   renders as a bare strip above the table. */
.wc-product-table-wrapper .wc-product-table-controls:empty {
    display: none;
}

/* search box — matched to the Downloads widget so the two read as a pair */
.wc-product-table-wrapper .dataTables_filter {
    flex: 1 1 320px;
    min-width: 220px;
    margin: 0;
    text-align: left;
}

.wc-product-table-wrapper .dataTables_filter label {
    display: block;
    margin: 0;
    font-size: 0;          /* hides Barn2's inline label text, keeps the input */
}

/* The theme gives form inputs a flat grey fill and no border, which made this
   field read as an empty strip rather than a search box. Forced for the same
   reason as the header and buttons. */
.wc-product-table-wrapper .dataTables_filter input,
.wc-product-table-wrapper .dataTables_filter input[type="search"] {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border: 1px solid var(--bw-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    background-image: none !important;
    font: 400 15px/1.4 'Open Sans', Arial, sans-serif !important;
    color: var(--bw-ink) !important;
    -webkit-appearance: none;
    appearance: none;
}

.wc-product-table-wrapper .dataTables_filter input::placeholder {
    color: var(--bw-mute);
}

.wc-product-table-wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--bw-blue);
    box-shadow: 0 0 0 3px rgba(0, 94, 184, .12);
}

/* filter dropdowns and the per-page select */
.wc-product-table-wrapper .wc-product-table-select-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.wc-product-table-wrapper select {
    height: 52px;
    margin: 0;
    padding: 0 40px 0 18px;
    border: 1px solid var(--bw-line);
    border-radius: 12px;
    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 16px center;
    font: 400 14.5px/1.4 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.wc-product-table-wrapper .dataTables_length label,
.wc-product-table-wrapper .dataTables_info {
    font: 400 13px/1.4 'Open Sans', Arial, sans-serif;
    color: var(--bw-mute);
}

.wc-product-table-wrapper .wc-product-table-reset a {
    font: 700 12px/1 'Open Sans', Arial, sans-serif;
    color: var(--bw-blue);
    text-decoration: none;
}

/* --------------------------------------------------------------- table --- */
/* border-collapse must be `separate` for border-radius to clip; with
   `collapse` the corners are ignored in Safari and unreliable elsewhere. */
.wc-product-table-wrapper table.wc-product-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--bw-line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

/* clear the theme's cell borders and any striping; only horizontal
   hairlines below, drawn per-row */
.wc-product-table-wrapper table.wc-product-table th,
.wc-product-table-wrapper table.wc-product-table td {
    border: 0;
    background-image: none;
}

.wc-product-table-wrapper table.wc-product-table tbody tr,
.wc-product-table-wrapper table.wc-product-table tbody tr:nth-child(2n) {
    background: #fff;
}

/* Header: white ground with ink labels, not the theme's solid blue bar.
   The theme paints WooCommerce table headers with a rule at least as specific
   as this one, so background and colour are forced. Everything else wins
   normally and stays overridable. */
.wc-product-table-wrapper table.wc-product-table thead th {
    background: #fff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--bw-line);
    padding: 18px 20px;
    text-align: left;
    font: 700 11.5px/1.35 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--bw-ink) !important;
    white-space: nowrap;
}

.wc-product-table-wrapper table.wc-product-table thead th a,
.wc-product-table-wrapper table.wc-product-table thead th span {
    color: inherit !important;
    text-decoration: none;
}

/* Row separators. Drawn as a top border on every row but the first, so the
   line always sits *between* rows — a bottom border would leave a stray rule
   above the rounded bottom edge of the table, and a top border on row one
   would double up with the header's own border-bottom. */
.wc-product-table-wrapper table.wc-product-table tbody tr:first-child td {
    border-top: 0;
}

.wc-product-table-wrapper table.wc-product-table tbody td {
    padding: 18px 20px;
    border-top: 1px solid var(--bw-line-soft);
    font: 400 14.5px/1.5 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
    vertical-align: middle;
    text-transform: none;   /* reset: theme uppercases table cell text */
}

.wc-product-table-wrapper table.wc-product-table tbody tr:hover td {
    background: var(--bw-soft);
}

/* DataTables sort arrows — the theme's white-on-blue carets are invisible
   once the header goes white. */
.wc-product-table-wrapper table.wc-product-table thead th.sorting,
.wc-product-table-wrapper table.wc-product-table thead th.sorting_asc,
.wc-product-table-wrapper table.wc-product-table thead th.sorting_desc {
    cursor: pointer;
}

.wc-product-table-wrapper table.wc-product-table thead th.sorting:before,
.wc-product-table-wrapper table.wc-product-table thead th.sorting:after,
.wc-product-table-wrapper table.wc-product-table thead th.sorting_asc:before,
.wc-product-table-wrapper table.wc-product-table thead th.sorting_asc:after,
.wc-product-table-wrapper table.wc-product-table thead th.sorting_desc:before,
.wc-product-table-wrapper table.wc-product-table thead th.sorting_desc:after {
    color: var(--bw-mute);
    opacity: .6;
}

/* Barn2 emits col-{unprefixed column}: `cf:catalog_number` becomes
   `col-catalog_number`, `buy` also gets `col-add-to-cart`. Verified against
   Columns::get_column_class() rather than guessed. */
.wc-product-table-wrapper table.wc-product-table td.col-catalog_number {
    font-weight: 600;
    color: var(--bw-ink);
    white-space: nowrap;
}

/* reset: the theme sets these bold + uppercase */
.wc-product-table-wrapper table.wc-product-table td.col-name,
.wc-product-table-wrapper table.wc-product-table td.col-name a {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--bw-ink);
    text-decoration: none;
}

.wc-product-table-wrapper table.wc-product-table td.col-name a:hover {
    color: var(--bw-blue);
}

.wc-product-table-wrapper table.wc-product-table td.col-image img {
    display: block;
    max-width: 48px;
    height: auto;
    border-radius: 8px;
}

.wc-product-table-wrapper table.wc-product-table td.col-price {
    font-weight: 700;
    color: var(--bw-ink);
    white-space: nowrap;
}

/* ------------------------------------------------------- spec columns --- *
 * Flow meter parts. Numeric specs stay on one line and align right so sizes
 * compare down the column; the checkbox fields are multi-value, so they wrap
 * — Barn2 maps each stored value to its ACF choice label and joins them, e.g.
 * "PVDF, 316SS". Forcing nowrap there would blow the table width out.        */
.wc-product-table-wrapper table.wc-product-table td.col-flow_meter_scale,
.wc-product-table-wrapper table.wc-product-table td.col-imperial_pipe_size,
.wc-product-table-wrapper table.wc-product-table td.col-metric_pipe_size,
.wc-product-table-wrapper table.wc-product-table td.col-adapter_fnpt,
.wc-product-table-wrapper table.wc-product-table td.col-adapter_mnpt {
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--bw-ink);
}

.wc-product-table-wrapper table.wc-product-table th.col-flow_meter_scale,
.wc-product-table-wrapper table.wc-product-table th.col-imperial_pipe_size,
.wc-product-table-wrapper table.wc-product-table th.col-metric_pipe_size,
.wc-product-table-wrapper table.wc-product-table th.col-adapter_fnpt,
.wc-product-table-wrapper table.wc-product-table th.col-adapter_mnpt {
    text-align: right;
}

.wc-product-table-wrapper table.wc-product-table td.col-flow_unit_of_measurement,
.wc-product-table-wrapper table.wc-product-table td.col-flow_direction,
.wc-product-table-wrapper table.wc-product-table td.col-float_material,
.wc-product-table-wrapper table.wc-product-table td.col-mount_type,
.wc-product-table-wrapper table.wc-product-table td.col-o-ring_material {
    color: var(--bw-body);
    min-width: 96px;
}

/* -------------------------------------------------------------- buy --- *
 * Two different buttons, both from other people's markup:
 *
 *   row     <button class="single_add_to_cart_button button alt">
 *           from woocommerce_template_single_add_to_cart(), inside
 *           .add-to-cart-wrapper in the Buy cell
 *   footer  <input type="submit" class="button btn"> inside
 *           form.multi-cart-form, injected by wc-product-table.js into
 *           .wc-product-table-controls
 *
 * The theme styles both as orange outline and sets `color` with !important —
 * that is why the footer button previously came out blue with orange text.
 * Colour and border are forced here; everything else wins on specificity
 * alone, so it is left unforced and stays overridable.                      */
.wc-product-table-wrapper td.col-buy .button,
.wc-product-table-wrapper td.col-add-to-cart .button,
.wc-product-table-wrapper .add-to-cart-wrapper .button,
.wc-product-table-wrapper .add-to-cart-wrapper button.single_add_to_cart_button,
.wc-product-table-wrapper .multi-cart-form input[type="submit"],
.wc-product-table-wrapper .wc-product-table-multi-form .button {
    /* Outline pill, matching the Downloads widget's download button so the
       two sections read as one system: white ground, 2px blue rule, blue
       label, filling solid on hover. */
    background-color: #fff !important;
    background-image: none !important;
    border: 2px solid var(--bw-blue) !important;
    color: var(--bw-blue) !important;

    /* Geometry is forced too. The theme's asymmetric vertical padding on
       .button survived and pushed the label above the centre of the pill;
       a fixed height with flex centring makes the label position depend on
       nothing but the box. */
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 0 !important;
    padding: 0 26px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

.wc-product-table-wrapper td.col-buy .button:hover,
.wc-product-table-wrapper td.col-add-to-cart .button:hover,
.wc-product-table-wrapper .add-to-cart-wrapper .button:hover,
.wc-product-table-wrapper .add-to-cart-wrapper button.single_add_to_cart_button:hover,
.wc-product-table-wrapper .multi-cart-form input[type="submit"]:hover,
.wc-product-table-wrapper .wc-product-table-multi-form .button:hover {
    background-color: var(--bw-blue) !important;
    border-color: var(--bw-blue) !important;
    color: #fff !important;
}

/* the footer form is injected by JS and arrives unstyled */
.wc-product-table-wrapper .wc-product-table-multi-form,
.wc-product-table-wrapper .multi-cart-form {
    margin: 0;
    padding: 0;
}

.wc-product-table-wrapper .wc-product-table-multi-form {
    margin-left: auto;
}

.wc-product-table-wrapper .wc-product-table td .button,
.wc-product-table-wrapper .wc-product-table td a.button,
.wc-product-table-wrapper .wc-product-table td button.single_add_to_cart_button,
.wc-product-table-wrapper .multi-cart-form input[type="submit"],
.wc-product-table-wrapper .wc-product-table-controls .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 26px;
    border: 2px solid var(--bw-blue);
    border-radius: 999px;
    background-color: #fff;
    background-image: none;
    color: var(--bw-blue);
    font: 800 11px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* the Buy cell lays the quantity, button and checkbox out on one line */
.wc-product-table-wrapper .add-to-cart-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.wc-product-table-wrapper .add-to-cart-wrapper form.cart,
.wc-product-table-wrapper .add-to-cart-wrapper .multi-cart-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* the "adding" spinner state Woo toggles during the AJAX add */
.wc-product-table-wrapper .wc-product-table td .button.loading {
    opacity: .65;
}

.wc-product-table-wrapper .wc-product-table td.col-add-to-cart,
.wc-product-table-wrapper .wc-product-table td.col-buy {
    white-space: nowrap;
}

/* quantity + button sit on one line with a consistent gap */
.wc-product-table-wrapper .wc-product-table td .quantity {
    display: inline-block;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

.wc-product-table-wrapper .wc-product-table td input.qty {
    width: 64px;
    height: 44px;
    padding: 0 8px;
    border: 1px solid var(--bw-line);
    border-radius: 10px;
    background: #fff;
    text-align: center;
    font: 400 14.5px/1 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
}

.wc-product-table-wrapper .wc-product-table td input.qty:focus {
    outline: none;
    border-color: var(--bw-blue);
}

/* multi-select checkbox that pairs with "Add selected to cart" */
.wc-product-table-wrapper .wc-product-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 0 0 10px;
    accent-color: var(--bw-blue);
    vertical-align: middle;
}

/* ----------------------------------------------------------- pagination --- */
.wc-product-table-wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    margin: 0 2px;
    padding: 8px 13px;
    border: 1px solid var(--bw-line);
    border-radius: 8px;
    background: #fff;
    font: 600 13px/1 'Open Sans', Arial, sans-serif;
    color: var(--bw-body);
    cursor: pointer;
}

.wc-product-table-wrapper .dataTables_paginate .paginate_button.current {
    background: var(--bw-blue);
    border-color: var(--bw-blue);
    color: #fff;
}

.wc-product-table-wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .4;
    cursor: default;
}

@media (max-width: 767px) {
    .wc-product-table-wrapper .wc-product-table-controls {
        gap: 8px;
    }
    .wc-product-table-wrapper .dataTables_filter input,
    .wc-product-table-wrapper select {
        height: 46px;
    }
    .wc-product-table-wrapper table.wc-product-table thead th,
    .wc-product-table-wrapper table.wc-product-table tbody td {
        padding: 13px 14px;
    }
}