/**
 * cao-filter.css — BWG-533 faceted listings filter bar.
 *
 * Styles the FILTER BAR + reset only. The results grid + cards are styled by
 * .cao-grid--listing / .cao-card* in cao-home-v2.css (auto-enqueued on any page
 * carrying a [cao_filter] shortcode). Namespaced .caof* so it never collides
 * with the legacy .cao-filter* rules in cao-home-v2.css.
 *
 * Parity target = live Divi Machine filter (columbusandover.com/exclusive-listings):
 *   - centered flex row of borderless select2 dropdowns, bold centered headings
 *   - Neighborhood field wider (max 400px), 10px item spacing, 20px column gap
 *   - navy Reset button (#0C3D6C, 2px border, 3px radius, white uppercase 16px)
 */

.caof-wrap {
	--caof-navy: #0C3D6C;
	--caof-text: #333;
	--caof-font: var( --cao-font, "Montserrat", Helvetica, Arial, Lucida, sans-serif );
	font-family: var( --caof-font );
}

/* ---- filter bar (centered row) ------------------------------------------ */
.caof__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	column-gap: 20px;
	row-gap: 10px;
	margin: 0 0 4px;
	text-align: center;
}

.caof__field {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 1 auto;
	min-width: 180px;
	max-width: 256px;
	margin-bottom: 10px;
}

.caof__field--neighborhood {
	min-width: 240px;
	max-width: 400px;
}

.caof__field--hidden {
	display: none !important;
}

.caof__label {
	margin: 0 0 4px;
	padding: 0;
	font-family: var( --caof-font );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --caof-text );
	text-align: center;
}

/* native select (pre-select2 / no-JS fallback) */
.caof__select {
	width: 100%;
	max-width: 100%;
	font-family: var( --caof-font );
	font-size: 16px;
	color: var( --caof-text );
}

/* ---- select2 borderless compact override (scoped) ----------------------- */
.caof-wrap .select2-container {
	max-width: 100%;
}
.caof-wrap .select2-container--default .select2-selection--single {
	height: auto;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	outline: none;
}
.caof-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 22px 0 0;
	color: var( --caof-text );
	font-family: var( --caof-font );
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	text-align: center;
}
.caof-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var( --caof-text );
}
.caof-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 0;
	height: 19px;
}
.caof-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.caof-wrap .select2-container--default.select2-container--open .select2-selection--single {
	border: 0;
	box-shadow: none;
}

/* dropdown panel */
.caof-dropdown.select2-dropdown {
	border-color: #ccc;
	font-family: var( --caof-font );
	z-index: 100000;
}
.caof-dropdown .select2-results__option {
	font-size: 15px;
	color: var( --caof-text );
}
.caof-dropdown .select2-results__option--highlighted[aria-selected] {
	background: var( --caof-navy );
	color: #fff;
}
.caof-dropdown .select2-search--dropdown .select2-search__field {
	border-color: #ccc;
}

/* ---- reset button (Divi et_pb_button parity) ---------------------------- */
.caof__reset-row {
	display: flex;
	margin: 2px 0 18px;
}
.caof__reset-row--right { justify-content: flex-end; }
.caof__reset-row--left  { justify-content: flex-start; }
.caof__reset-row[hidden] { display: none; }

