/*
 * 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;
}

/* ----------------------------------------------------------------------
 *  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;
	position: relative;
	color: var(--rh-fg-muted, #5b6271);
	flex: 0 0 auto;
}

/* ----------------------------------------------------------------------
 *  Trailing control on the input's inline-END (visual LEFT in RTL):
 *  a loading spinner while a fetch is in flight, then a ✕ clear button once
 *  there's text. header-search.js sets [data-rh-spinner] (fetching) and the
 *  wrap gets .has-input (field non-empty); JS wires the ✕ to clear everything.
 * ---------------------------------------------------------------------- */
/* Back/close button — used ONLY in the mobile fullscreen overlay; hidden on
 * desktop and in the closed mobile bar. Revealed by the mobile @media rule below
 * when .rh-search-wrap.is-open. */
.rh-search__back {
	display: none;
}

/* The ✕ clear button — sits at the inline-end, hidden until there's text. */
.rh-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	order: 9;                 /* push to the inline-end of the flex row */
	width: 26px;
	height: 26px;
	margin-inline-start: 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rh-fg-muted, #5b6271);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: background-color 120ms, color 120ms;
}
.rh-search__close:hover {
	background: var(--wp--preset--color--surface, #eceef1);
	color: var(--rh-fg, #1a1d23);
}
/* Show the ✕ when the field has text AND we're not currently fetching. */
.rh-search-wrap.has-input .rh-search--inline:not([data-rh-spinner="true"]) .rh-search__close {
	opacity: 1;
	visibility: visible;
}

/* Loading spinner — its own slot at the inline-end (NOT on the magnifier, so
 * the magnifier stays put at the inline-start aligned with the result rows). */
.rh-search--inline::after {
	content: "";
	order: 9;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-inline-start: 4px;
	border-radius: 50%;
	border: 2px solid var(--rh-border, #e2e4e9);
	border-top-color: var(--rh-primary, #0a66c2);
	animation: rh-search-spin 0.6s linear infinite;
	display: none;
}
.rh-search--inline[data-rh-spinner="true"]::after {
	display: block;
}
@keyframes rh-search-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.rh-search--inline::after { animation-duration: 1.5s; }
}
.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);
}
/* Hide the branded placeholder once the field is focused OR has a value. The
 * sibling combinator alone was unreliable here (the placeholder span is not the
 * input's next sibling in this markup), so header-search.js also toggles
 * .rh-search-wrap.has-input / :focus-within as the authoritative signal. */
.rh-search__input:focus ~ .rh-search__placeholder,
.rh-search__input:not(:placeholder-shown) ~ .rh-search__placeholder,
.rh-search-wrap:focus-within .rh-search__placeholder,
.rh-search-wrap.has-input .rh-search__placeholder {
	display: none;
}

/* (Desktop ✕ clear-button visibility is handled above via .has-input; the
 *  mobile-open fullscreen variant is restyled further down.) */

/* 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: var(--rh-fw-strong);
	color: var(--rh-fg, #1a1d23);
}
.rh-search-dropdown__clear {
	border: 0;
	background: transparent;
	color: var(--rh-primary, #0a66c2);
	font-size: 12px;
	cursor: pointer;
	padding: 4px 6px;
}
.rh-search-dropdown__clear:hover,
.rh-search-dropdown__clear:focus-visible {
	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;
}
/* The suggestions <ul> spans the full dropdown; rows get a horizontal padding
 * that aligns their leading icon/thumbnail with the search input's magnifier
 * above. The dropdown is inset -16px from the wrap and the input has 12px of
 * inner padding, so 16+12 = 28px makes the row's leading edge line up exactly
 * under the input's magnifier — no more "input sits further from the right". */
.rh-search-dropdown__suggestions {
	padding-inline: 28px;
}
.rh-suggest__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px;
	margin-inline: -8px;        /* hover bg bleeds a touch past the text, stays aligned */
	color: var(--rh-fg, #1a1d23);
	text-decoration: none;
	border-radius: 10px;
	transition: background-color 100ms linear;
	min-width: 0;
}
.rh-suggest__row:hover,
.rh-suggest__row:focus-visible {
	background: var(--wp--preset--color--surface, #f4f5f7);
	color: var(--rh-fg, #1a1d23);
	outline: none;
}
.rh-suggest__main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}
.rh-suggest__icon {
	color: var(--rh-fg-muted, #9aa1ad);
	flex: 0 0 auto;
	display: inline-flex;
	width: 20px;
	justify-content: center;
}
/* Product thumbnail (locked small_default). 44px, rounded, sits in the same
 * leading slot as the icon so product + category rows align cleanly. */
.rh-suggest__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--wp--preset--color--surface, #f1f2f4);
}
.rh-suggest__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	line-height: 1.5;
	font-weight: var(--rh-fw-base);
	color: var(--rh-fg, #1a1d23);
}

/* "see all results for «X»" link (last row) — quieter, with a top divider. */
.rh-suggest__row--all {
	margin-top: 4px;
	color: var(--rh-primary, #0a66c2);
}
.rh-suggest__row--all .rh-suggest__title {
	font-weight: var(--rh-fw-strong);
	color: var(--rh-primary, #0a66c2);
	font-size: 13px;
}

/* Category (department) hit — LOW priority: small, muted, tiny badge. */
.rh-suggest__row--cat .rh-suggest__icon { color: var(--rh-fg-muted, #9aa1ad); }
.rh-suggest__row--cat .rh-suggest__title {
	font-weight: var(--rh-fw-base);
	font-size: 13px;
	color: var(--rh-fg-muted, #5b6271);
}
.rh-suggest__badge {
	flex: 0 0 auto;
	margin-inline-start: auto;
	font-size: 10px;
	line-height: 1.6;
	color: var(--rh-fg-muted, #9aa1ad);
	background: var(--wp--preset--color--surface, #f1f2f4);
	border-radius: 4px;
	padding: 1px 6px;
	white-space: nowrap;
}

/* 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;
}

/* ----------------------------------------------------------------------
 *  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;
		/* The base `.rh-search { max-width:320px }` (header.css) caps the inline
		 * form for the desktop main row. The global header's mobile search row
		 * lifts it via `.rh-row--search .rh-search`, but the product page's
		 * dedicated wrap (.rh-psplit-mh__search) is NOT inside .rh-row--search,
		 * so the 320px cap leaked through and the fullscreen bar stayed narrow.
		 * Lift it for ANY open fullscreen overlay regardless of container. */
		max-width: none;
	}
	/* Back button — always visible while the overlay is open (even with an empty
	 * field) so the user can always dismiss the search. Sits at the inline-start
	 * (visual right in RTL). */
	.rh-search-wrap.is-open .rh-search__back {
		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;
	}
	/* The ✕ clear stays at the inline-end and only appears once there's text
	 * (base .has-input rule controls show/hide); bump to a comfortable touch
	 * target on mobile. */
	.rh-search-wrap.is-open .rh-search__close {
		width: 36px;
		height: 36px;
		border-radius: 8px;
	}
	/* ── ONE trailing control slot (visual LEFT / inline-end) ─────────────
	 * Magnifier, loading spinner and clear button share ONE slot at the
	 * inline-end. Exactly one shows — and occupies the slot — at a time:
	 *     empty + idle  -> magnifier
	 *     fetching      -> spinner   (header-search.js sets [data-rh-spinner])
	 *     has text      -> clear     (header-search.js sets .has-input)
	 * Previously the magnifier sat mid-bar (order:1) while the spinner/clear sat
	 * at order:9, so they never lined up — this unifies all three on the left. */
	.rh-search__icon {
		order: 9;
		margin-inline-start: 6px;
	}
	.rh-search--inline[data-rh-spinner="true"] .rh-search__icon,
	.rh-search-wrap.has-input .rh-search__icon {
		display: none;
	}
	/* clear button uses display (not just visibility) on mobile so it occupies
	 * the slot ONLY when shown, landing where the magnifier/spinner were. */
	.rh-search__close { display: none; }
	.rh-search-wrap.has-input .rh-search--inline:not([data-rh-spinner="true"]) .rh-search__close {
		display: inline-flex;
	}
	/* Placeholder insets: magnifier now lives on the inline-end (left), so the
	 * hint clears it there; on the start (right) it needs only the form padding
	 * when closed, and must clear the back button once the overlay is open
	 * (fixes the placeholder text touching the icon). */
	.rh-search__placeholder { right: 12px; left: 42px; }
	.rh-search-wrap.is-open .rh-search__placeholder { right: 56px; }

	.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;
	}
}