/*
 * AdPro Directory — Filter Bar Styles
 *
 * Registered as 'adpro-dir-filter-bar' and lazy-loaded by Elementor
 * only on pages containing the Filter Bar widget.
 * Gap/padding values are overridden by Elementor's responsive controls.
 */

/* ── Bar wrapper ─────────────────────────────────────────── */
.adpro-dir-filter-bar {
	display: flex;
	flex-direction: column;
	row-gap: 12px;        /* overridden by filter_row_gap control */
}

/* ── Heading ────────────────────────────────────────────── */
.adpro-dir-filter-bar .adpro-dir-filter-heading {
	margin: 0 0 4px;
	color: inherit;
	line-height: 1.2;
}

/* ── Form (realtor mode) ─────────────────────────────────── */
.adpro-dir-filter-form {
	display: flex;
	flex-direction: column;
	row-gap: 12px;        /* overridden by filter_row_gap control */
}

/* ── Individual rows ─────────────────────────────────────── */
.adpro-dir-filter-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.adpro-dir-filter-row--split {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 16px;     /* overridden by filter_column_gap control */
}

.adpro-dir-filter-row--split .adpro-dir-filter-col {
	flex: 1 1 180px;
}

/* ── Fields ──────────────────────────────────────────────── */
.adpro-dir-filter-field {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 16px;
	font-size: inherit;
	border: 1px solid #d0d0d0;
	border-radius: 50px;   /* shared "pill" language across both filter modes */
	background: var(--adir-surface, #FFFFFF);
	color: var(--adir-text, #464B4F);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.adpro-dir-filter-field:focus {
	outline: none;
	border-color: var(--adir-accent, #152131);
	box-shadow: 0 0 0 2px rgba(27, 82, 112, 0.15);
}

/* Non-search fields (selects inside Advanced Filters) stay a softer
   rounded-rect rather than a full pill — a pill reads oddly with a
   dropdown caret and a long option label. */
.adpro-dir-advanced-filters .adpro-dir-filter-field {
	border-radius: 8px;
}

/* ── Unified search row (both realtor & affiliate modes) ─────
   One visual bar: text field(s) + attached submit button, so the two
   filter areas read as the same design language instead of two
   different UI patterns. */
.adpro-dir-search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

.adpro-dir-search-row .adpro-dir-search-input {
	flex: 1 1 200px;
}

.adpro-dir-search-row .adpro-dir-filter-submit {
	align-self: stretch;
	flex-shrink: 0;
}

/* Affiliate mode's button is icon-only — keep it square-ish, not a wide pill. */
.adpro-dir-affiliate-search .adpro-dir-filter-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
}

@media (max-width: 480px) {
	.adpro-dir-search-row { flex-direction: column; }
	/* In a column the 200px flex-basis would become a 200px-tall field. */
	.adpro-dir-search-row .adpro-dir-search-input { flex: 0 0 auto; }
	.adpro-dir-search-row .adpro-dir-filter-submit { align-self: stretch; }
}

/* ── Advanced Filters disclosure (realtor mode) ─────────────── */
.adpro-dir-advanced-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 6px 14px;
	border: 1px solid #d0d5dd;
	border-radius: 50px;
	background: var(--adir-surface, #FFFFFF);
	color: var(--adir-accent, #152131);
	font-size: max(14px, 0.85rem);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.adpro-dir-advanced-toggle:hover {
	background: var(--adir-accent-soft, #F4F6F8);
	border-color: var(--adir-accent, #152131);
}

.adpro-dir-advanced-toggle.is-open {
	background: var(--adir-accent-soft, #F4F6F8);
	border-color: var(--adir-accent, #152131);
}

.adpro-dir-advanced-toggle:focus-visible {
	outline: 2px solid var(--adir-accent, #152131);
	outline-offset: 2px;
}

.adpro-dir-advanced-chevron {
	transition: transform 0.15s ease;
}

.adpro-dir-advanced-toggle.is-open .adpro-dir-advanced-chevron {
	transform: rotate(180deg);
}

/* Explicit [hidden] override: without this, the plain `.adpro-dir-advanced-filters`
   display:flex rule below out-specifies the browser's default `[hidden]` styling,
   so the panel never actually collapses when the toggle sets `hidden` — it just
   sits there "resting below" the search row regardless of the button state. */
.adpro-dir-advanced-filters[hidden] {
	display: none;
}

.adpro-dir-advanced-filters {
	display: flex;
	flex-direction: column;
	row-gap: 12px;
	margin-top: 10px;
	padding: 14px 16px;
	background: #f8fafc;
	border: 1px solid #eef0f3;
	border-radius: 10px;
}

.adpro-dir-filter-label {
	display: block;
	font-size: max(14px, 0.85rem);
	font-weight: 600;
	margin-bottom: 4px;
	color: inherit;
}

/* ── Toggles (Realtor® / Appraiser) ─────────────────────── */
.adpro-dir-filter-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.adpro-dir-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

/* ── Submit button ───────────────────────────────────────── */
.adpro-dir-filter-submit {
	align-self: flex-start;
	padding: 10px 24px;
	border: none;
	border-radius: 50px;   /* matches the pill-shaped fields */
	background: var(--adir-accent-strong, #303E52);   /* was the button_bg_color default */
	color: var(--adir-on-accent, #FFFFFF);
	font-size: max(14px, 0.95rem);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.1s ease;
}

.adpro-dir-filter-submit:hover {
	background: var(--adir-heading, #152131);   /* brand dark */
}

.adpro-dir-filter-submit:active {
	transform: translateY(1px);
}

/* ── Affiliate skill tabs ────────────────────────────────── */
.adpro-dir-skill-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;             /* overridden by filter_tab_gap control */
}

.adpro-dir-skill-tab {
	/* Default (inactive) state */
	padding: 7px 16px;    /* overridden by tab_padding Elementor control */
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-size: max(14px, 0.9rem);
	cursor: pointer;
	color: var(--adir-text, #464B4F);          /* overridden by tab_color control */
	border-radius: 4px 4px 0 0;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	position: relative;
}

/* Hover state */
.adpro-dir-skill-tab:hover {
	color: var(--adir-accent, #152131);       /* overridden by tab_hover_color control */
}

/* Active state */
.adpro-dir-skill-tab.is-active {
	color: var(--adir-accent, #152131);       /* overridden by tab_active_color control */
	border-bottom-color: var(--adir-accent, #152131);
	font-weight: 600;
}

/* Focus ring for accessibility */
.adpro-dir-skill-tab:focus-visible {
	outline: 2px solid var(--adir-accent, #152131);
	outline-offset: 2px;
}

/* ── Sort arrows ─────────────────────────────────────────── */
.adpro-dir-sort-arrows {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.adpro-dir-sort-arrows .adpro-dir-filter-label {
	margin: 0 4px 0 0;
}

/* Solid surface for both states, so the selected direction stands out on
   light or dark sections: selected = filled + check mark. */
.adpro-dir-filter-bar .adpro-dir-sort-btn,
.adpro-dir-filter-bar .adpro-dir-sort-btn:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--adir-accent-line, #7287A3);
	border-radius: 6px;
	background: var(--adir-surface, #FFFFFF);
	color: var(--adir-accent, #152131);                     /* 8.4:1 ✓ */
	cursor: pointer;
	font-size: max(14px, 0.875rem);
	font-weight: 600;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.adpro-dir-filter-bar .adpro-dir-sort-btn:hover {
	background: var(--adir-accent-soft, #F4F6F8);
	border-color: var(--adir-accent, #152131);
	color: var(--adir-accent-strong, #303E52);
}

.adpro-dir-filter-bar .adpro-dir-sort-btn.is-active,
.adpro-dir-filter-bar .adpro-dir-sort-btn.is-active:hover,
.adpro-dir-filter-bar .adpro-dir-sort-btn.is-active:focus {
	background: var(--adir-accent, #152131);
	border-color: var(--adir-accent, #152131);
	color: var(--adir-on-accent, #FFFFFF);                     /* 8.4:1 ✓ */
}

.adpro-dir-filter-bar .adpro-dir-sort-check {
	display: none;
}

.adpro-dir-filter-bar .adpro-dir-sort-btn.is-active .adpro-dir-sort-check {
	display: block;
}

.adpro-dir-filter-bar .adpro-dir-sort-btn:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--adir-accent-strong, #303E52);
}

/* Shown only while neither direction is selected (default random order). */
.adpro-dir-filter-bar .adpro-dir-sort-hint {
	font-size: max(14px, 0.8125rem);
	font-style: italic;
	opacity: 0.85;
}

.adpro-dir-filter-bar .adpro-dir-sort-btn.is-active ~ .adpro-dir-sort-hint {
	display: none;
}

.adpro-dir-sort-btn:active {
	transform: translateY(1px);
}

/* =========================================================
 * Interactive states — WCAG AA (4.5:1 text, 3:1 outlines/focus)
 * Every state is set explicitly. Selectors are 2–4 classes deep so the
 * theme's / Elementor Site Settings' button styles (which also style
 * :hover and :focus, e.g. `.elementor-kit-6 button:focus`) can't mix in
 * unreadable colours. The widget's own style controls still win.
 * Colours come from the Design tokens (defaults = PPAR palette).
 * ========================================================= */

/* Text inputs & selects: a visible 3:1 outline and a clear focus ring. */
.adpro-dir-filter-bar .adpro-dir-filter-field {
	border: 1px solid var(--adir-accent-line, #7287A3);
	color: var(--adir-text, #464B4F);
}
.adpro-dir-filter-bar .adpro-dir-filter-field::placeholder {
	color: var(--adir-muted, #4A5B72);
	opacity: 1;
}
.adpro-dir-filter-bar .adpro-dir-filter-field:focus {
	border-color: var(--adir-accent, #152131);
	outline: 2px solid var(--adir-accent, #152131);
	outline-offset: 1px;
	box-shadow: none;
}

/* Search button */
.adpro-dir-filter-bar .adpro-dir-filter-submit,
.adpro-dir-filter-bar .adpro-dir-filter-submit:focus {
	border: 1px solid var(--adir-accent, #152131);
	background: var(--adir-accent, #152131);
	color: var(--adir-on-accent, #FFFFFF);
}
.adpro-dir-filter-bar .adpro-dir-filter-submit:hover,
.adpro-dir-filter-bar .adpro-dir-filter-submit:active {
	border-color: var(--adir-accent-strong, #303E52);
	background: var(--adir-accent-strong, #303E52);
	color: var(--adir-on-accent, #FFFFFF);
}

/* Advanced Filters toggle */
.adpro-dir-filter-bar .adpro-dir-advanced-toggle,
.adpro-dir-filter-bar .adpro-dir-advanced-toggle:focus {
	border: 1px solid var(--adir-accent-line, #7287A3);
	background: var(--adir-surface, #FFFFFF);
	color: var(--adir-heading, #152131);
}
.adpro-dir-filter-bar .adpro-dir-advanced-toggle:hover,
.adpro-dir-filter-bar .adpro-dir-advanced-toggle.is-open {
	border-color: var(--adir-accent, #152131);
	background: var(--adir-accent-soft, #F4F6F8);
	color: var(--adir-heading, #152131);
}

/* Category tabs — pill buttons: outline = available, filled = selected. */
.adpro-dir-filter-bar .adpro-dir-skill-tab,
.adpro-dir-filter-bar .adpro-dir-skill-tab:focus {
	margin: 0;
	border: 1px solid var(--adir-accent-line, #7287A3);
	border-radius: var(--adir-radius, 999px);
	background: var(--adir-surface, #FFFFFF);
	color: var(--adir-heading, #152131);
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
}
.adpro-dir-filter-bar .adpro-dir-skill-tab:hover,
.adpro-dir-filter-bar .adpro-dir-skill-tab:active {
	border-color: var(--adir-accent, #152131);
	background: var(--adir-accent-soft, #F4F6F8);
	color: var(--adir-heading, #152131);
}
.adpro-dir-filter-bar .adpro-dir-skill-tab.is-active,
.adpro-dir-filter-bar .adpro-dir-skill-tab.is-active:focus {
	border-color: var(--adir-accent, #152131);
	background: var(--adir-accent, #152131);
	color: var(--adir-on-accent, #FFFFFF);
}
.adpro-dir-filter-bar .adpro-dir-skill-tab.is-active:hover,
.adpro-dir-filter-bar .adpro-dir-skill-tab.is-active:active {
	border-color: var(--adir-accent-strong, #303E52);
	background: var(--adir-accent-strong, #303E52);
	color: var(--adir-on-accent, #FFFFFF);
}

/* Sort buttons: same language as the tabs. */
.adpro-dir-filter-bar .adpro-dir-sort-btn.is-active:hover,
.adpro-dir-filter-bar .adpro-dir-sort-btn.is-active:active {
	border-color: var(--adir-accent-strong, #303E52);
	background: var(--adir-accent-strong, #303E52);
	color: var(--adir-on-accent, #FFFFFF);
}
.adpro-dir-filter-bar .adpro-dir-sort-btn:hover,
.adpro-dir-filter-bar .adpro-dir-sort-btn:active {
	color: var(--adir-heading, #152131);
}

/* One focus style for every control: dark ring + white halo, so it's
   visible on light or dark page sections. */
.adpro-dir-filter-bar .adpro-dir-skill-tab:focus-visible,
.adpro-dir-filter-bar .adpro-dir-sort-btn:focus-visible,
.adpro-dir-filter-bar .adpro-dir-filter-submit:focus-visible,
.adpro-dir-filter-bar .adpro-dir-advanced-toggle:focus-visible {
	outline: 3px solid var(--adir-accent, #152131);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #FFFFFF;
}

/* Realtor / Appraiser: a radio group (with "Any") in a plain fieldset. */
.adpro-dir-filter-bar fieldset.adpro-dir-filter-toggles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.adpro-dir-filter-bar fieldset.adpro-dir-filter-toggles legend {
	float: left;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
}
.adpro-dir-filter-bar .adpro-dir-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	cursor: pointer;
}
.adpro-dir-filter-bar .adpro-dir-toggle input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--adir-accent, #152131);
}
.adpro-dir-filter-bar .adpro-dir-toggle input:focus-visible {
	outline: 3px solid var(--adir-accent, #152131);
	outline-offset: 2px;
}


/* =========================================================
 * Accessibility pass (WCAG 2.2 AA)
 *  - touch targets of at least 44px for the search field/button and 40px for category chips,
 *  - the search button shows a visible "Search" label next to its icon,
 *  - chips can never lose their text colour: widget colour overrides cannot take it below AA,
 *  - reduced-motion users get no transitions.
 * ========================================================= */
.adpro-dir-filter-bar .adpro-dir-search-input {
	min-height: 44px;
}

.adpro-dir-filter-bar .adpro-dir-affiliate-search .adpro-dir-filter-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	min-width: 44px;
	padding: 10px 22px;
}

.adpro-dir-filter-bar .adpro-dir-skill-tab {
	min-height: 40px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.adpro-dir-filter-bar .adpro-dir-skill-tab:focus-visible,
.adpro-dir-filter-bar .adpro-dir-filter-submit:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--adir-accent-strong, #303E52);
}

@media (prefers-reduced-motion: reduce) {
	.adpro-dir-filter-bar *,
	.adpro-dir-filter-bar *::before,
	.adpro-dir-filter-bar *::after {
		transition: none !important;
		animation: none !important;
	}
}