/* Shared non-modal search emphasis primitive for Doctors + Skincare. */
[data-gloskin-search-focus-root]{position:relative}
[data-gloskin-search-focus-surface]{position:relative}

/*
 * The search surface owns the visible focus treatment. Suppress the nested
 * text input outline/ring so core :focus-visible and browser/WebKit focus
 * painting cannot create a second "ghost" border inside the component.
 * Current consumers provide an explicit :focus-within treatment on the
 * surface, so keyboard focus remains visibly indicated without a double ring.
 */
[data-gloskin-search-focus-surface] [data-gloskin-search-focus-input]:focus,
[data-gloskin-search-focus-surface] [data-gloskin-search-focus-input]:focus-visible{
	outline:0;
	outline-offset:0;
	box-shadow:none;
}

@media (min-width:768px){
	[data-gloskin-search-focus-root]::before{
		content:"";
		position:fixed;
		inset:0;
		z-index:50;
		background:rgba(0,0,0,.32);
		opacity:0;
		pointer-events:none;
		transition:opacity 200ms ease;
	}
	[data-gloskin-search-focus-root].is-search-focused::before{opacity:1}
	[data-gloskin-search-focus-root].is-search-focused [data-gloskin-search-focus-surface]{z-index:51}
}
@media (min-width:768px) and (prefers-reduced-motion:reduce){
	[data-gloskin-search-focus-root]::before{transition:none}
}