/* Прогресс до следующего шага скидки: тот же контейнер и шапка,
   что у stepbox/cashbox (значок, заголовок), своя — полоса заливки. */

.stepprogress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.stepprogress__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.stepprogress__mark { display: grid; place-items: center; color: var(--accent-text); }
.stepprogress__mark .icon { width: var(--fs-md); height: var(--fs-md); }

.stepprogress__title { font-size: var(--fs-sm); font-weight: 650; }

.stepprogress__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.stepprogress__label { font-size: var(--fs-sm); color: var(--text-dim); }

.stepprogress__value {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Полоса — сплошной след пройденного, без делений: это не выбор
   значения (discountbox__range — ползунок правки), а лишь ответ,
   сколько уже пройдено. */
.stepprogress__bar {
  display: block;
  height: var(--sp-2);
  border-radius: 100px;
  background: var(--surface-2);
  overflow: hidden;
}

.stepprogress__fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--accent);
  transition: width var(--base) var(--ease);
}

.stepprogress__note { font-size: var(--fs-xs); color: var(--text-faint); }