/* Prodajne strane: desktop (.v-d, 1440) i telefon (.v-m, 390) su dva generisana rasporeda.
   Zoom ih uklapa u širinu ekrana (vrednosti --zd i --zm postavlja skripta u <head>, inc/prodajne.php).
   Telefonski raspored važi do 1023 px (i tablet): umanjen desktop bi tamo imao tekst od 9-10 px.
   Isti prelom koriste skripta za zoom i preload slike heroja (inc/prodajne.php). */
.prodajna main { display: block; }
.v-d { zoom: var(--zd, 1); }
.v-m { zoom: var(--zm, 1); }
.prodajna .v-m { display: none; }
.v-d *, .v-m * { box-sizing: border-box; }
/* slaba specifičnost: boja linka iz Figme (klasa) ima prednost */
:where(.v-d, .v-m) a { color: inherit; text-decoration: none; }
.v-d img, .v-m img { display: block; }
@media (max-width: 1023px) {
  .prodajna .v-d { display: none; }
  .prodajna .v-m { display: flex; }
}

/* H1 je samo naziv plugina; spoljni element iste klase nosi izgled iz Figme, a verzija stoji pored, van H1. */
.h1-u { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-transform: inherit; }

/* Kontrast >= 4,5:1 (WCAG AA) za sitne oznake iz Figme; pravila su ovde da ih ponovno generisanje CSS-a ne pregazi. */
.prodajna .bx421_760, .prodajna .bx421_762 { color: #6B736E; }               /* „5“ i „100+“ ispod klizača: 4,9:1 (bilo 2,6:1) */
.prodajna .bx620_3632, .prodajna .bx623_3655 { color: #A9DFC2; }             /* BEX „Za veći obim“: 5,1:1 (bilo 4,4:1) */
.prodajna .ce621_3654, .prodajna .ce624_3705 { color: #FBDAB9; }             /* City „Za veći obim“: 4,9:1 (bilo 3,5:1) */
.prodajna .gl677_5198, .prodajna .gl679_25561 { color: #F2CD55; }            /* GLS „Za veći obim“: 5,3:1 (bilo 4,4:1) */

/* Mete za dodir >= 44 px, bez promene izgleda: traka sidara je visoka koliko i red podmenija,
   a svaka veza ima nevidljivo proširenje do 44 px visine. */
.prodajna .podmeni__veze { align-self: stretch; }
.prodajna .podmeni__veze a, .prodajna .podmeni__ime { position: relative; }
.prodajna .podmeni__veze a::after, .prodajna .podmeni__ime::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
@media (min-width: 1024px) {
  .prodajna .podmeni__prikaz { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Pitanja na klik (generisane <details>) */
.harm > summary { list-style: none; }
.harm > summary::-webkit-details-marker { display: none; }
.ik-par { display: inline-block; flex: none; }
.ik-par > span { position: absolute; inset: 0; }
.ik-par svg { position: absolute; left: 0; top: 0; }
.harm .ik-otvoreno, .harm[open] .ik-zatvoreno { display: none; }
.harm[open] .ik-otvoreno { display: block; }
.harm.zatvara .ik-otvoreno { display: none; }
.harm.zatvara .ik-zatvoreno { display: block; }

/* Forma */
.v-d form, .v-m form { margin: 0; }
.forma__zamka { position: absolute !important; left: -9999px !important; }
.v-d button, .v-m button { font: inherit; color: inherit; border: 0; cursor: pointer; }

/* Poruka posle slanja upita */
.upit-poruka { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; font: 500 15px/1.4 'Inter', sans-serif; }
.upit-poruka--uspeh { background: #E9F7EF; color: #1E6B43; }
.upit-poruka--greska { background: #FDECEC; color: #9B2C2C; }

/* Česta pitanja: isti izgled na svim prodajnim stranama (po uzoru na BEX, Figma 417:835),
   boje i pismo naslova su od službe. Markup: inc/pitanja.php. */
.prodajna--bex .pitanja-sl { --pit-font: 'DM Sans', sans-serif; --pit-tezina: 700; --pit-tamna: #1B201D; --pit-tekst: #3A413C; --pit-ivica: #E3E7E3; --pit-pozadina: #F3F5F2; --pit-svetla: #EDF4EF; --pit-boja: #2A6F52; }
.prodajna--dexpress .pitanja-sl { --pit-font: 'Manrope', sans-serif; --pit-tezina: 700; --pit-tamna: #221E1F; --pit-tekst: #433D3E; --pit-ivica: #EAE4E3; --pit-pozadina: #F6F3F2; --pit-svetla: #FBEDEA; --pit-boja: #B23A2E; }
.prodajna--city .pitanja-sl { --pit-font: 'Barlow', sans-serif; --pit-tezina: 600; --pit-tamna: #2E383E; --pit-tekst: #434D53; --pit-ivica: #E3E6E8; --pit-pozadina: #F4F5F6; --pit-svetla: #FBF0E6; --pit-boja: #B85A17; }
.prodajna--gls .pitanja-sl { --pit-font: 'Plus Jakarta Sans', sans-serif; --pit-tezina: 700; --pit-tamna: #1B2140; --pit-tekst: #3A4052; --pit-ivica: #E2E5EC; --pit-pozadina: #F4F5F8; --pit-svetla: #EEF1FA; --pit-boja: #2B45A8; }

.pitanja-sl { display: flex; flex-direction: column; background: var(--pit-pozadina, #F3F5F2); }
.pitanja-sl--d { align-items: center; row-gap: 40px; padding: 110px max(80px, calc((100% - 1280px) / 2)); }
.pitanja-sl__glava { display: flex; flex-direction: column; align-items: center; row-gap: 16px; }
.pitanja-sl__oznaka {
  padding: 6px 12px; border-radius: 50px; background: var(--pit-svetla, #EDF4EF);
  font: 600 13px/20px 'Inter', sans-serif; color: var(--pit-boja, #2A6F52);
}
.pitanja-sl__naslov {
  margin: 0; font-family: var(--pit-font); font-weight: var(--pit-tezina, 700);
  font-size: 44px; line-height: 48px; letter-spacing: -0.02em; color: var(--pit-tamna, #1B201D); text-align: center;
}
.pitanja-sl__lista { display: flex; flex-direction: column; align-items: center; row-gap: 12px; width: 100%; }
.pitanja-sl__stavka {
  position: relative; width: 900px; max-width: 100%; padding: 23px 29px;
  background: #fff; border-radius: 16px; overflow: hidden; scroll-margin-top: 24px;
}
.pitanja-sl__stavka::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--pit-ivica, #E3E7E3); border-radius: inherit;
}
.pitanja-sl__pitanje { position: relative; display: flex; align-items: center; column-gap: 16px; list-style: none; cursor: pointer; }
/* Meta za dodir preko cele kartice: nevidljivo proširenje pokriva unutrašnju marginu kartice
   (visina summary-ja ostaje ista, pa animacija harmonike u kha.js računa istu zatvorenu visinu). */
.pitanja-sl__pitanje::before { content: ''; position: absolute; inset: -23px -29px; }
.pitanja-sl__pitanje:focus-visible { outline: 2px solid var(--pit-boja, #2A6F52); outline-offset: 4px; border-radius: 6px; }
.pitanja-sl__tekst {
  flex: 1 1 auto; min-width: 0; font: 600 17px/26px 'Inter', sans-serif;
  color: var(--pit-tamna, #1B201D); text-wrap: pretty;
}
.pitanja-sl__ikona { position: relative; width: 20px; height: 20px; color: var(--pit-boja, #2A6F52); }
.pitanja-sl__odgovor {
  position: relative; margin: 10px 0 0; font: 400 15px/23px 'Inter', sans-serif;
  color: var(--pit-tekst, #3A413C); text-wrap: pretty;
}

/* telefon (crtan na 390): naslov levo, bez oznake, kartice preko cele širine */
.pitanja-sl--m { row-gap: 10px; padding: 48px max(20px, calc((100% - 350px) / 2)); }
.pitanja-sl--m .pitanja-sl__glava { align-items: flex-start; }
.pitanja-sl--m .pitanja-sl__naslov { font-size: 28px; line-height: 31px; text-align: left; }
.pitanja-sl--m .pitanja-sl__lista { align-items: stretch; row-gap: 10px; }
.pitanja-sl--m .pitanja-sl__stavka { width: auto; padding: 15px 17px; border-radius: 12px; }
.pitanja-sl--m .pitanja-sl__pitanje { column-gap: 0; } /* kao u Figmi: tekst 298 + ikona 18 */
.pitanja-sl--m .pitanja-sl__pitanje::before { inset: -15px -17px; }
.pitanja-sl--m .pitanja-sl__tekst { font-size: 15px; line-height: 23px; }
.pitanja-sl--m .pitanja-sl__ikona { width: 18px; height: 18px; }
.pitanja-sl--m .pitanja-sl__odgovor { margin-top: 8px; font-size: 14px; line-height: 21px; }
.bez-preloma { white-space: nowrap; }
.zarez-uz { margin-left: -0.09em; }
/* veza u odgovoru na pitanje (npr. na vodič za povezivanje) */
.pitanja-sl__odgovor a { color: var(--pit-boja, #2A6F52); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pitanja-sl__odgovor a:hover { text-decoration-thickness: 2px; }

/* Dopune sadržaja (SEO, 13. 10. 2026): sekcije dodate ručno u delovi/*.php, van generatora.
   .dop--d je za računar (crtan na 1440), .dop--m za telefon (390). Boje i pismo naslova su od službe,
   iste vrednosti kao za pitanja. Markup: delovi/<ime>.php i kha_druge_sluzbe() u inc/sadrzaj.php. */
.prodajna--bex :is(.dop, .dop-veza, .dop-red, .dop__lista) { --pit-font: 'DM Sans', sans-serif; --pit-tezina: 700; --pit-tamna: #1B201D; --pit-tekst: #3A413C; --pit-ivica: #E3E7E3; --pit-pozadina: #F3F5F2; --pit-svetla: #EDF4EF; --pit-boja: #2A6F52; }
.prodajna--dexpress :is(.dop, .dop-veza, .dop-red, .dop__lista) { --pit-font: 'Manrope', sans-serif; --pit-tezina: 700; --pit-tamna: #221E1F; --pit-tekst: #433D3E; --pit-ivica: #EAE4E3; --pit-pozadina: #F6F3F2; --pit-svetla: #FBEDEA; --pit-boja: #B23A2E; }
.prodajna--city :is(.dop, .dop-veza, .dop-red, .dop__lista) { --pit-font: 'Barlow', sans-serif; --pit-tezina: 600; --pit-tamna: #2E383E; --pit-tekst: #434D53; --pit-ivica: #E3E6E8; --pit-pozadina: #F4F5F6; --pit-svetla: #FBF0E6; --pit-boja: #B85A17; }
.prodajna--gls :is(.dop, .dop-veza, .dop-red, .dop__lista) { --pit-font: 'Plus Jakarta Sans', sans-serif; --pit-tezina: 700; --pit-tamna: #1B2140; --pit-tekst: #3A4052; --pit-ivica: #E2E5EC; --pit-pozadina: #F4F5F8; --pit-svetla: #EEF1FA; --pit-boja: #2B45A8; }

.dop { display: flex; flex-direction: column; align-self: stretch; background: #fff; color: var(--pit-tekst); }
.dop--svetlo { background: var(--pit-pozadina); }
.dop--boja { background: var(--pit-svetla); }
.dop__glava { display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start; }
.dop__oznaka { margin: 0; padding: 5px 10px; border-radius: 50px; background: var(--pit-svetla); font: 600 12px/18px 'Inter', sans-serif; color: var(--pit-boja); }
.dop--boja .dop__oznaka { background: #fff; }
.dop__naslov {
  margin: 0; font-family: var(--pit-font); font-weight: var(--pit-tezina, 700); letter-spacing: -0.02em;
  font-size: 28px; line-height: 31px; color: var(--pit-tamna); white-space: pre-line;
}
.dop__tekst { margin: 0; font: 400 14px/21px 'Inter', sans-serif; color: var(--pit-tekst); text-wrap: pretty; }
.dop__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; row-gap: 8px; align-self: stretch; }
.dop__lista li { position: relative; padding-left: 26px; font: 500 14px/21px 'Inter', sans-serif; color: var(--pit-tamna); text-wrap: pretty; }
.dop__lista li::before {
  content: ''; position: absolute; left: 5px; top: 3px; width: 6px; height: 11px;
  border: solid var(--pit-boja); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.dop__koraci { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; align-self: stretch; counter-reset: dop; }
.dop__koraci li {
  position: relative; display: flex; flex-direction: column; row-gap: 4px; padding: 16px 18px 16px 58px;
  background: #fff; border: 1px solid var(--pit-ivica); border-radius: 14px; counter-increment: dop;
}
.dop--svetlo .dop__koraci li, .dop--boja .dop__koraci li { border-color: transparent; }
.dop__koraci li::before {
  content: counter(dop); position: absolute; left: 18px; top: 17px; min-width: 26px; padding: 1px 0; border-radius: 50px;
  background: var(--pit-boja); color: #fff; font: 700 13px/20px 'Inter', sans-serif; text-align: center;
}
.dop__koraci strong { font: 600 15px/23px 'Inter', sans-serif; color: var(--pit-tamna); }
.dop__koraci li > span { font: 400 14px/21px 'Inter', sans-serif; color: var(--pit-tekst); text-wrap: pretty; }
.dop__cipovi { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dop__cipovi > span { padding: 5px 12px; border-radius: 50px; background: #fff; border: 1px solid var(--pit-ivica); font: 500 13px/20px 'Inter', sans-serif; color: var(--pit-tekst); white-space: nowrap; }
.dop__cipovi > b { font: 500 13px/20px 'Inter', sans-serif; color: var(--pit-tekst); margin-right: 4px; }
.dop__veze { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; row-gap: 10px; align-items: flex-start; font: 500 14px/21px 'Inter', sans-serif; }
/* veze u sadržaju: boja službe, podvučene, sa strelicom (klikabilno mora da se vidi) */
:where(.v-d, .v-m) a.dop-veza {
  color: var(--pit-boja); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:where(.v-d, .v-m) a.dop-veza:hover { text-decoration-thickness: 2px; }
:where(.v-d, .v-m) a.dop-veza--mirna { color: inherit; font-weight: inherit; }
.dop-veza:focus-visible { outline: 2px solid var(--pit-boja); outline-offset: 2px; border-radius: 3px; }
/* red sa vezom ispod postojeće sekcije (npr. ispod cena) */
.dop-red { margin: 0; align-self: stretch; text-align: center; font: 500 16px/24px 'Inter', sans-serif; color: var(--pit-tekst); }
.v-m .dop-red { text-align: left; font-size: 14px; line-height: 21px; }
/* „Šalješ i drugom službom?“: kartice sa vezama na ostale tri prodajne strane */
.dop__kartice { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; align-self: stretch; }
:where(.v-d, .v-m) a.dop__kartica {
  position: relative; display: flex; flex-direction: column; row-gap: 4px; height: 100%; padding: 18px 20px;
  background: #fff; border-radius: 14px; border: 1px solid var(--pit-ivica); text-decoration: none;
}
.dop__kartica:hover { border-color: var(--k, var(--pit-boja)); }
.dop__kartica:focus-visible { outline: 2px solid var(--k, var(--pit-boja)); outline-offset: 2px; }
.dop__kartica b { position: relative; display: block; padding-left: 20px; font: 600 16px/24px 'Inter', sans-serif; color: var(--pit-tamna); }
.dop__kartica b::before { content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--k, var(--pit-boja)); }
.dop__kartica b > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--k, var(--pit-boja)); }
.dop__kartica .dop__opis { display: block; font: 400 14px/21px 'Inter', sans-serif; color: var(--pit-tekst); padding-left: 20px; }
/* kartice sa naslovom i tekstom (GLS cena dostave, BEX „Ko stoji iza plugina“ na telefonu) */
.dop__mreza { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; align-self: stretch; }
.dop__mreza li { display: flex; flex-direction: column; row-gap: 6px; padding: 18px 20px; background: #fff; border-radius: 14px; border: 1px solid var(--pit-ivica); }
.dop--svetlo .dop__mreza li, .dop--boja .dop__mreza li { border-color: transparent; }
.dop__mreza strong { font: 600 16px/24px 'Inter', sans-serif; color: var(--pit-tamna); }
.dop__mreza li > span { font: 400 14px/21px 'Inter', sans-serif; color: var(--pit-tekst); text-wrap: pretty; }

/* telefon (crtan na 390) */
.dop--m { row-gap: 16px; padding: 48px max(20px, calc((100% - 350px) / 2)); }

/* računar (crtan na 1440) */
.dop--d { align-items: center; row-gap: 40px; padding: 96px max(80px, calc((100% - 1280px) / 2)); }
.dop--d .dop__glava { align-items: center; row-gap: 16px; text-align: center; }
.dop--d .dop__oznaka { padding: 6px 12px; font-size: 13px; line-height: 20px; }
.dop--d .dop__naslov { font-size: 44px; line-height: 48px; text-align: center; }
.dop--d .dop__tekst { max-width: 760px; font-size: 18px; line-height: 27px; text-align: center; }
.dop--d .dop__koraci { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dop--d .dop__koraci li { padding: 66px 24px 26px; border-radius: 18px; row-gap: 8px; }
.dop--d .dop__koraci li::before { left: 24px; top: 26px; min-width: 30px; }
.dop--d .dop__koraci strong { font-size: 18px; line-height: 27px; }
.dop--d .dop__koraci li > span { font-size: 15px; line-height: 23px; }
.dop--d .dop__veze { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 32px; font-size: 16px; line-height: 24px; }
.dop--d .dop__cipovi { justify-content: center; }
.dop--d .dop__kartice { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dop--d .dop__kartica { padding: 24px 26px; border-radius: 18px; }
.dop--d .dop__kartica b { font-size: 18px; line-height: 27px; }
.dop--d .dop__kartica b::before { top: 9px; }
.dop--d .dop__kartica .dop__opis { font-size: 15px; line-height: 23px; }
.dop--d .dop__mreza { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dop--d .dop__mreza li { padding: 26px; border-radius: 18px; }
.dop--d .dop__mreza strong { font-size: 18px; line-height: 27px; }
.dop--d .dop__mreza li > span { font-size: 15px; line-height: 23px; }

/* generisani tekst sa white-space: pre koji je dobio dužu rečenicu sa vezom (BEX „Ko stoji iza plugina“) */
.prodajna .bx417_729 { white-space: normal; text-wrap: balance; }