/*
 * 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: 10px 10px 0 0;
	z-index: -1;
}

/* Desktop: when open, grow the panel toward the cart/account icons instead of
   symmetrically. This is an RTL layout, so the icons sit on the PHYSICAL LEFT
   and the logo on the PHYSICAL RIGHT. We pin the right (logo) edge so opening
   never pushes toward the logo, and extend the left (icons) edge ~100px.
   Physical left/right are used deliberately (not logical inset-*) so they
   override the base ::before `inset` shorthand and the dropdown's left/right
   without any logical-vs-physical cascade ambiguity. Both the background
   (::before) and the dropdown share the geometry so they stay flush.
   Mobile keeps its fullscreen treatment (see the max-width block below). */
@media (min-width: 901px) {
	.rh-search-wrap.is-open::before,
	.rh-search-wrap.is-open .rh-search-dropdown {
		right: 0;        /* logo side — don't expand */
		left: -100px;    /* icons side — expand 100px */
	}
}

/* ----------------------------------------------------------------------
 *  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: var(--wp--preset--color--surface, #f7f7f8);
	border: 1px solid var(--rh-border, #e2e4e9);
	border-radius: 5px;
	color: var(--rh-fg-muted, #5b6271);
	transition: border-color 120ms, background-color 120ms;
	box-sizing: border-box;
}
.rh-search--inline:hover,
.rh-search--inline:focus-within {
	border-color: var(--rh-border, #e2e4e9);
	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: transparent;
}

/* Visual placeholder with branded site name.
   Insets skip past: padding (12px) + icon (18px) + gap (8px) = 38px on start side. */
.rh-search__placeholder {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 38px;
	left: 12px;
	display: flex;
	align-items: center;
	pointer-events: none;
	color: var(--rh-fg-muted, #5b6271);
	font: inherit;
	white-space: nowrap;
	overflow: hidden;
}
.rh-search__brand {
	color: var(--rh-primary, #0a66c2);
}
.rh-search__input:focus ~ .rh-search__placeholder,
.rh-search__input:not(:placeholder-shown) ~ .rh-search__placeholder {
	display: none;
}

/* 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: 9999px;
	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: 8px;
	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 10px 10px;
	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: 700;
	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: 9999px;
	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: 8px;
	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: 600;
	color: var(--rh-fg-muted, #5b6271);
	background: var(--wp--preset--color--surface, #f7f7f8);
	white-space: nowrap;
	padding: 2px 8px;
	border-radius: 9999px;
}

/* 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: 600;
	text-decoration: none;
	border-radius: 8px;
	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: 10px;
		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: 8px;
		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;
	}
}