/**
 * Header search — pill shape, primary color, no stray underline.
 * Width: để Flatsome Customizer điều khiển (.search-form { width: X% }).
 *
 * @package Flatsome_Child
 */

.header-search-form {
	min-width: 0;
	overflow: visible;
}

.header-search-form .header-search-form-wrapper,
.header-search-form .searchform-wrapper,
.header-search-form .searchform {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.header-search-form .searchform {
	position: relative;
	z-index: 40;
}

.header-search-form .searchform .flex-row,
#search-lightbox .searchform .flex-row {
	display: flex;
	align-items: stretch;
	gap: 0;
	min-height: 44px;
	border: 1px solid color-mix(in srgb, var(--primary-color, #1e73be) 22%, #dfe3ea);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.header-search-form .searchform .flex-row:focus-within,
#search-lightbox .searchform .flex-row:focus-within {
	border-color: var(--primary-color, var(--fs-color-primary, #1e73be));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #1e73be) 16%, transparent);
}

.header-search-form .searchform .flex-col,
#search-lightbox .searchform .flex-col {
	margin: 0 !important;
	padding: 0 !important;
}

.header-search-form .searchform .flex-col.flex-grow,
#search-lightbox .searchform .flex-col.flex-grow {
	flex: 1 1 auto;
	min-width: 0;
}

/* Flatsome "flat" style adds extra spacing / overlap on submit column */
.header-search-form .searchform-wrapper.form-flat .flex-col:last-of-type,
.header-search-form .form-flat .flex-row .flex-col:last-of-type {
	margin-left: 0 !important;
	padding-right: 0 !important;
}

.header-search-form .searchform .search-form-categories,
#search-lightbox .searchform .search-form-categories {
	flex: 0 0 auto;
	border-right: 1px solid color-mix(in srgb, var(--primary-color, #1e73be) 12%, #eef0f4);
}

.header-search-form .searchform .search_categories,
#search-lightbox .searchform .search_categories {
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 0 !important;
	border-radius: 0;
	background: color-mix(in srgb, var(--primary-color, #1e73be) 6%, #fff);
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
	box-shadow: none !important;
}

.header-search-form .searchform input.search-field,
.header-search-form .searchform input[type="search"],
.header-search-form .form-flat input:not([type="submit"]),
.header-search-form .searchform-wrapper:not(.form-flat) input,
#search-lightbox .searchform input.search-field,
#search-lightbox .searchform input[type="search"] {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	font-size: 14px;
	color: #1f2937;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

.header-search-form .searchform input.search-field::placeholder,
.header-search-form .searchform input[type="search"]::placeholder,
#search-lightbox .searchform input.search-field::placeholder,
#search-lightbox .searchform input[type="search"]::placeholder {
	color: #9ca3af;
	opacity: 1;
}

.header-search-form .searchform input.search-field:focus,
.header-search-form .searchform input[type="search"]:focus,
#search-lightbox .searchform input.search-field:focus,
#search-lightbox .searchform input[type="search"]:focus {
	outline: none;
	box-shadow: none !important;
}

.header-search-form .searchform .ux-search-submit,
.header-search-form .searchform-wrapper:not(.form-flat) .ux-search-submit,
#search-lightbox .searchform .ux-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: var(--primary-color, var(--fs-color-primary, #1e73be)) !important;
	color: #fff !important;
	box-shadow: none !important;
	line-height: 1;
	transition: filter 0.2s ease;
}

.header-search-form .searchform .ux-search-submit:hover,
#search-lightbox .searchform .ux-search-submit:hover {
	filter: brightness(0.92);
}

.header-search-form .searchform .ux-search-submit i,
.header-search-form .searchform .ux-search-submit svg,
#search-lightbox .searchform .ux-search-submit i,
#search-lightbox .searchform .ux-search-submit svg {
	margin: 0;
	font-size: 17px;
	line-height: 1;
	color: #fff !important;
}

