/* U-Deco — монохромные line-иконки вместо цифр */

.ud-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--ud-text);
  color: var(--ud-text);
  flex-shrink: 0;
  line-height: 0;
}

.ud-icon svg {
  width: 22px;
  height: 22px;
}

.ud-icon--sm {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.ud-icon--sm svg {
  width: 18px;
  height: 18px;
}

.ud-icon--lg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 12px;
}

.ud-icon--lg svg {
  width: 24px;
  height: 24px;
}

.ud-icon--inline {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: -0.35em;
  margin-right: 10px;
}

.ud-icon--inline svg {
  width: 16px;
  height: 16px;
}

/* Совместимость со старыми классами */
.home-step-card__num.ud-icon,
.promo-card__icon.ud-icon,
.for-whom-icon.ud-icon,
.step-number-large.ud-icon,
.step-num.ud-icon,
.workflow-num.ud-icon,
.trend-number.ud-icon {
  background: #fff;
  border: 1.5px solid var(--ud-text);
  color: var(--ud-text);
  font-size: 0;
  font-weight: 400;
  margin-bottom: 12px;
}

.promo-card--base .promo-card__icon.ud-icon,
.promo-card--rustore .promo-card__icon.ud-icon,
.promo-card--max .promo-card__icon.ud-icon {
  background: #fff;
  color: var(--ud-text);
}

.step-number.ud-icon {
  background: #fff;
  border: 1.5px solid var(--ud-text);
  color: var(--ud-text);
  font-size: 0;
  width: 32px;
  height: 32px;
}

.promo-card__icon.ud-icon {
  background: #fff;
  border: 1.5px solid var(--ud-text);
  color: var(--ud-text);
  font-size: 0;
}

.promo-card__icon.ud-icon svg {
  width: 22px;
  height: 22px;
}