/**
 * Cinemore címkék widget stílusa.
 * Pipa + szöveg pill-ek (flex, wrap).
 */

.cinemore-cimkek {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* A színeket CSS-változók adják; a --{séma} módosítók (widget „Színséma"
   kontroll) csak ezeket írják át. Egyedi séma: inline style-ból jönnek. */
.cinemore-cimkek__pill {
	--ck-bg: #fff;
	--ck-keret: #d9ece3;
	--ck-szoveg: #07130e;
	--ck-ikon: #0a8f63;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--ck-bg);
	border: 1px solid var(--ck-keret);
	border-radius: 100px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ck-szoveg);
}

.cinemore-cimkek__ikon {
	color: var(--ck-ikon);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cinemore-cimkek__ikon svg {
	width: 17px;
	height: 17px;
}

/* === Színsémák === */
.cinemore-cimkek__pill--zold {
	--ck-bg: #0a8f63;
	--ck-keret: transparent;
	--ck-szoveg: #fff;
	--ck-ikon: #fff;
}

.cinemore-cimkek__pill--pink {
	--ck-bg: #b0568a;
	--ck-keret: transparent;
	--ck-szoveg: #fff;
	--ck-ikon: #fff;
}

.cinemore-cimkek__pill--zold-vilagos {
	--ck-bg: #e7f6ef;
	--ck-keret: transparent;
	--ck-szoveg: #2c4239;
	--ck-ikon: #0a8f63;
}

.cinemore-cimkek__pill--pink-vilagos {
	--ck-bg: #f9f0f6;
	--ck-keret: transparent;
	--ck-szoveg: #7a4463;
	--ck-ikon: #b0568a;
}

.cinemore-cimkek__pill--sotet {
	--ck-bg: #07130e;
	--ck-keret: transparent;
	--ck-szoveg: #fff;
	--ck-ikon: #14c98d;
}

/* Egyedi: a --ck-bg / --ck-szoveg / --ck-ikon inline style-ból jön (a widget
   a háttér fényessége alapján számolja a szöveg- és ikonszínt). */
.cinemore-cimkek__pill--egyedi {
	--ck-keret: transparent;
}

@media (max-width: 767px) {
	.cinemore-cimkek__pill {
		font-size: 14px;
		padding: 9px 15px;
	}
}