/* Kolory: na harden-tools z --harden-*, na wertec.pl z --wtc-* motywu wertec-child. */
/*
 * HARDEN — wygląd podpowiedzi (wtyczka harden-search).
 *
 * Kolory z tokenów motywu (--harden-*), a gdy ich brak — wartości zapasowe
 * w barwach HARDEN. Motyw może wyłączyć ten plik filtrem hc_search_enqueue_css
 * i dać własny. Klasy .hc-search* dotyczą tylko formularza z hc_search_form();
 * formularz motywu zostaje w swoim wyglądzie.
 */
.hc-search,
.hc-suggest {
	--_accent: var(--harden-orange, var(--wtc-red, #f28c00));
	--_accent-dark: var(--harden-orange-dark, var(--wtc-red-dark, #c96f00));
	--_ink: var(--harden-ink, var(--wtc-ink-strong, #1f2328));
	--_soft: var(--harden-soft, var(--wtc-soft, #5f6670));
	--_line: var(--harden-line, var(--wtc-line, #d9dce0));
	--_hover: var(--harden-hover, var(--wtc-sand, #f4f5f6));
	--_bg: var(--harden-bg, #fff);
}

.hc-search {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.hc-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0 52px 0 16px;
	border: 1px solid var(--_line);
	border-radius: 6px;
	background: var(--_bg);
	color: var(--_ink);
	font-size: 16px; /* 16 px: iOS nie powiększa strony przy fokusie. */
}
.hc-search__input:focus { outline: 2px solid var(--_accent); outline-offset: -1px; }

.hc-search__btn {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 42px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 4px;
	background: var(--_accent);
	color: #fff;
	cursor: pointer;
}
.hc-search__btn:hover { background: var(--_accent-dark); }
.hc-search__btn:focus-visible { outline: 2px solid var(--_ink); outline-offset: 2px; }

/* Lista podpowiedzi */
.hc-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 70;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	padding: 6px;
	background: var(--_bg);
	border: 1px solid var(--_line);
	border-top: 3px solid var(--_accent);
	border-radius: 6px;
	box-shadow: 0 12px 28px rgba(31, 35, 40, .16);
}
.hc-suggest[hidden] { display: none; }

.hc-suggest__head {
	margin: 10px 10px 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--_soft);
}

.hc-suggest__opt {
	display: block;
	padding: 9px 10px;
	border-radius: 4px;
	color: var(--_ink);
	font-size: 15px;
	text-decoration: none;
}
.hc-suggest__opt:hover,
.hc-suggest__opt.is-active { background: var(--_hover); box-shadow: inset 3px 0 0 var(--_accent); }
.hc-suggest__opt small { color: var(--_soft); }

.hc-suggest__prod { display: flex; align-items: center; gap: 12px; }
.hc-suggest__prod img,
.hc-suggest__noimg {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--_line);
	border-radius: 4px;
}

.hc-suggest__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hc-suggest__t b {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 600;
	line-height: 1.3;
}
.hc-suggest__t small { font-size: 12.5px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

.hc-suggest__m { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.hc-suggest__m b { white-space: nowrap; }
.hc-suggest__m s { font-size: 12.5px; color: var(--_soft); }
.hc-suggest__m small.is-in { color: #1f7a3a; }
.hc-suggest__m small.is-out { color: #9a5b00; }

.hc-suggest__all {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--_line);
	border-radius: 0;
	text-align: center;
	font-weight: 700;
	color: var(--_accent-dark);
}
.hc-suggest__empty { margin: 10px; color: var(--_soft); font-size: 15px; }
.hc-suggest__help { font-weight: 600; color: var(--_accent-dark); }

@media (max-width: 600px) {
	.hc-suggest__m s { display: none; }
	.hc-suggest { max-height: 60vh; }
}

/* 1.1.0: propozycje AI i etap „szukam szerzej” */
.hc-suggest__answer {
	margin: 8px 10px 4px;
	padding-left: 10px;
	border-left: 3px solid var(--_accent);
	color: var(--_ink);
	font-size: 14.5px;
	line-height: 1.45;
}
.hc-suggest__thinking {
	margin: 10px;
	color: var(--_soft);
	font-size: 14.5px;
}
.hc-results-note {
	margin: 0 0 1.25em;
	padding: 10px 14px;
	border-left: 3px solid var(--harden-orange, var(--wtc-red, #f28c00));
	background: var(--harden-hover, var(--wtc-sand, #f4f5f6));
	color: var(--harden-ink, var(--wtc-ink-strong, #1f2328));
}
@media (prefers-reduced-motion: no-preference) {
	.hc-suggest__thinking { animation: hc-pulse 1.2s ease-in-out infinite; }
	@keyframes hc-pulse { 50% { opacity: .45; } }
}