:root{
  --cspbx-green: #1f5f4a;
  --cspbx-track: #e6e6e6;
  --cspbx-muted: rgba(0,0,0,.45);
  --cspbx-text: rgba(0,0,0,.85);
  --cspbx-svetlozelena: #aed045;
}

.cspbx-hidden{ display:none !important; }

/* ===============================
   WRAPPER + HEADER
================================ */
.cspbx-wrap{
  padding: 16px 36px 44px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

.cspbx-head{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px; /* vise prostora ispod naslova */
}

.cspbx-title{
  font-weight: 700;
  font-size: 13px;
  color: var(--cspbx-text);
}

.cspbx-sub{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  white-space: nowrap;
}

/* ===============================
   PROGRESS LINE
================================ */
.cspbx-line{
  position: relative;
  height: 8px;
  background: var(--cspbx-track);
  overflow: hidden;
  margin-top: 40px;
}

.cspbx-fill{
  height: 100%;
  width: 0%;
  background: var(--cspbx-svetlozelena);
  transition: width .30s ease;
}


/* ===============================
   CHECKPOINTS (ABSOLUTE, NOT FLEX)
================================ */
.cspbx-points{
  position: relative;
  height: 0;
  margin-top: 0;
  padding: 0;
}

/* base */
.cspbx-point{
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  padding-top: 22px; /* prostor za label ispod */
  color: var(--cspbx-muted);
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
}

/* TAﾄ君E POZICIJE */
.cspbx-point[data-i="0"]{ left: 33.333%; }
.cspbx-point[data-i="1"]{ left: 66.666%; }
.cspbx-point[data-i="2"]{ left: 100%; }

/* dot (ring) */
.cspbx-dot{
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;

  /* NOVO */
  background: #fff; /* unutrašnjost */
  box-shadow: 0 0 0 3px var(--cspbx-track); /* okvir */

  transition: 
    background-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

/* broj iznad dot-a */
.cspbx-top{
  position:absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 13px;
  color: var(--cspbx-text);
}

/* label ispod */
.cspbx-label{
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  display: block;
  opacity: .65;

  /* pomeranje ulevo (tweakuj vrednost) */
  transform: translateX(-58px) translateY(-10px);

  /* stabilnost */
  white-space: nowrap;
  color: rgba(0,0,0,.55);
  transition:
    color .25s ease,
    font-size .25s ease,
    transform .25s ease;
}


/* reached */
.cspbx-point.done{
  color: var(--cspbx-svetlozelena);
}
.cspbx-point.done .cspbx-dot{
  background: var(--cspbx-svetlozelena); /* unutrašnjost zelena */
  box-shadow: 0 0 0 3px #fff;      /* okvir beo */
}
.cspbx-point.done .cspbx-label{
  color: var(--cspbx-green);    /* ista zelena kao fill */
  font-size: 14px;              /* malo veći kad je reached */
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(31,95,74,.25);
  opacity: 1;
}

/* pulse */
.cspbx-point.pulse .cspbx-dot{
  animation: cspbxPulse .55s ease;
}
@keyframes cspbxPulse{
  0%{ transform: translateX(-50%) scale(1); }
  50%{ transform: translateX(-50%) scale(1.35); }
  100%{ transform: translateX(-50%) scale(1); }
}

/* animacija okolo */
.cspbx-point.done .cspbx-dot::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed rgba(31,95,74,.35);
  animation: cspbxBurst .6s ease-out forwards;
}

@keyframes cspbxBurst{
  0%{
    transform: scale(.5) rotate(0deg);
    opacity: 1;
  }
  100%{
    transform: scale(1.6) rotate(45deg);
    opacity: 0;
  }
}






/* ===============================
   HINT TEXT
================================ */
.cspbx-hint{
  margin-bottom: 14px;   /* prostor ispod teksta */
  font-size: 14px;
  color: rgba(0,0,0,.70);
  text-align: center;
}

.cspbx-hint strong{
  color: var(--cspbx-green);
  font-weight: 700;
}