/* Сброс только для виджета */
.sf-donate * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Базовые стили виджета */
.sf-donate {
  --sf-donate-bar-bg: rgba(0, 0, 0, .05);
  --sf-donate-bar-progress-bg: #5DDD2A;
  --sf-donate-bar-point-bg: #5DDD2A;
  --sf-donate-bar-point-border: #E8FFDF;
  max-width: 700px;
  text-align: center;
  margin: 30px auto;
  font-family: Neugurotesuku;
  color: 1C1E1E;
}

.sf-donate > *:not(.progress-bar) {
  margin-bottom: 25px; /* Уменьшено для мобильности */
}

.sf-donate h2 {
  font-size: clamp(1rem, 3vw, 40px);
  line-height: 1.2;
  font-weight: 600;
}

/* Сумма с градиентом (с fallback) */
.sf-donate .number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(2.5rem, 10vw, 130px);
  letter-spacing: -2%;
  line-height: 1;
  font-weight: 600;
  color: #5DDD2A; 
  color: #5DDD2A; /* Fallback для старых браузеров */
  background: linear-gradient(260deg,
    #5DDD2A 0%,      /* Первый цвет (0%) — светло-фиолетовый */
    #5DDD2A 45%,     /* Второй цвет (45%) — тёмно-фиолетовый */
    #5DDD2A 100%);   /* Третий цвет (100%) — нежно-фиолетовый */

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 5px; /* Отступ сверху: 24 px (можно изменить на нужное значение) */
  justify-content: center; /* Центрирование элемента внутри flex‑контейнера */
}

.sf-donate .number .currency {
  font-size: 30%;
  font-weight: 100;
}

/* Прогресс‑бар */
.sf-donate .progress-bar {
  display: flex;
  position: relative;
  height: 10px;
  border-radius: 5px;
  background-color: var(--sf-donate-bar-bg);
  max-width: 100%; /* Ограничивает ширину контейнера */
  width: 100%;     /* Занимает всю доступную ширину родителя */
  box-sizing: border-box; /* Учитывает padding/border в размерах */
  margin-bottom: 20px; /* Отступ под прогресс‑баром: 40 px */
}

.sf-donate .progress-bar > span {
  display: block;
  position: relative;
  width: 0;
  height: 100%;
  border-radius: 5px;
  background-color: var(--sf-donate-bar-progress-bg);
  animation: bar-animation 2s ease-in-out forwards;
}

.sf-donate .progress-bar > span::after {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 100%;
  background-color: var(--sf-donate-bar-point-bg);
  border: 5px solid var(--sf-donate-bar-point-border);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%); /* Центрирование точки */
}

/* Адаптация для мобильных экранов (ширина до 767 px) */
@media (max-width: 767px) {
  .sf-donate .progress-bar {
    max-width: calc(100% - 20px); /* Оставляем отступы по 10 px с каждой стороны */
    margin: 0 10px; /* Горизонтальные отступы для лучшей читаемости */
    height: 8px; /* Уменьшаем высоту для компактности на мобильных */
  }

  .sf-donate .progress-bar > span {
    max-width: 95%; /* Ограничиваем максимальную ширину заполненной части */
  }
}


/* Статистика */
.sf-donate .stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px; /* Оптимальный отступ между элементами — можно менять (например, 10px или 20px) */
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-donate .stats li {
  margin: 0;
  padding: 0;
  line-height: 1.4; /* Естественная высота строки для читаемости */
  font-size: 16px; /* При необходимости задайте размер шрифта */
}

.sf-donate .stats .stat-number {
  font-size: 28px; /* Размер цифр — можно менять (24px, 30px и т. д.) */
  font-weight: 700; /* Жирный шрифт для выделения */
  color: #8D21B8; /* Фиолетовый цвет, как у суммы — для единства стиля */
  display: block; /* Занимает всю ширину контейнера, помогает с выравниванием */
  margin-bottom: 4px; /* Отступ под цифрами, отделяет от текста описания */
  line-height: 1.2; /* Компактная высота строки для крупных цифр */
}


/* Описание */
.sf-donate .desc {
  opacity: .5;
  filter: saturate(0%);
}


/* Дополнительный стиль для кнопки с ID (если нужно перебить другие стили) */
#donate-button {
  color: #FFFFFF !important; /* Только если другие стили не работают */
}


/* Анимация */
@keyframes bar-animation {
  from { width: 0; }
  to { width: var(--bar-width); }
}
 /* Адаптивность */
@media only screen and (max-width: 767px) {
  .sf-donate > *:not(.progress-bar) {
    margin-bottom: 15px; /* Меньше отступов на мобильных */
  }
  .sf-donate a.button:not(.secondary) {
    width: 70%; /* Кнопки на всю ширину */
    justify-content: center;
    margin-bottom: 10px;
  }
}