/*
 * RahkarTheme — header search: inline form + dropdown.
 *
 * Loaded ONLY when the active header config contains a search component
 * (see inc/enqueue.php condition).
 *
 * Speed-relevant decisions:
 *   - Dropdown is hidden with `[hidden]` (no paint / no layout cost).
 *   - `contain: layout paint` on the dropdown isolates internal painting.
 *   - Pills use inline-flex with no shadows/filters.
 *   - GPU transition on open via opacity + translateY.
 */

/* ----------------------------------------------------------------------
 *  Wrapper — positioning context for the dropdown
 * ---------------------------------------------------------------------- */
.rh-search-wrap {
	position: relative;
	width: 100%;
	max-width: 720px;
}
.rh-search-wrap.is-open {
	z-index: 1100;
	filter: drop-shadow(0 8px 24px rgba(15, 17, 21, 0.12));
}
.rh-search-wrap.is-open::before {
	content: '';
	position: absolute;
	inset: 0 -16px;
	background: #fff;
	border: 1px solid var(--rh-border, #e2e4e9);
	border-bottom: none;
	border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0;
	z-index: -1;
}

/* Desktop: when open, pin both edges to the search bar so the dropdown
   panel is flush with the search input — not wider than it. The earlier
   design expanded left -100px which made the panel larger than the bar. */
@media (min-width: 901px) {
	.rh-search-wrap.is-open::before,
	.rh-search-wrap.is-open .rh-search-dropdown {
		right: 0;
		left: 0;
	}
}

/* ----------------------------------------------------------------------
 *  Inline search form (the bar visible in the header)
 * ---------------------------------------------------------------------- */
.rh-search--inline {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	width: 100%;
	height: 40px;
	padding: 0 12px;
	background: #F4F2EE;
	border: 1.5px solid #E6E3DC;
	border-radius: 12px;
	color: #8b93a1;
	transition: border-color 120ms, background-color 120ms;
	box-sizing: border-box;
}
.rh-search--inline:hover,
.rh-search--inline:focus-within {
	border-color: var(--wp--preset--color--primary, #FF6600);
	background: #fff;
}
.rh-search-wrap.is-open .rh-search--inline {
	background: transparent;
	border-color: transparent;
}
.rh-search__icon {
	display: inline-flex;
	color: var(--rh-fg-muted, #5b6271);
	flex: 0 0 auto;
}
.rh-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	color: var(--rh-fg, #1a1d23);
	outline: none;
	padding: 0;
}
.rh-search__input::placeholder {
	color: var(--rh-fg-muted, #5b6271);
	opacity: 1;
}

/* Close button — hidden on desktop, shown on mobile */
.rh-search__close {
	display: none;
}

/* Clear (×) button — sits at the inline-end of the input (the same spot the
   typeahead spinner draws). JS toggles [hidden]: shown only when the input
   has text and no fetch is in flight. Absolutely positioned so it never
   changes the input's width mid-keystroke. */
.rh-search__clear {
	position: absolute;
	top: 50%;
	inset-inline-end: 6px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--rh-fg-muted, #5b6271);
	cursor: pointer;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 120ms, color 120ms;
}
.rh-search__clear:hover,
.rh-search__clear:focus-visible {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--rh-fg, #1a1d23);
	outline: none;
}
.rh-search__clear[hidden] {
	display: none;
}

/* Compact icon-only trigger */
.rh-search-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border: 0;
	border-radius: var(--wp--custom--radius--md);
	background: transparent;
	color: var(--rh-fg, #1a1d23);
	cursor: pointer;
	transition: background-color 120ms, color 120ms;
}
.rh-search-trigger-icon:hover,
.rh-search-trigger-icon:focus-visible {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--rh-primary, #0a66c2);
}

/* ----------------------------------------------------------------------
 *  Dropdown panel — positioned below the form
 * ---------------------------------------------------------------------- */
.rh-search-dropdown {
	position: absolute;
	top: 100%;
	left: -16px;
	right: -16px;
	background: #fff;
	color: var(--rh-fg, #1a1d23);
	border: 1px solid var(--rh-border, #e2e4e9);
	border-top: none;
	border-radius: 0 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md);
	max-height: min(420px, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 14px 0 18px;
	contain: layout paint;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity 150ms ease-out,
		transform 150ms ease-out;
}
.rh-search-dropdown.is-open {
	opacity: 1;
	transform: translateY(0);
}

/* ----------------------------------------------------------------------
 *  Sections: recent + popular
 * ---------------------------------------------------------------------- */
.rh-search-dropdown__section,
.rh-search-dropdown__suggestions {
	padding-inline: 18px;
}
.rh-search-dropdown__section + .rh-search-dropdown__section {
	margin-top: 16px;
}
.rh-search-dropdown__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.rh-search-dropdown__title {
	font-size: 13px;
	font-weight: var(--wp--custom--fw--strong);
	color: var(--rh-fg, #1a1d23);
}
/* Recent-clear — deliberately low-key. It's a destructive, rarely-used
   action that shouldn't compete with the brand-blue links; muted grey,
   small, no underline. */
.rh-search-dropdown__clear {
	border: 0;
	background: transparent;
	color: var(--rh-fg-muted, #5b6271);
	font-size: 11px;
	cursor: pointer;
	padding: 2px 4px;
	opacity: 0.75;
	transition: opacity 120ms, color 120ms;
}
.rh-search-dropdown__clear:hover,
.rh-search-dropdown__clear:focus-visible {
	color: var(--rh-fg, #1a1d23);
	opacity: 1;
	text-decoration: none;
}

/* Pills */
.rh-search-dropdown__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rh-search-dropdown__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid var(--rh-border, #e2e4e9);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--rh-fg, #1a1d23);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 120ms, background-color 120ms, color 120ms;
}
.rh-search-dropdown__pill:hover,
.rh-search-dropdown__pill:focus-visible {
	border-color: var(--rh-primary, #0a66c2);
	color: var(--rh-primary, #0a66c2);
	background: var(--wp--preset--color--surface, #f7f7f8);
}
.rh-search-dropdown__pill .rh-pill-icon {
	color: var(--rh-fg-muted, #5b6271);
	flex: 0 0 auto;
}

/* ----------------------------------------------------------------------
 *  Live suggestions (typeahead results)
 * ---------------------------------------------------------------------- */
.rh-search-dropdown__suggestions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.rh-suggest__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 8px;
	color: var(--rh-fg, #1a1d23);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--md);
	transition: background-color 100ms linear;
	min-width: 0;
}
.rh-suggest__row:hover,
.rh-suggest__row:focus-visible {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--rh-fg, #1a1d23);
	outline: none;
}
.rh-suggest__main {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}
.rh-suggest__icon {
	color: var(--rh-fg-muted, #5b6271);
	flex: 0 0 auto;
	display: inline-flex;
}
.rh-suggest__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
}
/* Type badge for category / brand rows. Products carry no badge — their
 * row is just the title, per the requested layout. Muted pill so it reads
 * as a quiet type hint, not a competing action. */
.rh-suggest__badge {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: var(--wp--custom--fw--strong);
	color: var(--rh-fg-muted, #5b6271);
	background: var(--wp--preset--color--surface, #f7f7f8);
	white-space: nowrap;
	padding: 2px 8px;
	border-radius: var(--wp--custom--radius--pill);
}

/* Zero-results state inside the suggestion list. Painted in place of
 * the result rows so the user gets the verdict without a wasted tap
 * to the archive page. Centred icon + label, muted color so it reads
 * as informational rather than as another tappable row. */
.rh-suggest__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 28px 16px 22px;
	color: var(--rh-fg-muted, #5b6271);
	text-align: center;
}
.rh-suggest__empty-icon {
	color: var(--rh-fg-muted, #5b6271);
	opacity: 0.7;
}
.rh-suggest__empty-text {
	font-size: 14px;
	line-height: 1.4;
}

/* "See all results" row — pinned at the bottom of the hit list, separated
   by a hairline so it reads as the fall-through action rather than another
   result. Brand-blue + centred to signal "go to the full results page". */
.rh-suggest__more-wrap {
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px solid var(--rh-border, #e2e4e9);
}
.rh-suggest__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 8px;
	color: var(--rh-primary, #0a66c2);
	font-size: 13px;
	font-weight: var(--wp--custom--fw--strong);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--md);
	transition: background-color 100ms linear;
}
.rh-suggest__more:hover,
.rh-suggest__more:focus-visible {
	background: var(--wp--preset--color--surface, #f7f7f8);
	outline: none;
}
.rh-suggest__more-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rh-suggest__more-arrow {
	flex: 0 0 auto;
}

/* ----------------------------------------------------------------------
 *  Mobile: fullscreen search experience
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	.rh-search__input {
		font-size: 16px;
	}
	.rh-search-wrap.is-open {
		position: fixed;
		inset: 0;
		z-index: 1100;
		max-width: none;
		width: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		padding: 12px 16px;
		filter: none;
	}
	.rh-search-wrap.is-open::before {
		display: none;
	}
	.rh-search-wrap.is-open .rh-search--inline {
		background: var(--wp--preset--color--surface, #f7f7f8);
		border: 1px solid var(--rh-border, #e2e4e9);
		border-radius: var(--wp--custom--radius--md);
		flex: 0 0 auto;
		height: 44px;
		padding: 0 12px;
	}
	.rh-search-wrap.is-open .rh-search__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: var(--wp--custom--radius--md);
		background: transparent;
		color: var(--rh-fg, #1a1d23);
		cursor: pointer;
		flex: 0 0 auto;
		-webkit-tap-highlight-color: transparent;
		order: -1;
		margin-inline-end: 8px;
	}
	.rh-search-wrap.is-open .rh-search__icon {
		order: 1;
	}
	/* Mobile-open layout moves the magnifying-glass to the inline-end of
	 * the form (order:1), which is the same edge where the typeahead
	 * spinner (loading.css → [data-rh-spinner]::after at inset-inline-end:12px)
	 * draws. Hide the glass while a fetch is in flight so the two don't
	 * stack on top of each other. visibility (not display) preserves
	 * the flex slot so input width doesn't jitter mid-keystroke. */
	.rh-search-wrap.is-open .rh-search--inline[data-rh-spinner="true"] .rh-search__icon {
		visibility: hidden;
	}
	/* When the input has text the clear (×) takes the inline-end; hide the
	   reordered magnifier so the two don't stack. JS adds rh-has-text. */
	.rh-search-wrap.is-open .rh-search--inline.rh-has-text .rh-search__icon {
		visibility: hidden;
	}
	.rh-search-wrap.is-open .rh-search-dropdown {
		position: static;
		left: auto;
		right: auto;
		flex: 1 1 auto;
		max-height: none;
		border: none;
		border-radius: 0;
	}
	html.rh-search-open,
	html.rh-search-open body {
		overflow: hidden;
		touch-action: none;
	}
}