/*
 * Priekabų filtrai — category toolbar and trailer filter panel.
 * Colours and fonts come from Impreza's CSS custom properties, so the panel follows the theme options.
 * No font sizes are set here: all text inherits the theme's body size; hierarchy uses weight and colour.
 */

.prf {
	--prf-text: var(--color-content-text, #333);
	--prf-heading: var(--color-content-heading, #1a1a1a);
	--prf-bg: var(--color-content-bg, #fff);
	--prf-border: var(--color-content-border, #e8e8e8);
	--prf-accent: var(--color-content-primary, #98aff5);
	/* Muted text that still passes 4.5:1 on the content background. */
	--prf-muted: color-mix(in srgb, var(--prf-text) 72%, var(--prf-bg));
	--prf-radius: 8px;
	--prf-gap: 2rem;
	--prf-panel-width: 16.5rem;
	--prf-box: 1.25rem;

	color: var(--prf-text);
}

/* ---------- Toolbar ---------- */

.prf-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--prf-border);
}

.prf-count {
	margin: 0 0 0 auto;
	padding: 0;
	color: var(--prf-muted);
}

.prf-apply {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5em 1.25em;
	border: 0;
	border-radius: var(--prf-radius);
	background: var(--prf-heading);
	color: var(--prf-bg);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.prf.is-js .prf-apply {
	display: none;
}

/* Mobile toggle, visible only when the panel is collapsible. */
.prf-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.5em 1em;
	border: 2px solid var(--prf-heading);
	border-radius: var(--prf-radius);
	background: transparent;
	color: var(--prf-heading);
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.prf-toggle__icon {
	flex: none;
}

.prf-toggle__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--prf-heading);
	color: var(--prf-bg);
	line-height: 1;
}

/* ---------- Layout ---------- */

.prf-layout {
	display: block;
}

.prf--with-panel .prf-layout {
	display: grid;
	grid-template-columns: var(--prf-panel-width) minmax(0, 1fr);
	align-items: start;
	gap: var(--prf-gap);
}

.prf-results {
	min-width: 0;
	transition: opacity 0.2s ease;
}

.prf.is-loading .prf-results,
.prf.is-loading .prf-panel {
	opacity: 0.55;
	pointer-events: none;
}

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

.prf-panel {
	padding: 1.25rem 1.25rem 0.5rem;
	border: 1px solid var(--prf-border);
	border-radius: var(--prf-radius);
	background: var(--prf-bg);
}

.prf-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin: -1.25rem -1.25rem 1.25rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--prf-border);
}

.prf .prf-panel__title {
	margin: 0;
	padding: 0;
	color: var(--prf-heading);
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

.prf-panel__reset {
	color: var(--prf-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.prf-panel__reset:hover,
.prf-panel__reset:focus-visible {
	color: var(--prf-heading);
	text-decoration-thickness: 2px;
}

.prf-panel__reset.is-disabled {
	color: var(--prf-muted);
	text-decoration: none;
	cursor: default;
}

.prf-group {
	min-width: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.prf-group__title {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0 1.5rem 0.4rem 0;
	border-bottom: 2px solid var(--prf-accent);
	color: var(--prf-heading);
	font-weight: 700;
	line-height: 1.4;
}

.prf-group__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prf-group__item {
	margin: 0;
	padding: 0;
}

.prf-group__item::before {
	content: none;
}

.prf.is-js .prf-group:not(.is-expanded) .is-extra {
	display: none;
}

.prf-more {
	display: none;
	min-height: 2.25rem;
	margin: 0.25rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--prf-heading);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.prf.is-js .prf-more {
	display: inline-block;
}

.prf-more:hover,
.prf-more:focus-visible {
	text-decoration-thickness: 2px;
}

.prf-more:focus-visible,
.prf-toggle:focus-visible,
.prf-apply:focus-visible,
.prf-panel__reset:focus-visible {
	outline: 3px solid var(--prf-accent);
	outline-offset: 2px;
}

/* ---------- Checkbox ---------- */

.prf-check {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.25rem;
	margin: 0;
	cursor: pointer;
}

.prf .prf-check__input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	display: inline-grid;
	place-content: center;
	width: var(--prf-box);
	height: var(--prf-box);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 2px solid var(--prf-heading);
	border-radius: 5px;
	background: var(--prf-bg);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.prf .prf-check__input::before {
	content: "";
	width: 0.7em;
	height: 0.7em;
	transform: scale(0);
	transition: transform 0.15s ease;
	background: var(--prf-bg);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.prf .prf-check__input:checked {
	background: var(--prf-heading);
}

.prf .prf-check__input:checked::before {
	transform: scale(1);
}

.prf .prf-check__input:focus-visible {
	outline: 3px solid var(--prf-accent);
	outline-offset: 2px;
}

.prf-check:hover .prf-check__input:not(:disabled) {
	border-color: var(--prf-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--prf-accent) 25%, transparent);
}

.prf-check__label {
	color: var(--prf-heading);
	line-height: 1.35;
}

.prf-check__count {
	margin-left: auto;
	padding-left: 0.5rem;
	color: var(--prf-muted);
	font-variant-numeric: tabular-nums;
}

.prf-check.is-disabled {
	cursor: default;
}

.prf-check.is-disabled .prf-check__label,
.prf-check.is-disabled .prf-check__count {
	color: var(--prf-muted);
}

.prf .prf-check__input:disabled {
	border-color: color-mix(in srgb, var(--prf-text) 30%, var(--prf-bg));
	cursor: default;
}

.prf-check--sort .prf-check__label {
	font-weight: 700;
}

.prf .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;
}

/* ---------- Tablet & mobile: panel collapses under the "Filtras" button ---------- */

@media (max-width: 1024px) {
	.prf--with-panel .prf-layout {
		display: block;
	}

	.prf--with-panel.is-js .prf-toggle {
		display: inline-flex;
	}

	.prf--with-panel.is-js .prf-panel {
		display: none;
	}

	.prf--with-panel.is-js.is-open .prf-panel {
		display: block;
		margin-bottom: 1.5rem;
	}

	.prf-check {
		min-height: 2.75rem;
	}
}

@media (max-width: 600px) {
	.prf-toolbar {
		gap: 0.5rem 1rem;
	}

	.prf-count {
		flex-basis: 100%;
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prf-results,
	.prf .prf-check__input,
	.prf .prf-check__input::before {
		transition: none;
	}
}