.caof__reset {
	display: inline-block;
	padding: 4.8px 16px;
	background: var( --caof-navy );
	border: 2px solid var( --caof-navy );
	border-radius: 3px;
	color: #fff !important;
	font-family: var( --caof-font );
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7em;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.caof__reset:hover {
	background: #fff;
	color: var( --caof-navy ) !important;
}

/* ---- results + loader --------------------------------------------------- */
.caof__results { width: 100%; }
.caof__sentinel { width: 100%; height: 1px; }
.caof__loading {
	width: 100%;
	padding: 24px 0 8px;
	font-family: var( --caof-font );
	font-size: 14px;
	color: var( --caof-text );
	text-align: center;
}
.caof__loading[hidden] { display: none; }

/* ---- filter polish v2 (2026-07-06): input chrome, persistent borders, inline reset ---- */
/* layout: one flex row — three fields + reset button aligned to their bottoms */
form.caof { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; column-gap: 26px; row-gap: 12px; margin-bottom: 30px; }
.caof .caof__bar { flex-wrap: wrap; row-gap: 12px; }
.caof .caof__reset-row, .caof .caof__reset-row--right { width: auto; margin: 0; justify-content: flex-start; }
.caof .caof__reset { height: 44px; display: inline-flex; align-items: center; padding: 0 22px; box-sizing: border-box; }

/* the select boxes: real input chrome, border persists in EVERY state */
.caof .select2-container { min-width: 230px; }
.caof .select2-container--default .select2-selection--single,
.caof-wrap .caof .select2-container--default .select2-selection--single {
  background: #fff; border: 1px solid #c9d2da; border-radius: 3px; height: 44px;
  transition: border-color .15s ease;
}
.caof .select2-container--default.select2-container--focus .select2-selection--single,
.caof-wrap .caof .select2-container--default.select2-container--focus .select2-selection--single,
.caof .select2-container--default.select2-container--open .select2-selection--single,
.caof .select2-container--default.select2-container--above .select2-selection--single,
.caof .select2-container--default .select2-selection--single:hover {
  border: 1px solid var(--caof-navy, #0C3D6C);
}

/* text inside the box: match site type, real placeholder/value contrast */
.caof .select2-selection__rendered {
  line-height: 42px !important; padding: 0 40px 0 16px !important;
  font-size: 15px; font-weight: 500; color: #1b2733; letter-spacing: .01em;
}
.caof .select2-selection__placeholder { color: #6c7a87; font-weight: 400; }

/* clean chevron instead of the dated select2 triangle */
.caof .select2-selection__arrow { height: 42px !important; width: 36px; top: 0 !important; right: 2px !important; }
.caof .select2-selection__arrow b {
  border: 0 !important; width: 9px; height: 9px; margin: -7px 0 0 -5px !important;
  border-right: 2px solid var(--caof-navy, #0C3D6C) !important;
  border-bottom: 2px solid var(--caof-navy, #0C3D6C) !important;
  transform: rotate(45deg); transition: transform .15s ease;
}
.caof .select2-container--open .select2-selection__arrow b { transform: rotate(-135deg); margin-top: -2px !important; }

/* dropdown panel */
.caof-dropdown.select2-dropdown { border: 1px solid #c9d2da; border-radius: 3px; }
.caof-dropdown .select2-results__option { font-size: 15px; padding: 9px 16px; }
.caof-dropdown .select2-results__option--highlighted[aria-selected] { background: var(--caof-navy, #0C3D6C); }
.caof-dropdown .select2-search--dropdown .select2-search__field { border: 1px solid #c9d2da; border-radius: 3px; padding: 6px 10px; }

/* native fallback select (JS off) */
.caof select.caof__select:not(.select2-hidden-accessible) { height: 44px; border: 1px solid #c9d2da; border-radius: 3px; background: #fff; padding: 0 12px; }

@media (max-width: 768px) {
  form.caof { row-gap: 14px; }
  .caof .select2-container { width: 100% !important; min-width: 0; }
  .caof .caof__field { width: 100%; }
  .caof .caof__reset-row { width: 100%; justify-content: center; }
}
/* chevron: pin to true center of the arrow well */
.caof .select2-selection__arrow b { position: absolute !important; top: 50% !important; left: 50% !important; }
.caof .select2-selection__arrow b { width: 9px !important; height: 9px !important; margin: -7px 0 0 -5px !important; }
.caof .select2-container--open .select2-selection__arrow b { margin-top: -2px !important; }
/* align reset with the boxes: strip legacy bottom margins inside the flex row */
form.caof .caof__bar { margin-bottom: 0; }
form.caof .caof__field { margin-bottom: 0; }

/* dropdown panel: match site typography + real search box (2026-07-06) */
.caof-dropdown .select2-results__option { font-weight: 500; color: #1b2733; }
.caof-dropdown .select2-search--dropdown { padding: 8px; }
.caof-dropdown .select2-search--dropdown .select2-search__field {
	font-family: inherit; font-size: 15px; font-weight: 500; color: #1b2733;
	height: 38px; padding: 6px 10px;
}

/* kill theme list bullets inside the select2 panel (the left-edge artifact) */
.caof-dropdown .select2-results__options { list-style: none; margin: 0; padding-left: 0; }
.caof-dropdown .select2-results__option { list-style: none; }
.caof-dropdown .select2-results__option::marker { content: none; }