/**
 * Search Bar — visual styles.
 *
 * @package PasionGift_App
 */

.pg-search-bar {
	display: flex;
	align-items: center;
	gap: var(--pg-space-sm);
	min-width: 0;
	overflow: hidden;
	padding: var(--pg-space-sm) var(--pg-shell-padding-x);
	padding-inline: calc(var(--pg-shell-padding-x) + var(--pg-safe-left))
		calc(var(--pg-shell-padding-x) + var(--pg-safe-right));
	padding-top: var(--pg-space-sm);
	border-bottom: 1px solid var(--pg-color-border-subtle);
	background-color: var(--pg-color-surface);
	box-sizing: border-box;
}

.pg-search-bar__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--pg-touch-target);
	height: var(--pg-touch-target);
	padding: 0;
	border: 0;
	border-radius: var(--pg-radius-full);
	background: transparent;
	color: var(--pg-color-brand-black);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

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

.pg-search-bar__form {
	display: flex;
	align-items: center;
	gap: var(--pg-space-sm);
	flex: 1;
	min-width: 0;
}

.pg-search-bar__field {
	display: flex;
	align-items: center;
	gap: var(--pg-space-sm);
	flex: 1;
	min-width: 0;
	height: var(--pg-header-search-height);
	padding-inline: var(--pg-space-md);
	background-color: var(--pg-color-interactive-bg);
	border-radius: var(--pg-radius-full);
	box-shadow: var(--pg-shadow-search);
	box-sizing: border-box;
	transition: box-shadow var(--pg-transition-fast) var(--pg-transition-ease);
}

.pg-search-bar__field:focus-within {
	box-shadow:
		inset 0 0 0 1px rgba(142, 0, 55, 0.12),
		0 0 0 2px rgba(249, 209, 217, 0.65);
}

.pg-search-bar__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--pg-color-brand-wine);
	opacity: 0.75;
}

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

.pg-search-bar__input {
	flex: 1;
	min-width: 0;
	width: 100%;
	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-text);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.pg-search-bar__input::placeholder {
	color: var(--pg-color-text-placeholder);
}

.pg-search-bar__input::-webkit-search-cancel-button {
	display: none;
}

.pg-search-bar__clear {
	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-text-muted);
	cursor: pointer;
}

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

.pg-search-bar__clear[hidden] {
	display: none;
}

.pg-search-bar__submit {
	flex-shrink: 0;
	height: var(--pg-header-search-height);
	padding-inline: var(--pg-space-md);
	border: 0;
	border-radius: var(--pg-radius-full);
	background-color: var(--pg-color-brand-wine);
	font-family: var(--pg-font-family);
	font-size: var(--pg-font-size-sm);
	font-weight: var(--pg-font-weight-semibold);
	color: #ffffff;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.pg-search-bar__submit:hover,
.pg-search-bar__submit:focus-visible {
	opacity: 0.9;
	outline: none;
}

/* Mobile: icon-only actions to prevent horizontal overflow */
@media (max-width: 767px) {
	.pg-search-bar {
		gap: var(--pg-space-xs);
	}

	.pg-search-bar__form {
		gap: var(--pg-space-xs);
	}

	.pg-search-bar__clear {
		width: var(--pg-touch-target);
		min-width: var(--pg-touch-target);
		height: var(--pg-touch-target);
		padding: 0;
		font-size: 0;
		line-height: 0;
		color: transparent;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 7L17 17M17 7L7 17' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 1rem;
	}

	.pg-search-bar__clear:hover,
	.pg-search-bar__clear:focus-visible {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 7L17 17M17 7L7 17' stroke='%238e0037' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	}

	.pg-search-bar__submit {
		width: var(--pg-touch-target);
		min-width: var(--pg-touch-target);
		padding: 0;
		font-size: 0;
		line-height: 0;
		color: transparent;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M20 20L16.5 16.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 1.125rem;
	}
}

@media (min-width: 768px) {
	.pg-search-bar {
		padding-top: var(--pg-space-md);
	}
}

@media (min-width: 1024px) {
	.pg-search-overlay--panel .pg-search-bar {
		padding-top: var(--pg-space-sm);
	}
}