/* Uputstva za kupce (Figma strana 675:4877): pregled 679:25678, zaključano 679:25759, uputstvo 675:4878.
   Širina sadržaja kao na naslovnoj (1309), mere elemenata iz Figme. */
.uputstvo { --svetla: #F3EEFC; --tamna: #3F1F80; --glavna: #6731C6; }

/* ---------- Zaglavlje strane ---------- */
.uputstvo-glava { background: var(--gradijent); color: #fff; }
.uputstvo-glava__okvir {
  width: min(1309px, 100% - 40px); margin-inline: auto; padding: 56px 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.uputstvo-glava--otvoreno .uputstvo-glava__okvir { gap: 18px; }
.uputstvo-glava__putanja { font: 500 13px/16px var(--inter); color: rgba(255, 255, 255, .6); white-space: pre-wrap; }
.uputstvo-glava__putanja a { color: inherit; text-decoration: none; }
.uputstvo-glava__putanja a:hover { color: #fff; }
.uputstvo-glava__cipovi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uputstvo-cip {
  display: inline-flex; align-items: center; gap: 7px; height: 25px; padding: 5px 12px; border-radius: 50px;
  background: rgba(255, 255, 255, .12); font: 600 12.5px/15px var(--inter); color: #fff;
}
.uputstvo-cip__tacka { width: 7px; height: 7px; border-radius: 50%; background: var(--zuta); }
.uputstvo-glava__naslov { font: 700 52px/57px var(--dm); letter-spacing: -.02em; }
.uputstvo-glava__znak { flex: none; width: 32px; height: 32px; }
.uputstvo-glava__podnaslov { font: 400 18px/22px var(--inter); color: rgba(255, 255, 255, .75); }

/* ---------- Uputstvo: bočni sadržaj + tekst ---------- */
.uputstvo-telo {
  width: min(1309px, 100% - 40px); margin: 0 auto; padding: 64px 0 96px;
  display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 40px; align-items: start;
}
.uputstvo-bok { position: sticky; top: calc(var(--glava, 0px) + 24px); display: flex; flex-direction: column; gap: 16px; }
.uputstvo-sadrzaj { padding: 18px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linija); }
.uputstvo-sadrzaj > summary { list-style: none; pointer-events: none; font: 600 12px/15px var(--inter); letter-spacing: .08em; text-transform: uppercase; color: #737584; }
.uputstvo-sadrzaj > summary::-webkit-details-marker { display: none; }
.uputstvo-sadrzaj__lista { display: flex; flex-direction: column; gap: 11px; margin-top: 11px; }
.uputstvo-sadrzaj__lista a { display: flex; align-items: flex-start; gap: 8px; text-decoration: none; }
.uputstvo-sadrzaj__lista span { flex: none; min-width: 15px; font: 600 12.5px/15px var(--inter); color: rgba(115, 117, 132, .7); }
.uputstvo-sadrzaj__lista b { font: 400 13.5px/18px var(--inter); color: #41434F; }
.uputstvo-sadrzaj__lista a:hover b { color: var(--tamna); }
.uputstvo-sadrzaj__lista a.aktivno span { color: var(--glavna); }
.uputstvo-sadrzaj__lista a.aktivno b { font-weight: 600; color: var(--tamna); }
.uputstvo-pomoc { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: #F6F6F9; }
.uputstvo-pomoc__naslov { font: 600 14px/17px var(--inter); color: #15161C; }
.uputstvo-pomoc__kontakt { font: 400 13.5px/20px var(--inter); color: #41434F; }
.uputstvo-pomoc__kontakt a { color: inherit; text-decoration: none; }
.uputstvo-pomoc__kontakt a:hover { color: var(--tamna); }
.uputstvo-pomoc__mala { font: 400 12.5px/18px var(--inter); color: #737584; }

.uputstvo-sadrzaj-strane { min-width: 0; display: flex; flex-direction: column; gap: 44px; }
.uputstvo-linija { margin: 0; border: 0; height: 1px; background: var(--linija); }
.poglavlje { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 24px; }
.poglavlje__naslov { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font: 700 28px/31px var(--dm); letter-spacing: -.02em; color: #15161C; }
.poglavlje__broj {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: var(--svetla); font: 700 16px/19px var(--inter); letter-spacing: 0; color: var(--tamna);
}
.poglavlje__znacka {
  display: inline-flex; align-items: center; height: 25px; padding: 5px 12px; border-radius: 50px;
  background: #15161C; font: 600 12.5px/15px var(--inter); letter-spacing: 0; color: #fff;
}
.poglavlje__podnaslov { font: 700 20px/24px var(--dm); color: #15161C; }
.poglavlje__tekst { font: 400 17px/26px var(--inter); color: #41434F; }
.koraci { list-style: none; counter-reset: korak; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.koraci li {
  counter-increment: korak; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px;
  font: 400 16px/24px var(--inter); color: #15161C;
}
.koraci li::before {
  content: counter(korak); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--glavna); font: 700 12px/15px var(--inter); color: var(--tamna);
}
.napomena { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 12px; background: var(--svetla); }
.napomena__oznaka { font: 700 12px/15px var(--inter); letter-spacing: .08em; text-transform: uppercase; color: var(--tamna); }
.napomena__tekst { font: 400 15px/23px var(--inter); color: #15161C; }
.poglavlje__slika { margin: 0; padding-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.poglavlje__slika img {
  width: 100%; height: auto; border-radius: 12px; background: #fff;
  box-shadow: 0 16px 40px rgba(20, 15, 51, .12);
}
.poglavlje__slika figcaption { font: 400 13px/16px var(--inter); color: #737584; text-align: center; }

/* ---------- Zaključano (gost ili nalog bez licence) ---------- */
.zakljucano {
  width: min(1309px, 100% - 40px); margin: 0 auto; padding: 72px 0 96px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.zakljucano__telo { display: flex; flex-direction: column; align-items: center; gap: 40px; min-width: 0; }
.zakljucano--nalog { display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 40px; align-items: start; padding-top: 40px; }
.zakljucano__kartica {
  width: min(640px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 44px 48px; text-align: center; background: #fff; border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--linija), 0 16px 40px rgba(20, 15, 51, .1);
}
.zakljucano__katanac { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #F0EAFB; }
.zakljucano__kartica h2 { font: 700 30px/33px var(--dm); letter-spacing: -.02em; color: #15161C; }
.zakljucano__uvod { max-width: 480px; font: 400 16px/25px var(--inter); color: #41434F; }
.zakljucano__dugmad { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding-top: 6px; }
.dugme-kv {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 10px;
  background: var(--ljub); color: #fff; font: 600 15px/18px var(--inter); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s;
}
.dugme-kv:hover { background: #5626AE; }
.dugme-kv--obrub { height: 44px; background: #fff; color: #15161C; box-shadow: inset 0 0 0 1px var(--linija); }
.dugme-kv--obrub:hover { background: #fff; box-shadow: inset 0 0 0 1px #C9C9D3; }
.zakljucano__mala { font: 400 13.5px/16px var(--inter); color: #737584; }
.zakljucano__mala a { color: inherit; text-decoration: none; }
.zakljucano__mala a:hover { text-decoration: underline; }
/* spisak poglavlja: svoja kartica ispod poziva na kupovinu, dve kolone */
.zakljucano__sadrzaj { display: flex; flex-direction: column; gap: 22px; width: min(640px, 100%); padding: 32px 36px 36px; border-radius: 18px; background: #F6F6F9; }
.zakljucano__naslov { font: 600 13px/16px var(--inter); letter-spacing: .08em; text-transform: uppercase; color: #737584; }
.zakljucano__kolone { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 0; }
.zakljucano__lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.zakljucano__lista li { display: flex; align-items: center; gap: 12px; font: 400 15px/20px var(--inter); color: #41434F; }
.zakljucano__lista li svg { flex: none; margin-left: auto; opacity: .8; }
.zakljucano__lista span { flex: none; min-width: 22px; font: 600 12.5px/16px var(--inter); color: rgba(115, 117, 132, .7); }

/* ---------- Pregled uputstava ---------- */
.pregled-uputstava { width: min(1309px, 100% - 40px); margin: 0 auto; padding: 64px 0 96px; display: flex; flex-direction: column; gap: 24px; }
.pregled-uputstava__kartice { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; grid-auto-rows: 1fr; }
/* prijavljen kupac: meni naloga levo, kartice u dve kolone (isti raspored kao Moj nalog) */
.pregled-uputstava--nalog { display: grid; grid-template-columns: 232px minmax(0, 1fr); column-gap: 40px; align-items: start; padding-top: 40px; }
.pregled-uputstava__sadrzaj { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pregled-uputstava--nalog .pregled-uputstava__kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uputstvo-bok .nalog-meni { position: static; }
.kartica-uputstva { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linija); }
.kartica-uputstva__vrh { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 1px 1px 0; padding: 24px; border-radius: 17px 17px 0 0; background: #F6F6F9; }
.kartica-uputstva--otvorena .kartica-uputstva__vrh { background: var(--svetla); }
.kartica-uputstva__cip {
  display: inline-flex; align-items: center; gap: 7px; height: 25px; padding: 5px 11px 5px 10px; border-radius: 50px;
  background: #E3E3EA; font: 600 12.5px/15px var(--inter); color: #5B5C66; /* kontrast 5,2:1 (bilo #737584 = 3,57:1) */
}
.kartica-uputstva--otvorena .kartica-uputstva__cip { padding-left: 11px; background: var(--glavna); color: #fff; }
.kartica-uputstva h2 { display: flex; align-items: center; gap: 12px; font: 700 26px/29px var(--dm); letter-spacing: -.02em; }
.kartica-uputstva__znak { flex: none; width: 32px; height: 32px; }
.kartica-uputstva:not(.kartica-uputstva--otvorena) .kartica-uputstva__znak { filter: grayscale(1); opacity: .5; }
.kartica-uputstva h2 a { color: rgba(21, 22, 28, .55); text-decoration: none; }
.kartica-uputstva--otvorena h2 a { color: var(--tamna); }
.kartica-uputstva__dno { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 24px 24px; }
/* sve kartice iste visine, dugme uvek uz dno (kraći opis ne skraćuje karticu) */
.kartica-uputstva__dno .dugme-kv { margin-top: auto; }
.kartica-uputstva__meta { font: 500 13.5px/16px var(--inter); color: #737584; }
.kartica-uputstva__opis { font: 400 15px/23px var(--inter); color: #41434F; }
.kartica-uputstva .dugme-kv { background: var(--glavna); }
.kartica-uputstva .dugme-kv:hover { filter: brightness(.92); }
.kartica-uputstva .dugme-kv--obrub { background: #fff; }
.pregled-uputstava__pomoc { padding: 16px 20px; border-radius: 12px; background: #F6F6F9; font: 400 15px/23px var(--inter); color: #41434F; }
.pregled-uputstava__pomoc a { color: inherit; text-decoration: none; }
.pregled-uputstava__pomoc a:hover { text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .pregled-uputstava__kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .uputstvo-telo { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-top: 40px; }
  .pregled-uputstava--nalog, .zakljucano--nalog { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .uputstvo-bok { display: contents; }
  .uputstvo-sadrzaj { order: 1; }
  .uputstvo-sadrzaj-strane { order: 2; }
  .uputstvo-pomoc { order: 3; }
  .uputstvo-sadrzaj > summary { pointer-events: auto; cursor: pointer; display: flex; justify-content: space-between; }
  .uputstvo-sadrzaj > summary::after { content: "+"; font: 400 20px/15px var(--inter); color: var(--glavna); }
  .uputstvo-sadrzaj[open] > summary::after { content: "−"; }
}

/* ---------- Telefon ---------- */
@media (max-width: 759px) {
  .uputstvo-glava__okvir { padding: 36px 0 40px; gap: 14px; }
  .uputstvo-glava__naslov { font-size: 34px; line-height: 38px; }
  .uputstvo-glava__podnaslov { font-size: 16px; line-height: 23px; }
  .uputstvo-telo { padding: 28px 0 64px; row-gap: 28px; }
  .uputstvo-sadrzaj-strane { gap: 32px; }
  .poglavlje { gap: 16px; }
  .poglavlje__naslov { gap: 12px; font-size: 23px; line-height: 27px; }
  .poglavlje__broj { width: 34px; height: 34px; font-size: 15px; }
  .poglavlje__tekst { font-size: 16px; line-height: 25px; }
  .koraci li { font-size: 15px; line-height: 23px; }
  .poglavlje__slika { padding-top: 4px; }
  .poglavlje__slika img { border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 15, 51, .12); }
  .zakljucano { padding: 32px 0 64px; gap: 32px; }
  .zakljucano__kartica { padding: 32px 20px; gap: 16px; }
  .zakljucano__kartica h2 { font-size: 24px; line-height: 28px; }
  .zakljucano__dugmad { flex-direction: column; align-items: stretch; width: 100%; }
  .zakljucano__kolone { grid-template-columns: minmax(0, 1fr); }
  .zakljucano__sadrzaj { padding: 22px 20px 24px; }
  .pregled-uputstava { padding: 28px 0 64px; gap: 20px; }
  .pregled-uputstava__kartice, .pregled-uputstava--nalog .pregled-uputstava__kartice { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* mete za dodir najmanje 44 px: veća površina klika bez promene rasporeda (negativna margina vraća mesto) */
  .uputstvo-glava__putanja a { display: inline-block; padding: 14px 0; margin: -14px 0; }
  .kartica-uputstva h2 a { display: inline-block; padding: 8px 0; margin: -8px 0; }
  .pregled-uputstava__pomoc a, .zakljucano__mala a, .uputstvo-pomoc__kontakt a { padding-block: 13px; }
}