/**
 * Fitment finder ([npt_fitment_search]) — shared design system.
 *
 * One shortcode, two layouts:
 *   .npt-finder--menu    3-column grid with numbered 1–5 badges (header mega-menu).
 *   .npt-finder--inline  single centered row (landing-page "track finder" sections).
 *
 * Brand tokens mirror the Elementor global kit: blue #0057B8, lime accent
 * #DFFF00, Archivo (display) + Source Sans Pro (body). All styling is scoped to
 * .npt-finder / .npt-catalog__facets — nothing leaks site-wide. This file loads
 * on every front-end page (the finder lives in the header), so the Tom Select
 * theme below also covers the /catalog/ page.
 */
.npt-finder {
	--npt-blue: #0057B8;
	--npt-lime: #DFFF00;
	--npt-ink:  #111111;
	--npt-text: #444444;
	--npt-line: #d7dbe0;
	--npt-muted: #6b7280;
	--npt-badge: #c4c9cf;
	--npt-radius: 11px;
	--npt-pill: 999px;
	font-family: "Source Sans Pro", system-ui, -apple-system, sans-serif;
	width: 100%;
}
/* Loading state — dim the FIELDS (not the container) so the spinner stays crisp. */
.npt-finder.is-loading { position: relative; pointer-events: none; }
.npt-finder.is-loading .npt-finder__facets { opacity: .4; transition: opacity .15s; }
.npt-finder.is-loading::after {
	content: ''; position: absolute; z-index: 20; left: 50%; top: 50%;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--npt-blue);
	border: 4px solid rgba(255,255,255,.35); border-top-color: var(--npt-lime);
	box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 6px 18px rgba(0,0,0,.28);
	transform: translate(-50%,-50%); animation: npt-spin .7s linear infinite;
}
/* Keyframe lives here (this file loads on every front-end page, incl. /catalog/). */
@keyframes npt-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.npt-finder__facet { position: relative; min-width: 0; }

/* Shared control surface (native <select> fallback + the Tom Select control). */
.npt-finder__select,
.npt-finder .ts-control {
	width: 100%; min-height: 0;
	padding: .7rem .9rem; font-size: .95rem; line-height: 1.25;
	color: var(--npt-ink); background: #fff;
	border: 1px solid var(--npt-line); border-radius: var(--npt-radius);
	box-shadow: none; cursor: text;
}
.npt-finder__select {
	appearance: none; cursor: pointer; padding: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .6rem center; background-size: 1.2rem;
}
.npt-finder__select:disabled { opacity: .5; cursor: not-allowed; }

