/**
 * Search UI (mục D chỉ thị Phase 5) — dùng chung cho header desktop và
 * overlay mobile (cùng 1 template-part search-form.php).
 */
.alo-search-form {
	position: relative;
	display: flex;
	align-items: center;
}

.alo-search-form__icon {
	position: absolute;
	left: 14px;
	color: var(--alo-color-text-muted);
	pointer-events: none;
}

.alo-search-form__input {
	width: 100%;
	min-height: 44px;
	padding: 0 44px 0 40px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-sm);
	background: var(--alo-color-bg);
	font-size: 14px;
}
/* Ô tìm kiếm giữ chiều cao 44px/bo nhỏ của control trong header, nhưng
   NGÔN NGỮ FOCUS thì dùng chung với Liên hệ/Checkout/giỏ hàng. */
.alo-search-form__input:focus {
	background: var(--alo-color-surface);
	border-color: var(--alo-color-primary);
	outline: 2px solid var(--alo-color-primary-soft);
	outline-offset: 0;
}

.alo-search-form__submit {
	position: absolute;
	right: 4px;
	top: 4px;
	bottom: 4px;
	padding: 0 14px;
	border: none;
	border-radius: var(--alo-radius-sm);
	background: var(--alo-color-primary);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}

/* iOS Safari tự zoom khi focus input nhỏ hơn 16px; desktop header giữ mật độ
   hiện tại nên rule chỉ áp cho các bề mặt mobile.
   09/09/2026 — bổ sung `.alo-mobile-menu`: từ khi menu di động có ô tìm kiếm
   riêng, nó là bề mặt mobile THỨ HAI có input mà rule cũ không phủ, nên iOS
   zoom trang khi khách chạm vào ô đó. Phát hiện trong PRE-DEPLOY QA. */
@media (max-width: 1023px) {
	/* 13/09/2026 — `.alo-header__search` là bề mặt mobile THỨ BA có input:
	   từ nay header màn hẹp có ô tìm kiếm thật thay cho nút icon. Thiếu dòng
	   này iOS sẽ phóng to cả trang khi khách chạm vào ô. */
	.alo-mobile-search-overlay .alo-search-form__input,
	.alo-mobile-menu .alo-search-form__input,
	.alo-header__search .alo-search-form__input { font-size: 16px; }
}

/* Autocomplete (mục H chỉ thị Phase 6). */
.alo-search-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: var(--alo-z-dropdown);
	max-height: min(70vh, 420px);
	overflow-y: auto;
	background: var(--alo-color-surface);
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-md);
	box-shadow: 0 12px 28px rgba(20, 45, 28, .12);
}

.alo-search-suggest__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--alo-color-border);
}
.alo-search-suggest__item:hover { background: var(--alo-color-bg); }

.alo-search-suggest__thumb { width: 40px; height: 40px; flex-shrink: 0; }
.alo-search-suggest__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--alo-radius-sm); }

.alo-search-suggest__info { min-width: 0; }
.alo-search-suggest__name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.alo-search-suggest__price { display: block; font-size: 12px; color: var(--alo-color-price); font-weight: 700; }

.alo-search-suggest__view-all {
	display: block;
	width: 100%;
	min-height: 44px;
	border: none;
	background: var(--alo-color-bg);
	color: var(--alo-color-primary);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}

/* =====================================================================
   Nút xoá ô tìm kiếm (Homepage Polish 2027).
   Root cause bug Owner báo: nút clear NATIVE của input[type=search] nằm sát
   mép phải, đúng chỗ nút "Tìm" (absolute right:4px) đang phủ → không bấm
   được. Giải pháp: ẩn nút native, thêm nút riêng ĐỨNG TRƯỚC nút Tìm và nới
   padding phải của input để không phần tử nào chồng lên nhau.
   ===================================================================== */

.alo-search-form__input::-webkit-search-cancel-button,
.alo-search-form__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Nền/hover do `.alo-icon-btn--ghost` lo; ở đây chỉ còn vị trí trong ô và
   kích thước rút gọn cho vừa lòng ô nhập. */
.alo-search-form__clear {
	position: absolute;
	right: 68px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border-radius: var(--alo-radius-pill);
}
/* Vùng chạm >= 44px mà không làm icon to ra. */
.alo-search-form__clear::before {
	content: "";
	position: absolute;
	inset: -6px;
}
.alo-search-form__clear svg { width: 16px; height: 16px; }
.alo-search-form__clear[hidden] { display: none; }

/* Chừa chỗ cho cả nút xoá và nút Tìm. */
.alo-search-form:has(.alo-search-form__clear:not([hidden])) .alo-search-form__input { padding-right: 106px; }

/**
 * LỐI TẮT KHI CHƯA GÕ GÌ — mockup alo-ux-improvements §14.
 *
 * Chỉ hiện khi ô tìm kiếm còn trống. `:placeholder-shown` đúng bằng "input
 * rỗng" (ô luôn có placeholder), nên không cần thêm JS; khách vừa gõ ký tự
 * đầu là khối này nhường chỗ cho danh sách gợi ý.
 */
.alo-search-shortcuts {
	padding: 16px 16px 4px;
}
.alo-search-shortcuts__title {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--alo-color-text-muted);
}
.alo-search-shortcuts__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/**
 * Chip tự chứa trong file này thay vì dùng `.alo-chip` của `chips.css`:
 * chips.css chỉ được nạp ở trang catalog, còn overlay tìm kiếm nằm trong
 * header nên xuất hiện ở MỌI trang. Dùng class chung sẽ cho chip không có
 * kiểu ở trang chủ, PDP, giỏ hàng.
 */
.alo-search-shortcuts__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-pill);
	background: var(--alo-color-surface);
	color: var(--alo-color-text);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.alo-search-shortcuts__chip:hover { border-color: var(--alo-color-primary); }
.alo-mobile-search-overlay:has(.alo-search-form__input:not(:placeholder-shown)) .alo-search-shortcuts {
	display: none;
}