/**
 * WebLegend – Subscription installment summary (Kostenübersicht) for the cart block.
 * Wygląd wg projektu #1. Wszystko scopowane pod .wl-scs – nie wpływa na resztę strony.
 */

.wl-scs {
	--wl-scs-green: #6ba32e;
	--wl-scs-green-soft: #eef4e4;
	--wl-scs-text: #2f3a2a;
	--wl-scs-muted: #6b7280;
	--wl-scs-line: #e6e8e3;
	margin-top: 18px;
	color: var(--wl-scs-text);
	font-size: 15px;
	line-height: 1.45;
}

.wl-scs__item + .wl-scs__item {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--wl-scs-line);
}

/* --- Laufzeit / Abrechnungsweise --- */
.wl-scs__meta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 4px 0 20px;
	border-bottom: 1px solid var(--wl-scs-line);
	margin-bottom: 18px;
}

.wl-scs__meta-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wl-scs__meta-icon {
	display: inline-flex;
	color: var(--wl-scs-green);
	flex: 0 0 auto;
}

.wl-scs__meta-title {
	display: block;
	font-weight: 600;
	color: var(--wl-scs-text);
}

.wl-scs__meta-value {
	display: block;
	color: var(--wl-scs-muted);
}

/* --- Kostenübersicht --- */
.wl-scs__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--wl-scs-text);
}

.wl-scs__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 8px 0;
}

.wl-scs__row-label {
	color: var(--wl-scs-text);
}

.wl-scs__row-value,
.wl-scs__amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Gesamtpreis --- */
.wl-scs__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--wl-scs-line);
	font-size: 17px;
}

.wl-scs__total-label {
	font-weight: 700;
	color: var(--wl-scs-text);
}

.wl-scs__total .wl-scs__amount {
	font-weight: 700;
	font-size: 20px;
	color: var(--wl-scs-green);
}

/* --- Info-Box (raty) --- */
.wl-scs__infobox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 18px;
	padding: 14px 16px;
	background: var(--wl-scs-green-soft);
	border-radius: 10px;
	color: #4a5a3a;
	font-size: 14px;
}

.wl-scs__infobox-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: #fff;
	background: var(--wl-scs-green);
	border-radius: 50%;
	padding: 4px;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
}

.wl-scs__infobox-icon .wl-scs__icon {
	width: 18px;
	height: 18px;
}

@media (max-width: 480px) {
	.wl-scs { font-size: 14px; }
	.wl-scs__title { font-size: 16px; }
	.wl-scs__total { font-size: 15px; }
	.wl-scs__total .wl-scs__amount { font-size: 18px; }
}