/* ---------------------------------------------------------------------------
   Izgled sajta. Obican CSS, bez build koraka (plan-sajt.md sekcija 3).

   Nacelo: ovo je alat za poredjenje cena, ne izlog. Cena je najkrupnija stvar
   na ekranu, sve ostalo je tise od nje. Nema senki, prelaza ni animacija koje
   ne nose informaciju.
--------------------------------------------------------------------------- */

:root {
  --mastilo:      #10151c;   /* osnovni tekst */
  --tise:         #5b6673;   /* sporedni tekst */
  --jos-tise:     #8b95a1;
  --linija:       #e4e8ec;
  --linija-jaka:  #cfd6dd;
  --podloga:      #ffffff;
  --povrsina:     #f6f8fa;   /* sidebar, zaglavlje tabele */
  --brend:        #14395f;   /* tamno plava -- zaglavlje, dugmad */
  --brend-svetla: #2d6da4;
  --usteda:       #0a7b48;   /* zelena -- najniza cena, usteda */
  --usteda-bled:  #eaf6f0;
  --popust:       #c62828;   /* crvena -- samo za snizenje */
  --popust-bled:  #fdeceb;
  --zuta-bled:    #fff8e6;

  --r: 6px;                  /* jedan radijus u celom sajtu */
  --senka: 0 1px 2px rgba(16, 21, 28, .06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--mastilo);
  background: var(--podloga);
}

