/* ------- Service search (shared: Home, Services) -------
   Markup: Views/Shared/_ServiceSearch.cshtml, behaviour: js/service-search.js.
   Layout around the field (width, neighbours) belongs to the page that hosts it. */

/* Anchors the results panel. */
.service-search-wrap {
	position: relative;
	width: 100%;
	min-width: 0;
}

.service-search {
	display: flex;
	align-items: center;
	gap: .8em;
	width: 100%;
	padding: 0 .45em 0 1.2em;
	height: 58px;
	background: #fff;
	border: 1px solid rgba(29, 97, 161, .25);
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(29, 97, 161, .12);
	transition: border-color .15s ease, box-shadow .15s ease;
}

	.service-search:hover,
	.service-search:focus-within {
		border-color: rgba(29, 97, 161, .55);
		box-shadow: 0 8px 22px rgba(29, 97, 161, .18);
	}

.service-search-icon {
	flex-shrink: 0;
	width: 1.3em;
	height: 1.3em;
	color: #1d61a1;
}

.service-search-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	font-family: inherit;
	font-size: 1.05em;
	color: #333;
	background: none;
	border: 0;
	outline: none;
}

	.service-search-input::placeholder {
		color: rgba(66, 66, 66, .6);
	}

.service-search-clear {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 1.25em;
	line-height: 1;
	color: rgba(66, 66, 66, .6);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

	/* display:flex above would otherwise beat the hidden attribute. */
	.service-search-clear[hidden] {
		display: none;
	}

	.service-search-clear:hover {
		color: #333;
		background: rgba(0, 0, 0, .06);
	}

	/* Label for screen readers only; not every host page defines .sr-only. */
	.service-search-clear .sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

.service-search-cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 1.7em;
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-family: inherit;
	font-size: .92em;
	font-weight: 600;
	background: linear-gradient(135deg, #1d61a1 0%, #3183d4 100%);
	cursor: pointer;
	transition: background .15s ease;
}

	.service-search-cta:hover {
		background: linear-gradient(135deg, #17518a 0%, #2a76c2 100%);
	}

/* ------- Search results ------- */

.service-search-results {
	position: absolute;
	top: calc(100% + .5em);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 22em;
	overflow-y: auto;
	padding: .4em;
	background: #fff;
	border: 1px solid rgba(29, 97, 161, .18);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}

.service-search-result {
	display: flex;
	align-items: center;
	gap: .75em;
	padding: .7em .85em;
	border-radius: 6px;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}

	.service-search-result:hover,
	.service-search-result.is-active {
		background: #eef6ff;
	}

.service-search-result-text {
	display: flex;
	flex-direction: column;
	gap: .15em;
	flex: 1;
	min-width: 0;
}

.service-search-result-name {
	color: #1d61a1;
	font-weight: 500;
	line-height: 1.3;
}

.service-search-result-parent {
	font-size: .82em;
	color: rgba(66, 66, 66, .7);
}

.service-search-result-action {
	flex-shrink: 0;
	position: relative;
	width: 1.1em;
	height: 1.1em;
	opacity: .4;
}

	.service-search-result-action::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 20%;
		width: .4em;
		height: .4em;
		border-right: 2px solid #1d61a1;
		border-bottom: 2px solid #1d61a1;
		transform: translateY(-50%) rotate(-45deg);
	}

.service-search-empty {
	margin: 0;
	padding: 1em .85em;
	color: rgba(66, 66, 66, .75);
	text-align: center;
}