/**
 * Reggal Search — simple look in the site colours. Final design comes later.
 * Breakpoint 992 px = Automatic.css "l".
 */

.reggal-search {
	--rs-action: var(--action, #e4002b);
	--rs-action-hover: var(--action-semi-dark, #b30021);
	--rs-text: var(--text-dark, #1a1a1a);
	--rs-base: var(--base, #282828);
	--rs-muted: #6b6b6b;
	--rs-border: #d9d9d9;
	--rs-bg-hover: #f5f5f5;
	--rs-size: 54px;
	display: inline-flex;
	align-items: center;

	@media (max-width: 991.98px) {
		--rs-size: 44px;
	}
}

.reggal-search-host {
	position: relative;
}

.reggal-search-wrapper {
	flex: 0;
}

/* Square red button with a white magnifier. */
.reggal-search__toggle,
.reggal-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--rs-size) !important;
	height: var(--rs-size) !important;
	max-width: var(--rs-size) !important;
	max-height: var(--rs-size) !important;
	padding: 0;
	border: 2px solid var(--rs-action) !important;
	border-radius: 0;
	background: var(--rs-base) !important;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.reggal-search__submit {
	background: var(--rs-action) !important;
}

.reggal-search__toggle svg,
.reggal-search__submit svg {
  min-width: fit-content;
}

/* Hover only where there is a real cursor: a tap on a phone would leave it stuck. */
@media (hover: hover) {
	.reggal-search__toggle:hover,
	.reggal-search__submit:hover {
		border-color: var(--rs-action-hover) !important;
		background: var(--rs-action-hover) !important;
		color: #fff;
	}
}

.reggal-search__submit.is-hover,
.reggal-search__toggle:focus-visible,
.reggal-search__submit:focus-visible {
	border-color: var(--rs-action-hover) !important;
	background: var(--rs-action-hover) !important;
	color: #fff;
}

/*
 * The theme styles every submit button (body.bricks-is-frontend button[type=submit]:
 * padding, height 5.4rem, width fit-content, font size). Without this the
 * magnifier inside the open field is wider than the closed one and jumps aside.
 */
.reggal-search .reggal-search__submit[type="submit"] {
	width: var(--rs-size);
	height: var(--rs-size);
	max-height: none;
	padding: 0;
	font-size: inherit;
	line-height: 1;
}

.reggal-search__panel[hidden],
.reggal-search__results[hidden] {
	display: none !important;
}

.reggal-search__form {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	margin: 0;
}

.reggal-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--rs-size);
	margin: 0;
	padding: 0 14px;
	border: 2px solid var(--rs-action);
	border-right: 0;
	border-radius: 0;
	background: #fff;
	color: var(--rs-text);
	font-size: 16px;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.reggal-search__input::-webkit-search-cancel-button {
	display: none;
}

/* Field with the ✕ that clears the text inside it. */
.reggal-search__field {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.reggal-search__field .reggal-search__input {
	padding-right: var(--rs-size);
}

.reggal-search__clear {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--rs-size);
	height: var(--rs-size);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rs-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	text-align: center;
}

.reggal-search__clear[hidden] {
	display: none;
}

.reggal-search__clear:hover,
.reggal-search__clear:focus-visible {
	background: transparent;
	color: var(--rs-action);
}

/* Mobile back arrow: same red square as the magnifier. */
.reggal-search__back {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--rs-size);
	height: var(--rs-size);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--rs-action);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}

.reggal-search__back:hover,
.reggal-search__back:focus-visible {
	background: var(--rs-action-hover);
	color: #fff;
}

/* Results */
.reggal-search__results {
	background: #fff;
	color: var(--rs-text);
	text-align: left;
}

/* Scrollbar like the page's own (body::-webkit-scrollbar). */
.reggal-search__results::-webkit-scrollbar,
.reggal-search__results > .reggal-search__col::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background: var(--secondary);
}

.reggal-search__results::-webkit-scrollbar-thumb,
.reggal-search__results > .reggal-search__col::-webkit-scrollbar-thumb {
	background: var(--primary);
}

