/*
 * Pretraga (frontend.md §7, Design.md §8.9): polje i panel sa predlozima.
 * Telefon (do 66rem): dodir na polje otvara ekran pretrage preko celog ekrana, sa listom predloga.
 * Desktop: panel je kartica ispod header-a, iste širine kao header (kao mega meni), proizvodi u redu.
 * Breakpoint je upisan brojem jer @media ne prima var(): lg = 66rem (Design.md §6.4).
 */

/* ---------- Polje ---------- */

.kl-pretraga__forma {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--02);
	margin: 0;
}

.kl-pretraga__omot {
	position: relative;
	flex: 1;
	min-width: 0;
}

.kl-pretraga__polje {
	width: 100%;
	height: var(--wp--preset--spacing--08);
	padding: 0 var(--wp--preset--spacing--08) 0 var(--wp--preset--spacing--04);
	border: 0;
	background: var(--wp--preset--color--grey-50);
	color: var(--wp--preset--color--black);
	appearance: none;
}

.kl-pretraga__polje::placeholder {
	color: var(--wp--preset--color--grey-600);
}

.kl-pretraga__polje::-webkit-search-cancel-button {
	appearance: none;
}

.kl-pretraga__dugme {
	display: inline-flex;
	position: absolute;
	top: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	width: var(--wp--preset--spacing--08);
	height: var(--wp--preset--spacing--08);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--grey-600);
	cursor: pointer;
	transition: color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.kl-pretraga__dugme:hover {
	color: var(--wp--preset--color--black);
}

.kl-pretraga__dugme .kl-ikona {
	width: 1rem;
	height: 1rem;
}

/* "‹" za zatvaranje ekrana pretrage: samo dok je otvoren (telefon). Jače od .kl-ikonica (header). */
.kl-pretraga .kl-pretraga__nazad {
	display: none;
}

/* ---------- Sadržaj panela (telefon: lista) ---------- */

.kl-pretraga__poruka {
	margin: 0 0 var(--wp--preset--spacing--05);
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--body-sm);
}

/* Prečice: Prodavnica, Ski, Fitness */
.kl-pretraga__precice {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--03);
	margin: 0 0 var(--wp--preset--spacing--06);
	padding: 0;
	list-style: none;
}

.kl-pretraga__precica {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--touch-target);
	padding-inline: var(--wp--preset--spacing--05);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--body-sm);
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);
}

.kl-pretraga__precica:hover {
	border-color: var(--wp--preset--color--black);
}

.kl-pretraga__grupa + .kl-pretraga__grupa {
	margin-block-start: var(--wp--preset--spacing--06);
}

.kl-pretraga__naslov {
	margin: 0 0 var(--wp--preset--spacing--03);
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--caption);
}

.kl-pretraga__kategorije,
.kl-pretraga__proizvodi {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-pretraga__link {
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

/* Izabran strelicom ili pod mišem */
.kl-pretraga [aria-selected="true"] > .kl-pretraga__link {
	background: var(--wp--preset--color--grey-50);
}

@media (hover: hover) {
	.kl-pretraga__link:hover {
		background: var(--wp--preset--color--grey-50);
	}
}

.kl-pretraga__kategorija .kl-pretraga__link {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--03);
	min-height: var(--wp--custom--touch-target);
	padding: var(--wp--preset--spacing--03) var(--wp--preset--spacing--02);
	margin-inline: calc(var(--wp--preset--spacing--02) * -1);
}

.kl-pretraga__roditelj {
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--caption);
}

.kl-pretraga__proizvod .kl-pretraga__link {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--04);
	padding: var(--wp--preset--spacing--02);
	margin-inline: calc(var(--wp--preset--spacing--02) * -1);
}

.kl-pretraga__slika {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--grey-50);
}

.kl-pretraga__slika img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kl-pretraga__info {
	display: grid;
	gap: var(--wp--preset--spacing--01);
	min-width: 0;
}

.kl-pretraga__naziv {
	font-size: var(--wp--preset--font-size--product-title);
	line-height: var(--wp--custom--line-height--caption);
}

/* Akcijska cena ispred precrtane, kao na kartici */
.kl-pretraga__cena {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--03);
	font-size: var(--wp--preset--font-size--price);
}

.kl-pretraga__cena del {
	color: var(--wp--preset--color--grey-600);
}