/* Buttons. */
.npt-finder__actions { display: flex; align-items: center; gap: .6rem; }
.npt-finder__btn,
.npt-finder__reset {
	font-family: "Source Sans Pro", system-ui, -apple-system, sans-serif; font-weight: 800;
	letter-spacing: .04em; border-radius: var(--npt-pill); cursor: pointer;
	padding: .72rem 2rem; transition: filter .15s, background .15s, color .15s;
	white-space: nowrap;
}
.npt-finder__btn { background: var(--npt-lime); color: var(--npt-ink); border: 0; }
.npt-finder__btn:hover { filter: brightness(1.06); }
.npt-finder__reset { background: #fff; color: var(--npt-ink); border: 1.5px solid var(--npt-line); padding: .72rem 1.6rem; }
.npt-finder__reset:hover { border-color: var(--npt-ink); }

/* ---------------------------------------------------------------------------
 * MENU layout — 3-col grid, numbered badges. Facets + the actions cell flow in
 * one grid (display:contents promotes each facet to a direct grid item, the
 * actions block stays a single trailing cell — matches the mockup).
 * ------------------------------------------------------------------------ */
.npt-finder--menu {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem 1.1rem;
	align-items: center; counter-reset: npt-facet;
}
.npt-finder--menu .npt-finder__facets { display: contents; }
.npt-finder--menu .npt-finder__facet {
	counter-increment: npt-facet; position: relative; padding-left: 26px;
}
/* Grey "N." pill nub tucked behind the control, peeking out on the left
 * (mirrors the original .jet-select::before badge). */
.npt-finder--menu .npt-finder__facet::before {
	content: counter(npt-facet) ".";
	position: absolute; left: 0; top: 0; bottom: -3px !important; z-index: 0;
	width: 100%; padding-left: 13px; box-sizing: border-box;
	display: flex; align-items: center;
	font-family: "Source Sans Pro", sans-serif; font-weight: 600; font-size: 15px; color: #000;
	background: #BBBBBB; border-radius: var(--npt-pill);
	pointer-events: none;
}
/* Control rides above the badge; full-pill white field. */
.npt-finder--menu .npt-finder__facet > .ts-wrapper,
.npt-finder--menu .npt-finder__facet > .npt-finder__select { position: relative; z-index: 1; }
.npt-finder--menu .ts-control,
.npt-finder--menu .npt-finder__select { border-radius: var(--npt-pill); }
/* RESET/SEARCH sit in the last column, on the row after the facets — so they
 * land in the trailing cell regardless of how many facets the category has. */
.npt-finder--menu .npt-finder__actions {
	grid-column: -2 / -1; justify-self: stretch; justify-content: flex-end; gap: .5rem;
}
.npt-finder--menu .npt-finder__btn { padding: .62rem 1.5rem; }
.npt-finder--menu .npt-finder__reset { padding: .62rem 1.3rem; }

@media (max-width: 900px) {
	.npt-finder--menu { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.npt-finder--menu { grid-template-columns: 1fr; }
	.npt-finder--menu .npt-finder__actions { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
 * INLINE layout — single centered row of pills + RESET/SEARCH below. Built to
 * sit on a dark/blue Elementor section ("Easy Track & Wheel Finder").
 * ------------------------------------------------------------------------ */
.npt-finder--inline {
	display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.npt-finder--inline .npt-finder__facets {
	display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; width: 100%;
}
.npt-finder--inline .npt-finder__facet { flex: 0 1 190px; min-width: 150px; }
.npt-finder--inline .npt-finder__select,
.npt-finder--inline .ts-control { border-radius: var(--npt-pill); padding-left: 1.1rem; }
.npt-finder--inline .npt-finder__reset { background: var(--npt-ink); color: #fff; border-color: var(--npt-ink); }
.npt-finder--inline .npt-finder__reset:hover { filter: brightness(1.3); }

@media (max-width: 560px) {
	.npt-finder--inline .npt-finder__facet { flex-basis: 100%; }
	.npt-finder--inline .npt-finder__actions { width: 100%; }
	.npt-finder--inline .npt-finder__btn,
	.npt-finder--inline .npt-finder__reset { flex: 1 1 auto; text-align: center; }
}

/* ---------------------------------------------------------------------------
 * Tom Select theme — match the native pill controls. Scoped to the finder AND
 * the /catalog/ facet bar so the combobox is consistent everywhere it appears.
 * ------------------------------------------------------------------------ */
.npt-finder .ts-wrapper,
.npt-catalog__facets .ts-wrapper { width: 100%; margin: 0; }

.npt-catalog__facets .ts-control {
	min-height: 0; padding: .7rem .9rem; font-size: .95rem; line-height: 1.25;
	color: #111; background: #fff; border: 1px solid #d7dbe0; border-radius: 8px;
	box-shadow: none; cursor: text;
}
.npt-finder .ts-wrapper.focus .ts-control,
.npt-catalog__facets .ts-wrapper.focus .ts-control {
	border-color: #0057B8; box-shadow: 0 0 0 3px rgba(0,87,184,.14);
}
/* Disabled (locked) facet: stay opaque + light so it doesn't merge with the
 * grey badge nub behind it; just mute the text. */
.npt-finder .ts-wrapper.disabled .ts-control,
.npt-catalog__facets .ts-wrapper.disabled .ts-control { background: #f1f2f4; cursor: not-allowed; }
.npt-finder .ts-wrapper.disabled .ts-control input::placeholder,
.npt-catalog__facets .ts-wrapper.disabled .ts-control input::placeholder { color: #9aa1a8; }
.npt-finder .ts-wrapper.single .ts-control,
.npt-catalog__facets .ts-wrapper.single .ts-control {
	background-image: none; padding: 0 2.6rem 0 15px; min-height: 42px;
	display: flex; flex-wrap: nowrap; align-items: center; /* one line, vertically centered — kills bump + the "item on a new line" height growth */
}
/* Selected item: single line, ellipsis if long (never wraps the control taller). */
.npt-finder .ts-wrapper.single .ts-control > .item,
.npt-catalog__facets .ts-wrapper.single .ts-control > .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npt-finder .ts-control > .item,
.npt-catalog__facets .ts-control > .item { color: #111; font-weight: 600; margin: 0; line-height: 1.25; }
/* Live input must be allowed to shrink so it stays on the item's line. */
.npt-finder .ts-control input,
.npt-catalog__facets .ts-control input { font-size: .95rem; color: #111; min-width: 0; }
.npt-finder .ts-control input::placeholder,
.npt-catalog__facets .ts-control input::placeholder { color: #6b7280; opacity: 1; }

/* clear_button (per-facet X) — only once a value is chosen, left of the caret. */
.npt-finder .ts-wrapper .clear-button,
.npt-catalog__facets .ts-wrapper .clear-button {
	right: 2.3rem; opacity: .5; transition: opacity .12s; color: #6b7280;
}
.npt-finder .ts-wrapper .clear-button:hover,
.npt-catalog__facets .ts-wrapper .clear-button:hover { opacity: 1; }
.npt-finder .ts-wrapper:not(.has-items) .clear-button,
.npt-catalog__facets .ts-wrapper:not(.has-items) .clear-button { display: none; }

.npt-finder .ts-dropdown,
.npt-catalog__facets .ts-dropdown {
	border: 1px solid #d7dbe0; border-radius: 10px; overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,.14); font-size: .95rem; margin-top: 4px; z-index: 100000;
}
.npt-finder .ts-dropdown .option,
.npt-catalog__facets .ts-dropdown .option { padding: .55rem .9rem; color: #444; }
.npt-finder .ts-dropdown .active,
.npt-catalog__facets .ts-dropdown .active { background: #eef3fb; color: #0057B8; }
.npt-finder .ts-dropdown .ts-dropdown-content,
.npt-catalog__facets .ts-dropdown .ts-dropdown-content { max-height: 320px; }

/* An open dropdown must rise above the facets below it. Each facet's .ts-wrapper
   is a z-index:1 stacking context, so a top-row dropdown otherwise renders UNDER
   the next row's selects. Lift the active wrapper above its siblings. */
.npt-finder .ts-wrapper.dropdown-active,
.npt-catalog__facets .ts-wrapper.dropdown-active { position: relative; z-index: 1000; }
.npt-finder--menu .npt-finder__facet > .ts-wrapper.dropdown-active { z-index: 1000; }