/* Custom Search Bar — frontend styles.
   Matches the site's own search-bar design (search-box / search-btn /
   clear-btn), reproduced here under a unique .cs-search-* namespace so it
   can never collide with the active theme or other plugins. */

.cs-search-wrapper {
	position: relative;
	width: 100%;
	max-width: 345px;
	font-family: inherit;
	box-sizing: border-box;
}

.cs-search-wrapper * {
	box-sizing: border-box;
}

.cs-search-box {
	display: flex;
	width: 100%;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #d9d9d9;
	background: #fff;
}

.cs-search-input-wrapper {
	position: relative;
	flex: 1;
	min-width: 0;
}

.cs-search-input {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	padding: 0 42px 0 30px;
	font-size: 15px;
	color: #333;
}

.cs-search-input::placeholder {
	color: #18213a;
	opacity: 1;
}

/* Clear icon — hidden by default (the [hidden] attribute is toggled by
   the frontend script), appears inside the field once text is entered. */
.cs-search-clear {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	color: #777;
	font-size: 22px;
	line-height: 24px;
	text-align: center;
	cursor: pointer;
}

.cs-search-clear:hover {
	color: #333;
}

.cs-search-submit {
	width: 96px;
	flex-shrink: 0;
	border: none;
	background: #5ab536;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.cs-search-submit:hover {
	background: #4a4f57;
}

.cs-search-suggestions {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: #fff;
	border: 1px solid #e2e4e8;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(20, 20, 30, 0.12);
	max-height: 320px;
	overflow-y: auto;
	z-index: 9999;
}

.cs-search-suggestion {
	padding: 10px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	color: #1a1a1a;
	line-height: 1.4;
}

.cs-search-suggestion:hover,
.cs-search-suggestion.is-active {
	background: #eef7e9;
	color: #3f8a24;
}

.cs-search-suggestion.cs-search-no-results {
	cursor: default;
	color: #8a8f98;
	font-style: italic;
}

.cs-search-suggestion.cs-search-no-results:hover {
	background: transparent;
}

.cs-search-message {
	margin: 6px 0 0;
	font-size: 13px;
	color: #8a8f98;
	padding: 0 4px;
}

.cs-search-message.is-notice {
	color: #b8730f;
	font-weight: 600;
}

/* Mobile */
@media (max-width: 480px) {
	.cs-search-box {
		height: 56px;
	}

	.cs-search-input {
		padding-left: 18px;
		padding-right: 38px;
		font-size: 14px;
	}

	.cs-search-submit {
		width: 85px;
		font-size: 14px;
	}

	.cs-search-suggestion {
		padding: 14px 12px;
	}
}