/*
 * Catalogue filters (modules/filters/Filters.php).
 *
 *   .pg-filters         the panel: a column of the catalogue from 1025 px, an off-canvas dialog from
 *                       the left below (opened by filters.js, without JavaScript by :target)
 *   .pg-filters-bar     the phone "Filter" button with the active filters, hidden from 1025 px
 *   .pg-filters-active  removable chips of the active filters and Zrušiť všetko
 *   .pg-filters-layout  sidebar and results, only while the theme does not place the filters itself
 *
 * Tokens only. Every token here is declared by the theme and by the plugin's tokens.css.
 */

/* ---------- Fallback layout ---------- */

.pg-filters-layout {
	display: grid;
	padding-block-start: var(--pg-space-24); /* WooCommerce's heading above has no gap of its own */
	grid-template-columns: var(--pg-shop-sidebar) minmax(0, 1fr);
	gap: var(--pg-space-24) var(--pg-space-32);
	align-items: start;
}

.pg-filters-layout > .pg-filters-bar { grid-column: 1 / -1; }
.pg-filters-layout__main { min-width: 0; }

/* The results being replaced (the theme's element, or the one filters.js found around the loop). */
[data-pg-catalog-results] { transition: opacity var(--pg-dur) var(--pg-ease); }
[data-pg-catalog-results].is-loading { opacity: var(--pg-opacity-busy); }
[data-pg-catalog-results]:focus { outline: none; } /* takes focus after a new page of results, as .pg-main does after the skip link */

@media (max-width: 1024px) {
	.pg-filters-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Bar: phone button and active filters ---------- */

.pg-filters-bar {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pg-space-12);
}

.pg-filters-bar--static { display: flex; }

@media (max-width: 1024px) {
	.pg-filters-bar { display: flex; }
}

.pg-filters-bar__toggle .pg-filters__icon { width: var(--pg-space-20); height: var(--pg-space-20); }

/* Number of active filters on the green button: white badge with the text green (5.4:1). */
.pg-filters-bar__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pg-space-20);
	height: var(--pg-space-20);
	padding: 0 var(--pg-space-4);
	border-radius: var(--pg-radius-pill);
	background: var(--pg-white);
	color: var(--pg-accent-text);
	font-size: var(--pg-fs-12);
	line-height: 1;
}

/* ---------- Active filters ---------- */

.pg-filters-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pg-space-8) var(--pg-space-16);
}

.pg-filters-active__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The tag chip of the site as a control (.pg-tag--control, theme base.css): a chosen filter, so its edge
   is the text colour, with the × on the right. */
.pg-filters-active__chip {
	--pg-tag-line: var(--pg-text);
	gap: var(--pg-space-4);
	padding-inline-end: var(--pg-space-8);
	font-weight: var(--pg-fw-display);
	transition: background-color var(--pg-dur-fast) var(--pg-ease);
}

.pg-filters-active__chip:hover { --pg-tag-bg: var(--pg-surface-hover); color: var(--pg-text); }
.pg-filters-active__chip .pg-filters__icon { width: var(--pg-space-16); height: var(--pg-space-16); }
.pg-filters-active__reset { font-size: var(--pg-fs-14); }

/* ---------- Panel ---------- */

.pg-filters {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--pg-white);
	color: var(--pg-text);
}

.pg-filters__icon { display: block; flex: none; width: var(--pg-space-20); height: var(--pg-space-20); }

.pg-filters__title {
	font-size: var(--pg-fs-18);
	line-height: var(--pg-lh-snug);
}

.pg-filters__title:focus { outline: none; }

.pg-filters__body {
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-16);
}

.pg-filters__form { display: flex; flex-direction: column; }

.pg-filters__error {
	padding: var(--pg-space-12) var(--pg-space-16);
	background: var(--pg-danger-bg);
	color: var(--pg-danger-text);
	font-size: var(--pg-fs-14);
}

.pg-filters__error .pg-link { color: inherit; text-decoration: underline; }

/* One facet: collapsible group with the title of the live site (KATEGÓRIE, CENA). */
.pg-filters__group {
	padding-block: var(--pg-space-20);
	border-top: 1px solid var(--pg-line);
}

.pg-filters__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pg-space-8);
	min-height: var(--pg-icon-btn);
	cursor: pointer;
	list-style: none;
	font-size: var(--pg-fs-15);
	font-weight: var(--pg-fw-bold);
	letter-spacing: var(--pg-tracking-caps);
	text-transform: uppercase;
}

.pg-filters__summary::-webkit-details-marker { display: none; }
.pg-filters__summary .pg-filters__icon { transition: transform var(--pg-dur) var(--pg-ease); }
.pg-filters__group[open]:not(.is-closing) > .pg-filters__summary .pg-filters__icon { transform: rotate(180deg); }

