/**
 * Search Suggestions — discovery & history styles.
 *
 * @package PasionGift_App
 */

.pg-search-suggestions {
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-lg);
	min-width: 0;
	min-height: 12rem;
	padding: var(--pg-space-sm) 0;
	overflow-x: hidden;
}

.pg-search-suggestions__section[hidden],
.pg-search-suggestions__discovery[hidden],
.pg-search-suggestions__panel[hidden],
.pg-search-suggestions__pending[hidden],
.pg-search-suggestions__suggest-empty[hidden] {
	display: none !important;
}

.pg-search-suggestions__hero {
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-xs);
	padding: var(--pg-space-sm) 0.125rem var(--pg-space-md);
}

.pg-search-suggestions__hero-title {
	margin: 0;
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-lg, 1.25rem);
	font-weight: var(--pg-font-weight-semibold);
	line-height: var(--pg-line-height-tight);
	color: var(--pg-color-brand-black);
	letter-spacing: var(--pg-letter-spacing-snug);
}

.pg-search-suggestions__hero-spark {
	margin-inline-start: 0.15em;
}

.pg-search-suggestions__hero-message {
	margin: 0;
	max-width: 22rem;
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-sm);
	line-height: var(--pg-line-height-normal);
	color: var(--pg-color-text-muted);
}

.pg-search-suggestions__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-search-suggestions__chip-item {
	margin: 0;
	padding: 0;
}

.pg-search-suggestions__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.14);
	border-radius: var(--pg-radius-full);
	background: var(--pg-color-brand-nude, var(--pg-color-interactive-bg));
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-sm);
	font-weight: var(--pg-font-weight-medium);
	line-height: 1.2;
	color: var(--pg-color-brand-wine);
	cursor: pointer;
	transition:
		background-color var(--pg-transition-fast) var(--pg-transition-ease),
		border-color var(--pg-transition-fast) var(--pg-transition-ease),
		color var(--pg-transition-fast) var(--pg-transition-ease);
}

.pg-search-suggestions__chip:hover,
.pg-search-suggestions__chip:focus-visible,
.pg-search-suggestions__chip.is-keyboard-active {
	background-color: rgba(249, 209, 217, 0.55);
	border-color: rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.28);
	outline: none;
}

.pg-search-suggestions__chip--category {
	background: var(--pg-color-surface);
	border-color: rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.2);
	color: var(--pg-color-text);
}

.pg-search-suggestions__chip--category:hover,
.pg-search-suggestions__chip--category:focus-visible {
	color: var(--pg-color-brand-wine);
}

.pg-search-suggestions__panel {
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-lg);
}

.pg-search-suggestions__pending {
	margin: 0;
	padding: var(--pg-space-sm) 0.125rem;
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-sm);
	font-weight: var(--pg-font-weight-medium);
	color: var(--pg-color-brand-wine);
}

.pg-search-suggestions__suggest-empty {
	margin: 0;
	padding: var(--pg-space-lg) var(--pg-space-md);
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-sm);
	line-height: var(--pg-line-height-normal);
	color: var(--pg-color-text-muted);
	text-align: center;
}

.pg-search-suggestions__item-icon--suggest {
	color: var(--pg-color-brand-wine);
	opacity: 0.75;
}

.pg-search-suggestions__item--suggest .pg-search-suggestions__item-action,
.pg-search-suggestions__item--suggest-history .pg-search-suggestions__item-action {
	width: 100%;
}

.pg-search-suggestions__panel--suggesting[aria-busy="true"] .pg-search-suggestions__list {
	opacity: 0.72;
}

.pg-search-suggestions__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pg-space-md);
	margin-bottom: var(--pg-space-sm);
	padding-inline: 0.125rem;
}

.pg-search-suggestions__section-title {
	margin: 0;
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-sm);
	font-weight: var(--pg-font-weight-semibold);
	line-height: var(--pg-line-height-tight);
	color: var(--pg-color-brand-black);
	letter-spacing: var(--pg-letter-spacing-snug);
}

