/**
 * Katka search panel on wa-fibosearch-rail (layout A5, see config/search/).
 *
 * Loaded after the rail's autocomplete.css (Setup\Search). The panel tokens take Katka values;
 * the rules below only shape what the tokens cannot: the panel as a card inside the page
 * container right under the header, the lilac side columns, the row extras (badge, stock, sale
 * price) and the best-match row. The header field keeps the parent's site-search markup; only its
 * width and focus ring change here.
 */

/* Header field: from the logo to the wishlist, twice the header row gap on each side. */
@media (width >= 768px) {
	.c-site-header .c-site-search {
		max-width: none;
		margin-inline: var(--spacing-ds-header-row-gap-desktop, 26px);
	}
}

.c-site-header .c-site-search__input:focus-visible {
	outline: 0;
}

.c-site-header .c-site-search:focus-within form {
	border-color: var(--color-primary-400);
}

/* Panel tokens. */
.wa-ac-box {
	--wa-ac-brand: var(--color-primary-500);
	--wa-ac-brand-hover: var(--color-primary-600);
	--wa-ac-brand-dark: var(--color-neutral-1000);
	--wa-ac-brand-light: var(--color-primary-200);
	--wa-ac-mark: var(--color-primary-500);
	--wa-ac-ink: var(--color-neutral-900);
	--wa-ac-muted: var(--color-neutral-800);
	--wa-ac-line: var(--color-neutral-400);
	--wa-ac-line-soft: var(--color-neutral-300);
	--wa-ac-tint: var(--color-primary-50);
	--wa-ac-surface: var(--color-white, #fff);
	--wa-ac-on-brand: var(--color-white, #fff);
	--wa-ac-cart: var(--color-conversion-500);
	--wa-ac-cart-hover: var(--color-conversion-600);
	--wa-ac-cart-shadow: var(--color-conversion-700);
	--wa-ac-price-color: var(--color-neutral-1000);
	--wa-ac-title-color: var(--color-neutral-1000);
	--wa-ac-container: var(--frame-base, 1440px);
	--wa-ac-gutter: var(--page-gutter-desktop, 40px);
	--wa-ac-panel-shadow: none;
	--wa-ac-font-size-base: 13.5px;
	--wa-ac-list-fs: 13.5px;
	--wa-ac-pill-fs: 12.5px;
	--wa-ac-pill-pad: 4px 11px;
	--wa-ac-pill-border-w: 1px;
	--wa-ac-pill-fw: 600;
	--wa-ac-pname-fs: 13.5px;
	--wa-ac-price-fs: 14.5px;
	--wa-ac-price-old-fs: 12px;
	--wa-ac-title-fs: 12px;
	--wa-ac-title-fs-mid: 12px;
	--wa-ac-title-ls: 0.06em;
	--wa-ac-thumb-size: 44px;
	--wa-ac-product-pad: 6px 10px;
	--wa-ac-product-gap: 12px;
	--wa-ac-col-pad: 16px 18px 18px;
	--wa-ac-btn-h: 34px;
	--wa-ac-btn-fs: 13px;
	--wa-ac-btn-minw: 0;
	--wa-ac-btn-pad-x: 12px;
	--wa-ac-btn-icon-size: 16px;
	--wa-ac-btn-base-h: 0;
	--wa-ac-radius-l: 12px;
	--wa-ac-radius-m: 10px;
	--wa-ac-radius-s: 9px;
	--wa-ac-showall-h: 38px;
	--wa-ac-showall-fs: 13.5px;
	--wa-ac-tab-active-bg: var(--color-primary-100);
	--wa-ac-tab-active-border: var(--color-primary-100);
	--wa-ac-tab-active-fg: var(--color-primary-700);
	--wa-ac-badge-bg: var(--color-primary-100);
	--wa-ac-badge-fg: var(--color-primary-700);

	/* Pinned under the sticky header row (offset set by search-panel.js) instead of the rail's
	   absolute box, which it re-places on every scroll and so jumps. The rail sizes the box to the
	   viewport; right: 0 keeps it off the scrollbar like the header. */
	position: fixed;
	top: var(--wooptima-katka-ac-top, 0) !important;
	right: 0;
	width: auto !important;
	max-height: calc(100vh - var(--wooptima-katka-ac-top, 0px) - 16px);
	overflow-y: auto;
	background: transparent;
	font-family: var(--font-body);
	filter: drop-shadow(0 18px 24px rgb(62 42 92 / 18%));
}

/* Desktop: the columns form one card inside the page container. */
@media (width >= 820px) {
	/* The rail's full-width top and bottom rules; the card draws its own edges. */
	.wa-ac-box {
		border-block: 0;
	}

	.wa-ac-box .wa-ac-col {
		background: var(--wa-ac-surface);
		border-bottom: 1px solid var(--wa-ac-line);
	}

	.wa-ac-box .wa-ac-col--rail {
		background: var(--color-primary-50);
	}

	.wa-ac-box .wa-ac-col:first-child {
		border-left: 1px solid var(--wa-ac-line);
		border-bottom-left-radius: 16px;
	}

	.wa-ac-box .wa-ac-col:last-of-type {
		border-right: 1px solid var(--wa-ac-line);
		border-bottom-right-radius: 16px;
	}

	.wa-ac-box .wa-ac-close {
		right: calc(var(--wa-ac-pad) + 8px);
	}
}

/* Rows: heading font for name and price, the badge, the stock line and a sale price. */
.wa-ac-box .wa-ac-pname,
.wa-ac-box .wa-ac-price {
	font-family: var(--font-heading);
}

.wa-ac-box .wa-ac-pinfo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.wa-ac-box .wa-ac-stock {
	display: block;
	margin-top: 2px;
	color: var(--color-conversion-700);
	font-size: 11.5px;
	font-weight: 600;
}

.wa-ac-box .wa-ac-stock::before {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 5px;
	border-radius: 50%;
	background: var(--color-conversion-500);
	content: '';
	vertical-align: 1px;
}

.wa-ac-box .wa-ac-price del {
	margin-right: 6px;
	color: var(--color-neutral-700);
	font-family: var(--font-body);
	font-size: var(--wa-ac-price-old-fs);
	font-weight: 500;
}

.wa-ac-box .wa-ac-price ins {
	text-decoration: none;
}

.wa-ac-box .wa-ac-thumb img {
	object-fit: contain;
	background: var(--wa-ac-surface);
}

/* Best match: the first search result is a larger, tinted row with a label. */
.wa-ac-box
	.wa-ac-products
	> .wa-ac-product:first-child:has(.wa-ac-product-link[data-list^='autocomplete_results']) {
	--wa-ac-thumb-size: 72px;

	position: relative;
	margin-bottom: 6px;
	padding-top: 26px;
	border: 1px solid var(--wa-ac-line);
	border-radius: 14px;
	background: var(--color-primary-50);
}

.wa-ac-box
	.wa-ac-products
	> .wa-ac-product:first-child:has(
		.wa-ac-product-link[data-list^='autocomplete_results']
	)::after {
	position: absolute;
	top: 8px;
	left: 14px;
	color: var(--color-primary-500);
	content: var(--wooptima-katka-best-match, 'Najlepšia zhoda');
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wa-ac-box
	.wa-ac-products
	> .wa-ac-product:first-child:has(.wa-ac-product-link[data-list^='autocomplete_results'])
	.wa-ac-pname {
	font-size: 15px;
}

.wa-ac-box
	.wa-ac-products
	> .wa-ac-product:first-child:has(.wa-ac-product-link[data-list^='autocomplete_results'])
	.wa-ac-price {
	font-size: 17px;
}

/* Mobile: the rail dissolves the columns, so the box itself carries the surface. */
@media (width < 820px) {
	.wa-ac-box {
		background: var(--wa-ac-surface);
	}
}

/* WooCommerce's "View cart" link after an add has no place in the panel. */
/* stylelint-disable-next-line selector-class-pattern -- WooCommerce's own class. */
.wa-ac-box .added_to_cart {
	display: none;
}