/*
 * Every custom property carries a fallback: this stylesheet ships with the
 * PLUGIN, so it can render under a theme that has never heard of Quartier's
 * tokens. Fallbacks are CSS system colours rather than hex, because TOKENS.md
 * forbids literal colours and a system colour also respects the reader's
 * forced-colours mode.
 */

/**
 * Instant Search — front end and editor.
 *
 * Structure and interaction states only. Every colour, radius and space is a
 * theme.json token, so a demo variation restyles this block by refilling slots
 * and never by touching CSS (TOKENS.md, "patterns reference slugs, never hex").
 * Hover / active tints are color-mix() off the token they modify, per the
 * "derived colours" rule — a demo that retints its primary gets a correct active
 * row for free.
 */

.wp-block-quartier-instant-search {
	position: relative;
	max-width: 32rem;
}

/* -- the field ----------------------------------------------------------- */

.anps-instant-search__field {
	position: relative;
	display: flex;
	align-items: center;
}

.anps-instant-search__icon {
	position: absolute;
	left: 0.85rem;
	display: inline-flex;
	color: var(--wp--preset--color--muted, GrayText);
	pointer-events: none;
}

/* Editor preview renders the icon as a glyph, not an SVG. */
span.anps-instant-search__icon {
	font-size: 1.25rem;
	line-height: 1;
}

.anps-instant-search__input {
	/* Brief §1.3 / touch target: never below 48px tall. */
	min-height: 48px;
	width: 100%;
	margin: 0;
	/* Left pad clears the icon; right pad is symmetric. */
	padding: 0 1rem 0 2.6rem;
	border: 1px solid var(--wp--preset--color--border, ButtonBorder);
	border-radius: var(--wp--custom--radius--control, 0.375rem);
	background-color: var(--wp--preset--color--paper, Field);
	color: var(--wp--preset--color--contrast, FieldText);
	font: inherit;
	line-height: 1.4;
}

.anps-instant-search__input::placeholder {
	color: var(--wp--preset--color--muted, GrayText);
	opacity: 1;
}

.anps-instant-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, Highlight);
	outline-offset: 2px;
}

.anps-instant-search__input:disabled {
	cursor: default;
}

/* -- the listbox --------------------------------------------------------- */

.anps-instant-search__listbox {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: 0.35rem 0 0;
	padding: 0.35rem;
	list-style: none;
	max-height: 24rem;
	overflow-y: auto;
	border: 1px solid var(--wp--preset--color--border, ButtonBorder);
	border-radius: var(--wp--custom--radius--card, 0.5rem);
	background-color: var(--wp--preset--color--paper, Canvas);
	color: var(--wp--preset--color--contrast, CanvasText);
	/* Token-derived: a soft lift off the page, not a new colour to maintain. */
	box-shadow: 0 8px 24px
		color-mix(in srgb, var(--wp--preset--color--contrast, CanvasText) 14%, transparent);
}

/* Load-bearing: the UA [hidden] rule loses to the block above, so without this
 * the listbox paints open on first render and the combobox looks broken. */
.anps-instant-search__listbox[hidden] {
	display: none;
}

/* -- options ------------------------------------------------------------- */

.anps-instant-search__group {
	margin: 0;
	padding: 0.4rem 0.6rem 0.25rem;
	color: var(--wp--preset--color--muted, GrayText);
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	font-weight: 600;
	letter-spacing: var(--wp--custom--overline--letter-spacing, 0.04em);
	text-transform: uppercase;
}

.anps-instant-search__option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.6rem;
	border-radius: var(--wp--custom--radius--control, 0.375rem);
	cursor: pointer;
}

/* aria-activedescendant highlight. color-mix keeps the tint tracking whatever
 * primary the active demo sets, and the text stays on the page's own contrast
 * colour so it never fails against the tint. */
.anps-instant-search__option.is-active,
.anps-instant-search__option:hover {
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--primary, Highlight) 12%,
		transparent
	);
}

.anps-instant-search__thumb {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm, 0.25rem);
	background-color: var(--wp--custom--product-image--background, var(--wp--preset--color--surface, Canvas));
}

.anps-instant-search__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.anps-instant-search__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.15rem;
}

.anps-instant-search__name {
	overflow: hidden;
	color: var(--wp--preset--color--contrast, CanvasText);
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.anps-instant-search__price {
	color: var(--wp--preset--color--primary, LinkText);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
}

/* Recent rows have no thumb, so pad the text to align with product names. */
.anps-instant-search__option--recent .anps-instant-search__name {
	padding-left: 0.15rem;
	color: var(--wp--preset--color--muted, GrayText);
}

.anps-instant-search__empty {
	padding: 0.75rem 0.6rem;
	color: var(--wp--preset--color--muted, GrayText);
	cursor: default;
}

/* Forced colours strip the mix; a visible outline keeps the active row legible. */
@media (forced-colors: active) {
	.anps-instant-search__option.is-active,
	.anps-instant-search__option:hover {
		background-color: Highlight;
		color: HighlightText;
		outline: 1px solid HighlightText;
	}

	.anps-instant-search__option.is-active .anps-instant-search__name,
	.anps-instant-search__option.is-active .anps-instant-search__price {
		color: HighlightText;
	}
}

/* -- utilities ----------------------------------------------------------- */

/* Visually hidden but exposed to assistive tech — the <label> and the polite
 * status live region. Self-contained so the block does not depend on the
 * theme shipping a .screen-reader-text of its own. */
.anps-instant-search__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}