/* ===== БАЗОВЫЙ ВИД ПРОГРЕСС-БАРА (как сейчас) ===== */

/* Контейнер снизу */
.top9-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  pointer-events: none;
}

/* Обёртка, которая появляется/исчезает */
.top9-progress__wrap {
  margin: 0 auto;
  max-width: 1400px;
  padding: 10px 12px 12px;
  transform: translateY(14px);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.top9-progress--visible .top9-progress__wrap {
  opacity: 1;
  transform: translateY(0);
}

/* Панель (голубой контейнер, как раньше) */
.top9-progress__panel {
  background: rgba(11,122,191,0.08);       /* прежний голубой прозрачный фон */
  border: 1px solid rgba(11,122,191,0.22); /* прежняя рамка */
  border-radius: 10px;
  padding: 10px 14px 14px;
  backdrop-filter: blur(4px);
  position: relative;
}

/* Полоса прогресса */
.top9-progress__bar {
  position: relative;
  height: 26px;                 /* базовая высота */
  background: #2e84b0;          /* фон */
  border-radius: 999px;
  overflow: hidden;
}

/* Заполненная часть */
.top9-progress__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #00B500;          /* зелёный */
  transition: width .5s ease;
}

/* Текст внутри полосы */
.top9-progress__text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  pointer-events: none;
  white-space: nowrap;
}

/* Блик */
.top9-progress__bar-indet {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.top9-progress__bar-indet::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:22%;
  min-width:140px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: top9-scan 1.1s linear infinite;
  filter: saturate(0.9);
}

@keyframes top9-scan {
  0%   { transform: translateX(-35%); }
  100% { transform: translateX(135%); }
}

/* Уважение к reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .top9-progress__bar-fill { transition: none; }
  .top9-progress__bar-indet::before { animation: none; display:none; }
}

/* =========================================================
   АДАПТИВ ПО ДИАПАЗОНАМ
   ========================================================= */

/* 0–382px — самые маленькие телефоны */
@media (max-width: 382px) {
  .top9-progress__wrap {
    padding: 8px 8px 10px;
  }
  .top9-progress__panel {
    padding: 8px 10px 10px;
  }
  .top9-progress__bar {
    height: 20px;
  }
  .top9-progress__text {
    font-size: 11px;
  }
}

/* 383–410px — компактные телефоны */
@media (min-width: 383px) and (max-width: 410px) {
  .top9-progress__wrap {
    padding: 9px 10px 11px;
  }
  .top9-progress__panel {
    padding: 9px 12px 12px;
  }
  .top9-progress__bar {
    height: 22px;
  }
  .top9-progress__text {
    font-size: 11px;
  }
}

/* 411–766px — ОСТАВЛЯЕМ КАК ЕСТЬ (используется базовый стиль) */
@media (min-width: 411px) and (max-width: 766px) {
  /* можешь добавить сюда правки, если когда-то понадобится */
}

/* 767–980px — планшеты / небольшие ноутбуки */
@media (min-width: 767px) and (max-width: 980px) {
  .top9-progress__wrap {
    max-width: 1200px;
  }
  .top9-progress__bar {
    height: 24px;
  }
}

/* 981–1278px — стандартные ноутбуки */
@media (min-width: 981px) and (max-width: 1278px) {
  .top9-progress__wrap {
    max-width: 1300px;
  }
  .top9-progress__bar {
    height: 26px;
  }
}

/* 1279–1332px — чуть шире ноутбуки */
@media (min-width: 1279px) and (max-width: 1332px) {
  .top9-progress__wrap {
    max-width: 1350px;
  }
  .top9-progress__bar {
    height: 26px;
  }
}

/* 1333–1438px */
@media (min-width: 1333px) and (max-width: 1438px) {
  .top9-progress__wrap {
    max-width: 1400px;
  }
  .top9-progress__bar {
    height: 26px;
  }
}

/* 1439–1678px — нормальные десктопы */
@media (min-width: 1439px) and (max-width: 1678px) {
  .top9-progress__wrap {
    max-width: 1500px;
  }
  .top9-progress__bar {
    height: 28px;
  }
  .top9-progress__text {
    font-size: 12px;
  }
}

/* 1679–1918px — крупные мониторы */
@media (min-width: 1679px) and (max-width: 1918px) {
  .top9-progress__wrap {
    max-width: 1600px;
  }
  .top9-progress__bar {
    height: 28px;
  }
  .top9-progress__text {
    font-size: 13px;
  }
}

/* ≥1919px — ОСТАВЛЯЕМ КАК ЕСТЬ (базовый вид, который тебе нравится) */
@media (min-width: 1919px) {
  /* можно будет подправить отдельно, если захочешь */
}