a { color: var(--brend-svetla); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Brojevi u tabeli moraju da se poravnaju po ciframa, inace se cene ne mogu
   uporediti pogledom -- a poredjenje cena je cela svrha sajta. */
.num { font-variant-numeric: tabular-nums; }

img { max-width: 100%; }


/* --- zaglavlje ----------------------------------------------------------- */

header.zaglavlje {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; height: 56px;
  background: var(--brend); color: #fff;
}
header.zaglavlje .ime a {
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.2px;
  text-decoration: none; white-space: nowrap;
}
header.zaglavlje form.pretraga { flex: 1; max-width: 560px; position: relative; }
header.zaglavlje input[type=search] {
  width: 100%; height: 34px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--r);
  font-size: 13.5px; font-family: inherit; background: #fff; color: var(--mastilo);
}
header.zaglavlje input[type=search]:focus {
  outline: none; border-color: var(--brend-svetla);
  box-shadow: 0 0 0 3px rgba(45, 109, 164, .35);
}
header.zaglavlje nav { margin-left: auto; display: flex; gap: 18px; }
header.zaglavlje nav a { color: #c7d6e4; font-size: 13px; }
header.zaglavlje nav a:hover { color: #fff; }


/* --- traka sekcija ------------------------------------------------------- */
/* Sekcija je prvi izbor koji posetilac pravi, pa stoji iznad svega ostalog i
   izgleda kao navigacija, ne kao filter. */

nav.sekcije {
  display: flex; gap: 2px; align-items: stretch;
  padding: 0 20px; background: var(--podloga);
  border-bottom: 1px solid var(--linija);
  overflow-x: auto;
}
nav.sekcije a {
  padding: 12px 16px 10px;
  font-size: 14px; font-weight: 600; color: var(--tise);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
nav.sekcije a:hover { color: var(--mastilo); text-decoration: none; background: var(--povrsina); }
nav.sekcije a.aktivna { color: var(--brend); border-bottom-color: var(--brend); }
nav.sekcije a .broj { color: var(--jos-tise); font-weight: 400; font-size: 12px; margin-left: 5px; }


/* --- raspored ------------------------------------------------------------ */

.raspored {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
  max-width: 1500px; margin: 0 auto;
}


/* --- filteri ------------------------------------------------------------- */

.filteri {
  position: sticky; top: 56px;
  max-height: calc(100vh - 56px); overflow-y: auto;
  padding: 18px 18px 40px;
  border-right: 1px solid var(--linija);
  background: var(--povrsina);
}
.filteri .grupa { margin-bottom: 20px; }
.filteri .grupa-naslov {
  font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--tise); margin-bottom: 8px;
}

/* Dugacke liste (brend, veličina, tip) idu u padajuci meni, ne u spisak
   radio dugmadi. Brendova ima 223 -- kao spisak je to bilo neupotrebljivo. */
.filteri select,
.filteri input[type=number] {
  width: 100%; height: 32px; padding: 0 8px;
  font-family: inherit; font-size: 13px; color: var(--mastilo);
  background: #fff; border: 1px solid var(--linija-jaka); border-radius: var(--r);
}
.filteri select:focus, .filteri input:focus {
  outline: none; border-color: var(--brend-svetla);
  box-shadow: 0 0 0 3px rgba(45, 109, 164, .18);
}

/* Pol: kratka lista, pa moze kao dugmici -- brze za oko od padajuceg menija. */
.dugmici { display: flex; flex-wrap: wrap; gap: 6px; }
.dugmici label { cursor: pointer; }
.dugmici input { position: absolute; opacity: 0; pointer-events: none; }
.dugmici span {
  display: block; padding: 6px 11px; font-size: 12.5px;
  border: 1px solid var(--linija-jaka); border-radius: 999px;
  background: #fff; color: var(--tise); white-space: nowrap;
}
.dugmici input:checked + span {
  background: var(--brend); border-color: var(--brend); color: #fff; font-weight: 600;
}
.dugmici input:focus-visible + span { box-shadow: 0 0 0 3px rgba(45, 109, 164, .35); }

.raspon { display: flex; gap: 8px; align-items: center; }
.raspon span { color: var(--jos-tise); }

.prekidac { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; padding: 4px 0; }
.prekidac input { width: 15px; height: 15px; accent-color: var(--brend); }

.filteri button[type=submit] {
  width: 100%; height: 36px; margin-top: 4px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  background: var(--brend); color: #fff;
  border: none; border-radius: var(--r); cursor: pointer;
}
.filteri button[type=submit]:hover { background: #0e2b48; }

.ocisti { display: block; margin-top: 10px; font-size: 12.5px; text-align: center; }


/* --- traka iznad rezultata ---------------------------------------------- */

.traka {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--linija);
  flex-wrap: wrap;
}
.traka .broj-rezultata { font-size: 14px; }
.traka .broj-rezultata strong { font-size: 16px; }
.traka .sitno { color: var(--tise); font-size: 12.5px; }

.sortiranje { display: flex; gap: 4px; }
.sortiranje a {
  padding: 5px 11px; font-size: 12.5px; color: var(--tise);
  border: 1px solid transparent; border-radius: var(--r);
}
.sortiranje a:hover { background: var(--povrsina); text-decoration: none; }
.sortiranje a.aktivno {
  background: #fff; color: var(--mastilo); font-weight: 600;
  border-color: var(--linija-jaka);
}

/* Aktivni filteri, da se vidi sta je ukljuceno i da moze da se skine jednim klikom. */
.aktivni-filteri { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px 0; }
.cip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; font-size: 12.5px;
  background: var(--zuta-bled); border: 1px solid #f0e0b6; border-radius: 999px;
  color: #6b5316;
}
.cip a { color: #9a7b28; font-weight: 700; line-height: 1; padding: 0 3px; }
.cip a:hover { color: var(--popust); text-decoration: none; }


/* --- tabela rezultata ---------------------------------------------------- */

table.rezultati { width: 100%; border-collapse: collapse; }
table.rezultati th {
  text-align: left; padding: 9px 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--tise); background: var(--povrsina);
  border-bottom: 1px solid var(--linija-jaka);
  position: sticky; top: 56px; z-index: 10;
}
table.rezultati td { padding: 10px 14px; border-bottom: 1px solid var(--linija); vertical-align: middle; }
table.rezultati tr:hover td { background: #fbfcfd; }
table.rezultati .desno { text-align: right; }

td.slika { width: 68px; padding-right: 0; }
td.slika .okvir {
  width: 54px; height: 54px; border-radius: var(--r);
  background: var(--povrsina); border: 1px solid var(--linija);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
td.slika img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.naziv { font-size: 13.5px; font-weight: 600; color: var(--mastilo); display: block; }
.naziv:hover { color: var(--brend-svetla); }
.podnaslov { font-size: 11.5px; color: var(--jos-tise); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.podnaslov .brend { text-transform: uppercase; letter-spacing: .4px; font-weight: 600; color: var(--tise); }

td.cena { white-space: nowrap; }
.cena-glavna { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.cena-din { font-size: 12px; font-weight: 400; color: var(--tise); margin-left: 2px; }
.cena-od { font-size: 11px; color: var(--jos-tise); display: block; }
.precrtana { text-decoration: line-through; color: var(--jos-tise); font-size: 12px; }

.znak {
  display: inline-block; padding: 2px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.znak-popust { background: var(--popust-bled); color: var(--popust); }
.znak-usteda { background: var(--usteda-bled); color: var(--usteda); }
.znak-tih { background: var(--povrsina); color: var(--tise); border: 1px solid var(--linija); }

.nedostupno { color: var(--jos-tise); font-style: italic; font-size: 12.5px; }

.prazno { text-align: center; color: var(--tise); padding: 56px 20px; }
.prazno .veliko { font-size: 15px; font-weight: 600; color: var(--mastilo); margin-bottom: 6px; }


/* --- stranicenje --------------------------------------------------------- */

.stranicenje { display: flex; gap: 5px; padding: 18px 20px 40px; flex-wrap: wrap; align-items: center; }
.stranicenje a, .stranicenje span {
  min-width: 34px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; border: 1px solid var(--linija-jaka); border-radius: var(--r);
  background: #fff; color: var(--tise);
}
.stranicenje a:hover { border-color: var(--brend-svetla); color: var(--brend); text-decoration: none; }
.stranicenje .aktivna { background: var(--brend); border-color: var(--brend); color: #fff; font-weight: 600; }
.stranicenje .razmak { border: none; background: none; color: var(--jos-tise); min-width: 16px; }


/* --- stranica modela ----------------------------------------------------- */

.model-omot { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.model-glava { display: flex; gap: 24px; padding: 26px 0 22px; align-items: flex-start; }
.model-glava .slika-veca {
  width: 148px; height: 148px; flex-shrink: 0;
  border: 1px solid var(--linija); border-radius: var(--r);
  background: var(--povrsina); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.model-glava .slika-veca img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.model-glava h1 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; letter-spacing: -.3px; }
.model-glava .meta { font-size: 12.5px; color: var(--tise); display: flex; gap: 10px; flex-wrap: wrap; }

.cena-kutija {
  margin-left: auto; text-align: right; padding: 14px 18px;
  background: var(--usteda-bled); border: 1px solid #cfe8dc; border-radius: var(--r);
  min-width: 190px;
}
.cena-kutija .oznaka { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--usteda); font-weight: 700; }
.cena-kutija .iznos { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--mastilo); }
.cena-kutija .gde { font-size: 12.5px; color: var(--tise); }

.odeljak { margin: 0 0 26px; }
.odeljak > h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--tise); margin: 0 0 10px; font-weight: 700;
}

.grafikon-okvir { border: 1px solid var(--linija); border-radius: var(--r); padding: 16px; background: #fff; }
.grafikon-okvir svg { display: block; width: 100%; height: auto; }
.legenda { display: flex; gap: 16px; font-size: 11.5px; color: var(--tise); margin-top: 10px; flex-wrap: wrap; }
.legenda .tacka { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }

table.ponude { width: 100%; border-collapse: collapse; border: 1px solid var(--linija); border-radius: var(--r); }
table.ponude th {
  text-align: left; padding: 9px 12px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--tise); background: var(--povrsina);
  border-bottom: 1px solid var(--linija-jaka);
}
table.ponude td { padding: 11px 12px; border-bottom: 1px solid var(--linija); }
table.ponude tr:last-child td { border-bottom: none; }
table.ponude tr.najniza td { background: var(--usteda-bled); }
table.ponude td.cena { text-align: right; font-weight: 700; font-size: 15px; white-space: nowrap; }
.prodavnica-ime { font-weight: 600; }

.dugme {
  display: inline-block; padding: 7px 14px; border-radius: var(--r);
  font-size: 12.5px; font-weight: 600; border: 1px solid var(--linija-jaka);
  background: #fff; color: var(--mastilo);
}
.dugme:hover { border-color: var(--brend-svetla); color: var(--brend); text-decoration: none; }
.dugme-glavno { background: var(--brend); border-color: var(--brend); color: #fff; }
.dugme-glavno:hover { background: #0e2b48; color: #fff; }

.napomena {
  font-size: 12.5px; color: var(--tise); background: var(--povrsina);
  border: 1px solid var(--linija); border-radius: var(--r); padding: 12px 14px;
}


/* Dopune za stranicu modela. Klase .desno i .sitno su ranije postojale samo
   unutar table.rezultati / .traka -- tabeli ponuda trebaju iste, pa su
   podignute na opste umesto da se pravi drugi par sa istim poslom. */

.desno { text-align: right; }
.sitno { font-size: 12px; }
.tise  { color: var(--jos-tise); }

.mrvice { font-size: 12.5px; color: var(--tise); padding: 14px 0 0; }
.mrvice span { color: var(--jos-tise); margin: 0 4px; }

.model-naslov { min-width: 0; }          /* da dug naziv prelama, a ne razvlaci red */
.oznaka-brend {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--jos-tise); font-weight: 700;
}
.model-glava .slika-veca .bez-slike { font-size: 11px; color: var(--jos-tise); }

.cena-kutija .valuta { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.cena-kutija .usteda-red {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #cfe8dc;
  font-size: 12.5px; color: var(--tise);
}
.cena-kutija .usteda-red strong { color: var(--usteda); }
.cena-kutija .nedostupno { font-size: 15px; }

.legenda .crta { display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 6px; }
.legenda .crta-najniza { border-top: 2.5px solid var(--usteda); }
.legenda .crta-prosek  { border-top: 2px dashed var(--jos-tise); }
.legenda .tacka-legenda {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--usteda); background: #fff; vertical-align: middle; margin-right: 6px;
}

/* Presuda stoji ISPOD grafikona i govori ono sto grafikon pokazuje. Boja se
   menja sa sudom -- zelena kad je danas najjeftinije, crvena kad je najskuplje,
   siva izmedju; nijedna druga boja na stranici nema to znacenje. */
.presuda {
  margin-top: 12px; padding: 12px 16px; border-left: 3px solid var(--usteda);
  background: var(--usteda-bled); border-radius: 0 var(--r) var(--r) 0;
}
.presuda .glavno { font-size: 15px; }
.presuda .sporedno { font-size: 13px; color: var(--tise); margin-top: 3px; }
.presuda .sitno { color: var(--jos-tise); margin-top: 6px; }
.presuda-najvisa { border-left-color: var(--popust); background: var(--popust-bled); }
.presuda-izmedju,
.presuda-bez_promene { border-left-color: var(--linija-jaka); background: var(--povrsina); }

.napomena-oprez { background: var(--zuta-bled); border-color: #ecd9a3; color: var(--mastilo); }

table.ponude td .znak { margin-left: 6px; }
table.ponude .prodavnica-ime { font-size: 14px; }


/* --- naslovna ------------------------------------------------------------ */

.uvod { max-width: 1500px; margin: 0 auto; padding: 30px 20px 10px; }
.uvod h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.4px; }
.uvod p { margin: 0; color: var(--tise); font-size: 14px; }

.kartice { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 18px 20px; max-width: 1500px; margin: 0 auto; }
.kartica {
  border: 1px solid var(--linija); border-radius: var(--r); padding: 12px;
  background: #fff; display: flex; flex-direction: column; gap: 8px;
}
/* Kartica je CELA veza -- pogodak mora da bude cela povrsina, ne samo naziv.
   Zato se nasledjuje boja teksta i gasi podvlacenje koje <a> nosi. */
a.kartica { color: inherit; text-decoration: none; }
a.kartica:hover { text-decoration: none; }
.kartica:hover { border-color: var(--linija-jaka); box-shadow: var(--senka); }
.kartica:hover .naziv { color: var(--brend-svetla); }
.kartica .slika-okvir { height: 130px; display: flex; align-items: center; justify-content: center; background: var(--povrsina); border-radius: 4px; overflow: hidden; }
.kartica .slika-okvir img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.kartica .naziv { font-size: 13px; line-height: 1.3; }

.brojke { display: flex; gap: 26px; padding: 4px 20px 20px; max-width: 1500px; margin: 0 auto; flex-wrap: wrap; }
.brojke div { font-size: 12.5px; color: var(--tise); }
.brojke strong { display: block; font-size: 20px; color: var(--mastilo); font-weight: 700; }

/* Naslov odeljka na naslovnoj: isti okvir kao .uvod, ali tise -- h1 na strani
   sme da bude samo jedan, ostalo je podnaslov. */
.naslov-odeljka { padding-top: 14px; border-top: 1px solid var(--linija); }
.naslov-odeljka h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.2px; }
.naslov-odeljka p { color: var(--jos-tise); }

.kartica .naziv { display: block; }
.kartica .kartica-cene { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.kartica .cena-do { font-size: 11.5px; color: var(--jos-tise); }
.kartica .kartica-dno { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.poziv { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 30px; }
.poziv p { flex-basis: 100%; margin: 6px 0 0; }


/* --- strana greske ------------------------------------------------------- */

.greska-omot { max-width: 620px; margin: 0 auto; padding: 70px 20px; text-align: center; }
.greska-omot .kod {
  font-size: 56px; font-weight: 800; letter-spacing: -2px; color: var(--linija-jaka);
  line-height: 1;
}
.greska-omot h1 { margin: 10px 0 8px; font-size: 22px; letter-spacing: -.3px; }
.greska-omot p { color: var(--tise); margin: 0 0 22px; }
.greska-omot .dugmad { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }


/* --- podnozje ------------------------------------------------------------ */

footer.podnozje {
  margin-top: 40px; padding: 20px; border-top: 1px solid var(--linija);
  font-size: 12.5px; color: var(--jos-tise); text-align: center;
}


/* --- uzi ekrani ---------------------------------------------------------- */

@media (max-width: 900px) {
  .raspored { grid-template-columns: 1fr; }
  .filteri {
    position: static; max-height: none; border-right: none;
    border-bottom: 1px solid var(--linija);
  }
  table.rezultati th { position: static; }
  .model-omot { padding: 0 14px; }
  .model-glava { flex-wrap: wrap; gap: 16px; }
  .model-glava .slika-veca { width: 108px; height: 108px; }
  .cena-kutija { margin-left: 0; width: 100%; text-align: left; }
  table.ponude .kolona-brojevi { display: none; }  /* najmanje vazna kolona pada prva */
  header.zaglavlje { gap: 10px; padding: 0 12px; }
  header.zaglavlje nav { display: none; }
}