/* ==========================================================================
   RightHomes4U — hero / home page search bar  (v4.14)
   Visually identical to the properties-page search bar (.rh-search), rendered
   at a slightly smaller scale so it fits a narrow Elementor column.
   Scoped to .rh-hero and forced with !important so theme/Elementor CSS
   cannot bleed in.
   ========================================================================== */

.rh-hero,
.rh-hero * {
	box-sizing: border-box !important;
}

.rh-hero {
	--rh-orange: #f2600c;
	--rh-orange-dark: #d95309;
	--rh-orange-soft: #fff4ee;
	--rh-orange-ring: rgba(242, 96, 12, .16);
	--rh-ink: #1c2430;
	--rh-muted: #97a0af;
	--rh-line: #e6eaf0;
	--rh-line-2: #eef1f6;
	--rh-field: #f7f8fa;

	font-family: inherit !important;
	display: block !important;
	width: 100% !important;
	max-width: 1120px !important;
	margin: 0 auto !important;
	text-align: left !important;
	position: relative !important;
	z-index: 20 !important;
}

.rh-hero__form {
	background: #fff !important;
	border: 1px solid var(--rh-line) !important;
	border-radius: 18px !important;
	padding: 0 !important;
	overflow: visible !important;
	box-shadow: 0 18px 45px -26px rgba(16, 24, 40, .38), 0 2px 6px rgba(16, 24, 40, .05) !important;
	display: block !important;
	margin: 0 !important;
	position: relative !important;
	z-index: 20 !important;
}

/* Tabs ------------------------------------------------------------------ */
.rh-hero__tabs {
	display: flex !important;
	gap: 6px !important;
	padding: 8px 10px 0 !important;
	background: linear-gradient(180deg, var(--rh-orange-soft), rgba(255, 255, 255, 0)) !important;
	border-bottom: 1px solid var(--rh-line-2) !important;
	border-radius: 18px 18px 0 0 !important;
	margin: 0 !important;
}

.rh-hero .rh-hero__tab {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--rh-muted) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	padding: 11px 18px !important;
	border-radius: 12px 12px 0 0 !important;
	cursor: pointer !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	position: relative !important;
	transition: color .2s ease, background .2s ease !important;
}

.rh-hero .rh-hero__tab::after {
	content: "" !important;
	position: absolute !important;
	left: 16px !important;
	right: 16px !important;
	bottom: 0 !important;
	height: 3px !important;
	border-radius: 3px 3px 0 0 !important;
	background: var(--rh-orange) !important;
	transform: scaleX(0) !important;
	transition: transform .25s ease !important;
}

.rh-hero .rh-hero__tab:hover {
	background: var(--rh-orange-soft) !important;
	color: var(--rh-orange) !important;
}

.rh-hero .rh-hero__tab:hover::after { transform: scaleX(.55) !important; }

.rh-hero .rh-hero__tab.is-active,
.rh-hero .rh-hero__tab.is-active:focus {
	background: var(--rh-orange) !important;
	color: #fff !important;
}

.rh-hero .rh-hero__tab.is-active::after {
	transform: scaleX(1) !important;
	background: var(--rh-orange-dark) !important;
}

/* Row -------------------------------------------------------------------- */
.rh-hero__body {
	display: grid !important;
	grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)) auto !important;
	gap: 12px !important;
	align-items: end !important;
	padding: 14px !important;
	position: relative !important;
	overflow: visible !important;
}

/* the 4 dropdowns sit inline in the same row */
.rh-hero__grid {
	display: contents !important;
}

.rh-hero__field {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.rh-hero__label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	color: var(--rh-muted) !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
}

.rh-hero .rh-hero__pin {
	color: var(--rh-orange) !important;
	flex: 0 0 auto !important;
	width: 13px !important;
	height: 13px !important;
}

.rh-hero .rh-hero__input,
.rh-hero .rh-hero__select {
	width: 100% !important;
	height: 44px !important;
	border: 1px solid var(--rh-line) !important;
	background: var(--rh-field) !important;
	border-radius: 12px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--rh-ink) !important;
	padding: 0 12px !important;
	margin: 0 !important;
	outline: none !important;
	line-height: 42px !important;
	box-shadow: none !important;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.rh-hero .rh-hero__input:hover,
