/* kontejner */
.progress-container {
  position: relative;
  width: 90vmin;
  height: 90vmin;
  z-index: 10;
}

/* SVG blok aby se správně škáloval */
.progress-ring {
  display: block; /* nepouštět inline posuvy */
}

/* OTÁČÍME JEN SKUPINU S KRUHY (ne celé SVG) */
.progress-ring .progress-rotate {
  /* důležité pro správnou osu rotace v SVG */
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

/* společná pravidla pro kruhy */
.progress-ring circle {
  fill: none;
  stroke-width: 12;
}

/* barva pozadí kruhu */
.progress-bg {
  stroke: #333;
}

/* progress (upravuj stroke-dashoffset JSem) */
.progress-value {
  stroke: var(--my-color-road-sign);
  stroke-linecap: round;
  stroke-dasharray: 565.48; /* 2πr ≈ 2*π*90 */
  stroke-dashoffset: 565.48;
  transition: stroke-dashoffset 2s ease;
}

.progress-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.percent-text {
  padding: 0.5rem;
  font-size: 5vmin;
  color: white;
}

.btc-text {
  font-size: 2.2vmin;
  opacity: 0.5;
}

.czk-text {
  font-size: 2.2vmin;
  opacity: 0.5;
}

.adresa {
  color: white;
  font-size: 2.2vmin;
  padding: 0.5rem;
  opacity: 0.5;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.adresa:hover {
  color: var(--my-color-road-sign);
  opacity: 1;
}

.bottom-text {
  fill: white;
  transition: opacity 1s ease; /* fade efekt při změně */
  opacity: .65;
}

.bottom-text.fade-out {
  opacity: 0;
}


/* >= 768px (tablet) */
/* md */
@media (min-width: 768px) {
  .progress-container {
    width: 80vmin;
    height: 80vmin;
  }
}

/* >= 1024px (desktop) */
/* lg */
@media (min-width: 1024px) {

}