/* Ẩn vạch / khung thừa từ Flatsome (normal + flat) */
.header-search-form.search-form,
.header-search-form.search-form::before,
.header-search-form.search-form::after,
.header-search-form .searchform-wrapper::before,
.header-search-form .searchform-wrapper::after {
	border: 0;
	box-shadow: none;
}

.header-search-form .live-search-results:empty,
#search-lightbox .live-search-results:empty {
	display: none;
}

/* Khôi phục live search dropdown của Flatsome (ảnh + tên sản phẩm khi gõ).
 * Lưu ý: plugin autocomplete append sẵn .autocomplete-suggestions vào
 * .live-search-results và tự bật/tắt nó. Vì vậy KHUNG popup phải đặt trên
 * .autocomplete-suggestions, còn .live-search-results chỉ là lớp định vị
 * trong suốt — nếu style nền/khung lên .live-search-results sẽ làm hỏng,
 * vì container con position:absolute khiến nó cao 0px. */
.header li.header-search-form.search-form.html .live-search-results,
.header-search-form.search-form .live-search-results,
.header-search-form .live-search-results,
#search-lightbox .live-search-results {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 9999;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
}

.header-search-form .live-search-results .autocomplete-suggestions,
#search-lightbox .live-search-results .autocomplete-suggestions {
	position: static !important;
	left: auto !important;
	top: auto !important;
	width: 100% !important;
	max-height: min(70vh, 460px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.header-search-form .live-search-results .autocomplete-suggestion,
#search-lightbox .live-search-results .autocomplete-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	cursor: pointer;
}

.header-search-form .live-search-results .autocomplete-suggestion:last-child,
#search-lightbox .live-search-results .autocomplete-suggestion:last-child {
	border-bottom: 0;
}

.header-search-form .live-search-results .autocomplete-suggestion:hover,
.header-search-form .live-search-results .autocomplete-selected,
#search-lightbox .live-search-results .autocomplete-suggestion:hover,
#search-lightbox .live-search-results .autocomplete-selected {
	background: color-mix(in srgb, var(--primary-color, #1e73be) 8%, #fff);
}

.header-search-form .live-search-results .autocomplete-suggestion img,
.header-search-form .live-search-results .search-image,
#search-lightbox .live-search-results .autocomplete-suggestion img,
#search-lightbox .live-search-results .search-image {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	object-fit: cover;
}

.header-search-form .live-search-results .search-name,
#search-lightbox .live-search-results .search-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.35;
	color: #1f2937;
}

.header-search-form .live-search-results .search-price,
#search-lightbox .live-search-results .search-price {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--primary-color, #1e73be);
}

.header-search-form .live-search-results .autocomplete-group,
#search-lightbox .live-search-results .autocomplete-group {
	padding: 8px 12px 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.35px;
	text-transform: uppercase;
	color: #9ca3af;
	background: #f9fafb;
}

.header-search-form .live-search-results .autocomplete-no-suggestion,
#search-lightbox .live-search-results .autocomplete-no-suggestion {
	padding: 12px 14px;
	font-size: 13px;
	color: #6b7280;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}

.header li.header-search-form,
.header li.header-search-form .header-search-form-wrapper {
	overflow: visible;
}

@media (max-width: 849px) {
	.header-search-form .searchform .flex-row,
	#search-lightbox .searchform .flex-row {
		min-height: 42px;
	}

	.header-search-form .searchform input.search-field,
	.header-search-form .searchform input[type="search"],
	.header-search-form .searchform .ux-search-submit,
	.header-search-form .searchform .search_categories,
	#search-lightbox .searchform input.search-field,
	#search-lightbox .searchform input[type="search"],
	#search-lightbox .searchform .ux-search-submit,
	#search-lightbox .searchform .search_categories {
		height: 42px;
	}

	.header-search-form .searchform .ux-search-submit,
	#search-lightbox .searchform .ux-search-submit {
		width: 44px;
	}
}