/**
 * Machine Finder, Trail styling.
 *
 * Every token and every rule is scoped under .tfw-finder so this cannot leak
 * into the rest of the site. Element level rules carry the .tfw-site theme
 * class as well, because the theme's own .tfw-site button and .tfw-site a
 * selectors have higher specificity than a plain class and would otherwise
 * win the cascade.
 *
 * @package tfw-machine-finder
 */

.tfw-finder {
	--tfwf-bg: #f7f5f0;
	--tfwf-panel: #ffffff;
	--tfwf-panel-2: #efebe3;
	--tfwf-line: #ded7c9;
	--tfwf-line-strong: #bdb29c;
	--tfwf-text: #231f1a;
	--tfwf-text-2: #4a4238;
	--tfwf-dim: #6d6355;
	--tfwf-accent: #a8410a;
	--tfwf-accent-hover: #8a350a;
	--tfwf-on-accent: #ffffff;
	--tfwf-price: #a8410a;
	--tfwf-chip-bg: #eef2e6;
	--tfwf-chip-text: #3f6b2b;
	--tfwf-chip-line: #c6d3b3;
	--tfwf-shadow: 0 1px 2px rgba( 60, 45, 20, .12 );
	--tfwf-radius: 2px;
	--tfwf-duration: 200ms;
	--tfwf-curve: cubic-bezier( .33, 0, .67, 1 );
	--tfwf-font: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;

	box-sizing: border-box;
	max-width: 880px;
	margin: 0 auto;
	padding: 4px 0 32px;
	color: var( --tfwf-text );
	font-family: var( --tfwf-font );
	font-size: 14px;
	line-height: 20px;
}

.tfw-finder *,
.tfw-finder *::before,
.tfw-finder *::after {
	box-sizing: border-box;
}

.tfw-site .tfw-finder .tfwf-lede {
	color: var( --tfwf-text-2 );
	font-size: 16px;
	line-height: 23px;
	margin: 0 0 22px;
	max-width: 60ch;
}

.tfw-finder .tfwf-card {
	background: var( --tfwf-panel );
	border: 1px solid var( --tfwf-line );
	border-radius: var( --tfwf-radius );
	box-shadow: var( --tfwf-shadow );
	padding: 20px;
}

.tfw-finder .tfwf-loading {
	color: var( --tfwf-dim );
	padding: 40px 0;
	text-align: center;
}

.tfw-finder .tfwf-hidden {
	display: none;
}

/* Progress -------------------------------------------------------------- */

.tfw-finder .tfwf-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.tfw-finder .tfwf-ptrack {
	flex: 1;
	height: 4px;
	background: var( --tfwf-panel-2 );
	border-radius: 9999px;
	overflow: hidden;
}

.tfw-finder .tfwf-pfill {
	height: 100%;
	width: 0;
	background: var( --tfwf-accent );
	transition: width var( --tfwf-duration ) var( --tfwf-curve );
}

.tfw-finder .tfwf-plabel {
	font-size: 12px;
	color: var( --tfwf-dim );
	white-space: nowrap;
}

/* Question -------------------------------------------------------------- */

.tfw-site .tfw-finder .tfwf-qtext {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	margin: 0 0 4px;
	color: var( --tfwf-text );
}

.tfw-site .tfw-finder .tfwf-qhelp {
	color: var( --tfwf-dim );
	font-size: 12px;
	line-height: 17px;
	margin: 0 0 16px;
}

.tfw-finder .tfwf-opts {
	display: grid;
	gap: 8px;
}

.tfw-site .tfw-finder .tfwf-opt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
	width: 100%;
	min-height: 32px;
	padding: 12px 14px;
	background-color: var( --tfwf-panel-2 );
	background-image: none;
	color: var( --tfwf-text );
	border: 1px solid var( --tfwf-line-strong );
	border-radius: var( --tfwf-radius );
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color var( --tfwf-duration ) var( --tfwf-curve ), border-color var( --tfwf-duration ) var( --tfwf-curve );
}

.tfw-site .tfw-finder .tfwf-opt:hover {
	border-color: var( --tfwf-accent );
	background-color: var( --tfwf-panel-2 );
}

.tfw-site .tfw-finder .tfwf-opt:focus-visible {
	outline: 2px solid var( --tfwf-accent );
	outline-offset: 1px;
}