.kl-pretraga__rasprodato {
	color: var(--wp--preset--color--grey-600);
	font-size: var(--wp--preset--font-size--caption);
}

.kl-pretraga__sve {
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--06);
}

/* ---------- Telefon: ekran pretrage ---------- */

.kl-pretraga--mobilni.is-otvorena {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 10;
	flex-direction: column;
	background: var(--wp--preset--color--white);
}

.kl-pretraga--mobilni.is-otvorena .kl-pretraga__forma {
	flex: none;
	padding: var(--wp--preset--spacing--03) var(--wp--preset--spacing--05);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
}

.kl-pretraga--mobilni.is-otvorena .kl-pretraga__nazad {
	display: inline-flex;
	margin-inline-start: calc((var(--wp--custom--touch-target) - var(--wp--custom--icon--size)) / -2);
}

.kl-pretraga--mobilni .kl-pretraga__panel {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.kl-pretraga--mobilni .kl-pretraga__unutra {
	padding: var(--wp--preset--spacing--05) var(--wp--preset--spacing--05) var(--wp--preset--spacing--09);
}

/* Stranica ispod ekrana pretrage se ne pomera */
html.kl-pretraga-otvorena {
	overflow: hidden;
}

/* ---------- Desktop: kartica ispod header-a ---------- */

@media (min-width: 66rem) {
	/* Polje je 1rem samo na telefonu (iOS zumira manja polja). */
	.kl-pretraga__polje {
		font-size: var(--wp--preset--font-size--nav-sub);
	}

	/*
	 * Panel se meri od celog header-a (.kl-header je pozicioniran, a blok i njegov roditelj nisu).
	 * Spoljni deo je providan i premošćuje razmak do header-a.
	 */
	.kl-pretraga--desktop .kl-pretraga__panel {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 1;
		padding-block-start: var(--wp--custom--header--float-gap);
	}

	.kl-pretraga--desktop .kl-pretraga__unutra {
		overflow-y: auto;
		max-height: calc(100vh - var(--kl-admin-traka, 0px) - var(--kl-header-vrh, 0px) - var(--kl-visina) - 3 * var(--wp--custom--header--float-gap));
		padding: var(--wp--preset--spacing--07) var(--kl-margina) var(--wp--preset--spacing--08);
		background: var(--wp--preset--color--white);
		border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--grey-200);
		border-radius: var(--wp--custom--header--float-radius);
	}

	/* Kategorije levo, proizvodi u redu desno (6 kartica) */
	.kl-pretraga--desktop .kl-pretraga__rezultati {
		display: flex;
		gap: var(--wp--preset--spacing--09);
	}

	.kl-pretraga--desktop .kl-pretraga__grupa {
		margin: 0;
	}

	.kl-pretraga--desktop .kl-pretraga__grupa--kategorije {
		flex: 0 0 14rem;
	}

	.kl-pretraga--desktop .kl-pretraga__grupa--proizvodi {
		flex: 1;
		min-width: 0;
	}

	.kl-pretraga--desktop .kl-pretraga__kategorija .kl-pretraga__link {
		min-height: 0;
		font-size: var(--wp--preset--font-size--nav);
	}

	.kl-pretraga--desktop .kl-pretraga__proizvodi {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--05) var(--wp--preset--spacing--03);
	}

	.kl-pretraga--desktop .kl-pretraga__proizvod .kl-pretraga__link {
		display: grid;
		grid-template-columns: none;
		align-items: start;
		gap: var(--wp--preset--spacing--03);
		height: 100%;
		margin: 0;
		padding: 0 0 var(--wp--preset--spacing--02);
	}

	.kl-pretraga--desktop .kl-pretraga__info {
		padding-inline: var(--wp--preset--spacing--02);
	}

	.kl-pretraga--desktop .kl-pretraga__sve {
		width: auto;
	}

	/* Zatamnjenje preko cele stranice, ispod header-a i panela (kao kod mega menija) */
	.kl-pretraga__zatamnjenje {
		position: fixed;
		inset: 0;
		z-index: -1;
		background: var(--wp--custom--overlay);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			opacity var(--wp--custom--motion--base) linear,
			visibility 0s linear var(--wp--custom--motion--base);
	}

	.kl-pretraga__zatamnjenje.is-vidljivo {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kl-pretraga__zatamnjenje {
		transition: none;
	}
}