/**
 * VRU Catalog — front-end filter widget styles.
 *
 * Namespaced under `.vru-cf` so it can never bleed into the theme or the
 * Search & Filter Pro markup it sits beside.
 *
 * COLOURS ARE THE THEME'S. We pull vru-theme's design tokens (tokens.css is
 * enqueued site-wide) via var(), with literal fallbacks — primary is brand
 * BLUE (#0170B9), accent is #fa462e, border is #e2e8ed. No invented palette.
 * Badges reuse the theme's look too: the Sale flash is the brand-blue circle
 * (= .woocommerce span.onsale), and Free Shipping is the theme's own
 * .vru-free-ship pill markup (rendered verbatim, styled by woocommerce.css).
 */

.vru-cf {
	--vru-cf-gap: 1rem;
	--vru-cf-line:         var(--vru-color-border, #e2e8ed);
	--vru-cf-accent:       var(--vru-color-primary, #0170B9);   /* brand blue */
	--vru-cf-accent-hover: var(--vru-color-link-hover, #fa462e);
	--vru-cf-heading:      var(--vru-color-heading, #3a3a3a);
	--vru-cf-muted:        var(--vru-color-muted, #7a7a7a);
	--vru-cf-surface:      var(--vru-color-surface, #F2F5F7);
	margin: 1rem 0;
}
.vru-cf *, .vru-cf *::before, .vru-cf *::after { box-sizing: border-box; }
.vru-cf__heading { margin: 0 0 .75rem; font-size: 1.25rem; color: var(--vru-cf-heading); }
.vru-cf__noscript { color: #b91c1c; }

/* Two-column layout: controls rail + results. Stacks on narrow screens. */
.vru-cf__layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--vru-cf-gap); align-items: start; }
@media (max-width: 720px) { .vru-cf__layout { grid-template-columns: 1fr; } }

/* ---- controls rail (boxes + fine lines) ---- */
.vru-cf__controls { display: flex; flex-direction: column; gap: var(--vru-cf-gap); min-width: 0; }
.vru-cf__facet { border: 1px solid var(--vru-cf-line); border-radius: 6px; padding: .6rem .7rem; }
.vru-cf__facet-title { font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 .5rem; color: var(--vru-cf-heading); }
.vru-cf__field { width: 100%; padding: .45rem .55rem; border: 1px solid var(--vru-cf-line); border-radius: 5px; font-size: .9rem; }
.vru-cf__field:focus { outline: 2px solid var(--vru-cf-accent); outline-offset: 1px; border-color: var(--vru-cf-accent); }

/* option rows (checkbox facets) — checkboxes use the brand colour */
.vru-cf__opts { display: flex; flex-direction: column; gap: .25rem; max-height: 240px; overflow: auto; }
.vru-cf__opt { display: flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; line-height: 1.3; }
.vru-cf__opt input { margin: 0; flex: none; accent-color: var(--vru-cf-accent); }
.vru-cf__opt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vru-cf__opt-count { color: var(--vru-cf-muted); font-variant-numeric: tabular-nums; font-size: .82rem; }
.vru-cf__facet--empty { display: none; } /* hide a facet section until it has options */

/* Prominent "tell us your machine" treatment for the compatible-model control
   on fitment-capable pages. Purely visual emphasis — it never gates the grid. */
.vru-cf__facet--emphasis { border-color: var(--vru-cf-accent); border-width: 2px; background: var(--vru-cf-surface); }
.vru-cf__model-hint { margin: 0 0 .5rem; font-size: .8rem; line-height: 1.3; color: var(--vru-cf-accent); }

/* price min/max */
.vru-cf__price { display: flex; align-items: center; gap: .4rem; }
.vru-cf__price .vru-cf__field { width: 50%; }

/* compatible-model: typeahead + selected chips */
.vru-cf__type { position: relative; }
.vru-cf__suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 2px; background: #fff; border: 1px solid var(--vru-cf-line); border-radius: 5px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 260px; overflow: auto; }
.vru-cf__suggest:empty { display: none; }
.vru-cf__suggest-item { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .55rem; cursor: pointer; font-size: .88rem; }
.vru-cf__suggest-item:hover, .vru-cf__suggest-item[aria-selected="true"] { background: var(--vru-cf-surface); }
.vru-cf__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.vru-cf__chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--vru-cf-surface); border: 1px solid var(--vru-cf-line); color: var(--vru-cf-accent); border-radius: 999px; padding: .15rem .5rem; font-size: .82rem; }
.vru-cf__chip button { border: none; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--vru-cf-accent); padding: 0; }

.vru-cf__reset { align-self: flex-start; background: none; border: none; color: var(--vru-cf-accent); cursor: pointer; font-size: .85rem; padding: .2rem 0; text-decoration: underline; }

/* No-JS "Apply filters" submit (server-rendered <form>). JS hides it once it
   hydrates — with JS, filtering is instant on every control change. */
.vru-cf__apply {
	align-self: flex-start; padding: .5rem .9rem;
	border: 1px solid var(--vru-btn-bg, #0170B9); background: var(--vru-btn-bg, #0170B9);
	color: var(--vru-btn-color, #fff); border-radius: var(--vru-btn-radius, 3px);
	font-weight: 600; font-size: .88rem; cursor: pointer;
}
.vru-cf__apply:hover { background: var(--vru-btn-bg-hover, #fa462e); border-color: var(--vru-btn-bg-hover, #fa462e); }
.vru-cf--hydrated .vru-cf__apply { display: none; }

/* ---- results ---- */
.vru-cf__results { min-width: 0; }
.vru-cf__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; flex-wrap: wrap; }
.vru-cf__status { font-size: .9rem; color: var(--vru-cf-heading); }
.vru-cf__status[data-loading="1"]::after { content: " …"; }
.vru-cf__sort { font-size: .88rem; }

.vru-cf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; list-style: none; margin: 0; padding: 0; }
.vru-cf__card { border: 1px solid var(--vru-cf-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: box-shadow .15s, border-color .15s; }
.vru-cf__card:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(0,0,0,.08); }

/* media + Sale badge (the theme's brand-blue circle, top-right of the image) */
.vru-cf__media { position: relative; display: block; }
.vru-cf__thumb { aspect-ratio: 1 / 1; width: 100%; object-fit: contain; background: #f8fafc; display: block; }
.vru-cf__sale {
	position: absolute; top: .5rem; right: .5rem; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 2.8rem; height: 2.8rem; border-radius: 50%;
	background: var(--vru-cf-accent); color: #fff;
	font-weight: 700; font-size: .8rem; line-height: 1; text-align: center;
}

/* body */
.vru-cf__card-body { padding: .55rem .6rem .7rem; display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; }
.vru-cf__card-title { font-size: .85rem; line-height: 1.25; margin: 0; color: var(--vru-cf-heading); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vru-cf__card-title:hover { color: var(--vru-cf-accent); }
.vru-cf__card-price { font-size: .95rem; font-weight: 700; color: var(--vru-cf-heading); }
.vru-cf__card-price del { color: var(--vru-cf-muted); font-weight: 400; margin-right: .3rem; }
.vru-cf__card-price ins { text-decoration: none; }
/* the theme's Free Shipping pill sits under the price; normalise its margin in the card flex */
.vru-cf__card-body .vru-free-ship-loop { margin: .1rem 0; }

/* stock badge — only when NOT in stock (amber backorder / grey out-of-stock) */
.vru-cf__badge { display: inline-block; font-size: .72rem; padding: .08rem .4rem; border-radius: 4px; align-self: flex-start; }
.vru-cf__badge--out { background: #f1f5f9; color: #64748b; }
.vru-cf__badge--back { background: #fef9c3; color: #854d0e; }

/* add-to-cart — the theme's BLUE button (tokens); WC's ajax classes drive the
   behaviour. color forced so the global link colour can't override white. */
.vru-cf__atc {
	margin-top: auto; display: block; text-align: center;
	padding: .6rem .7rem; border-radius: var(--vru-btn-radius, 3px);
	background: var(--vru-btn-bg, #0170B9); color: var(--vru-btn-color, #fff) !important;
	font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer;
	border: 1px solid var(--vru-btn-bg, #0170B9); transition: background .15s, border-color .15s;
}
.vru-cf__atc:hover { background: var(--vru-btn-bg-hover, #fa462e); border-color: var(--vru-btn-bg-hover, #fa462e); }
.vru-cf__atc--link { background: #fff; color: var(--vru-cf-accent) !important; }
.vru-cf__atc--link:hover { background: var(--vru-cf-surface); }
.vru-cf__atc.loading { opacity: .6; pointer-events: none; }
.vru-cf__atc.added { background: var(--vru-btn-bg-hover, #fa462e); border-color: var(--vru-btn-bg-hover, #fa462e); }

.vru-cf__empty, .vru-cf__prompt { padding: 2rem 1rem; text-align: center; color: var(--vru-cf-muted); border: 1px dashed var(--vru-cf-line); border-radius: 7px; }

/* pager — explicit colours so labels/arrows are always visible (the theme's
   global button rules otherwise rendered the text white-on-white until hover). */
.vru-cf__pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.25rem; }
/* Buttons (JS pager) and links (SSR no-JS pager) share one look. */
.vru-cf__pager button, .vru-cf__pager .vru-cf__pager-link { padding: .4rem .9rem; border: 1px solid var(--vru-cf-line); background: #fff !important; color: var(--vru-cf-heading) !important; border-radius: 6px; cursor: pointer; font-size: .88rem; font-weight: 600; line-height: 1.2; text-decoration: none; display: inline-block; }
.vru-cf__pager button:hover:not(:disabled), .vru-cf__pager .vru-cf__pager-link:hover { border-color: var(--vru-cf-accent); color: var(--vru-cf-accent) !important; }
.vru-cf__pager button:disabled { opacity: .45; cursor: default; }
.vru-cf__pager-info { font-size: .88rem; color: var(--vru-cf-heading); font-variant-numeric: tabular-nums; }

.vru-cf.is-loading { opacity: .85; }

/* When the block IS a category archive's catalog (surgical take-over), the
   default WooCommerce loop still emits an empty <ul.products> after our block
   (its cards are suppressed server-side). Collapse it so it leaves no gap. */
body.vru-cf-takeover ul.products { display: none !important; }