/* ============================================================
   KHABSTORE — Live search component
   ============================================================ */

.khs-search { position: relative; width: 100%; }
.khs-search__form {
	display: flex; align-items: center; gap: var(--khs-s2);
	background: var(--khs-bg); border: 1px solid var(--khs-line);
	border-radius: var(--khs-radius-pill); padding: 4px 4px 4px 6px;
	transition: border-color var(--khs-dur) var(--khs-ease), background var(--khs-dur) var(--khs-ease);
}
.khs-search__form:focus-within { background: var(--khs-surface); border-color: var(--khs-primary-600); box-shadow: 0 0 0 3px var(--khs-primary-100); }
.khs-search__icon { margin-inline-start: var(--khs-s2); color: var(--khs-text-3); width: 20px; height: 20px; flex: none; }
.khs-search__input {
	flex: 1; min-width: 0; border: 0 !important; background: transparent !important;
	box-shadow: none !important; height: 42px; font-size: var(--khs-fs-14);
	padding: 0 !important;
}
.khs-search__input::placeholder { color: var(--khs-text-3); }
.khs-search__submit {
	flex: none; height: 40px; padding-inline: var(--khs-s4);
	border: 0; border-radius: var(--khs-radius-pill);
	background: var(--khs-primary-800); color: #fff;
	font-size: var(--khs-fs-13); font-weight: 700;
	transition: background var(--khs-dur) var(--khs-ease);
}
.khs-search__submit:hover { background: var(--khs-primary-700); }

/* Results dropdown */
.khs-search__results {
	position: absolute; inset-inline: 0; top: calc(100% + 6px);
	background: var(--khs-surface);
	border: 1px solid var(--khs-line); border-radius: var(--khs-radius-lg);
	box-shadow: var(--khs-shadow-2);
	padding: var(--khs-s2);
	z-index: 70;
	max-height: min(70vh, 520px); overflow-y: auto;
}
.khs-sr__status { padding: var(--khs-s3) var(--khs-s3); color: var(--khs-text-2); font-size: var(--khs-fs-13); }
.khs-sr__group { padding: var(--khs-s2) var(--khs-s2) 0; font-size: var(--khs-fs-12); font-weight: 800; color: var(--khs-text-3); }
.khs-sr__cat {
	display: flex; align-items: center; justify-content: space-between; gap: var(--khs-s2);
	padding: var(--khs-s2) var(--khs-s3); border-radius: var(--khs-radius); color: var(--khs-text); font-size: var(--khs-fs-14);
}
.khs-sr__cat:hover { background: var(--khs-primary-050); }
.khs-sr__cat small { color: var(--khs-text-3); }
.khs-sr__item {
	display: flex; align-items: center; gap: var(--khs-s3);
	padding: var(--khs-s2); border-radius: var(--khs-radius);
}
.khs-sr__item:hover { background: var(--khs-primary-050); }
.khs-sr__img {
	width: 56px; height: 56px; flex: none; object-fit: contain;
	border: 1px solid var(--khs-line); border-radius: var(--khs-radius-sm); background: #fff;
}
.khs-sr__body { flex: 1; min-width: 0; }
.khs-sr__brand { font-size: var(--khs-fs-12); color: var(--khs-accent-dark); font-weight: 700; }
.khs-sr__title {
	display: block; font-size: var(--khs-fs-14); color: var(--khs-text); font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.khs-sr__item:hover .khs-sr__title { color: var(--khs-primary-700); }
.khs-sr__price { font-size: var(--khs-fs-13); font-weight: 700; color: var(--khs-primary-900); white-space: nowrap; }
.khs-sr__price del { color: var(--khs-text-3); font-weight: 400; font-size: var(--khs-fs-12); margin-inline-start: 6px; }
.khs-sr__price ins { text-decoration: none; }
.khs-sr__all {
	display: block; text-align: center; padding: var(--khs-s2);
	border-top: 1px solid var(--khs-line); margin-top: var(--khs-s2);
	font-size: var(--khs-fs-13); font-weight: 700; color: var(--khs-primary-700);
	border-radius: 0 0 var(--khs-radius) var(--khs-radius);
}
.khs-sr__all:hover { background: var(--khs-primary-050); color: var(--khs-primary-900); }