/* Накопительные скидки — стили вкладки в личном кабинете.
   Цвета наследуются от темы Woodmart через её CSS-переменные,
   fallback-значения используются, если переменных нет. */

.wccd {
	--wccd-accent: var(--wd-primary-color, #2f7d5a);
	--wccd-ink: var(--wd-title-color, #1b1f24);
	--wccd-muted: var(--wd-text-color, #6b7280);
	--wccd-line: rgba(0, 0, 0, .1);
	--wccd-track: rgba(0, 0, 0, .07);
	--wccd-radius: 10px;

	color: var(--wccd-muted);
	container-type: inline-size;
}

.wccd * {
	box-sizing: border-box;
}

/* ------------------------------- Шапка ------------------------------- */

.wccd-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	padding: 28px 30px;
	border: 1px solid var(--wccd-line);
	border-radius: var(--wccd-radius);
	background: linear-gradient(180deg, rgba(0, 0, 0, .015), transparent 60%);
}

.wccd-eyebrow {
	display: block;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wccd-muted);
}

.wccd-figure {
	margin: 6px 0 10px;
	line-height: .9;
	color: var(--wccd-ink);
	font-variant-numeric: tabular-nums;
}

.wccd-figure__num {
	font-size: clamp(56px, 12cqi, 88px);
	font-weight: 700;
	letter-spacing: -.04em;
}

.wccd-figure__sign {
	font-size: clamp(22px, 4cqi, 30px);
	font-weight: 500;
	color: var(--wccd-accent);
	vertical-align: super;
	margin-left: 2px;
}

.wccd-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wccd-accent);
	background: color-mix(in srgb, var(--wccd-accent) 12%, transparent);
}

.wccd-badge--muted {
	color: var(--wccd-muted);
	background: var(--wccd-track);
}

.wccd-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 36px;
	margin: 0;
}

.wccd-fact dt {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--wccd-muted);
}

.wccd-fact dd {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--wccd-ink);
	font-variant-numeric: tabular-nums;
}

.wccd-fact__max {
	color: var(--wccd-accent);
}

/* ------------------------------ Шкала ------------------------------ */

.wccd-ladder {
	position: relative;
	margin: 34px 0 30px;
	padding: 0 0 4px;
}

.wccd-rail {
	position: absolute;
	top: 7px;
	left: calc(50% / var(--wccd-cells, 3));
	right: calc(50% / var(--wccd-cells, 3));
	height: 2px;
	background: var(--wccd-track);
	border-radius: 2px;
}

.wccd-rail__fill {
	display: block;
	width: var(--wccd-fill, 0%);
	height: 100%;
	border-radius: 2px;
	background: var(--wccd-accent);
	transition: width .6s cubic-bezier(.2, .7, .3, 1);
}

.wccd-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--wccd-cells, 3), 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wccd-steps li {
	list-style: none;
	margin: 0;
}

.wccd-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
	padding: 0 4px;
}

.wccd-step__dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--wccd-track);
	margin-bottom: 10px;
	flex: none;
}

.wccd-step.is-done .wccd-step__dot {
	border-color: var(--wccd-accent);
	background: var(--wccd-accent);
}

.wccd-step.is-current .wccd-step__dot {
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--wccd-accent) 20%, transparent);
}

.wccd-step__pct {
	font-size: 16px;
	font-weight: 700;
	color: var(--wccd-ink);
	font-variant-numeric: tabular-nums;
}

.wccd-step.is-done .wccd-step__pct {
	color: var(--wccd-accent);
}

.wccd-step__sum,
.wccd-step__name {
	font-size: 12px;
	line-height: 1.4;
	color: var(--wccd-muted);
}

.wccd-step__name {
	opacity: .75;
}

/* ------------------------------ Таблица ------------------------------ */

.wccd-table {
	width: 100%;
	margin: 0 0 28px;
	border-collapse: collapse;
	font-size: 15px;
}

.wccd-table th {
	padding: 10px 14px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wccd-muted);
	border-bottom: 1px solid var(--wccd-line);
}

.wccd-table td {
	padding: 14px;
	border-bottom: 1px solid var(--wccd-line);
	color: var(--wccd-ink);
	vertical-align: middle;
}

.wccd-table tr.is-current td {
	background: color-mix(in srgb, var(--wccd-accent) 7%, transparent);
}

.wccd-table tr.is-done td {
	color: var(--wccd-muted);
}

.wccd-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--wccd-muted);
	background: var(--wccd-track);
}

.wccd-tag--now {
	color: #fff;
	background: var(--wccd-accent);
}

.wccd-tag--done {
	color: var(--wccd-accent);
	background: color-mix(in srgb, var(--wccd-accent) 14%, transparent);
}

/* ------------------------------ Правила ------------------------------ */

.wccd-rules {
	padding: 20px 24px;
	border-radius: var(--wccd-radius);
	background: var(--wccd-track);
}

.wccd-rules h3 {
	margin: 0 0 10px;
	font-size: 15px;
	color: var(--wccd-ink);
}

.wccd-rules ul {
	margin: 0;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.7;
}

.wccd-empty {
	padding: 24px;
	border: 1px dashed var(--wccd-line);
	border-radius: var(--wccd-radius);
	text-align: center;
}

/* ------------------------------ Адаптив ------------------------------ */

@container (max-width: 600px) {
	.wccd-hero {
		padding: 22px 20px;
	}
}

@media (max-width: 700px) {
	.wccd-hero {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Шкала разворачивается вертикально */
	.wccd-ladder {
		padding-left: 4px;
	}

	.wccd-rail {
		top: calc(100% / var(--wccd-cells, 3) / 2);
		bottom: calc(100% / var(--wccd-cells, 3) / 2);
		left: 11px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.wccd-rail__fill {
		width: 100%;
		height: var(--wccd-fill, 0%);
		transition: height .6s cubic-bezier(.2, .7, .3, 1);
	}

	.wccd-steps {
		grid-template-columns: 1fr;
	}

	.wccd-step {
		flex-direction: row;
		align-items: baseline;
		flex-wrap: wrap;
		text-align: left;
		gap: 4px 10px;
		padding: 0 0 18px 32px;
		position: relative;
		min-height: 44px;
	}

	.wccd-step__dot {
		position: absolute;
		left: 4px;
		top: 3px;
		margin: 0;
	}

	.wccd-step__sum::before {
		content: "— ";
	}

	.wccd-table thead {
		display: none;
	}

	.wccd-table tr {
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--wccd-line);
	}

	.wccd-table tr.is-current td {
		background: none;
	}

	.wccd-table tr.is-current {
		background: color-mix(in srgb, var(--wccd-accent) 7%, transparent);
		border-radius: 8px;
		padding: 12px;
	}

	.wccd-table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 5px 0;
		border: 0;
	}

	.wccd-table td::before {
		content: attr(data-label);
		font-size: 13px;
		color: var(--wccd-muted);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wccd-rail__fill {
		transition: none;
	}
}

/* Fallback для браузеров без color-mix */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
	.wccd-badge,
	.wccd-tag--done {
		background: var(--wccd-track);
	}

	.wccd-table tr.is-current td {
		background: var(--wccd-track);
	}
}