/**
 * Pikravetka Filters — unified filter UI
 * Visual baseline: Pikravetka Category Filter (Psi > Zdravje psa)
 */

.pkf-wrap,
.ppf-wrap,
.pdzf-wrap,
.pkls-wrap {
	--pkf-green: #568f73;
	--pkf-green-dark: #406e58;
	--pkf-border: #dce7df;
	--pkf-text: #25382f;
	--pkf-soft: #f4f9f6;
}

/* Standard category/filter rows */
.pkf-filters,
.ppf-filter-bar,
.pdzf-filter {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center;
	gap: 10px !important;
	margin: 0 0 28px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Same pill style everywhere */
.pkf-filter,
.ppf-filter-btn,
.pdzf-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 10px 17px !important;
	border: 1px solid var(--pkf-border) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--pkf-green-dark) !important;
	box-shadow: none !important;
	font: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	transition:
		transform .2s ease,
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease,
		box-shadow .2s ease !important;
}

.pkf-filter:hover,
.ppf-filter-btn:hover,
.pdzf-btn:hover {
	transform: translateY(-2px) !important;
	border-color: var(--pkf-green) !important;
	background: #fff !important;
	color: var(--pkf-green-dark) !important;
	box-shadow: 0 6px 16px rgba(55,92,72,.08) !important;
}

.pkf-filter.is-active,
.ppf-filter-btn.is-active,
.pdzf-btn.is-active {
	background: var(--pkf-green) !important;
	border-color: var(--pkf-green) !important;
	color: #fff !important;
	box-shadow: none !important;
}

.pkf-filter.is-active:hover,
.ppf-filter-btn.is-active:hover,
.pdzf-btn.is-active:hover {
	background: var(--pkf-green-dark) !important;
	border-color: var(--pkf-green-dark) !important;
	color: #fff !important;
}

/*
 * Life Stage filter uses two-step choices instead of one category row.
 * Keep its functional layout, but give every choice the same visual language.
 */
.pkls-options {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
}

.pkls-option {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 10px 17px !important;
	border: 1px solid var(--pkf-border) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--pkf-green-dark) !important;
	box-shadow: none !important;
	font: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition:
		transform .2s ease,
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease,
		box-shadow .2s ease !important;
}

.pkls-option:hover {
	transform: translateY(-2px) !important;
	border-color: var(--pkf-green) !important;
	box-shadow: 0 6px 16px rgba(55,92,72,.08) !important;
}

/* Support likely selected class names used by module JS */
.pkls-option.is-active,
.pkls-option.is-selected,
.pkls-option.active,
.pkls-option[aria-pressed="true"] {
	background: var(--pkf-green) !important;
	border-color: var(--pkf-green) !important;
	color: #fff !important;
}

/* Life Stage submit button stays visually related, but clearly primary */
.pkls-submit {
	border: 1px solid var(--pkf-green) !important;
	border-radius: 999px !important;
	background: var(--pkf-green) !important;
	color: #fff !important;
	padding: 11px 20px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
	transition: transform .2s ease, background .2s ease, opacity .2s ease !important;
}

.pkls-submit:not(:disabled):hover {
	transform: translateY(-2px) !important;
	background: var(--pkf-green-dark) !important;
	border-color: var(--pkf-green-dark) !important;
}

.pkls-submit:disabled {
	opacity: .45 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

@media (max-width: 767px) {
	.pkf-filters,
	.ppf-filter-bar,
	.pdzf-filter,
	.pkls-options {
		gap: 8px !important;
		margin-bottom: 22px !important;
	}

	.pkf-filter,
	.ppf-filter-btn,
	.pdzf-btn,
	.pkls-option {
		padding: 9px 13px !important;
		font-size: 13px !important;
	}
}