/* The previous result while the next one loads; the panel itself stays opaque. */
.reggal-search__results > * {
	transition: opacity 0.15s;
}

.reggal-search.is-loading .reggal-search__results > * {
	opacity: 0.55;
}

.reggal-search {
	--rs-pad-y: var(--space-s, 16px);
	--rs-pad-x: var(--space-s, 16px);
	--rs-tile: 200px; /* Desktop: the narrowest brand tile; the column may be wider. */
	--rs-tile-logo: 88px;
	--rs-tile-gap: 12px;
}

/*
 * Two-column results (brand, model, mixed): the results box itself is the
 * grid, so the grey left column runs edge to edge and the padding moves into
 * the columns.
 */
.reggal-search__results.reggal-search__results--cols {
	display: grid;
	/* As wide as the brands column's content needs (the reviews summary), the items take the rest. */
	grid-template-columns: max-content minmax(0, 1fr);
	padding: 0;
}

.reggal-search__results--cols > .reggal-search__col {
	padding: var(--rs-pad-y) var(--rs-pad-x);
}

.reggal-search__results--cols > .reggal-search__col:first-child {
	background-color: var(--secondary);
}

/* Brand, model: the configurator button sits in its own block after the items. */
.reggal-search__results--cols > .reggal-search__col--configure .reggal-search__configure {
	margin: 0;
	width: 100%;
}

.reggal-search__results--cols > .reggal-search__col--configure .reggal-search__note {
	margin: 8px 0 0;
}

/* Mixed: the products under the vans or models. */
.reggal-search__section {
	margin-top: var(--space-s, 16px);
}

