.search-form {
	display: flex;
	align-items: center;
	background: #FFFFFF;
	border: 2px solid #E5E7EB;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);
	padding: 0 1rem;
	height: 3.5rem;
	max-width: 600px;
	margin: 2rem auto;
	gap: 0;
	transition: all 0.3s ease;
}

.search-form:focus-within {
	border-color: #059669;
	box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1), 0 4px 12px rgba(5, 150, 105, 0.15);
}

/* search input */
#search {
	flex: 1;
	border: none;
	background: transparent !important;
	color: #464646;
	font-size: 1.15rem;
	padding: 0 0.5rem;
	height: 100%;
	outline: none;
	box-shadow: none;

}

#search::placeholder {
	color: #888e96;
	opacity: 1;
}

#search:focus {
	outline: none;
	/* Remove default outline */
}

#search-btn {
	background: none;
	/* Match input background */
	border: none;
	background-size: contain;
	color: #059669;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	min-width: 55px;
	height: 2.5rem;
	border-radius: 50%;
	margin: 0;
	font-size: 1.5rem;
	padding: 0 0.5rem;
	transition: background 0.2s, color 0.2s;

	/* top-left | top-right | bottom-right | bottom-left */

	/* border-radius: 0 5px 5px 0; */
}

#search-btn i {
	font-size: 1.8rem;
	margin: 0;
}

#search-btn:hover {
	color: #F97316;
	background: #F0FDF4;
}

#search-btn:active {
	opacity: 1;
	outline: none;
}

#search-results {
	list-style-type: none;
	margin: 0;
	padding-left: 15px;
}


#search::-webkit-search-cancel-button {
	position: relative;
	right: 15px;
}

.grey-text {
	color: grey;
}

@media (prefers-color-scheme: dark) {
	#search {
		color: #E5E7EB;
	}

	#search::placeholder {
		color: #9CA3AF;
		opacity: 1;
	}

	.search-form {
		background: #1F2937;
		border-color: #2D3748;
		box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
	}

	.search-form:focus-within {
		border-color: #10B981;
		box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1), 0 4px 12px rgba(16, 185, 129, 0.15);
	}

	#search-btn {
		color: #10B981;
	}

	#search-btn:hover {
		color: #FB923C;
		background: #064E3B;
	}
}


/* for Typesense instant search */


#search-hits {
	position: absolute;
	top: 100%;
	/* Position it right below the search form */
	left: 0;
	right: 0;
	background-color: #d2d2d276;
	border: 1px solid #d1d1d1;
	border-top: none;
	z-index: 3;
	/* Ensure it's above other content */
	max-height: 550px;
	/* Adjust as needed */
	overflow-y: auto;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: none;
	/* Initially hidden, JS will control visibility */
}


#search-hits .ais-Hits-item {
	background-color: rgb(248, 246, 243);
	padding: 1rem;
}

#search-hits .ais-Hits-item--empty {
	padding: 10px;
	color: #7f2929;
	background-color: #ececec;
	text-align: center;
}

#search-hits .hit-item {
	padding: 10px 15px;
	border-bottom: 1px solid #eeeeee;
	transition: background-color 0.2s ease;
}

#search-hits .hit-item:last-child {
	border-bottom: none;
}

#search-hits .hit-item:hover {
	background-color: #e6ffd395;
}

/* New style for keyboard-selected item */
#search-hits .hit-item.selected {
	background-color: #e6ffd395;
	/* Same as hover, or choose a distinct selection color */
}

#search-hits .hit-item a {
	text-decoration: none;
	color: inherit;
	display: block;
}

#search-hits .hit-item h3 {
	margin: 0 0 5px 0;
	font-size: 1em;
	color: #333333;
}

#search-hits .hit-item h3 mark {
	background-color: #feee89;
	/* Highlight color */
	color: inherit;
}

#search-hits .hit-item p {
	margin: 0;
	font-size: 0.9rem;
	color: #555555;
}

#search-hits .hit-item p mark {
	background-color: #fff3a3;
	/* Highlight color */
	color: inherit;
}

#search-hits .hit-title em {
	/* If you use em for titles */
	font-style: normal;
	/* color: #1a0dab; */
	/* Example styling for title */
}

#search-hits .hit-item p.hit-url {
	/* Styles for URL */
	font-size: medium;
	color: #206f00;
	/* Or use !important as a last resort if needed, but try to avoid */
}

#search-hits .hit-description {
	/* Styles for description */
	font-size: small;
}

@media (prefers-color-scheme: dark) {
	.search-form {
		background: #232f3e;
	}

	#search-btn:hover {
		opacity: 0.8;
		background: #2a3a4a;
	}

	#search {
		background-color: rgba(60, 70, 87, 0.615);
		/* Or use a CSS variable like var(--dark-surface-1) */
		color: lightblue;
		/* Uses light text from global.css */
	}

	#search::placeholder {
		color: rgb(167, 166, 166);
		/* A lighter grey for placeholder */
		opacity: 1;
	}

	#search-btn {
		background-color: rgb(46, 48, 76);
		/* Match search input */
		/* Consider changing icon color if it's an SVG or font icon */
	}

	#search-hits {
		background-color: rgb(56, 56, 56);
		/* A dark background for the overlay, slightly different from body */
		border-color: rgb(50, 61, 71);
		/* Darker border */
		color: lightblue;
		/* Light text for items */
	}

	#search-hits .ais-Hits-item--empty {
		color: rgb(180, 180, 180);
		/* Lighter grey for "no results" */
		background-color: transparent;
		/* Ensure no conflicting light background */
	}

	#search-hits .ais-Hits-item {
		background-color: rgba(27, 51, 66, 0.881);
		padding: 1rem;
	}

	#search-hits .hit-item {
		border-bottom-color: rgb(21, 32, 43);
		/* Darker border for items */
		background-color: rgb(21, 32, 43);
		/* Match #search-hits background or a slightly different shade */
		width: 100%;
	}

	#search-hits .hit-item:hover,
	#search-hits .hit-item.selected {
		background-color: rgba(78, 86, 37, 0.759);
		/* A slightly lighter dark shade for hover/selection */
	}

	#search-hits .hit-item a {
		color: rgb(238, 238, 238);
		/* Ensure links are light */
	}

	#search-hits .hit-item h3 {
		color: rgb(228, 228, 228);
		/* Light text for headings */
	}

	#search-hits .hit-item h3 mark {
		background-color: #b19009;
		/* A dark-theme friendly yellow/gold for highlights */
		color: #ffffff;
		/* Ensure text on highlight is readable */
	}

	#search-hits .hit-item p {
		color: rgb(200, 200, 200);
		/* Slightly dimmer light text for paragraphs */
	}

	#search-hits .hit-item p mark {
		background-color: #b19009;
		/* Consistent highlight color */
		color: #ffffff;
	}

	#search-hits .hit-item p.hit-url {
		color: #25be46;
		/* A light blue, common for links in dark mode */
	}

	#search-hits .hit-description {
		color: rgb(180, 180, 190);
		/* Lighter grey for description */
	}
}