/*
 * Search Homes hero page styles.
 * Loaded after fmc_connect (FlexMLS plugin CSS) so our rules win the cascade.
 *
 * The shortcode renders the plugin's "_new" widget template
 * (plugins/flexmls-idx/views/fmcSearch.php), NOT the "v2" template — the
 * outer wrapper carries classes like flexmls_connect__search_new_horizontal
 * and flexmls_connect__search_new_shadow. Two plugin defaults on those
 * classes were the cause of the broken layout:
 *   - .flexmls_connect__search_new_shadow has border:1px solid #ccc
 *   - .flexmls_connect__search_new_horizontal .flexmls_connect__search_new_links
 *     has width:45%; float:right — it floats the submit row to half width
 * Both are neutralised below. The location field also never gets a
 * ".location" modifier class from this template, so the label is hidden by
 * its `for` attribute instead of a class that doesn't exist on the markup.
 */

/* ---------------------------------------------------------------------------
   Heading and subheading — reduce from the theme's h1 display size
   --------------------------------------------------------------------------- */

.dmg-search-hero-heading {
	font-size: clamp(1.375rem, 2.5vw, 2rem) !important;
	margin-bottom: 0.5rem !important;
}

.dmg-search-hero-sub {
	font-size: 0.9375rem !important;    /* inline style on the block, needs !important */
	letter-spacing: 0.1em !important;
	margin-bottom: 1.75rem !important;  /* inline style on the block, needs !important */
	opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   Search card container — dark semi-transparent panel, no visible border
   --------------------------------------------------------------------------- */

.dmg-search-hero-card {
	background: rgba(0, 0, 0, 0.55) !important;
	border: none !important;
	outline: none !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
	max-width: 480px !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 24px !important;
	box-sizing: border-box !important;
}

/* ---------------------------------------------------------------------------
   FlexMLS widget outer wrapper — strip inline white bg / max-width / font,
   and neutralise the plugin's own border + margin on this wrapper.
   The outer div gets: style="color:#000; max-width:760px; font-family:Arial; background-color:#FFF"
   (no !important on those props, so our !important wins). The
   ".flexmls_connect__search_new_shadow" class also adds a plain
   border:1px solid #ccc + box-shadow via the plugin's own stylesheet.
   --------------------------------------------------------------------------- */

.dmg-search-hero-card .flexmls_connect__search {
	background-color: transparent !important;
	background: transparent !important;
	max-width: none !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	color: #ffffff !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

.dmg-search-hero-card form {
	margin: 0 !important;
	padding: 0 !important;
}

/* Hide the empty widget title bar */
.dmg-search-hero-card .flexmls_connect__search_new_title {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Fields — spacing, no visible border around the field wrapper
   --------------------------------------------------------------------------- */

.dmg-search-hero-card .flexmls_connect__search_field {
	margin-bottom: 1rem !important;
	border: none !important;
	float: none !important;
	width: 100% !important;
}

/*
 * Hide the "Location" label entirely. The plugin's own CSS only hides this
 * via ".flexmls_connect__search_field.location label", but this template
 * never adds the ".location" class to the field — so that plugin rule
 * silently never matched and the label stayed visible. Target it by its
 * `for` attribute instead, which the template always sets.
 */
.dmg-search-hero-card label[for^="location-search-"] {
	display: none !important;
}

/* Any other labels (only relevant if more fields get added later) */
.dmg-search-hero-card label,
.dmg-search-hero-card .flexmls_connect__search_new_label {
	color: rgba(255, 255, 255, 0.8) !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	display: block !important;
	margin-bottom: 0.4rem !important;
	border: none !important;
}

/* Inline checkbox labels stay inline */
.dmg-search-hero-card input[type="checkbox"] + label,
.dmg-search-hero-card input[type="radio"] + label {
	display: inline !important;
	text-transform: none !important;
	font-weight: 400 !important;
	font-size: 0.875rem !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
}

/* ---------------------------------------------------------------------------
   Select2 location picker — dark theme, inside card
   The plugin loads select2-4.0.5 CSS from CDN. We override it here.
   --------------------------------------------------------------------------- */

.dmg-search-hero-card .select2-container {
	width: 100% !important;
}

.dmg-search-hero-card .select2-container--default .select2-selection--multiple {
	background: rgba(0, 0, 0, 0.35) !important;
	border: none !important;
	border-radius: 6px !important;
	min-height: 44px !important;
	padding: 4px 8px !important;
	box-sizing: border-box !important;
}

.dmg-search-hero-card .select2-container--default.select2-container--focus
.select2-selection--multiple {
	/* Visible focus indicator (replaces the browser default removed below) —
	   bright enough to read clearly against this card's dark background. */
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9) !important;
	outline: none !important;
}

/*
 * Select2 lays the search field out as a floated <li> inside a <ul>, sized
 * to a tiny inline width that grows with typed characters — not with the
 * placeholder, which is why "Enter an Address, City, Zip or MLS#" was
 * getting clipped. Forcing the rendered list to flex and the search item to
 * grow makes the input (and its placeholder) span the full container width.
 */
.dmg-search-hero-card .select2-selection__rendered {
	display: flex !important;
	width: 100% !important;
}

.dmg-search-hero-card .select2-search--inline {
	float: none !important;
	flex: 1 1 auto !important;
	width: 100% !important;
}

/* The inline search input inside the select2 box */
.dmg-search-hero-card .select2-search__field,
.dmg-search-hero-card .select2-selection__search input {
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	background: transparent !important;
	border: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.dmg-search-hero-card .select2-search__field::placeholder {
	color: rgba(255, 255, 255, 0.45) !important;
}

/* Selected location tags */
.dmg-search-hero-card .select2-selection__choice {
	background: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 4px !important;
	color: #ffffff !important;
	font-size: 0.8125rem !important;
}

.dmg-search-hero-card .select2-selection__choice__remove {
	color: rgba(255, 255, 255, 0.7) !important;
	border: none !important;
	background: none !important;
}

/* Select2 dropdown — rendered at body level, not scoped to card */
.select2-container--default .select2-dropdown {
	background: #1c1c1c !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 0 0 8px 8px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 4px !important;
	color: #ffffff !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
}

.select2-container--default .select2-results__option {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 0.9375rem !important;
	padding: 0.6rem 1rem !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   Text inputs and selects — full width, dark background, white placeholder,
   subtle border
   --------------------------------------------------------------------------- */

.dmg-search-hero-card input[type="text"],
.dmg-search-hero-card input[type="search"],
.dmg-search-hero-card select {
	background: rgba(0, 0, 0, 0.35) !important;
	background-color: rgba(0, 0, 0, 0.35) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 6px !important;
	color: #ffffff !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	font-weight: 400 !important;
	height: auto !important;
	padding: 0.625rem 0.875rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.dmg-search-hero-card input[type="text"]::placeholder,
.dmg-search-hero-card input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
}

.dmg-search-hero-card input[type="text"]:focus,
.dmg-search-hero-card input[type="search"]:focus,
.dmg-search-hero-card select:focus {
	/* Visible focus indicator (replaces the browser default removed below) —
	   bright enough to read clearly against this card's dark background. */
	outline: none !important;
	border-color: rgba(255, 255, 255, 0.9) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9) !important;
}

/* ---------------------------------------------------------------------------
   Submit row
   The plugin's own CSS floats this row to 45% width when the widget is in
   horizontal orientation (.flexmls_connect__search_new_horizontal
   .flexmls_connect__search_new_links{width:45%;float:right;clear:right}) —
   that's neutralised here so the row spans the full card width and stacks.
   --------------------------------------------------------------------------- */

.dmg-search-hero-card .flexmls_connect__search_new_links {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	float: none !important;
	clear: both !important;
	gap: 0.75rem !important;
	margin-top: 0.25rem !important;
	text-align: center !important;
}

/*
 * Submit button.
 * After DB shortcode change to submit_button_shine="none", the inline style is:
 *   background:#000000 !important; color:#FFFFFF !important;
 * Those two inline !important props cannot be beaten by external CSS,
 * but they already set what we want (flat black bg, white text, no gradient).
 * Everything else (padding, radius, font, width) has no inline !important
 * and is beaten by our !important below.
 */
.dmg-search-hero-card .flexmls_connect__search_new_submit {
	width: 100% !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 6px !important;
	padding: 0.75rem 1.75rem !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	cursor: pointer !important;
	line-height: 1 !important;
	margin: 0 !important;
	transition: opacity 0.15s ease !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.dmg-search-hero-card .flexmls_connect__search_new_submit:hover {
	opacity: 0.85 !important;
}

/* "More Search Options" — centered below the button, small light-gray text */
.dmg-search-hero-card .flexmls_connect__search_new_links a {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	text-align: center !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
	transition: color 0.15s ease, border-color 0.15s ease !important;
}

.dmg-search-hero-card .flexmls_connect__search_new_links a:hover {
	color: rgba(255, 255, 255, 0.95) !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ---------------------------------------------------------------------------
   Checkboxes and radio buttons
   --------------------------------------------------------------------------- */

.dmg-search-hero-card input[type="checkbox"],
.dmg-search-hero-card input[type="radio"] {
	width: auto !important;
	height: auto !important;
	accent-color: #ffffff;
	vertical-align: middle;
	margin-right: 0.3rem;
}

/* ---------------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.dmg-search-hero-card {
		padding: 1.25rem !important;
	}
}