#far-finder {
	padding: 32px 20px 64px;
	/* Inherit the theme's typography so the finder blends into the host page:
	   body copy / form fields pick up the theme's base font (matching the
	   adjacent contact form), and the plugin's own headings fall through to the
	   theme's global h1–h6 font rule since nothing here overrides font-family
	   on them. */
	font-family: inherit;
	color: var(--far-text, #333);
	box-sizing: border-box;
}
#far-finder * { box-sizing: border-box; }

/* Two-column layout: search form + results on the left, the always-visible
   inquiry form in a sticky side panel on the right. Only applied when a
   Marketo form is configured (see templates/frontend.php) — without one the
   finder stays a single full-width column. */
#far-finder.far-has-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
	column-gap: 48px;
	row-gap: 0;
	align-items: start;
}
.far-col-main,
.far-col-aside { min-width: 0; }

/* Search form top-left, inquiry panel top-right, results span the full width
   of the row underneath (both columns). */
#far-finder.far-has-aside > .far-col-main  { grid-column: 1; grid-row: 1; }
#far-finder.far-has-aside > .far-col-aside { grid-column: 2; grid-row: 1; }
#far-finder.far-has-aside > #far-results   { grid-column: 1 / -1; grid-row: 2; }

.far-inquiry-panel {
	background: var(--far-bg, #fff);
	border: 1px solid var(--far-card-border, #eee);
	border-radius: var(--far-radius, 2px);
	padding: 24px;
	position: sticky;
	top: 24px;
}
/* ID-scoped so it beats the host theme's global `h2 { font-size }` rule
   (Avada's is ~50px) — a bare class selector loses to it. Matches #far-title
   so "Contact us" and "Find a Sales Rep" read at the same size. */
#far-finder .far-inquiry-panel-title {
	margin: 0 0 16px;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--far-heading, #1a1a1a);
	text-transform: uppercase;
}
.far-inquiry-panel--flash {
	animation: far-inquiry-flash 1.2s ease-out;
}
@keyframes far-inquiry-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
	25%      { box-shadow: 0 0 0 4px var(--far-primary, #e05a2b); }
}

/* [hidden] must win over any display:flex/block rule below it (e.g. #far-loading,
   #far-results-list) — otherwise those elements stay visible even when hidden. */
#far-finder [hidden] { display: none !important; }

/* The modals are moved to be direct children of <body> by far.js (see the
   comment there) specifically so they escape #far-finder's DOM subtree — so
   they need this same [hidden]-wins guarantee applied unscoped, or toggling
   .hidden does nothing against their own display:flex and they render open
   on every page load, with the close button unable to hide them either. */
.far-modal[hidden] { display: none !important; }

#far-title {
	font-size: 34px;
	font-weight: 800;
	margin: 0 0 12px;
	color: var(--far-heading, #1a1a1a);
	text-transform: uppercase;
}

#far-blurb {
	font-style: italic;
	color: #666;
	font-size: 16px;
	margin: 0 0 28px;
}

.far-field {
	margin-bottom: 22px;
	/* Smooth sequential reveal */
	max-height: 600px;
	overflow: hidden;
	opacity: 1;
	transition: max-height 0.35s ease, opacity 0.3s ease, margin-bottom 0.35s ease;
}

/* Collapsed/hidden state — toggled by JS progressive-disclosure logic */
.far-field--hidden {
	max-height: 0;
	opacity: 0;
	margin-bottom: 0;
	pointer-events: none;
}

.far-field label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--far-text, #333);
	text-transform: uppercase;
}

