/* =============================================================================
   Sydney Express: header search bar (se-search-bar.css) v1.0.0 · 2026-11-12
   The What / Where / search bar in ListingPro's header, on every front-end page.
   Loaded by se-archive.php. CSS only: ListingPro's suggestions, suburb list and
   search behaviour are untouched. Scoped to the header form, and to the suburb
   dropdown that select2 opens at the end of <body> (it carries .se-sb-drop,
   added by se-archive.js; until then the body-level rule below covers it).
   ========================================================================== */

header form.form-inline {
	--sb-ink: #1C2B3A;
	--sb-ink-2: #4E5F70;
	--sb-ink-3: #75879A;
	--sb-line: #E3EAF1;
	--sb-primary: #1A72D4;
	--sb-primary-hover: #0966A7;
	--sb-tint: #E8F1FC;
	--sb-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* What and Where: the same label, the same text. */
header form.form-inline .lp-suggested-search .input-group-addon,
header form.form-inline .lp-location-search .input-group-addon {
	font-family: var(--sb-font) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	color: var(--sb-ink) !important;
	text-transform: none !important;
}
header form.form-inline #select,
header form.form-inline .select2-selection__rendered {
	font-family: var(--sb-font) !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	color: var(--sb-ink) !important;
}
header form.form-inline #select::placeholder { color: var(--sb-ink-3) !important; opacity: 1; }
header form.form-inline .select2-selection__rendered[title="Your Suburb"] { color: var(--sb-ink-3) !important; }
header form.form-inline .select2-selection__rendered { padding-right: 18px !important; text-overflow: ellipsis; }

header form.form-inline .lp-suggested-search,
header form.form-inline .lp-location-search { border-radius: 10px !important; }
/* Focus ring on the visible white box only. The What input itself (it also carries the class
   lp-suggested-search) is wider than its box and runs under Where, so it gets no ring of its own. */
header form.form-inline .form-group.lp-suggested-search:focus-within,
header form.form-inline .form-group.lp-location-search:focus-within { box-shadow: 0 0 0 3px rgba(58, 155, 220, .55) !important; }
header form.form-inline input.lp-suggested-search,
header form.form-inline input.lp-suggested-search:focus,
header form.form-inline .lp-location-search .select2-selection:focus { box-shadow: none !important; outline: none !important; }

/* Where: crosshair (use my location) and the suburb picker. */
header form.form-inline .lp-location-search .fa-crosshairs { color: var(--sb-ink-3) !important; transition: color .16s ease; }
header form.form-inline .lp-location-search .fa-crosshairs:hover { color: var(--sb-primary) !important; }
header form.form-inline .select2-container--default .select2-selection--single { border: 0 !important; background: transparent !important; outline: none; }
header form.form-inline .select2-selection__arrow b { display: none !important; }
header form.form-inline .select2-selection__arrow::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 8px;
	margin-top: -2px;
	border: 4.5px solid transparent;
	border-top-color: var(--sb-ink-3);
	border-bottom-width: 0;
	transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
header form.form-inline .select2-container--open .select2-selection__arrow::after { transform: rotate(180deg); }

/* Search button: the brand blue, so it reads as the action. */
header form.form-inline input.lp-search-btn {
	border-radius: 10px !important;
	background: var(--sb-primary) !important;
	box-shadow: 0 1px 2px rgba(10, 38, 71, .2) !important;
	cursor: pointer;
	transition: background-color .16s ease, transform .12s cubic-bezier(.22, 1, .36, 1);
}
header form.form-inline input.lp-search-btn:hover { background: var(--sb-primary-hover) !important; }
header form.form-inline input.lp-search-btn:active { transform: scale(.95); }
header form.form-inline input.lp-search-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(58, 155, 220, .6) !important; }
header form.form-inline .lp-search-bar-right .lp-search-icon { color: #F4F8FC !important; pointer-events: none; }

/* The suburb list select2 opens at the end of <body>. */
.select2-container--open .select2-dropdown.se-sb-drop,
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-dropdown {
	margin-top: 8px;
	overflow: hidden;
	border: 1px solid #E3EAF1 !important;
	border-radius: 12px !important;
	background: #FDFEFF !important;
	box-shadow: 0 2px 4px rgba(10, 38, 71, .06), 0 24px 48px -16px rgba(10, 38, 71, .26) !important;
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-search--dropdown { padding: 10px 10px 6px !important; }
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-search__field {
	height: 40px;
	padding: 0 12px 0 34px !important;
	border: 1px solid #CFDAE5 !important;
	border-radius: 8px !important;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2375879A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 11px 50% no-repeat !important;
	font-family: inherit !important;
	font-size: 14px !important;
	color: #1C2B3A !important;
	outline: none;
}
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-search__field:focus { border-color: #1A72D4 !important; box-shadow: 0 0 0 3px rgba(26, 114, 212, .2); }
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-results > .select2-results__options { max-height: 300px !important; padding: 4px 6px 8px !important; }
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-results__option {
	margin: 0 !important;
	padding: 9px 10px !important;
	border-radius: 8px;
	background: none !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
	color: #1C2B3A !important;
}
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-results__option--highlighted,
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-results__option--highlighted[aria-selected] {
	background: #E8F1FC !important;
	color: #003781 !important;
}
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-results__option[aria-selected="true"] { font-weight: 600 !important; }
body:not(.se-sub):not(.se-dash) > .select2-container--open .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) { background: #F2F6FA !important; }

@media (prefers-reduced-motion: reduce) {
	header form.form-inline input.lp-search-btn,
	header form.form-inline .select2-selection__arrow::after { transition: none !important; }
}