.reggal-search__heading {
	margin: 0 0 8px;
	color: var(--rs-base);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.reggal-search__list,
.reggal-search__products {
	margin: 0;
	padding: 0;
	list-style: none;
}

.reggal-search__list li,
.reggal-search__products li {
	margin: 0;
	padding: 0;
}

.reggal-search__model,
.reggal-search__van {
	display: block;
	padding: 6px 8px;
	color: inherit;
	text-decoration: none;
	width: fit-content;
}

/* Van rows with the thumbnail in front, like the products. */
.reggal-search__results .reggal-search__van {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	width: auto;
}

/* The van pictures are wide (medium size, uncropped): a wider frame, no grey square. */
.reggal-search__van .reggal-search__thumb {
	width: 80px;
	height: 48px;
	background: none;
}

/*
 * Brand tiles: the global .wa-brand-box with the configurator's look (white,
 * thin border, red frame on hover), sized for the panel.
 */
.reggal-search__brands {
	display: grid;
	/* Several brands are rare (no two share their first three letters): one under another. */
	grid-template-columns: minmax(var(--rs-tile), 1fr); /* Stretches to the column. */
	gap: var(--rs-tile-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.reggal-search__brands li {
	margin: 0;
	padding: 0;
}

.reggal-search__results .reggal-search__brand {
	position: relative;
	justify-content: center;
	gap: 8px;
	padding: 12px 8px;
	border: 1px solid var(--secondary-light, var(--rs-border));
	background-color: var(--white, #fff);
	color: inherit;
	text-decoration: none;
}

/* As in the configurator: only the red frame, no lift (global .wa-brand-box) and no tint (other results). */
.reggal-search__results a[data-rs-item].reggal-search__brand:hover,
.reggal-search__results a[data-rs-item].reggal-search__brand.is-active {
	transform: none;
	background-color: var(--white, #fff);
	color: inherit;
}

.reggal-search__results .reggal-search__brand::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2.5px solid var(--rs-action);
	opacity: 0;
	transition: 0.2s all ease-in-out;
	pointer-events: none;
}

.reggal-search__results a.reggal-search__brand:hover::after,
.reggal-search__results a.reggal-search__brand.is-active::after {
	opacity: 1;
}

.reggal-search__results .reggal-search__brand-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--rs-tile-logo);
	max-height: none;
	margin: 0;
}

.reggal-search__results .reggal-search__brand-logo img {
	width: 100%;
	height: 100%;
	max-height: var(--rs-tile-logo);
	object-fit: contain;
}

.reggal-search__results .reggal-search__brand-name {
	font-size: var(--text-m, 16px);
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.reggal-search__product {
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: center;
	gap: 12px;
	padding: 6px 8px;
	color: inherit;
	text-decoration: none;
}

/* The row's own width decides, not the viewport: the items column is narrower than the panel. */
.reggal-search__products li {
	container: rs-product / inline-size;
}

/* Name and price share one cell next to the image. */
.reggal-search__product-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}

/* Narrow row: the price drops below the name, aligned to the end. */
@container rs-product (max-width: 479.98px) {
	.reggal-search__product-body {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.reggal-search__price {
		align-self: flex-end;
	}
}

.reggal-search__thumb {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: #fafafa;
}

.reggal-search__price {
	font-weight: 700;
	white-space: nowrap;
}

.reggal-search__price del {
	color: var(--rs-muted);
	font-weight: 400;
	font-size: 80%;
}

/* WooCommerce adds hidden „Pôvodná cena bola …“ texts to sale prices. */
.reggal-search__price .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.reggal-search__price ins {
	text-decoration: none;
	color: var(--rs-action);
}

.reggal-search__price small {
	color: var(--rs-muted);
	font-weight: 400;
}

.reggal-search__results a[data-rs-item]:hover,
.reggal-search__results a[data-rs-item].is-active {
	background: var(--rs-bg-hover);
	color: var(--rs-action);
}

/* On the grey left column the light hover would vanish: one shade darker. Brand tiles and the button keep their own. */
.reggal-search__results--cols > .reggal-search__col:first-child a[data-rs-item]:not(.reggal-search__brand):not(.reggal-search__configure):hover,
.reggal-search__results--cols > .reggal-search__col:first-child a[data-rs-item]:not(.reggal-search__brand):not(.reggal-search__configure).is-active {
	background: var(--secondary-light);
}

/* The global .wa-button--conversion (Scripts Organizer „Global Styles“); only what the panel changes. */
.reggal-search__results .reggal-search__configure {
	gap: 0.4em;
	margin: 0 0 8px;
	line-height: 1.2;
}

/* The button keeps the global height: a long label („… Sprinter 1995-2006 I. Generácia“) wraps once, then ends with „…“. */
.reggal-search__configure-label {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.reggal-search__configure > [aria-hidden] {
	flex: 0 0 auto;
}

/* Keep the button colours over the grey hover of the other result links. */
.reggal-search__results a.reggal-search__configure:hover,
.reggal-search__results a.reggal-search__configure.is-active {
	background-color: var(--action-semi-dark);
	color: var(--white);
}

.reggal-search__results a.reggal-search__configure.is-active {
	outline: 2px solid var(--action);
	outline-offset: 2px;
}

.reggal-search__note {
	margin: 0 0 12px;
	padding: 0 8px;
	color: var(--rs-muted);
	font-size: 14px;
}

.reggal-search__footer {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--rs-border);
}

.reggal-search__more {
	display: block;
	width: fit-content;
	margin-top: 4px;
	padding: 6px 8px;
	color: var(--rs-action);
	font-weight: 700;
	text-decoration: none;
}

.reggal-search__all {
	display: block;
	padding: 6px 8px;
	color: var(--rs-action);
	font-weight: 700;
	text-decoration: none;
}

.reggal-search__message {
	margin: 0 0 16px;
	padding: 0 8px;
}

/* Reviews summary (reggal-reviews) under the brands: desktop only, it fills the grey column. */
.reggal-search__reviews {
	margin-top: var(--space-m, 24px);
}

.reggal-search__reviews .rr-carousel__write-btn {
	align-self: stretch;
	box-sizing: border-box;
	padding-inline: 12px;
	white-space: nowrap;
}

/* Never wider than the column: the stars go under the score instead of a sideways scroll. */
.reggal-search__reviews .rr-carousel__score-line {
	flex-wrap: wrap;
}

.reggal-search__message--loading {
	margin-bottom: 0;
}

.reggal-search__suggestions {
	margin-top: 8px;
}

/* Desktop: the field covers the whole parent block of the header. */
@media (min-width: 992px) {
	.reggal-search--mobile {
		display: none !important;
	}

	.reggal-search.is-open .reggal-search__panel {
		position: absolute;
		inset: 0;
		z-index: 60;
		display: flex;
		align-items: center;
		background: #fff;
	}

	.reggal-search__results {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: var(--rs-results-max, min(70vh, 640px)); /* Set by fitHeight(). */
		overflow-y: auto;
		padding: var(--rs-pad-y) var(--rs-pad-x);
		border: 1px solid var(--rs-border);
		box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
	}

	/*
	 * Brand, model, mixed: the button at the very bottom under the items, grey
	 * like the left column, which runs down beside it, so the two read as one.
	 * Only the items scroll; the brands and the button stay in place.
	 */
	.reggal-search__results.reggal-search__results--cols {
		grid-template-rows: minmax(0, 1fr) auto;
		overflow: hidden;
	}

	/* A long brand name wraps instead of widening the column. */
	.reggal-search__results .reggal-search__brand-name {
		contain: inline-size;
		width: 100%;
	}

	.reggal-search__results--cols > .reggal-search__col--brands {
		grid-row: 1 / span 2;
		overflow-y: auto; /* Several brands in a low window. */
	}

	/* Relative: the hidden screen reader texts of the prices scroll with it instead of overflowing the box. */
	.reggal-search__results--cols > .reggal-search__col--items {
		position: relative;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.reggal-search__results--cols > .reggal-search__col--configure {
		grid-column: 2;
		grid-row: 2;
		background-color: var(--secondary);
	}
}

/* Mobile: full screen, field on top, results below. */
@media (max-width: 991.98px) {
	.reggal-search--desktop {
		display: none !important;
	}

	/* The brand band sits above the items here: no room for it. */
	.reggal-search__reviews {
		display: none;
	}

	.reggal-search.is-open .reggal-search__panel {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	.reggal-search__back {
		display: inline-flex;
		margin-right: 8px;
	}

	.reggal-search__form {
		flex: 0 0 auto;
		padding: 12px;
		border-bottom: 1px solid var(--rs-border);
	}

	.reggal-search__results {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: var(--rs-pad-y) var(--rs-pad-x);
		-webkit-overflow-scrolling: touch;
	}

	.reggal-search {
		--rs-tile: 112px;
		--rs-tile-logo: 56px;
		--rs-tile-gap: 8px;
	}

	/* Brand tile as a row: logo, then the name next to it. */
	.reggal-search__brands {
		grid-template-columns: minmax(0, max-content);
	}

	.reggal-search__results .reggal-search__brand {
		flex-direction: row;
		justify-content: flex-start;
		gap: 12px;
		aspect-ratio: auto; /* The global .wa-brand-box is square. */
		padding: 8px 16px 8px 8px;
	}

	.reggal-search__results .reggal-search__brand-logo {
		flex: 0 0 var(--rs-tile-logo);
		width: var(--rs-tile-logo);
		height: calc(var(--rs-tile-logo) * 0.75);
	}

	.reggal-search__results .reggal-search__brand-name {
		text-align: left;
	}

	/* The grey brand band above the items, full width; the columns carry the padding. */
	/* The results fill the screen: rows keep their content height instead of sharing it. */
	.reggal-search__results.reggal-search__results--cols {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
	}

	/* The button stays where it was: under the brand band, above the items. */
	.reggal-search__results--cols > .reggal-search__col--configure {
		order: 1;
		padding-bottom: 0;
	}

	.reggal-search__results--cols > .reggal-search__col--items {
		order: 2;
	}

	html.reggal-search-locked,
	html.reggal-search-locked body {
		overflow: hidden;
	}
}