:root {
  --krem: #FFF4E4;
  --krem-2: #FCE8CC;
  --papir: #FFFFFF;
  --mastilo: #3B2414;
  --mastilo-2: #7A5638;
  --narandza: #F07C2A;
  --narandza-tamna: #C4561A;
  --narandza-svetla: #FFD9B8;
  --voda: #3B8FD9;
  --voda-svetla: #D6E9FA;
  --zelena: #2F8A5E;
  --zelena-svetla: #D5F0E2;
  --sapa: #F6C98C;
  --crvena: #C8402E;
  --senka: 0 10px 30px rgba(92, 52, 18, .18), 0 2px 6px rgba(92, 52, 18, .12);
  --senka-mala: 0 4px 12px rgba(92, 52, 18, .16);
  --naslovni: "Baloo 2", "Nunito", system-ui, sans-serif;
  --tekst: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --opruga: cubic-bezier(.2, 1.3, .4, 1);
  --glatko: cubic-bezier(.25, .9, .3, 1);
  --dno: env(safe-area-inset-bottom, 0px);
  --vrh-ivica: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.zamka { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--krem);
  color: var(--mastilo);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.5;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
:focus-visible { outline: 3px solid var(--narandza); outline-offset: 3px; border-radius: 12px; }

/* ---------- Mapa ---------- */
#mapa { position: fixed; inset: 0; background: var(--krem-2); z-index: 0; }
.leaflet-container { font-family: var(--tekst); }
.plocice-mapa { filter: saturate(.8) sepia(.14) brightness(1.02); }
.leaflet-control-attribution {
  font-size: 10px; background: rgba(255, 244, 228, .8) !important;
  border-radius: 8px 0 0 0; margin-bottom: calc(var(--dno)) !important;
}
body .leaflet-bottom.leaflet-right { bottom: 0; }

/* Oznaka hranilice */
.ozn {
  width: 48px; height: 48px; position: relative;
  border-radius: 50% 50% 50% 6px; transform: rotate(-45deg);
  background: var(--narandza); border: 3px solid #fff;
  box-shadow: var(--senka-mala);
  display: grid; place-items: center;
  transition: transform .25s var(--opruga);
  animation: iskoci .5s var(--opruga) both;
}
.ozn span { transform: rotate(45deg); font-size: 20px; line-height: 1; display: flex; gap: 0; }
.ozn.voda { background: var(--voda); }
.ozn.oba { background: var(--narandza); }
.ozn.oba::after {
  content: "💧"; position: absolute; top: -10px; right: -8px; transform: rotate(45deg);
  width: 24px; height: 24px; border-radius: 50%; background: var(--voda); border: 2px solid #fff;
  font-size: 12px; display: grid; place-items: center;
}
.ozn.primer { opacity: .95; }
.leaflet-marker-icon:hover .ozn, .ozn.aktivna { transform: rotate(-45deg) scale(1.18); }
.ozn.aktivna { box-shadow: 0 0 0 6px rgba(240, 124, 42, .3), var(--senka-mala); }
@keyframes iskoci { from { transform: rotate(-45deg) scale(0); } to { transform: rotate(-45deg) scale(1); } }

/* Životinje pored oznake */
.pin { position: relative; width: 48px; height: 48px; }
.ozn-ziv {
  position: absolute; left: 42px; top: 6px; z-index: 1;
  display: flex; align-items: center; padding: 3px 6px 3px 7px; border-radius: 999px;
  background: var(--papir); box-shadow: 0 2px 6px rgba(92, 52, 18, .25);
  font-size: 12px; line-height: 1; letter-spacing: -1px; white-space: nowrap; pointer-events: none;
  animation: iskoci2 .45s .15s var(--opruga) both; transform-origin: 0 50%;
}

/* Grupa oznaka */
.grozd { width: 56px; height: 56px; position: relative; filter: drop-shadow(0 4px 8px rgba(92, 52, 18, .3)); animation: iskoci2 .45s var(--opruga) both; }
.grozd svg { width: 100%; height: 100%; fill: var(--narandza-tamna); }
.grozd b { position: absolute; left: 0; right: 0; top: 60%; transform: translateY(-50%); text-align: center; color: #fff; font: 800 16px/1 var(--naslovni); }
@keyframes iskoci2 { from { transform: scale(0); } to { transform: scale(1); } }

/* Moja lokacija */
.ja { width: 20px; height: 20px; border-radius: 50%; background: #2B7BE4; border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(43, 123, 228, .5); animation: puls 2s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 16px rgba(43, 123, 228, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 123, 228, 0); } }

/* ---------- Vrh ---------- */
.vrh {
  position: fixed; z-index: 500; top: calc(12px + var(--vrh-ivica)); left: 12px; right: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none;
}
.vrh > * { pointer-events: auto; }
.logo {
  display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px;
  background: var(--papir); border-radius: 999px; box-shadow: var(--senka);
  font: 800 22px/1 var(--naslovni); letter-spacing: -.02em; color: var(--mastilo);
  transition: transform .2s var(--opruga);
}
.logo:active { transform: scale(.95); }
.logo-sapa { width: 34px; height: 34px; fill: var(--narandza); animation: mahni 3.5s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes mahni { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-14deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
.logo span { padding-top: 3px; }
.cip {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--papir);
  border-radius: 999px; box-shadow: var(--senka); font-weight: 800; font-size: 15px;
  transition: transform .2s var(--opruga);
}
.cip:active { transform: scale(.95); }
.strelica { color: var(--narandza); }

.brojac {
  position: fixed; z-index: 400; top: calc(70px + var(--vrh-ivica)); left: 50%; transform: translateX(-50%);
  background: var(--mastilo); color: var(--krem); padding: 6px 14px; border-radius: 999px;
  font-weight: 800; font-size: 13px; white-space: nowrap; box-shadow: var(--senka-mala);
  transition: opacity .3s, transform .3s var(--opruga);
}
.brojac.skok { animation: skok .45s var(--opruga); }
@keyframes skok { 40% { transform: translateX(-50%) scale(1.12); } }

/* ---------- Desna dugmad ---------- */
.desno {
  position: fixed; z-index: 450; right: 12px; top: calc(118px + var(--vrh-ivica));
  display: flex; flex-direction: column; gap: 10px;
}
.okruglo {
  width: 48px; height: 48px; border-radius: 50%; background: var(--papir); box-shadow: var(--senka);
  display: grid; place-items: center; font-size: 20px; color: var(--mastilo);
  transition: transform .2s var(--opruga), background .2s;
}
.okruglo svg { width: 22px; height: 22px; fill: currentColor; }
.okruglo:active { transform: scale(.88); }
.okruglo.radi svg { animation: vrti 1s linear infinite; color: var(--voda); }
.okruglo.ukljuceno { background: var(--voda); color: #fff; }
@keyframes vrti { to { transform: rotate(360deg); } }

/* ---------- Dok sa šapama ---------- */
.dok {
  position: fixed; z-index: 500; left: 50%; bottom: calc(14px + var(--dno)); transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px 8px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 32px; box-shadow: var(--senka);
  transition: transform .45s var(--glatko), opacity .3s;
  max-width: calc(100vw - 16px);
}
body.otvoren-list .dok { transform: translate(-50%, 160%); opacity: 0; }
.grupa { display: flex; gap: 2px; }

.sapa-dugme {
  position: relative; width: 52px; height: 64px; display: flex; flex-direction: column; align-items: center;
  transition: transform .25s var(--opruga);
}
.sapa-dugme svg { width: 46px; height: 46px; fill: var(--krem-2); transition: fill .25s, transform .35s var(--opruga); }
.sapa-dugme i { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 19px; line-height: 1; transition: transform .35s var(--opruga); }
.sapa-dugme b { font-size: 11px; font-weight: 800; color: var(--mastilo-2); margin-top: 1px; letter-spacing: .01em; }
.sapa-dugme:hover svg { fill: var(--sapa); }
.sapa-dugme:active { transform: scale(.88); }
.sapa-dugme[aria-pressed="true"] svg { fill: var(--narandza); transform: rotate(-10deg) scale(1.08); }
.sapa-dugme[data-tip="voda"][aria-pressed="true"] svg { fill: var(--voda); }
.sapa-dugme[aria-pressed="true"] i { transform: translateX(-50%) scale(1.15); }
.sapa-dugme[aria-pressed="true"] b { color: var(--mastilo); }
.sapa-dugme.utisnuto svg { animation: utisak .5s var(--opruga); }
@keyframes utisak { 30% { transform: scale(.75) rotate(-14deg); } }

.sapa-velika {
  position: relative; width: 78px; height: 86px; margin: -28px 4px 0; display: flex; flex-direction: column; align-items: center;
  transition: transform .25s var(--opruga);
}
.sapa-velika svg { width: 74px; height: 74px; fill: var(--narandza); filter: drop-shadow(0 6px 10px rgba(196, 86, 26, .45)); transition: transform .4s var(--opruga); }
.sapa-velika i { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); font: 800 30px/1 var(--naslovni); color: #fff; font-style: normal; }
.sapa-velika b { font-size: 11px; font-weight: 800; color: var(--narandza-tamna); white-space: nowrap; margin-top: -2px; }
.sapa-velika:hover svg { transform: rotate(-8deg) scale(1.05); }
.sapa-velika:active { transform: scale(.9); }

/* ---------- Kartica „Prvih N“ ---------- */
.poziv {
  position: fixed; z-index: 480; left: 12px; right: 12px; bottom: calc(112px + var(--dno));
  width: fit-content; max-width: calc(100vw - 24px); margin-inline: auto;
  display: flex; align-items: center; gap: 2px; padding: 5px 5px 5px 6px;
  border-radius: 999px; background: var(--papir); box-shadow: var(--senka);
  animation: poziv-ulaz .6s 1s var(--opruga) both;
  transition: opacity .3s, transform .4s var(--glatko);
}
@keyframes poziv-ulaz { from { opacity: 0; transform: translateY(20px) scale(.94); } }
body.otvoren-list .poziv, .poziv.odlazi { opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; }
.poziv-glavno {
  display: flex; align-items: center; gap: 10px; padding: 2px 8px 2px 2px; border-radius: 999px; text-align: left;
  min-width: 0; transition: transform .2s var(--opruga);
}
.poziv-glavno:active { transform: scale(.97); }
.poziv-broj { position: relative; width: 40px; height: 40px; flex: none; }
.poziv-broj svg { width: 100%; height: 100%; fill: var(--narandza); animation: mahni 3.5s 2s ease-in-out infinite; transform-origin: 50% 80%; }
.poziv-broj b { position: absolute; left: 0; right: 0; top: 64%; transform: translateY(-50%); text-align: center; color: #fff; font: 800 14px/1 var(--naslovni); }
.poziv-tekst { display: flex; flex-direction: column; min-width: 0; }
.poziv-tekst strong { font: 800 15px/1.15 var(--naslovni); color: var(--mastilo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poziv-tekst span { font-size: 13px; font-weight: 800; color: var(--narandza-tamna); line-height: 1.3; }
.poziv-tekst span b { display: inline-block; animation: gurni 1.2s ease-in-out infinite; }
.poziv-glavno:hover .poziv-tekst span { text-decoration: underline; text-underline-offset: 3px; }
.poziv-x {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  font-size: 11px; font-weight: 800; color: var(--mastilo-2); background: var(--krem);
  transition: background .2s;
}
.poziv-x:hover { background: var(--krem-2); }

/* ---------- Listovi (paneli) ---------- */
.zavesa {
  position: fixed; inset: 0; z-index: 900; background: rgba(59, 36, 20, .28);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
body.otvoren-list.sa-zavesom .zavesa { opacity: 1; pointer-events: auto; }

.list {
  position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0;
  max-height: 88dvh; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--krem); border-radius: 30px 30px 0 0; box-shadow: 0 -10px 40px rgba(92, 52, 18, .25);
  padding: 8px 20px calc(28px + var(--dno));
  transform: translateY(110%); transition: transform .45s var(--glatko); visibility: hidden;
}
@supports (max-height: 1dvh) { .list { max-height: 88dvh; } }
.list.otvoren { transform: translateY(0); visibility: visible; }
.list.vuce { transition: none; }
.rucka { width: 44px; height: 5px; border-radius: 3px; background: rgba(122, 86, 56, .3); margin: 4px auto 14px; cursor: grab; touch-action: none; }
.rucka::before { content: ""; display: block; height: 30px; margin-top: -12px; }
.list > .zatvori, .svetlo .zatvori {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--papir); box-shadow: var(--senka-mala); font-size: 15px; font-weight: 800; z-index: 2;
  transition: transform .2s var(--opruga);
}
.list > .zatvori:active { transform: scale(.85); }
.naslov { font: 800 26px/1.15 var(--naslovni); margin: 6px 48px 2px 0; letter-spacing: -.01em; }
.podnaslov { margin: 0 0 16px; color: var(--mastilo-2); font-weight: 600; }
.sitno { font-size: 13px; color: var(--mastilo-2); margin: 6px 0; }
.napomena { color: var(--mastilo-2); font-size: 14px; }

/* Detalj */
.det-slika {
  position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--krem-2);
  margin: 0 0 16px; box-shadow: var(--senka-mala); cursor: zoom-in;
}
.det-slika img { width: 100%; height: 100%; object-fit: cover; display: block; }
.det-slika .povecaj { position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.bez-slike { cursor: default; display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(45deg, var(--krem-2) 0 14px, #FBE1BE 14px 28px); }
.bez-slike div { font-size: 64px; line-height: 1; }
.bez-slike small { display: block; font-size: 13px; font-weight: 700; color: var(--mastilo-2); margin-top: 8px; }
.oznake { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.oznaka { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--papir); box-shadow: inset 0 0 0 1.5px var(--krem-2); }
.oznaka.hrana { background: var(--narandza-svetla); color: #7A3510; box-shadow: none; }
.oznaka.voda { background: var(--voda-svetla); color: #174A7A; box-shadow: none; }
.oznaka.primer { background: var(--mastilo); color: var(--krem); box-shadow: none; }
.det-opis { font-size: 17px; margin: 0 0 12px; }
.postavili {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px;
  background: var(--zelena-svetla); color: #1B5539; font-weight: 700; margin: 0 0 14px;
}
.postavili svg { width: 26px; height: 26px; fill: var(--zelena); flex: none; }
.daljina { font-weight: 800; color: var(--voda); font-size: 14px; }
.dugmad-red { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; background: var(--papir); box-shadow: inset 0 0 0 2px var(--krem-2);
  font-weight: 800; font-size: 15px; text-decoration: none; color: var(--mastilo);
  transition: transform .2s var(--opruga), background .2s;
}
.dugme:active { transform: scale(.94); }
.dugme.glavno { background: var(--narandza); color: #fff; box-shadow: 0 6px 16px rgba(196, 86, 26, .35); }
.dugme.glavno:hover { background: var(--narandza-tamna); }
.dugme.veliko { width: 100%; padding: 16px; font-size: 17px; }
.dugme.vodi { flex: 1 1 auto; }
.dugme[disabled] { opacity: .6; cursor: progress; }

/* Spisak */
.spisak { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.spisak button {
  width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px;
  background: var(--papir); border-radius: 20px; box-shadow: var(--senka-mala);
  transition: transform .2s var(--opruga);
}
.spisak button:active { transform: scale(.97); }
.spisak .sl { width: 60px; height: 60px; border-radius: 14px; overflow: hidden; flex: none; background: var(--krem-2); display: grid; place-items: center; font-size: 26px; }
.spisak .sl img { width: 100%; height: 100%; object-fit: cover; }
.spisak strong { display: block; font-weight: 800; }
.spisak small { color: var(--mastilo-2); font-weight: 600; }
.spisak .em { margin-left: auto; font-size: 18px; white-space: nowrap; }
.prazno { text-align: center; padding: 24px 8px; color: var(--mastilo-2); font-weight: 700; }
.prazno i { display: block; font-size: 40px; font-style: normal; }

/* Gradovi */
.gradovi { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.grad-dugme {
  padding: 16px; border-radius: 20px; background: var(--papir); box-shadow: var(--senka-mala); text-align: left;
  transition: transform .2s var(--opruga);
}
.grad-dugme:active { transform: scale(.95); }
.grad-dugme strong { display: block; font: 800 19px/1.2 var(--naslovni); }
.grad-dugme small { color: var(--mastilo-2); font-weight: 700; }
.grad-dugme[aria-current="true"] { background: var(--narandza); color: #fff; }
.grad-dugme[aria-current="true"] small { color: #FFE7D3; }

/* O projektu */
.o-zaglavlje { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.o-zaglavlje svg { width: 64px; height: 64px; fill: var(--narandza); flex: none; }
.o-zaglavlje .podnaslov { margin: 0; }
.kartice-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.kartice-mini div { background: var(--papir); border-radius: 18px; padding: 12px 8px; text-align: center; box-shadow: var(--senka-mala); }
.kartice-mini i { display: block; font-style: normal; font-size: 26px; }
.kartice-mini b { display: block; font-weight: 800; }
.kartice-mini span { font-size: 12px; color: var(--mastilo-2); font-weight: 600; }

/* Koraci */
.koraci {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 72%); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 16px; margin: 0 -20px 6px;
  scrollbar-width: none;
}
.koraci::-webkit-scrollbar { display: none; }
.korak { scroll-snap-align: center; position: relative; border-radius: 24px; padding: 18px; color: var(--mastilo); }
.korak.k1 { background: #FFE3C7; } .korak.k2 { background: #FFF0B8; } .korak.k3 { background: #D6E9FA; } .korak.k4 { background: #D5F0E2; }
.korak .br { position: absolute; top: 14px; right: 16px; font: 800 34px/1 var(--naslovni); opacity: .25; }
.korak i { font-style: normal; font-size: 34px; display: block; }
.korak h3 { font: 800 19px/1.2 var(--naslovni); margin: 8px 0 4px; }
.korak p { margin: 0; font-size: 14px; font-weight: 600; }

.koraci-nav { display: flex; align-items: center; justify-content: space-between; margin: -6px 0 10px; }
.tackice { display: flex; gap: 6px; }
.tackice button { width: 8px; height: 8px; border-radius: 4px; background: rgba(122, 86, 56, .25); transition: width .3s var(--opruga), background .3s; }
.tackice button.aktivna { width: 24px; background: var(--narandza); }
.prevuci { font-size: 13px; font-weight: 800; color: var(--narandza-tamna); transition: opacity .4s; }
.prevuci b { display: inline-block; animation: gurni 1.2s ease-in-out infinite; }
.prevuci.nestani { opacity: 0; }
@keyframes gurni { 50% { transform: translateX(5px); } }
.koraci.mig { animation: mig 1.1s .5s var(--glatko); }
@keyframes mig { 30% { transform: translateX(-46px); } 60% { transform: translateX(0); } }

/* Forma */
form fieldset { border: 0; padding: 0; margin: 18px 0 0; }
form legend { font: 800 18px/1.2 var(--naslovni); margin-bottom: 8px; padding: 0; }
form legend small { font: 700 12px var(--tekst); color: var(--mastilo-2); margin-left: 6px; }
form input[type="text"] {
  width: 100%; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--krem-2); background: var(--papir);
  font-size: 16px; margin-top: 8px; transition: border-color .2s;
}
form input[type="text"]:focus { outline: none; border-color: var(--narandza); }
.polje-slika {
  display: block; position: relative; border-radius: 24px; border: 2.5px dashed #E8B98A; background: var(--papir);
  min-height: 150px; overflow: hidden; cursor: pointer; transition: border-color .2s, transform .2s var(--opruga);
}
.polje-slika:hover { border-color: var(--narandza); }
.polje-slika input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slika-prazno { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px; min-height: 150px; pointer-events: none; }
.slika-prazno i { font-style: normal; font-size: 40px; }
.slika-prazno b { font-weight: 800; font-size: 17px; }
.slika-prazno small { color: var(--mastilo-2); font-weight: 600; max-width: 280px; }
#pregledSlike { display: none; width: 100%; max-height: 300px; object-fit: cover; pointer-events: none; }
.polje-slika.ima .slika-prazno { display: none; }
.polje-slika.ima #pregledSlike { display: block; }
.polje-slika.ima { border-style: solid; border-color: var(--narandza); }
.mini-mapa { height: 200px; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--krem-2); background: var(--krem-2); }
.izbor { display: flex; gap: 8px; flex-wrap: wrap; }
.izbor-sapa { position: relative; display: flex; flex-direction: column; align-items: center; width: 74px; cursor: pointer; }
.izbor-sapa input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.izbor-sapa span { position: relative; width: 62px; height: 62px; display: block; transition: transform .3s var(--opruga); }
.izbor-sapa svg { width: 100%; height: 100%; fill: var(--papir); stroke: var(--krem-2); stroke-width: 3; transition: fill .2s; }
.izbor-sapa i { position: absolute; top: 31px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 22px; }
.izbor-sapa b { font-size: 13px; font-weight: 800; }
.izbor-sapa input:checked + span { transform: rotate(-10deg) scale(1.08); }
.izbor-sapa input:checked + span svg { fill: var(--narandza); stroke: var(--narandza); }
.izbor-sapa input[value="voda"]:checked + span svg { fill: var(--voda); stroke: var(--voda); }
.izbor-sapa input:focus-visible + span { outline: 3px solid var(--narandza); outline-offset: 2px; border-radius: 50%; }
/* Saveti po životinji */
.saveti { display: grid; gap: 10px; margin-top: 14px; }
.saveti-prazno {
  margin: 0; padding: 12px 14px; border-radius: 18px; border: 2px dashed var(--krem-2);
  font-size: 14px; font-weight: 700; color: var(--mastilo-2);
}
.savet {
  --boja: var(--narandza); --pozadina: #FFE3C7; --tekst-boja: #6B300D;
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 14px; border-radius: 22px; background: var(--pozadina); color: var(--tekst-boja);
  animation: savet-ulaz .45s var(--opruga) both;
}
.savet[hidden] { display: none !important; }
.savet-macke { --boja: #D4537E; --pozadina: #FBE3EC; --tekst-boja: #6E1F3A; }
.savet-ptice { --boja: var(--zelena); --pozadina: var(--zelena-svetla); --tekst-boja: #174A33; }
.savet-voda { --boja: var(--voda); --pozadina: var(--voda-svetla); --tekst-boja: #14406B; }
@keyframes savet-ulaz { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.savet-ik { position: relative; width: 48px; height: 48px; }
.savet-ik svg { width: 100%; height: 100%; fill: var(--boja); }
.savet-ik i { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); font-style: normal; font-size: 17px; }
.savet h4 { margin: 2px 0 6px; font: 800 16px/1.2 var(--naslovni); }
.savet ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.savet li { position: relative; padding-left: 18px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.savet li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--boja);
}

/* „Kad svratiš“ u detaljima */
.kad-svratis { padding: 14px 16px; border-radius: 20px; background: var(--papir); box-shadow: inset 0 0 0 2px var(--krem-2); margin: 0 0 14px; }
.kad-svratis h4 { margin: 0 0 8px; font: 800 16px/1.2 var(--naslovni); }
.kad-svratis ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.kad-svratis li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; font-size: 14px; font-weight: 600; line-height: 1.4; }
.kad-svratis li i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: var(--krem); display: grid; place-items: center; font-size: 15px; }

.greska { color: var(--crvena); font-weight: 700; font-size: 14px; margin: 6px 0 0; min-height: 0; }
.greska:empty { display: none; }
#forma .dugme.veliko { margin-top: 22px; }

.uspeh { text-align: center; padding: 30px 10px; }
.uspeh svg { width: 96px; height: 96px; fill: var(--zelena); animation: iskoci2 .6s var(--opruga) both; }
.uspeh h3 { font: 800 28px/1.1 var(--naslovni); margin: 10px 0 6px; }

/* Šapice koje padaju */
.konfete { position: fixed; top: -40px; z-index: 3000; pointer-events: none; font-size: 26px; animation: padaj linear forwards; }
@keyframes padaj { to { transform: translateY(110vh) rotate(540deg); } }

/* Svetlo (velika slika) */
.svetlo { position: fixed; inset: 0; z-index: 2000; background: rgba(20, 12, 6, .92); display: grid; place-items: center; padding: 16px; animation: pojavi .25s; }
.svetlo[hidden] { display: none; }
.svetlo img { max-width: 100%; max-height: 100%; border-radius: 16px; }
@keyframes pojavi { from { opacity: 0; } }

/* Poruka */
.poruka {
  position: fixed; z-index: 2500; left: 50%; bottom: calc(120px + var(--dno)); transform: translate(-50%, 20px);
  background: var(--mastilo); color: var(--krem); padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--opruga); max-width: calc(100vw - 32px); text-align: center;
}
.poruka.vidi { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Mali ekrani ---------- */
@media (max-width: 400px) {
  .sapa-dugme { width: 44px; }
  .sapa-dugme svg { width: 40px; height: 40px; }
  .sapa-dugme i { top: 19px; font-size: 17px; }
  .sapa-velika { width: 66px; margin: -24px 2px 0; }
  .sapa-velika svg { width: 64px; height: 64px; }
  .sapa-velika i { top: 31px; font-size: 26px; }
  .dok { padding: 8px 8px 6px; gap: 2px; }
  .logo { font-size: 20px; }
  .cip { padding: 9px 12px; font-size: 14px; }
}

/* ---------- Veliki ekrani: paneli sa strane ---------- */
@media (min-width: 900px) {
  .list {
    left: 16px; right: auto; top: 84px; bottom: 16px; width: 420px; max-height: none;
    border-radius: 30px; transform: translateX(-115%); box-shadow: var(--senka);
    padding-bottom: 28px;
  }
  .list.list-sirok { width: 480px; }
  .list.otvoren { transform: translateX(0); }
  .rucka { display: none; }
  .list > .zatvori { top: 16px; }
  .naslov { margin-top: 12px; }
  body.otvoren-list .dok { transform: translateX(-50%); opacity: 1; }
  body.otvoren-list.sa-zavesom .zavesa { opacity: 0; pointer-events: none; }
  .dok { left: auto; right: 24px; transform: none; bottom: 24px; }
  body.otvoren-list .dok { transform: none; }
  .brojac { left: auto; right: 24px; transform: none; top: 24px; }
  .brojac.skok { animation: none; }
  .vrh { left: 16px; right: auto; top: 16px; }
  .desno { top: 72px; right: 24px; }
  .poruka { bottom: 140px; }
  .poziv { left: 16px; right: auto; bottom: 24px; margin-inline: 0; }
}

/* Miš umesto prsta: koraci u mreži 2 × 2, bez prevlačenja */
@media (pointer: fine) {
  .koraci {
    grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); grid-auto-columns: auto;
    overflow: visible; scroll-snap-type: none; margin: 0 0 6px; padding: 4px 0 16px;
  }
  .korak { padding: 16px; }
  .koraci-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}