/*
 * Praćenje pošiljke na stranici porudžbine (ono što kupac vidi).
 *
 * Zaseban fajl od panela: ovo se učitava na sajtu, pa mora biti malo i ne sme
 * da nosi ništa iz admina. Boje prate sajt.
 */

.icps-pracenje {
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid #e5e5ea;
  border-radius: 16px;
  background: #fff;
  color: #1d1d1f;
  font-size: 15px;
  line-height: 1.55;
}

.icps-pracenje h2 {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.icps-pracenje__vrh {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.icps-pracenje__vrh code {
  padding: 6px 11px;
  border-radius: 8px;
  background: #f5f5f7;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #1d1d1f;
}

.icps-pracenje__stanje {
  padding: 5px 11px;
  border-radius: 8px;
  background: #f2f7ff;
  color: #0071e3;
  font-size: 12.5px;
  font-weight: 700;
}

.icps-pracenje__stanje--zelena { background: #f2f7ff; color: #0071e3; }

/* Pouzeće: koliko kupac plaća kuriru — samo kad je otkupnina uključena. */
.icps-pracenje__pouzece {
  margin: -6px 0 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff5e0;
  color: #7a5a00;
  font-size: 14px;
}
.icps-pracenje__pouzece strong { color: #1d1d1f; }

/* Ko nosi paket: „Dostavlja" + logo u beloj kutiji, desno u redu sa brojem pošiljke.
   Kutija je iste mere kao ona sa brojem (36px, ivica #cfe4fb, radijus 8), pa se red
   čita kao celina. Na uskom ekranu red se prelomi i znak ode u svoj red, levo. */
.icps-pracenje__kurir {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.icps-pracenje__kurir-natpis {
  font-size: 13px;
  color: #86868b;
}
.icps-pracenje__kurir-znak {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #cfe4fb;
  border-radius: 8px;
}
.icps-pracenje__kurir-znak img {
  display: block;
  height: 16px;
  width: auto;
}
@media (max-width: 520px) {
  .icps-pracenje__kurir { margin-left: 0; flex-basis: 100%; }
}
.icps-pracenje__stanje--zuta   { background: #fff5e0; color: #a8760a; }
.icps-pracenje__stanje--crvena { background: #fdefed; color: #b3261e; }
.icps-pracenje__stanje--siva   { background: #f5f5f7; color: #6e6e73; }

/* ---------- tok ---------- */

.icps-pracenje__tok {
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
  border-left: 2px solid #e5e5ea;
}

.icps-pracenje__tok li {
  position: relative;
  margin: 0 0 16px;
  padding: 0;
}

.icps-pracenje__tok li:last-child { margin-bottom: 0; }

/* Tačka na liniji: poslednji korak je plav jer je to trenutno stanje. */
.icps-pracenje__tok li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -29px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #c7c7cc;
}

.icps-pracenje__tok li:last-child::before { background: #0071e3; }

/* Poslednja tačka nosi boju stanja. Uručeno je namerno PLAVO (kao u mejlovima), problem crven. */
.icps-pracenje__tok--zelena li:last-child::before { background: #0071e3; }
.icps-pracenje__tok--zuta   li:last-child::before { background: #d39100; }
.icps-pracenje__tok--crvena li:last-child::before { background: #b3261e; }
.icps-pracenje__tok--siva   li:last-child::before { background: #86868b; }

.icps-pracenje__opis { display: block; font-weight: 500; }

.icps-pracenje__sitno {
  display: block;
  font-size: 13px;
  color: #86868b;
}

@media (max-width: 600px) {
  .icps-pracenje { padding: 16px; border-radius: 14px; }
}

/* „Moj nalog" → Narudžbine: kolona „Isporuka". */
.icps-nalog-stanje {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f0f0f2;
  color: #6e6e73;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.icps-nalog-stanje--plava { background: #e8f2fe; color: #0060c4; }
.icps-nalog-stanje--zelena { background: #e7f7ec; color: #1c7a3c; }
.icps-nalog-stanje--zuta { background: #fdf3da; color: #8a6300; }
.icps-nalog-stanje--crvena { background: #fdeceb; color: #b3251c; }

.icps-nalog-gde { display: block; margin-top: 4px; color: #86868b; font-size: 12px; }

/* Posle skoka na #pracenje blok ne sme da ostane ispod zaglavlja sajta. */
#pracenje { scroll-margin-top: 110px; }

/* U temi je stanje isporuke ispod statusa porudžbine, u istoj ćeliji. */
/* display:table = u svom redu, a širok koliko natpis. */
.myaccount_ordertable .icps-nalog-stanje { display: table; margin-top: 5px; }

/* ---------- nalog: jedna pilula po redu, kao pilule teme (.inl-znak) ---------- */
/* Stanje isporuke zamenjuje status porudžbine, pa mora da izgleda isto kao on. */
.inl-korice .myaccount_ordertable .icps-nalog-stanje {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.4;
}
.inl-korice .myaccount_ordertable .icps-nalog-stanje::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.inl-korice .myaccount_ordertable .icps-nalog-stanje--plava  { background: #e8f1fe; color: #1663c7; }
.inl-korice .myaccount_ordertable .icps-nalog-stanje--zelena { background: #e7f7ee; color: #1a7f4b; }
.inl-korice .myaccount_ordertable .icps-nalog-stanje--zuta   { background: #fff4e5; color: #96590f; }
.inl-korice .myaccount_ordertable .icps-nalog-stanje--crvena { background: #fdecec; color: #c22f2f; }
.inl-korice .myaccount_ordertable .icps-nalog-stanje--siva   { background: #f5f5f7; color: #6e6e73; }

/* „Prati pošiljku" stoji umesto „Pregled", pa nosi njegov izgled glavnog dugmeta. */
.inl-korice .myaccount_ordertable .button.icps-prati {
  background: var(--inl-plava, #0071e3); color: #fff; border-color: var(--inl-plava, #0071e3);
}
.inl-korice .myaccount_ordertable .button.icps-prati:hover {
  background: var(--inl-plava, #0071e3); color: #fff; filter: brightness(1.08);
}