/* Что продажа сделала с акциями (ui/sale-promos.js): бирка в строке
   заказа и раздел в открытом заказе.

   Золото, а не зелень: зелёным в продукте подписаны деньги —
   заработок и «хорошо» у надёжного пароля, — а шаг акции не деньги.
   Золото же значит «это про карту клиента», тем же цветом отмечены
   знак покупки в списке и прогресс акции на карточке. */

/* ── Бирка в строке заказа ─────────────────────────────────── */

/* Третьей строкой, под днём и заработком: в самой строке места нет —
   там номер, день и два подписанных числа. Акций у карты бывает
   несколько, поэтому бирки переносятся, а не уезжают за край. */
.salemarks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}

.salemark {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  /* Обводка есть у всех бирок, просто у штампа она прозрачная:
     иначе рядом стоящие бирка штампа и бирка подарка расходились бы
     по высоте на толщину линии. */
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--plate-warm);
  font-size: var(--fs-2xs);
}

.salemark__mark {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--accent-text);
}

.salemark__mark .icon {
  width: var(--fs-xs);
  height: var(--fs-xs);
}

/* Имя акции обрезаем, а не переносим: строка заказа стоит в списке
   из сотни, и одна карточка не должна расти на три строки из-за
   длинного названия. */
.salemark__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
}

.salemark__value {
  flex: none;
  font-weight: 700;
  color: var(--accent-text);
}

/* Подарок — событие раз в двадцать покупок, и заметен он обводкой,
   а не полной заливкой: сплошное золото в продукте значит «сюда можно
   нажать», а бирка ничего не обещает и никуда не ведёт. */
.salemark--prize { border-color: var(--accent-dim); }
.salemark--prize .salemark__name { color: var(--text); }

/* ── Раздел в открытом заказе ──────────────────────────────── */

/* Своей коробкой перед итогом, теми же стенками, что у итога
   (components/total.css): итог про деньги, и строка про шаг акции
   внутри него читалась бы как ещё одна сумма. */
.salepromos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.salepromos__title {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-md);
  font-weight: 700;
}

.salepromos__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  transition: background var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}

/* Ведёт в историю акции — нажатие видно, иначе непонятно, отозвалась
   строка или нет. */
.salepromos__row--go:active {
  background: var(--surface-2);
  transform: scale(.995);
}

.salepromos__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border-radius: var(--r-md);
  background: var(--plate-warm);
  color: var(--accent);
}

.salepromos__mark .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}

.salepromos__what {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.salepromos__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 650;
}

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

.salepromos__value {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  color: var(--accent-text);
}

.salepromos__go {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-faint);
}

.salepromos__go .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}