/**
 * najlepsiemobily – header search panel drawn by assets/js/nm-search.js through the
 * wa-fibosearch-rail site renderer (the box gets .wa-ac-box--site).
 * Three columns: completions | models (colours, memories, "od … €") + other products | accessories.
 * Below 820px one column.
 */
.wa-ac-box.wa-ac-box--site {
	--n-brand: var(--primary, #2498ca);
	--n-tint: var(--nd-c-brand-tint, #f2f9fd);
	--n-ink: var(--nd-c-ink, #2b2f33);
	--n-head: var(--nd-c-head, #1c2b36);
	--n-muted: var(--nd-c-muted, #7a8590);
	--n-line: var(--nd-c-line, #e3e9ee);
	--n-cta: var(--nd-c-cta, #a1c900);
	--n-cta-h: var(--nd-c-cta-hover, #8fb300);
	--n-ok: var(--nd-c-ok, #16a20c);
	--n-r: var(--nd-radius, 12px);
	--n-rs: var(--nd-radius-m, 8px);
}

.wa-ac-box.wa-ac-box--site.wa-ac-open {
	display: block;
	max-height: min(80vh, 780px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px max(40px, calc((100% - 1200px) / 2)) 22px;
	background: #fff;
	color: var(--n-ink);
	scrollbar-width: thin;
}

.wa-ac-box--site *,
.wa-ac-box--site *::before,
.wa-ac-box--site *::after {
	box-sizing: border-box;
}

.wa-ac-box--site a {
	color: inherit;
	text-decoration: none;
}

.wa-ac-box--site svg {
	flex: none;
}

.wa-ac-box--site img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wa-ac-box--site.wa-ac-busy .nms {
	opacity: 0.6;
	transition: opacity 0.15s;
}

.wa-ac-box--site .nms-k.wa-ac-active,
.wa-ac-box--site .wa-ac-showall a.wa-ac-active {
	outline: 2px solid var(--n-brand);
	outline-offset: 2px;
	border-radius: var(--n-rs);
	background: var(--n-tint);
}

/* ---- Layout ---- */
.nms {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) 250px;
	gap: 28px;
}

.nms > .nms-col--main:first-child {
	grid-column: 1 / 3;
}

.nms-h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 18px 0 8px;
	padding-left: 10px;
	border-left: 3px solid var(--n-brand);
	color: var(--n-head);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
}

.nms-h:first-child {
	margin-top: 0;
}

.nms-h small {
	color: var(--n-muted);
	font-size: 13px;
	font-weight: 600;
}

/* ---- Completions and popular phrases ---- */
.nms-sugs {
	display: flex;
	flex-direction: column;
}

.nms-sug {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 6px;
	border-radius: var(--n-rs);
	color: var(--n-head);
	font-size: 14px;
}

.nms-sug b {
	font-weight: 800;
}

.nms-sug:hover {
	background: var(--n-tint);
}

.nms-sug svg {
	width: 15px;
	height: 15px;
	color: var(--n-muted);
}

.nms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.nms-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border: 1px solid var(--n-line);
	border-radius: 999px;
	background: #fff;
	color: var(--n-head);
	font-size: 13px;
	font-weight: 600;
}

.nms-chip:hover {
	border-color: var(--n-brand);
	color: var(--n-brand);
}

.nms-chip svg {
	width: 14px;
	height: 14px;
	color: var(--n-brand);
}

/* ---- Model row ---- */
.wa-ac-box--site .wa-ac-product {
	margin: 0;
	padding: 0;
	border-width: 0;
}

.wa-ac-box--site .nms-mrow {
	margin-bottom: 8px;
	border: 1px solid var(--n-line);
	border-radius: var(--n-r);
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.wa-ac-box--site .nms-mrow:hover {
	border-color: var(--n-brand);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--n-brand) 12%, transparent);
}

.nms-mrow__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px 10px 10px;
}

.nms-mrow__img {
	flex: none;
	width: 58px;
	height: 58px;
}

.nms-mrow__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.nms-mrow__name {
	color: var(--n-head);
	font-size: 15.5px;
	font-weight: 800;
}

.nms-mrow__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.nms-mrow__end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.nms-mrow__go {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--n-tint);
	color: var(--n-brand);
}

.nms-mrow__go svg {
	width: 16px;
	height: 16px;
}

.nms-noimg {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--n-line);
}

.nms-dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.nms-dots i {
	display: inline-block;
	flex: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
}

.nms-dots small {
	color: var(--n-muted);
	font-size: 12px;
	font-weight: 600;
}

.nms-caps {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
}

.nms-caps > span {
	padding: 2px 8px;
	border: 1px solid var(--n-line);
	border-radius: 6px;
	background: #fff;
	color: var(--n-head);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}

.nms-from {
	color: var(--n-head);
	white-space: nowrap;
}

.nms-from small {
	color: var(--n-muted);
	font-size: 12px;
	font-weight: 600;
}

.nms-from b {
	color: var(--n-brand);
	font-size: 17px;
	font-weight: 800;
}

.nms-ok {
	color: var(--n-ok);
	font-size: 12.5px;
	font-weight: 600;
}

/* Placeholder rows while the models load. */
.nms-skel {
	height: 80px;
	margin-bottom: 8px;
	border-radius: var(--n-r);
	background: linear-gradient(90deg, var(--n-tint) 25%, #fff 50%, var(--n-tint) 75%) 0 0 / 200% 100%;
	animation: nms-skel 1.2s linear infinite;
}

@keyframes nms-skel {
	to {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nms-skel {
		animation: none;
	}
}

/* ---- Product row (accessories and products without a model) ---- */
.wa-ac-box--site .nms-prow {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--n-line);
}

.nms-prow__link {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-width: 0;
	padding: 8px 4px;
}

.nms-prow__img {
	flex: none;
	width: 44px;
	height: 44px;
}

.nms-prow__name {
	display: -webkit-box;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--n-head);
	font-size: 13.5px;
	font-weight: 600;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.nms-price {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.15;
	white-space: nowrap;
}

.nms-price del {
	color: var(--n-muted);
	font-size: 12px;
}

.nms-price b,
.nms-price .woocommerce-Price-amount {
	color: var(--n-brand);
	font-size: 15px;
	font-weight: 800;
}

.nms-price del .woocommerce-Price-amount {
	color: var(--n-muted);
	font-size: 12px;
	font-weight: 400;
}

.nms-price ins {
	text-decoration: none;
}

.wa-ac-box--site .nms-add {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	min-width: 0;
	height: 38px;
	padding: 0;
	border-radius: var(--nd-radius-btn, 8px);
	background: var(--n-cta);
	color: #fff;
}

.wa-ac-box--site .nms-add:hover {
	background: var(--n-cta-h);
}

.nms-add svg {
	width: 17px;
	height: 17px;
}

/* ---- Accessories / categories ---- */
.nms-accs {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.nms-acc {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: var(--n-rs);
	color: var(--n-head);
	font-size: 13.5px;
	font-weight: 600;
}

.nms-acc:hover {
	background: var(--n-tint);
}

.nms-acc i {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--n-tint);
	color: var(--n-brand);
}

.nms-acc i svg {
	width: 18px;
	height: 18px;
}

.nms-acc span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nms-acc small {
	color: var(--n-muted);
	font-size: 12px;
	font-weight: 600;
}

/* ---- Show all, nothing found ---- */
.wa-ac-box--site .nms-all {
	margin-top: 14px;
	text-align: center;
}

.wa-ac-box--site .nms-all a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border: 2px solid var(--n-brand);
	border-radius: 999px;
	color: var(--n-brand);
	font-size: 14px;
	font-weight: 700;
}

.wa-ac-box--site .nms-all a:hover,
.wa-ac-box--site .nms-all a.wa-ac-active {
	background: var(--n-brand);
	color: #fff;
}

.nms-all svg {
	width: 16px;
	height: 16px;
}

.nms-empty {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 26px 0;
	color: var(--n-muted);
	text-align: center;
}

.nms-empty b {
	color: var(--n-head);
	font-size: 16px;
}

/* ---- Phones ---- */
@media (max-width: 819px) {
	.wa-ac-box.wa-ac-box--site.wa-ac-open {
		max-height: calc(100vh - 140px);
		padding: 14px 12px 70px;
	}

	.nms {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.nms > .nms-col--main:first-child {
		grid-column: auto;
	}

	.nms-h {
		font-size: 14px;
	}

	.nms-sugs {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
	}

	.nms-sug {
		padding: 5px 10px;
		border: 1px solid var(--n-line);
		border-radius: 999px;
		font-size: 13px;
	}

	.nms-sug svg,
	.nms-mrow__meta .nms-caps,
	.nms-mrow__end small,
	.nms-mrow__go {
		display: none;
	}

	.nms-mrow__link {
		gap: 10px;
		padding: 8px;
	}

	.nms-mrow__img {
		width: 48px;
		height: 48px;
	}

	.nms-mrow__name {
		font-size: 14px;
	}

	.nms-col--side:last-child .nms-accs {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}