/* Groups and "Zobraziť ďalšie" open and close smoothly (Jaroslav 6. 11.) with everything else that unrolls on the site
   (data-pg-expand, the theme's expand.js and its tokens --pg-dur-expand and --pg-ease-expand, zadanie 10, bod 7); with
   reduced motion at once. */

.pg-filters__set {
	min-width: 0;
	margin: var(--pg-space-12) 0 0;
	padding: 0;
	border: 0;
}

/* Checkbox options with the number of products. */
.pg-filters__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-filters__option {
	display: flex;
	align-items: center;
	gap: var(--pg-space-12);
	min-height: var(--pg-icon-btn);
	cursor: pointer;
	font-size: var(--pg-fs-15);
	line-height: var(--pg-lh-snug);
}

.pg-filters__check {
	flex: none;
	width: var(--pg-space-20);
	height: var(--pg-space-20);
	margin: 0;
	accent-color: var(--pg-accent-text);
	cursor: pointer;
}

.pg-filters__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pg-filters__option:hover .pg-filters__name { text-decoration: underline; text-underline-offset: .2em; }

.pg-filters__count {
	flex: none;
	color: var(--pg-muted);
	font-size: var(--pg-fs-13);
	font-variant-numeric: tabular-nums;
}

/* "Zobraziť ďalšie": a native disclosure, works without JavaScript and does not shift when it loads. */
.pg-filters__more { margin-block-start: var(--pg-space-4); }

.pg-filters__more-toggle {
	display: inline-flex;
	align-items: center;
	min-height: var(--pg-icon-btn);
	cursor: pointer;
	list-style: none;
	color: var(--pg-accent-text);
	font-size: var(--pg-fs-14);
	font-weight: var(--pg-fw-bold);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.pg-filters__more-toggle::-webkit-details-marker { display: none; }
.pg-filters__more-toggle:hover { color: var(--pg-accent-text-hover); }
.pg-filters__more[open]:not(.is-closing) .pg-filters__more-show,
.pg-filters__more:is(:not([open]), .is-closing) .pg-filters__more-hide { display: none; }

/* Tags: chips with a dot in the tag colour; the check mark shows the selection without colour. */
.pg-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-filters__tag { position: relative; display: inline-flex; cursor: pointer; }

/* A tag option: the tag chip of the site as a control (.pg-tag--control, edge 3:1, theme base.css). */
.pg-filters__chip { transition: border-color var(--pg-dur-fast) var(--pg-ease), background-color var(--pg-dur-fast) var(--pg-ease); }

.pg-filters__tag:hover .pg-filters__chip { --pg-tag-line: var(--pg-text); }

.pg-filters__dot {
	flex: none;
	width: var(--pg-space-12);
	height: var(--pg-space-12);
	border: 1px solid var(--pg-line);
	border-radius: var(--pg-radius-pill);
	background: var(--pg-filters-dot, var(--pg-surface-card)); /* the tag's colour, inline */
}

.pg-filters__chip .pg-filters__icon--check { display: none; width: var(--pg-space-16); height: var(--pg-space-16); }

.pg-filters__check:checked + .pg-filters__chip {
	--pg-tag-line: var(--pg-text);
	--pg-tag-bg: var(--pg-surface-card);
	font-weight: var(--pg-fw-bold);
}

.pg-filters__check:checked + .pg-filters__chip .pg-filters__icon--check { display: block; }
/* The checkbox of a chip is visually hidden: its focus shows on the chip, in the site's focus colour. */
.pg-filters__check:focus-visible + .pg-filters__chip { outline: 2px solid var(--pg-focus-color); outline-offset: 2px; }

/* Price: two fields (the accessible control) and a two thumb slider for the pointer. */
.pg-filters__price {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pg-space-16);
}

.pg-filters__unit { font-weight: var(--pg-fw-regular); color: var(--pg-muted); }
.pg-filters__num { min-width: 0; }

.pg-filters__slider {
	position: relative;
	visibility: hidden; /* space kept without JavaScript, so nothing moves when the script shows it */
	height: var(--pg-space-24);
	margin-block-start: var(--pg-space-16);
}

.pg-filters.is-enhanced .pg-filters__slider { visibility: visible; }

.pg-filters__track {
	position: absolute;
	top: 50%;
	right: calc(var(--pg-space-20) / 2);
	left: calc(var(--pg-space-20) / 2);
	height: var(--pg-space-4);
	background: var(--pg-line);
	transform: translateY(-50%);
}