.pg-search-suggestions__clear-all {
	flex-shrink: 0;
	padding: var(--pg-space-xs) var(--pg-space-sm);
	border: 0;
	border-radius: var(--pg-radius-full);
	background: transparent;
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-xs);
	font-weight: var(--pg-font-weight-medium);
	color: var(--pg-color-brand-wine);
	cursor: pointer;
	transition: background-color var(--pg-transition-fast) var(--pg-transition-ease);
}

.pg-search-suggestions__clear-all:hover,
.pg-search-suggestions__clear-all:focus-visible {
	background-color: var(--pg-color-brand-rose);
	outline: none;
}

.pg-search-suggestions__list {
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-search-suggestions__item {
	display: flex;
	align-items: center;
	gap: var(--pg-space-xs);
	min-width: 0;
	border-radius: var(--pg-radius-md);
	transition: background-color var(--pg-transition-fast) var(--pg-transition-ease);
}

.pg-search-suggestions__item:hover,
.pg-search-suggestions__item:focus-within {
	background-color: rgba(249, 209, 217, 0.35);
}

.pg-search-suggestions__item-action {
	display: flex;
	align-items: center;
	gap: var(--pg-space-sm);
	flex: 1;
	min-width: 0;
	padding: var(--pg-space-sm) var(--pg-space-md);
	border: 0;
	border-radius: var(--pg-radius-md);
	background: transparent;
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-sm);
	font-weight: var(--pg-font-weight-medium);
	line-height: var(--pg-line-height-normal);
	color: var(--pg-color-text);
	text-align: left;
	cursor: pointer;
}

.pg-search-suggestions__item-action:hover,
.pg-search-suggestions__item-action:focus-visible,
.pg-search-suggestions__item-action.is-keyboard-active {
	outline: none;
}

.pg-search-suggestions__item-action.is-keyboard-active,
.pg-search-suggestions__item:has(.pg-search-suggestions__item-action.is-keyboard-active) {
	background-color: rgba(249, 209, 217, 0.55);
}

.pg-search-suggestions__item-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--pg-color-text-muted);
	opacity: 0.85;
}

.pg-search-suggestions__item-icon svg {
	width: 100%;
	height: 100%;
}

.pg-search-suggestions__item-icon--trending {
	color: var(--pg-color-brand-wine);
	opacity: 0.75;
}

.pg-search-suggestions__item--trending .pg-search-suggestions__item-action {
	width: 100%;
}

.pg-search-suggestions__item-query {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pg-search-suggestions__item-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--pg-touch-target);
	height: var(--pg-touch-target);
	margin-inline-end: var(--pg-space-xs);
	padding: 0;
	border: 0;
	border-radius: var(--pg-radius-full);
	background: transparent;
	color: var(--pg-color-text-muted);
	cursor: pointer;
	transition: color var(--pg-transition-fast) var(--pg-transition-ease);
}

.pg-search-suggestions__item-remove:hover,
.pg-search-suggestions__item-remove:focus-visible {
	color: var(--pg-color-brand-wine);
	outline: none;
}

.pg-search-suggestions__discovery {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--pg-space-xl) var(--pg-space-md);
	text-align: center;
}

.pg-search-suggestions__discovery-title {
	margin: 0 0 var(--pg-space-sm);
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-md);
	font-weight: var(--pg-font-weight-semibold);
	line-height: var(--pg-line-height-tight);
	color: var(--pg-color-brand-black);
	letter-spacing: var(--pg-letter-spacing-snug);
}

.pg-search-suggestions__discovery-message {
	margin: 0;
	max-width: 20rem;
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-sm);
	line-height: var(--pg-line-height-normal);
	color: var(--pg-color-text-muted);
}

@media (min-width: 768px) {
	.pg-search-suggestions {
		gap: var(--pg-space-xl);
	}
}