.far-required {
	color: var(--far-primary, #e05a2b);
}

.far-field select,
.far-field input[type="text"] {
	width: 100%;
	max-width: 440px;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #999;
	border-radius: var(--far-radius, 2px);
	background: var(--far-bg, #fff);
	color: var(--far-text, #333);
}

.far-field select:disabled {
	background: #f0f0f0;
	color: #999;
	cursor: not-allowed;
}

.far-select-wrap {
	position: relative;
	max-width: 440px;
}
.far-select-wrap select {
	/* room so the native dropdown arrow and the spinner don't overlap */
	padding-right: 40px;
}
.far-select-spinner {
	display: inline-block;
	position: absolute;
	top: 36%;
	right: 30px;
	transform: translateY(-50%);
	pointer-events: none;
}

.far-actions {
	display: flex;
	gap: 12px;
	margin: 24px 0 8px;
}

.far-btn {
	display: inline-block;
	padding: 12px 28px;
	/* <button> doesn't inherit font-family by default — force it so Submit /
	   Reset match the rest of the finder (and the theme) instead of Arial. */
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	border: none;
	border-radius: var(--far-radius, 2px);
	cursor: pointer;
}

.far-btn-primary {
	background: var(--far-primary, #e05a2b);
	color: #fff;
	transition: filter 0.15s ease;
	text-transform: uppercase;
}
.far-btn-primary:hover {
	filter: brightness(0.88);
}

.far-required-note {
	font-size: 13px;
	color: #666;
	margin: 12px 0 0;
}

.far-optional-filter {
	max-width: 440px;
}

/* The optional-filters wrapper inherits the same reveal transition */
#far-more-filters {
	max-height: 1200px;
	overflow: hidden;
	opacity: 1;
	transition: max-height 0.4s ease, opacity 0.3s ease;
}
#far-more-filters.far-field--hidden {
	max-height: 0;
	opacity: 0;
	pointer-events: none;
}

.far-filter-checkbox-list {
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 8px 12px;
}

.far-filter-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 14px;
	padding: 4px 0;
	cursor: pointer;
}

.far-filter-search-input-wrap {
	position: relative;
}
.far-filter-search-input-wrap .far-filter-search-input {
	/* room for the clear button and the loading spinner (both can be
	   visible at once — typing while text is already present) so typed
	   text never runs under either */
	padding-right: 56px;
}
.far-filter-search-spinner {
	/* It's a <span> (inline by default) — CSS transform doesn't apply to
	   inline elements in most browsers, which silently breaks BOTH the
	   rotation keyframe (.far-spinner's animation) and the translateY
	   centering below. inline-block is enough to fix both. */
	display: inline-block;
	position: absolute;
	top: 36%;
	right: 36px;
	transform: translateY(-50%);
}
.far-filter-clear {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	line-height: 1;
	border: none;
	background: none;
	color: #999;
	font-size: 18px;
	cursor: pointer;
	border-radius: 50%;
}
.far-filter-clear:hover {
	color: var(--far-text, #333);
	background: #eee;
}

.far-filter-search-results {
	position: relative;
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	max-height: 200px;
	overflow-y: auto;
}

.far-filter-search-item {
	padding: 8px 12px;
	font-size: 14px;
	cursor: pointer;
}
.far-filter-search-item:hover {
	background: #f5f5f5;
}

#far-results {
	margin-top: 40px;
	min-height: 200px;
}

#far-results h2 {
	font-size: 22px;
	font-weight: 700;
	color: #666;
	margin: 0 0 16px;
}

.far-prompt,
.far-no-results {
	color: #666;
	font-size: 15px;
}

.far-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #666;
	padding: 12px 0;
}

.far-spinner {
	width: 20px;
	height: 20px;
	border: 3px solid #ddd;
	border-top-color: var(--far-primary, #e05a2b);
	border-radius: 50%;
	animation: far-spin 0.8s linear infinite;
}
@keyframes far-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.far-spinner-sm {
	width: 14px;
	height: 14px;
	border-width: 2px;
}

#far-results-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
}

.far-result-card {
	padding: 20px;
	background: var(--far-card-bg, transparent);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--far-card-border, #eee);
	border-radius: var(--far-radius, 2px);
}

.far-result-card h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--far-heading, #1a1a1a);
}

.far-result-line {
	font-size: 15px;
	line-height: 1.6;
	color: var(--far-text, #444);
}

/* fieldLabel() wraps the "Contact:", "Email:", ... prefix in a <strong> and
   relies on the browser default bold weight — many themes (Avada included)
   reset strong/b's font-weight globally, often with a selector specific
   enough (e.g. scoped to their own content wrapper) to beat a plain
   ".far-result-line strong" rule, so this needs !important to always win.
   Two selectors, not one: cards render inside #far-finder, but the modals
   are moved to be direct children of <body> by far.js (see the comment
   there), so an ID-scoped #far-modal-body rule is needed to reach modal
   content — a #far-finder-scoped rule alone can't match it anymore.

   font-weight alone isn't enough on this host theme: Avada's body font here
   ("TradeGothic18") is a single-weight @font-face with NO bold variant, so
   font-weight:700 only produces weak synthetic bold on its condensed shapes
   and reads as "not bold". Route <strong> through the theme's real bold
   family ("TradeGothicBold" — the same font it uses for headings and the
   adjacent Marketo form labels). Override --far-strong-font on non-Avada
   installs; the generic fallbacks + font-weight keep it bold anywhere. */
#far-finder .far-result-line strong,
#far-modal-body strong {
	font-family: var(--far-strong-font, "TradeGothicBold"),
		"Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700 !important;
}

