/* [pb_cikk_szuro] — bejegyzés kategória-chipek; a lista betöltő-állapota is itt kezelt. */

.chips-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.chip {
	font-family: "Nunito Sans", system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 10px 20px;
	border-radius: 999px;
	cursor: pointer;
	border: 1.5px solid #D2B4C1;
	background: #FFFFFF;
	color: #8D4F7D;
}

.chip:hover {
	background: #F3E6EE;
}

.chip--active {
	font-weight: 700;
	border-color: #8D4F7D;
	background: #8D4F7D;
	color: #FFFFFF;
}

.chip--active:hover {
	background: #8D4F7D;
}

/* Szűrés közben a lista átfutással halványul. */
.pb-cikklista__racs {
	transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pb-cikklista__racs.is-tolt {
	opacity: 0.45;
	pointer-events: none;
}

.pb-cikk-szuro-ures {
	grid-column: 1 / -1;
	padding: 24px 0;
	text-align: center;
	font-family: "Nunito Sans", system-ui, sans-serif;
	font-size: 15px;
	color: #8D4F7D;
}

@media (max-width: 767px) {
	.chip {
		font-size: 12px;
		padding: 10px 15px;
	}

	.pb-cikk-szuro-doboz {
		--chips-fade: #FFFFFF;
		position: relative;
	}

	/* Egy sorban, vízszintesen görgethető; a jobb széli fade jelzi a levágást. */
	.chips-row {
		gap: 5px;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.chips-row::-webkit-scrollbar {
		display: none;
	}

	.chip {
		flex: 0 0 auto;
	}

	.pb-cikk-szuro-doboz::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 40px;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--chips-fade) 80%);
		pointer-events: none;
		transition: opacity 200ms ease;
	}

	/* A sor végére görgetve a fade elenged. */
	.pb-cikk-szuro-doboz.is-vegen::after {
		opacity: 0;
	}
}