/* Javni vodiči (/vodici/ i podstrane). Osnova je iz strane.css (zaglavlje strane, .tekst-strane sa sadržajem
   sa strane); ovde su tekst vodiča, koraci, napomene, završni poziv i kartice ostalih vodiča.
   Boje službe dolaze iz kha_pluginovi() kao --boja, --tamna i --svetla (isto kao u uputstvima). */
.vodic, .vodici { --boja: #6731C6; --tamna: #3F1F80; --svetla: #F3EEFC; }

/* ---------- Zaglavlje ---------- */
.vodic-glava__cipovi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vodic-glava__znak { flex: none; width: 28px; height: 28px; }
.vodic-cip {
  display: inline-flex; align-items: center; height: 25px; padding: 5px 12px; border-radius: 50px;
  background: rgba(255, 255, 255, .12); font: 600 12.5px/15px var(--inter); color: #fff;
}
.vodic .strana-glava__podnaslov { max-width: 820px; }

/* ---------- Tekst vodiča ---------- */
.vodic__telo { grid-template-columns: 232px minmax(0, 780px); }
.vodic-tekst { min-width: 0; font: 400 17px/27px var(--inter); color: #41434F; }
.vodic-tekst__datum { font-size: 14px; line-height: 20px; color: #737584; }
.vodic-odeljak { margin-top: 44px; scroll-margin-top: 24px; }
.vodic-tekst__datum + .vodic-odeljak { margin-top: 24px; }
.vodic-odeljak > * + * { margin-top: 14px; }
.vodic-odeljak h2 { font: 700 28px/33px var(--dm); letter-spacing: -.015em; color: #15161C; }
.vodic-odeljak h3 { margin-top: 28px; font: 700 20px/26px var(--dm); color: #15161C; }
.vodic-odeljak h2 + *, .vodic-odeljak h3 + * { margin-top: 12px; }
.vodic-odeljak h2 + h3 { margin-top: 18px; }
.vodic-odeljak a { color: var(--tamna); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vodic-odeljak a:hover { color: var(--boja); }
.vodic-odeljak strong { color: #15161C; font-weight: 600; }
.vodic-odeljak ul { padding-left: 22px; }
.vodic-odeljak ul li + li { margin-top: 8px; }
.vodic-odeljak ul li::marker { color: var(--boja); }

/* Koraci sa brojem u krugu, kao u uputstvima */
.vodic-koraci { list-style: none; counter-reset: korak; margin-top: 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vodic-koraci > li {
  counter-increment: korak; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px;
  font: 400 16.5px/26px var(--inter); color: #2B2B33;
}
.vodic-koraci > li::before {
  content: counter(korak); display: grid; place-items: center; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--boja); font: 700 13px/16px var(--inter); color: var(--tamna);
}

/* Šta ti treba: spisak podataka iz ugovora */
.vodic-odeljak .vodic-potrebno { list-style: none; margin-top: 18px; padding: 0; display: flex; flex-direction: column; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linija); overflow: hidden; }
.vodic-potrebno > li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); column-gap: 24px; padding: 16px 22px; }
.vodic-potrebno > li + li { margin-top: 0; border-top: 1px solid var(--linija); }
.vodic-potrebno b { font: 600 16px/24px var(--inter); color: #15161C; }
.vodic-potrebno span { font: 400 16px/24px var(--inter); color: #41434F; }

/* Napomena u boji službe */
.vodic-napomena { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 12px; background: var(--svetla); }
.vodic-napomena__oznaka { font: 700 12px/15px var(--inter); letter-spacing: .08em; text-transform: uppercase; color: var(--tamna); }
.vodic-napomena p { font: 400 15.5px/24px var(--inter); color: #15161C; }

/* Slika ekrana */
.vodic-slika { margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; }
.vodic-slika img { width: 100%; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(20, 15, 51, .12); }
.vodic-slika figcaption { font: 400 13.5px/19px var(--inter); color: #737584; text-align: center; }

/* Česte greške: problem i rešenje */
.vodic-greske { margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.vodic-greske > div { padding: 18px 20px; border-radius: 14px; background: #F6F6F9; }
.vodic-greske dt { font: 600 16px/24px var(--inter); color: #15161C; }
.vodic-greske dd { margin: 6px 0 0; font: 400 15.5px/24px var(--inter); color: #41434F; }

/* Tabela (zajednički vodič) */
.vodic-tabela-omot { margin-top: 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linija); overflow: hidden; }
.vodic-tabela { width: 100%; border-collapse: collapse; font: 400 15px/22px var(--inter); color: #41434F; }
.vodic-tabela th, .vodic-tabela td { padding: 14px 18px; text-align: left; vertical-align: top; }
.vodic-tabela thead th { background: #F6F6F9; font: 600 14px/20px var(--inter); color: #15161C; }
.vodic-tabela tbody tr { border-top: 1px solid var(--linija); }
.vodic-tabela tbody th { font-weight: 600; color: #15161C; white-space: nowrap; }
.vodic-tabela a { font-weight: 600; }

/* Završni poziv */
.vodic-poziv { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px; background: var(--svetla); }
.vodic-poziv p { color: #2B2B33; }
.vodic-poziv__dugmad { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.vodic-odeljak .vodic-poziv__dugme {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px; border-radius: 50px;
  background: var(--boja); color: #fff; font: 600 16px/20px var(--inter); text-decoration: none; transition: filter .15s, box-shadow .15s;
}
.vodic-odeljak .vodic-poziv__dugme:hover { color: #fff; filter: brightness(.9); }
.vodic-odeljak .vodic-poziv__dugme--obrub { background: #fff; color: #15161C; box-shadow: inset 0 0 0 1px #D4D4DC; }
.vodic-odeljak .vodic-poziv__dugme--obrub:hover { color: #15161C; filter: none; box-shadow: inset 0 0 0 1px var(--boja); }

/* ---------- Ostali vodiči (dno vodiča) ---------- */
.vodic-druge { padding: 80px 0 96px; background: var(--meka); }
.vodic-druge__okvir { width: min(1309px, 100% - 40px); margin-inline: auto; }
.vodic-druge__naslov { font: 700 38px/42px var(--dm); letter-spacing: -.015em; color: var(--ink); }
.vodic-druge__uvod { margin-top: 12px; max-width: 640px; font: 400 18px/27px var(--inter); color: var(--tekst); }
.vodic-druge__lista { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vodic-druge__lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vodic-druge__jos { margin-top: 28px; font: 600 16px/24px var(--inter); }
.vodic-druge__jos a { color: var(--ljub); text-decoration: none; }
.vodic-druge__jos a:hover { text-decoration: underline; }

.vodic-kartica {
  height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--linija); border-top: 4px solid var(--boja); text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.vodic-kartica:hover { box-shadow: inset 0 0 0 1px var(--boja); transform: translateY(-2px); }
.vodic-kartica__glava { display: flex; align-items: center; gap: 10px; }
.vodic-kartica__znak { flex: none; width: 28px; height: 28px; }
.vodic-kartica__ime { font: 700 15px/18px var(--inter); color: var(--boja); }
.vodic-kartica__naslov { font: 700 21px/27px var(--dm); letter-spacing: -.01em; color: var(--ink); }
.vodic-kartica__opis { font: 400 15.5px/23px var(--inter); color: var(--tekst); }
.vodic-kartica__vise { margin-top: auto; padding-top: 4px; font: 600 15px/20px var(--inter); color: var(--boja); }
.vodic-kartica--velika { padding: 28px; }
.vodic-kartica--velika .vodic-kartica__znak { width: 32px; height: 32px; }
.vodic-kartica--velika .vodic-kartica__naslov { font-size: 24px; line-height: 30px; }

/* ---------- Zbirna strana /vodici/ ---------- */
.vodici__okvir { width: min(1309px, 100% - 40px); margin: 0 auto; padding: 64px 0 96px; display: flex; flex-direction: column; gap: 64px; }
.vodici__naslov { font: 700 32px/38px var(--dm); letter-spacing: -.015em; color: var(--ink); }
.vodici-glavni {
  margin-top: 24px; display: flex; flex-direction: column; gap: 12px; padding: 36px 40px; border-radius: 22px;
  background: #15122E; color: #fff; text-decoration: none; transition: transform .15s;
}
.vodici-glavni:hover { transform: translateY(-2px); }
.vodici-glavni__oznaka { font: 600 13px/16px var(--inter); color: var(--zuta); }
.vodici-glavni__naslov { max-width: 820px; font: 700 34px/40px var(--dm); letter-spacing: -.015em; }
.vodici-glavni__opis { max-width: 760px; font: 400 17px/26px var(--inter); color: rgba(255, 255, 255, .8); }
.vodici-glavni__vise { margin-top: 6px; font: 600 16px/20px var(--inter); color: #fff; }
.vodici__lista { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vodici__kupci { max-width: 820px; padding: 32px; border-radius: 20px; background: var(--meka); }
.vodici__kupci p { margin-top: 12px; font: 400 17px/26px var(--inter); color: var(--tekst); }
.vodici__dugmad { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px !important; }

@media (max-width: 1199px) {
  .vodic-druge__lista--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .vodic__telo { grid-template-columns: minmax(0, 1fr); }
  .vodic-druge__lista { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .vodic-tekst { font-size: 16px; line-height: 25px; }
  .vodic-odeljak { margin-top: 36px; }
  .vodic-odeljak h2 { font-size: 24px; line-height: 29px; }
  .vodic-odeljak h3 { font-size: 18px; line-height: 24px; }
  .vodic-koraci > li { font-size: 15.5px; line-height: 24px; column-gap: 12px; }
  .vodic-potrebno > li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 14px 16px; }
  .vodic-slika img { border-radius: 8px; box-shadow: 0 10px 24px rgba(20, 15, 51, .12); }
  .vodic-poziv { padding: 22px; }
  .vodic-poziv__dugmad { flex-direction: column; }
  /* tabela postaje niz kartica: svaki red je jedna služba */
  .vodic-tabela-omot { box-shadow: none; border-radius: 0; overflow: visible; }
  .vodic-tabela, .vodic-tabela tbody, .vodic-tabela tr, .vodic-tabela th, .vodic-tabela td { display: block; width: 100%; }
  .vodic-tabela thead { display: none; }
  .vodic-tabela tbody tr { padding: 14px 16px; border: 1px solid var(--linija); border-radius: 12px; }
  .vodic-tabela tbody tr + tr { margin-top: 10px; }
  .vodic-tabela th, .vodic-tabela td { padding: 0; }
  .vodic-tabela td { margin-top: 6px; }
  .vodic-tabela td[data-oznaka]::before { content: attr(data-oznaka) ": "; color: #737584; }
  .vodic-druge { padding: 56px 0 64px; }
  .vodic-druge__naslov { font-size: 28px; line-height: 32px; }
  .vodic-druge__uvod { font-size: 16px; line-height: 24px; }
  .vodic-druge__lista, .vodic-druge__lista--4 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
  .vodic-kartica, .vodic-kartica--velika { padding: 20px; }
  .vodic-kartica__naslov, .vodic-kartica--velika .vodic-kartica__naslov { font-size: 19px; line-height: 25px; }
  .vodici__okvir { padding: 36px 0 64px; gap: 44px; }
  .vodici__naslov { font-size: 24px; line-height: 29px; }
  .vodici-glavni { padding: 24px; border-radius: 18px; }
  .vodici-glavni__naslov { font-size: 24px; line-height: 30px; }
  .vodici-glavni__opis { font-size: 16px; line-height: 24px; }
  .vodici__lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vodici__kupci { padding: 22px; }
  .vodici__kupci p { font-size: 16px; line-height: 24px; }
  .vodici__dugmad { flex-direction: column; }
}

/* Prelomi: nikad jedna reč sama u redu (uz vezivanje u inc/prelomi.php i kha_nb() u šablonima). */
.vodic-tekst p, .vodic-tekst li, .vodic-tekst dd, .vodic-tekst dt, .vodic-kartica__opis, .vodici-glavni__opis, .vodici__kupci p { text-wrap: pretty; }
.vodic-kartica__naslov, .vodici-glavni__naslov, .vodic-odeljak .vodic-poziv__dugme { text-wrap: balance; }
.vodic-odeljak .vodic-poziv__dugme { text-align: center; }
@media (max-width: 759px) {
  .vodic-odeljak .vodic-poziv__dugme { padding: 12px 16px; font-size: 15px; }
}