/* Итог по заказу в форме: во что он обошёлся, за сколько ушёл
   и сколько на нём заработали.

   Отдельно от items.css по длине: там строки, которые набирают,
   здесь — ответ формы на всё, что набрано. */

.total {
  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);
}

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

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

.total__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.total__name .icon {
  width: var(--fs-md);
  height: var(--fs-md);
  color: var(--text-faint);
}

.total__value {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Заработок отделён чертой и крупнее прочих: ради него весь заказ
   и складывают. */
.total__row--gain {
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

.total__row--gain .total__value {
  font-size: var(--fs-lg);
  color: var(--ok);
}