/* -------------- ORANGE LOADER (soft, global) -------------- */
/* Покрываем оба варианта контейнера: #loader-block и #loader */
#loader-block,
#loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  animation: fadeIn .35s both;
}

/* SVG-кольцо */
#loader-block .spin,
#loader .spin{
  width: 90px;
  height: 90px;
  animation: spin 1.6s linear infinite;   /* спокойнее вращение */
  transform-origin: center;
}

/* статичный трек — мягкий и светлый */
#loader-block .track,
#loader .track{
  stroke: #cfd4da;
  opacity: .55;
}

/* оранжевая дуга-индикатор — нежная */
#loader-block .arc,
#loader .arc{
  stroke: var(--gold, #CF4520);
  stroke-opacity: .58;                   /* мягче цвет */
  stroke-linecap: round;
  stroke-dasharray: 90 283;              /* дуга ~90 из ~283 окружности */
  stroke-dashoffset: 0;
  filter:
    drop-shadow(0 0 2px rgba(207,69,32,.28))
    drop-shadow(0 0 8px rgba(207,69,32,.12));  /* лёгкое свечение */
  animation: dash 1.6s ease-in-out infinite;   /* мягкое «дыхание» */
  transform-origin: center;
}

/* подпись под спиннером */
#loader-block p,
#loader p{
  margin-top: 1.6rem;
  font: 600 1.12rem/1.3 "Nunito Sans", sans-serif;
  letter-spacing: .03em;
  color: var(--gold, #CF4520);
  opacity: .85;
}

/* Анимации */
@keyframes spin { 100% { transform: rotate(360deg) } }
@keyframes dash {
  0%   { stroke-dasharray: 1 283;   stroke-dashoffset: 0 }
  50%  { stroke-dasharray: 110 283; stroke-dashoffset: -35 }
  100% { stroke-dasharray: 1 283;   stroke-dashoffset: -283 }
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Уважение к предпочитающим меньше движения */
@media (prefers-reduced-motion: reduce){
  #loader-block .spin, #loader .spin { animation-duration: 2.4s; }
  #loader-block .arc,  #loader .arc  { animation-duration: 2.4s; }
}