/**
 * Style systemu oceny opartego o łapki z logo ([sprzet_ocena], [sprzet_werdykt]).
 *
 * Kolory łapek (zielony/czerwony) są STAŁE — to konkretne barwy z logo,
 * niosące własne znaczenie (dobry/zły wynik), niezależnie od jasnego
 * czy ciemnego motywu strony. Kolor przekazywany jest raz, jako zmienna
 * CSS na elemencie zewnętrznym (--sprzet-ocena-color), a nie osobno
 * na każdym dziecku — łatwiej utrzymać, mniej powtórzeń w PHP.
 */

/* === [sprzet_ocena] — wspólne dla obu wariantów === */

.sprzet-ocena {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	vertical-align: middle;
}

.sprzet-ocena__label {
	color: var(--text-color, inherit);
	opacity: 0.7;
	font-size: 0.9rem;
}

.sprzet-ocena__icon {
	position: relative;
	width: 31px;
	height: 35px;
	flex-shrink: 0;
}

.sprzet-ocena__icon-base,
.sprzet-ocena__icon-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sprzet-ocena__icon-base {
	color: color-mix(in srgb, var(--text-color, #808080) 18%, transparent);
}

.sprzet-ocena__icon-fill {
	color: var(--sprzet-ocena-color);
	transition: clip-path 0.3s ease;
}

.sprzet-ocena__number {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	color: var(--sprzet-ocena-color);
}

.sprzet-ocena__max {
	font-size: 0.85rem;
	color: var(--text-color, inherit);
	opacity: 0.5;
}

/* === Wariant "plakietka" (domyślny) — obramowanie + podbarwione tło, do wtapiania w tekst === */

.sprzet-ocena--plakietka {
	background-color: color-mix(in srgb, var(--sprzet-ocena-color) 10%, transparent);
	border: 1px solid var(--sprzet-ocena-color);
	border-radius: 8px;
	padding: 0.3em 0.7em;
}

/* === Wariant "karta" — etykieta nad ikoną, do samodzielnego wyeksponowania === */

.sprzet-ocena--karta {
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background-color: var(--card-bg_1, transparent);
	border: 1px solid var(--card-border, transparent);
	border-radius: 10px;
	padding: 0.6em 1.2em;
}

.sprzet-ocena--karta .sprzet-ocena__label {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.7rem;
	opacity: 0.55;
}

.sprzet-ocena--karta .sprzet-ocena__row {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* === [sprzet_werdykt] — osobny badge "Polecamy"/"Odradzamy" === */

.sprzet-werdykt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0.5em 0.9em;
	border-radius: 8px;
	background-color: color-mix(in srgb, var(--sprzet-werdykt-color) 12%, transparent);
	border: 1px solid var(--sprzet-werdykt-color);
	color: var(--sprzet-werdykt-color);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1;
	vertical-align: middle;
}

.sprzet-werdykt svg {
	width: 16px;
	height: 18px;
	flex-shrink: 0;
}