/* RS Proces Izrade - Frontend */
.rspi{
  --rspi-bg: #070A10;
  --rspi-panel: rgba(255,255,255,.04);
  --rspi-panel2: rgba(255,255,255,.06);
  --rspi-text: rgba(255,255,255,.92);
  --rspi-muted: rgba(255,255,255,.65);
  --rspi-line: rgba(255,255,255,.14);
  --rspi-brand: #5FE1FF;
  --rspi-brand2:#8B5CFF;
  --rspi-radius: 18px;
  --rspi-shadow: 0 18px 60px rgba(0,0,0,.55);

  color: var(--rspi-text);
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(95,225,255,.16), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(139,92,255,.14), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(92,255,177,.08), transparent 55%),
    var(--rspi-bg);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--rspi-radius);
  box-shadow: var(--rspi-shadow);
  overflow:hidden;
  padding: 18px;
}

.rspi__title{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.rspi__progress{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 8px 0 14px;
}

.rspi__progressTrack{
  height: 10px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  position:relative;
}

.rspi__progressFill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rspi-brand), var(--rspi-brand2));
  box-shadow: 0 0 0 6px rgba(95,225,255,.06);
  transition: width .25s ease;
}

.rspi__progressPct{
  font-size: 12px;
  color: var(--rspi-muted);
  white-space: nowrap;
  min-width: 44px;
  text-align:right;
}

.rspi__row{
  display:flex;
  gap: 12px;
  align-items:stretch;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}

.rspi__row::-webkit-scrollbar{ height: 10px; }
.rspi__row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); border-radius: 999px; }
.rspi__row::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; }

.rspi__step{
  scroll-snap-align: start;
  flex: 1 0 180px; /* keeps single row; becomes scroll on small screens */
  min-width: 180px;
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: inherit;
  cursor:pointer;
  text-align:left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.rspi__step:hover{
  transform: translateY(-2px);
  border-color: rgba(95,225,255,.28);
  background: rgba(255,255,255,.045);
}

.rspi__step[aria-selected="true"]{
  border-color: rgba(95,225,255,.40);
  background: linear-gradient(135deg, rgba(95,225,255,.10), rgba(139,92,255,.06));
}

.rspi__icon{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}

.rspi__icon svg{
  width: 22px;
  height: 22px;
  opacity:.95;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.rspi__stepText{ display:flex; flex-direction:column; gap: 2px; min-width:0; }
.rspi__stepTitle{ font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.rspi__stepSub{ font-size: 12px; color: var(--rspi-muted); line-height: 1.35; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

.rspi__details{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 14px;
}

.rspi__detailsTitle{
  margin: 0;
  font-size: 16px;
  letter-spacing: .01em;
  color: #fff !Important;
}
.rspi__detailsSub{
  margin: 6px 0 0;
  color: var(--rspi-muted);
  font-size: 13px;
  line-height: 1.6;
}
.rspi__detailsDesc{
  margin-top: 10px;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  line-height: 1.65;
}
.rspi__detailsDesc p{ margin: 0 0 10px; }
.rspi__detailsDesc p:last-child{ margin-bottom: 0; }

@media (prefers-reduced-motion: reduce){
  .rspi__progressFill, .rspi__step{ transition:none !important; }
}


/* =====================
   ICON ANIMATIONS
===================== */
.rspi__step .rspi__icon svg { transform-origin: 50% 50%; }

.rspi__step[aria-selected="true"] .rspi__icon {
  box-shadow: 0 0 0 6px rgba(95,225,255,.08), 0 18px 50px rgba(0,0,0,.45);
}
.rspi__step[aria-selected="true"] .rspi__icon svg {
  animation: rspiFloat 2.8s ease-in-out infinite;
}

.rspi__step[aria-selected="true"] .rspi__icon svg path,
.rspi__step[aria-selected="true"] .rspi__icon svg circle {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: rspiDraw .9s ease forwards;
}

@keyframes rspiFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.03); }
}
@keyframes rspiDraw { to { stroke-dashoffset: 0; } }

/* =====================
   ANIMATED BACKGROUND
===================== */
.rspi { position: relative; isolation: isolate; }

.rspi::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
  background:
    radial-gradient(650px 240px at 15% 20%, rgba(95,225,255,.20), transparent 60%),
    radial-gradient(560px 240px at 85% 25%, rgba(139,92,255,.18), transparent 60%),
    radial-gradient(700px 280px at 55% 110%, rgba(92,255,177,.10), transparent 60%);
  filter: blur(2px);
  animation: rspiAurora 10s ease-in-out infinite;
}

.rspi::after{
  content:"";
  position:absolute;
  inset:-40px;
  z-index:0;
  background:
    radial-gradient(220px 160px at 20% 30%, rgba(95,225,255,.15), transparent 70%),
    radial-gradient(260px 180px at 80% 35%, rgba(139,92,255,.14), transparent 72%);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: rspiBlobs 12s ease-in-out infinite;
}

.rspi > * { position: relative; z-index: 1; }

@keyframes rspiAurora {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.02); }
}
@keyframes rspiBlobs {
  0% { transform: translate(-12px,6px) scale(1); }
  50% { transform: translate(10px,-8px) scale(1.05); }
  100% { transform: translate(-12px,6px) scale(1); }
}