.tfw-site .tfw-finder .tfwf-opt[ aria-pressed="true" ] {
	border-color: var( --tfwf-accent );
	box-shadow: inset 0 0 0 1px var( --tfwf-accent );
}

.tfw-finder .tfwf-opt .tfwf-sub {
	font-weight: 400;
	font-size: 12px;
	line-height: 17px;
	color: var( --tfwf-dim );
}

/* Buttons --------------------------------------------------------------- */

.tfw-finder .tfwf-nav {
	display: flex;
	gap: 8px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.tfw-site .tfw-finder .tfwf-btn {
	min-height: 32px;
	padding: 5px 12px;
	border-radius: var( --tfwf-radius );
	border: 1px solid var( --tfwf-line-strong );
	background-color: var( --tfwf-panel );
	background-image: none;
	color: var( --tfwf-text );
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color var( --tfwf-duration ) var( --tfwf-curve );
}

.tfw-site .tfw-finder .tfwf-btn:hover {
	background-color: var( --tfwf-panel-2 );
}

.tfw-site .tfw-finder .tfwf-btn:focus-visible {
	outline: 2px solid var( --tfwf-accent );
	outline-offset: 1px;
}

.tfw-site .tfw-finder .tfwf-btn[ disabled ] {
	opacity: .45;
	cursor: default;
}

.tfw-site .tfw-finder .tfwf-btn.tfwf-primary {
	background-color: var( --tfwf-accent );
	border-color: var( --tfwf-accent );
	color: var( --tfwf-on-accent );
}

.tfw-site .tfw-finder .tfwf-btn.tfwf-primary:hover {
	background-color: var( --tfwf-accent-hover );
	border-color: var( --tfwf-accent-hover );
}

/* Results --------------------------------------------------------------- */

.tfw-site .tfw-finder .tfwf-h2 {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var( --tfwf-text );
}

.tfw-site .tfw-finder .tfwf-summary {
	color: var( --tfwf-text-2 );
	font-size: 14px;
	line-height: 20px;
	margin: 0 0 16px;
}

.tfw-finder .tfwf-sharerow {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	margin: 0 0 18px;
}

.tfw-finder .tfwf-sharenote {
	font-size: 12px;
	color: var( --tfwf-dim );
}

.tfw-finder .tfwf-results {
	display: grid;
	gap: 12px;
}

.tfw-finder .tfwf-res {
	background: var( --tfwf-panel );
	border: 1px solid var( --tfwf-line );
	border-left: 4px solid var( --tfwf-accent );
	border-radius: var( --tfwf-radius );
	box-shadow: var( --tfwf-shadow );
	padding: 16px;
}

.tfw-finder .tfwf-res-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.tfw-site .tfw-finder .tfwf-res-name {
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0;
}

.tfw-site .tfw-finder .tfwf-res-name a {
	color: var( --tfwf-text );
	text-decoration: none;
	border-bottom: 1px solid var( --tfwf-line-strong );
}

.tfw-site .tfw-finder .tfwf-res-name a:hover,
.tfw-site .tfw-finder .tfwf-res-name a:focus {
	color: var( --tfwf-accent );
	border-bottom-color: var( --tfwf-accent );
}

.tfw-finder .tfwf-res-price {
	font-size: 16px;
	font-weight: 600;
	color: var( --tfwf-price );
	white-space: nowrap;
}

.tfw-site .tfw-finder .tfwf-res-meta {
	color: var( --tfwf-dim );
	font-size: 12px;
	line-height: 17px;
	margin: 6px 0 10px;
}

.tfw-finder .tfwf-why {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tfw-finder .tfwf-chip {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 9999px;
	background: var( --tfwf-chip-bg );
	color: var( --tfwf-chip-text );
	border: 1px solid var( --tfwf-chip-line );
	font-size: 12px;
	line-height: 17px;
	font-weight: 600;
}

.tfw-site .tfw-finder .tfwf-res-years {
	color: var( --tfwf-dim );
	font-size: 12px;
	line-height: 17px;
	margin: 10px 0 0;
}

/* Email gate ------------------------------------------------------------ */

.tfw-finder .tfwf-gate {
	margin-top: 20px;
	padding: 20px;
	background: var( --tfwf-panel-2 );
	border: 1px solid var( --tfwf-line );
	border-left: 4px solid var( --tfwf-accent );
	border-radius: var( --tfwf-radius );
}

.tfw-site .tfw-finder .tfwf-gate-title {
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0 0 6px;
	color: var( --tfwf-text );
}

.tfw-site .tfw-finder .tfwf-gate p {
	color: var( --tfwf-text-2 );
	font-size: 14px;
	line-height: 20px;
	margin: 0 0 14px;
}

.tfw-finder .tfwf-gate-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tfw-site .tfw-finder .tfwf-gate-form input[ type="email" ] {
	flex: 1 1 220px;
	min-height: 32px;
	padding: 5px 10px;
	border: 1px solid var( --tfwf-line-strong );
	border-bottom-width: 1px;
	border-radius: var( --tfwf-radius );
	background-color: var( --tfwf-panel );
	color: var( --tfwf-text );
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
}

.tfw-site .tfw-finder .tfwf-gate-form input[ type="email" ]:focus {
	outline: none;
	border-color: var( --tfwf-line-strong );
	border-bottom: 2px solid var( --tfwf-accent );
}

.tfw-site .tfw-finder .tfwf-gate-note {
	font-size: 12px;
	line-height: 17px;
	color: var( --tfwf-dim );
	margin: 10px 0 0;
}

/* Fitment aware gear, rendered by tfw-spec-desk -------------------------- */

.tfw-finder .tfwf-gear {
	margin-top: 24px;
}

.tfw-finder .tfwf-gear:empty {
	margin-top: 0;
}

/* Home page call to action ----------------------------------------------
 *
 * The CTA is a home page component that happens to be owned by this plugin,
 * so on that surface it follows the home page's visual language rather than
 * the finder's Trail palette. Trail is correct once the visitor is inside the
 * finder, not on the doorway. These rules hang off a modifier class rather
 * than body.home so the block stays correct wherever the shortcode is used.
 */

.tfw-finder--cta {
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: Inter, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
	--tfwf-accent: #0f6cbd;
	--tfwf-accent-hover: #115ea3;
}

.tfw-finder .tfwf-cta {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
	margin: 30px 0 24px;
	padding: 24px;
	background: #ffffff;
	border: 1px solid rgba( 255, 255, 255, .72 );
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba( 0, 0, 0, .1 ), 0 0 2px rgba( 0, 0, 0, .08 );
}

.tfw-finder .tfwf-cta-body {
	flex: 1 1 320px;
}

.tfw-site .tfw-finder .tfwf-cta-kicker {
	font-size: 12px;
	line-height: 17px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var( --tfwf-accent );
	margin: 0 0 4px;
}

.tfw-site .tfw-finder .tfwf-cta-title {
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -.1px;
	margin: 0 0 8px;
	color: #242424;
}

.tfw-site .tfw-finder .tfwf-cta-text {
	font-size: 14px;
	line-height: 20px;
	color: #424242;
	margin: 0;
	max-width: 68ch;
}

.tfw-finder .tfwf-cta-act {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.tfw-site .tfw-finder .tfwf-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 6px 16px;
	border-radius: 4px;
	background-color: var( --tfwf-accent );
	border-color: var( --tfwf-accent );
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
}

.tfw-site .tfw-finder .tfwf-cta-btn:hover,
.tfw-site .tfw-finder .tfwf-cta-btn:focus {
	background-color: var( --tfwf-accent-hover );
	border-color: var( --tfwf-accent-hover );
	color: #ffffff;
	text-decoration: none;
}

.tfw-site .tfw-finder .tfwf-cta-btn:focus-visible {
	outline: 2px solid var( --tfwf-accent );
	outline-offset: 1px;
}

.tfw-finder .tfwf-cta-note {
	font-size: 12px;
	line-height: 17px;
	color: #616161;
}

@media ( max-width: 520px ) {

	.tfw-finder .tfwf-cta {
		padding: 18px;
	}

	.tfw-site .tfw-finder .tfwf-cta-title {
		font-size: 19px;
		line-height: 25px;
	}

	.tfw-finder .tfwf-cta-act {
		width: 100%;
	}

	.tfw-site .tfw-finder .tfwf-cta-btn {
		width: 100%;
	}
}

@media ( max-width: 520px ) {

	.tfw-finder .tfwf-res-top {
		gap: 4px;
	}

	.tfw-finder .tfwf-card {
		padding: 16px;
	}
}