.far-result-line a {
	color: var(--far-primary, #e05a2b);
	text-decoration: none;
}
.far-result-line a:hover {
	text-decoration: underline;
}

/* Always occupies its space (no layout gap) — shown in a muted "disabled"
   style until the card is hovered/focused, then switches to the active color. */
.far-more-link {
	width: 100%;
	margin-top: auto;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.far-more-link span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 12px 16px;
	background: #e2e2e2;
	color: #888;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: var(--far-radius, 2px);
	transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.far-more-link span::after {
	content: "\2192";
}
.far-result-card:hover .far-more-link span,
.far-more-link:focus-visible span {
	background: var(--far-primary, #e05a2b);
	color: #fff;
}
.far-more-link:hover span {
	filter: brightness(0.88);
}

/* -------------------------------------------------------------------------
   Segmented results — one column per segment (Municipal / Industrial)
   ------------------------------------------------------------------------- */
#far-results-list.far-results-list--segmented {
	/* Two side-by-side segment columns (Municipal / Industrial). */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}

/* Cards get a JS-computed min-height (far.js equalizeCardHeights) so the
   Municipal / Industrial boxes are the same height; because the card is a
   flex column with .far-more-link pinned via marg-top:auto, the MORE INFO
   bars line up at the bottom too. */

.far-results-segment {
	display: flex;
	flex-direction: column;
}

.far-results-segment-title {
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--far-primary, #e05a2b);
	color: var(--far-heading, #1a1a1a);
}

.far-results-segment-cards {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Shown in a segment column that has no rep for the current search — the
   other column still lists its reps, and the two columns stay side by side. */
.far-results-segment-empty {
	margin: 0;
	padding: 20px;
	font-size: 15px;
	font-style: italic;
	color: #666;
	border: 1px dashed var(--far-card-border, #ddd);
	border-radius: var(--far-radius, 2px);
}

/* Icon row on each result card: the "contact this rep" envelope (opens the
   inquiry form — email addresses are never rendered) and website link
   (phone is rendered directly in the card fields). Plain icon links with
   no button chrome. The no-results "Send an inquiry" control keeps the button style. */
.far-card-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	/* Sit at the end of the card data — auto top margin absorbs the free
	   space so the icon row (and the "More info" button right after it) drop
	   to the bottom of an equal-height card. */
	margin: auto 0 4px;
	padding-top: 12px;
}
.far-card-actions a {
	display: inline-flex;
	align-items: center;
	color: var(--far-primary, #e05a2b);
	text-decoration: none;
	line-height: 1;
}
.far-card-actions a:hover {
	text-decoration: none;
	filter: brightness(0.85);
}
.far-card-actions .far-icon {
	width: 22px;
	height: 22px;
	display: block;
}

.far-no-results-msg {
	margin: 0 0 16px;
}
.far-inquiry-btn {
	display: inline-block;
}

.far-modal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* Max safe value — belt-and-suspenders alongside the JS that moves these
	   modals to be direct children of <body> (see far.js). z-index alone
	   isn't reliable here: a theme (Avada in particular) commonly applies
	   transform/filter/will-change to header or section wrappers, which
	   silently traps a position:fixed descendant inside THAT ancestor's own
	   stacking context regardless of how high its z-index is — the only sure
	   fix is for the modal to not be a descendant of anything that does that. */
	z-index: 2147483647;
	/* Moved outside #far-finder (see above), so these inherit <body>'s font —
	   which is exactly what we want now: the modal matches the host theme's
	   typography like the rest of the finder. Headings inside still fall
	   through to the theme's global h1–h6 font rule. */
	font-family: inherit;
}

.far-modal-inner {
	position: relative;
	background: var(--far-card-bg, #fff);
	color: var(--far-text, #333);
	border-radius: var(--far-radius, 2px);
	padding: 32px 28px 28px;
	max-width: 60dvw;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* The "More info" modal (plain rep details) isn't the Marketo contact-form
   modal — it doesn't need to be nearly as wide, a normal reading-width popup
   suits it better. #far-marketo-modal keeps the wider 60dvw above so an
   embedded form has room to lay out its fields. */
#far-modal .far-modal-inner {
	max-width: 500px;
}

.far-modal-inner h3 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--far-heading, #1a1a1a);
}

.far-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	border: none;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	padding: 4px;
}
.far-modal-close:hover {
	color: var(--far-text, #333);
}

@media (max-width: 900px) {
	/* Single column: search form, then results, then the inquiry panel. */
	#far-finder.far-has-aside { grid-template-columns: 1fr; row-gap: 32px; }
	#far-finder.far-has-aside > .far-col-main,
	#far-finder.far-has-aside > .far-col-aside,
	#far-finder.far-has-aside > #far-results { grid-column: 1; grid-row: auto; }
	.far-inquiry-panel { position: static; }
}

@media (max-width: 600px) {
	#far-title,
	#far-finder .far-inquiry-panel-title { font-size: 26px; }
	.far-actions { flex-direction: column; }
	.far-btn { width: 100%; }
	#far-results-list { grid-template-columns: 1fr; }
	#far-results-list.far-results-list--segmented { grid-template-columns: 1fr; }
	.far-results-segment { margin-bottom: 32px; }
}