/* Search icon injected into the live appbar header's .nav-actions by
   appbar-search.js. header.css (that header's own stylesheet) isn't
   available to check .menu-btn's exact rules against, so this is a
   conservative icon-button treatment sized like a typical sibling icon
   button - adjust colors/spacing here if it doesn't quite match the appbar's
   actual look once you see it live. */
.btaf-appbar-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0 4px;
	border: 0;
	background: transparent;
	color: #A765DD;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.15s;
}
.btaf-appbar-search-btn:hover {
	background: rgba(0, 0, 0, 0.06);
}
.btaf-appbar-search-btn .material-symbols-rounded {
	font-size: 22px;
}
/* header.css apparently has its own, more specific rule (something like
   ".nav-actions button") that gives every button in that row a visible
   border/shape - that beats the plain "border: 0" above on specificity
   alone, which is why a square/outline shows up despite this rule. Rather
   than fight that shape (it actually matches "Sign Up" reasonably well),
   just force ITS border color to the same purple as the icon, via
   !important and border-color specifically (not the shorthand, so whatever
   width/style header.css set is left alone). */

.btaf-appbar-search-btn.btaf-appbar-search-btn {
	border-color: #A765DD !important;
	background-color: transparent !important;
	color: #A765DD !important;
}