/**
 * Header Search — visual styles (Explore Header Premium Refinement V1.0).
 *
 * @package PasionGift_App
 */

.pg-header-search {
	width: 100%;
	min-width: 0;
	cursor: pointer;
}

.pg-header-search:focus-visible {
	outline: 2px solid var(--pg-color-brand-wine);
	outline-offset: 2px;
	border-radius: var(--pg-radius-full);
}

.pg-header-search__label {
	display: flex;
	align-items: center;
	gap: var(--pg-space-sm);
	width: 100%;
	height: var(--pg-header-search-height);
	padding-inline: 0.75rem;
	background-color: var(--pg-color-brand-nude, var(--pg-color-interactive-bg));
	border: 1px solid rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.08);
	border-radius: var(--pg-radius-full);
	box-shadow: none;
	box-sizing: border-box;
	cursor: text;
	transition:
		background-color var(--pg-transition-fast) var(--pg-transition-ease),
		border-color var(--pg-transition-fast) var(--pg-transition-ease);
}

.pg-header-search:hover .pg-header-search__label,
.pg-header-search:focus-visible .pg-header-search__label {
	border-color: rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.16);
	background-color: #fff8f5;
}

.pg-header-search__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 0.9375rem;
	height: 0.9375rem;
	color: var(--pg-color-brand-wine);
	opacity: 0.72;
}

.pg-header-search__icon svg {
	width: 100%;
	height: 100%;
}

.pg-header-search__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	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-brand-black, var(--pg-color-text));
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.pg-header-search__input::placeholder {
	color: rgba(28, 28, 28, 0.42);
	font-weight: var(--pg-font-weight-medium);
}

.pg-header-search__input::-webkit-search-cancel-button {
	display: none;
}

@media (max-width: 359px) {
	.pg-header-search__label {
		gap: 0.3125rem;
		padding-inline: 0.5rem;
		height: 2.125rem;
	}

	.pg-header-search__icon {
		width: 0.875rem;
		height: 0.875rem;
	}

	.pg-header-search__input {
		font-size: 0.75rem;
	}

	.pg-header-search__input::placeholder {
		font-size: 0.75rem;
	}
}

@media (min-width: 360px) and (max-width: 389px) {
	.pg-header-search__label {
		padding-inline: 0.625rem;
	}
}

@media (min-width: 768px) {
	.pg-header-search__label {
		padding-inline: var(--pg-space-md);
	}

	.pg-header-search__icon {
		width: 1rem;
		height: 1rem;
	}
}