.pg-filters__track::after {
	content: "";
	position: absolute;
	inset: 0 calc(100% - var(--pg-filters-to, 100%)) 0 var(--pg-filters-from, 0%);
	background: var(--pg-accent);
}

.pg-filters__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.pg-filters__range::-webkit-slider-runnable-track { background: none; border: 0; }
.pg-filters__range::-moz-range-track { background: none; border: 0; }

.pg-filters__range::-webkit-slider-thumb {
	width: var(--pg-space-20);
	height: var(--pg-space-20);
	border: 2px solid var(--pg-accent-text);
	border-radius: var(--pg-radius-pill);
	background: var(--pg-white);
	cursor: grab;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.pg-filters__range::-moz-range-thumb {
	width: var(--pg-space-20);
	height: var(--pg-space-20);
	box-sizing: border-box;
	border: 2px solid var(--pg-accent-text);
	border-radius: var(--pg-radius-pill);
	background: var(--pg-white);
	cursor: grab;
	pointer-events: auto;
}

/* Without JavaScript: Resetovať and Použiť under the form, as on the live site. */
.pg-filters__submit {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--pg-space-12);
	padding-block-start: var(--pg-space-20);
	border-top: 1px solid var(--pg-line);
}

.pg-filters.is-enhanced .pg-filters__submit { display: none; }

.pg-filters__foot { display: none; }

.pg-filters-overlay { display: none; }

/* ---------- Sidebar (from 1025 px) and the styleguide sample ---------- */

/*
 * The title and the close button belong to the dialog. In the sidebar the live site shows the groups
 * only; the landmark around the panel still has its name (the theme's, or this title by aria-labelledby).
 */
@media (min-width: 1025px) {
	.pg-filters__head { display: none; }
}

.pg-filters--static { max-width: var(--pg-shop-sidebar); }
.pg-filters--static .pg-filters__head,
.pg-filters--static .pg-filters__close { display: none; }

/* ---------- Off-canvas dialog (below 1025 px) ---------- */

@media (max-width: 1024px) {
	.pg-filters:not(.pg-filters--static) {
		position: fixed;
		/* Under the part of the admin bar in view, measured when the panel opens (--pg-lock-top, site.js of the theme): on a
		   phone the bar scrolls away with the page and its full height left a gap above the panel. Without the script the
		   height WordPress sets while its admin bar is on the page. */
		top: var(--pg-lock-top, var(--wp-admin--admin-bar--height, 0px));
		bottom: 0;
		left: 0;
		z-index: var(--pg-z-drawer);
		width: var(--pg-filters-panel-w);
		max-width: 100%;
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform var(--pg-dur) var(--pg-ease), visibility 0s linear var(--pg-dur);
	}

	.pg-filters.is-open:not(.pg-filters--static),
	.pg-filters:not(.is-enhanced):not(.pg-filters--static):target {
		visibility: visible;
		transform: none;
		transition: transform var(--pg-dur) var(--pg-ease);
	}

	.pg-filters:not(.pg-filters--static) .pg-filters__head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		gap: var(--pg-space-12);
		padding: var(--pg-space-8) var(--pg-space-8) var(--pg-space-8) var(--pg-space-16);
		border-bottom: 1px solid var(--pg-line);
	}

	.pg-filters:not(.pg-filters--static) .pg-filters__body {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--pg-space-16);
	}

	/* The header line already separates the first group. */
	.pg-filters:not(.pg-filters--static) .pg-filters__body > .pg-filters__form:first-child > .pg-filters__group:first-of-type {
		padding-block-start: 0;
		border-top: 0;
	}

	.pg-filters.is-enhanced:not(.pg-filters--static) .pg-filters__foot {
		display: flex;
		flex: none;
		gap: var(--pg-space-12);
		padding: var(--pg-space-12) var(--pg-space-16);
		border-top: 1px solid var(--pg-line);
		background: var(--pg-white);
	}

	.pg-filters__show { flex: 1 1 auto; }

	.pg-filters-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: var(--pg-z-overlay);
		background: var(--pg-overlay);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--pg-dur) var(--pg-ease), visibility 0s linear var(--pg-dur);
	}

	.pg-filters-overlay.is-open,
	.pg-filters:not(.is-enhanced):target + .pg-filters-overlay {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--pg-dur) var(--pg-ease);
	}

	/* The body alone: its overflow goes to the window, the sticky header stays. With html locked as well the body became
	   the scroller and the header left with the page (zadanie 11, pripomienka 10). */
	.pg-filters-locked body { overflow: hidden; }
}

@media (max-width: 767px) {
	.pg-filters:not(.pg-filters--static) { width: 100%; }
}