/* Цепочка шагов акции — штамп-карта на экране (решение №155).

   Кружок на шаг: пройденный залит акцентом с галочкой, будущий — тёмный
   с номером; между ними линия, как на бумажной карточке с полями под
   печати. Последняя клетка — награда: пунктирная рамка и значок подарка,
   чтобы её нельзя было спутать с очередным шагом.

   Ряд переносится: до двадцати шагов (предел цепочки, дальше остаётся
   одна полоса) на узком телефоне это два-три ряда, и это лучше, чем
   горизонтальная прокрутка, в которой конца пути не видно. */

.stampchain {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-2) 0;
}

.stampstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  position: relative;
}

/* Линия к соседу слева — своей псевдоэлементной чертой, а не отдельным
   узлом: на переносе ряда она уезжает вместе со своим кружком, и
   висящих хвостов в конце строки не остаётся. */
.stampstep + .stampstep::before {
  content: "";
  position: absolute;
  top: 4.6cqw;
  right: 100%;
  width: 2.6cqw;
  height: 1px;
  background: var(--line);
}

.stampstep__dot {
  display: grid;
  place-items: center;
  width: 9.2cqw;
  height: 9.2cqw;
  margin: 0 1.3cqw;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text-dim);
  transition: background var(--base) var(--ease), color var(--base) var(--ease);
}

.stampstep__dot .icon { width: 4.6cqw; height: 4.6cqw; }

.stampstep__dot--done {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Награда — не кружок: квадрат со скруглением и пунктиром, тем же
   приёмом, каким на бумажной карточке отмечают поле подарка. */
.stampstep__dot--prize {
  border-radius: var(--r-md);
  border-style: dashed;
  border-color: var(--accent);
  color: var(--accent-text);
}

.stampstep__num {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  text-align: center;
  line-height: 1.25;
}

.stampstep__num--prize { color: var(--accent-text); }

/* Предпросмотр в форме заведения акции (ui/promo-fields.js): та же
   дорожка, но пустая — набрал число шагов и сразу видишь, что получит
   клиент. Рамка и фон поля, чтобы блок читался частью формы, а не
   куском чужого экрана. */
.stampprev {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.stampprev__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}