.rh-hero .rh-hero__select:hover { border-color: #d5d9e0 !important; }

.rh-hero .rh-hero__input:focus,
.rh-hero .rh-hero__select:focus {
	background: #fff !important;
	border-color: var(--rh-orange) !important;
	box-shadow: 0 0 0 4px var(--rh-orange-ring) !important;
}

.rh-hero .rh-hero__input::placeholder {
	color: #9aa6b5 !important;
	opacity: 1 !important;
}

.rh-hero__selectwrap {
	position: relative !important;
	display: block !important;
}

.rh-hero .rh-hero__select {
	appearance: none !important;
	-webkit-appearance: none !important;
	padding-right: 30px !important;
	cursor: pointer !important;
	text-overflow: ellipsis !important;
}

.rh-hero__selectwrap::after {
	content: "" !important;
	position: absolute !important;
	right: 13px !important;
	top: 50% !important;
	width: 7px !important;
	height: 7px !important;
	margin-top: -5px !important;
	border-right: 2px solid #55606f !important;
	border-bottom: 2px solid #55606f !important;
	transform: rotate(45deg) !important;
	pointer-events: none !important;
}

/* Button ---------------------------------------------------------------- */
.rh-hero__field--submit {
	margin: 0 !important;
	justify-content: flex-end !important;
}

.rh-hero .rh-hero__btn {
	display: inline-flex !important;
	width: auto !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	height: 44px !important;
	background: var(--rh-orange) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 12px !important;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	padding: 0 22px !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	box-shadow: 0 14px 26px -18px rgba(242, 96, 12, .9) !important;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.rh-hero .rh-hero__btn:hover,
.rh-hero .rh-hero__btn:focus {
	background: var(--rh-orange-dark) !important;
	color: #fff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 20px 32px -18px rgba(242, 96, 12, .95) !important;
}

.rh-hero .rh-hero__btn:active { transform: translateY(0) !important; }

/* Narrow columns / tablets ---------------------------------------------- */
@media (max-width: 1180px) {
	.rh-hero__body {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.rh-hero__field--loc { grid-column: 1 / -1 !important; }

	.rh-hero__field--submit { grid-column: 1 / -1 !important; }

	.rh-hero .rh-hero__btn { width: 100% !important; }
}

@media (max-width: 620px) {
	.rh-hero__body {
		grid-template-columns: 1fr 1fr !important;
		padding: 12px !important;
		gap: 10px !important;
	}

	.rh-hero .rh-hero__tab {
		flex: 1 1 0 !important;
		padding: 11px 6px !important;
		font-size: 12.5px !important;
		text-align: center !important;
	}
}

/* ==========================================================================
   Autocomplete dropdown (home, list and map pages)
   ========================================================================== */
.rh-ac {
	position: absolute !important;
	z-index: 99999 !important;
	top: calc(100% + 8px) !important;
	left: 0 !important;
	right: 0 !important;
	min-width: 260px !important;
	background: #fff !important;
	border: 1px solid #e6eaf0 !important;
	border-radius: 14px !important;
	box-shadow: 0 22px 50px -18px rgba(16, 24, 40, .45) !important;
	overflow: hidden auto !important;
	max-height: 340px !important;
	font-family: inherit !important;
	animation: rh-ac-in .16s ease !important;
	text-align: left !important;
}

@keyframes rh-ac-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

.rh-ac__group {
	padding: 10px 14px 6px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: #97a3b2 !important;
	background: #fafbfd !important;
	margin: 0 !important;
}

.rh-ac__item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 14px !important;
	cursor: pointer !important;
	font-size: 14px !important;
	color: #1c2430 !important;
	transition: background .14s ease !important;
}

.rh-ac__item:hover,
.rh-ac__item.is-active {
	background: #fff3ec !important;
}

.rh-ac__text {
	flex: 1 1 auto !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.rh-ac__text b {
	color: #f2600c !important;
	font-weight: 700 !important;
}

.rh-ac__meta {
	flex: 0 0 auto !important;
	font-size: 12px !important;
	color: #8b97a6 !important;
}

.rh-ac__pin {
	flex: 0 0 auto !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: #fff0e7 !important;
	position: relative !important;
}

.rh-ac__pin::after {
	content: "" !important;
	position: absolute !important;
	inset: 5px !important;
	border-radius: 50% !important;
	background: #f2600c !important;
}

.rh-ac__thumb {
	flex: 0 0 auto !important;
	width: 40px !important;
	height: 30px !important;
	object-fit: cover !important;
	border-radius: 6px !important;
}

.rh-ac__empty {
	padding: 16px 14px !important;
	font-size: 14px !important;
	color: #8b97a6 !important;
}


/* Autocomplete must sit above Elementor hero layers -----------------------*/
.rh-hero__field { z-index: 5 !important; }
.rh-hero__field--loc { z-index: 2147483000 !important; }
.rh-hero__field--loc .rh-ac,
.rh-page .rh-ac,
.rh-ac { z-index: 2147483640 !important; }


/* v4.12 — autocomplete is rendered on <body> and positioned with JS, so it
   can never be clipped by an overflow:hidden wrapper on the search bar. */
.rh-ac.rh-ac--fixed {
	position: fixed !important;
	z-index: 2147483646 !important;
	overflow: hidden auto !important;
}