/* ============================================================
   Brač 2026 – naš digitalni vodič
   style.css — mediteranska paleta: more, kamen, masline, pijesak
   ============================================================ */

:root {
  /* Paleta — svijetla tema */
  --pozadina: #F7F2E9;
  --pozadina-2: #EFE7D6;
  --kartica: #FFFFFF;
  --kartica-2: #FDFBF5;
  --tinta: #1E2E3A;
  --prigusena: #5D6E7B;
  --crta: #E6DDCB;
  --navy: #14384F;
  --navy-tamna: #0D2739;
  --more: #2E6E8E;
  --more-svijetlo: #7FB2CD;
  --more-blijedo: #DCEAF2;
  --pijesak: #EAE0C9;
  --pijesak-tamni: #C9B58C;
  --maslina: #6B7C4C;
  --maslina-tamna: #4F5F38;
  --crvena: #A9433E;
  --primarna: #14384F;
  --na-primarnoj: #FFFFFF;
  --akcent: #2E6E8E;
  --sjena: 0 1px 2px rgba(20, 40, 58, .05), 0 10px 28px rgba(20, 40, 58, .09);
  --sjena-mala: 0 1px 3px rgba(20, 40, 58, .10);
  --radius: 18px;
  --radius-m: 12px;
  --nav-visina: 68px;
  --font-naslov: "Marcellus", "Georgia", serif;
  --font-tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Tamna tema — karta ostaje svijetla (standardni OSM tiles) */
[data-theme="dark"] {
  --pozadina: #0C1B28;
  --pozadina-2: #0A1622;
  --kartica: #13293A;
  --kartica-2: #102435;
  --tinta: #E9EFF4;
  --prigusena: #9DB0BE;
  --crta: #1F3B50;
  --more-blijedo: #16344A;
  --pijesak: #1C3850;
  --pijesak-tamni: #C9B58C;
  --primarna: #7FB2CD;
  --na-primarnoj: #0C1B28;
  --akcent: #8CC1DC;
  --sjena: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .35);
  --sjena-mala: 0 1px 3px rgba(0, 0, 0, .3);
}

/* ---------- Temeljno ---------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--pozadina);
  color: var(--tinta);
  font-family: var(--font-tekst);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: clip; /* nema horizontalnog scrolla */
  padding-bottom: calc(var(--nav-visina) + 28px + env(safe-area-inset-bottom));
}

a { color: var(--akcent); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }
[data-theme="dark"] a:hover { color: var(--more-svijetlo); }

img, svg { max-width: 100%; display: block; }

[hidden] { display: none !important; }

section { scroll-margin-top: 64px; }

.omotac {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- Tipografija ---------- */
h1, h2, h3 { font-family: var(--font-naslov); font-weight: 400; margin: 0; letter-spacing: .01em; }

.sekcija { padding: 40px 0 8px; }

.sekcija-glava { margin-bottom: 18px; }

.nadnaslov {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--maslina);
  margin-bottom: 6px;
}
[data-theme="dark"] .nadnaslov { color: #A8BC82; }

.sekcija-glava h2 { font-size: 30px; line-height: 1.15; }

.uvod { color: var(--prigusena); margin: 8px 0 0; font-size: 15px; }

/* ---------- Gornja traka ---------- */
.vrh {
  position: sticky;
  top: 0;
  z-index: 900;
  background: color-mix(in srgb, var(--pozadina) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--crta) 60%, transparent);
}

.vrh-red {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brend {
  font-family: var(--font-naslov);
  font-size: 19px;
  color: var(--tinta);
  display: flex;
  align-items: center;
  gap: 8px;
}
.brend .tocka { width: 8px; height: 8px; border-radius: 50%; background: var(--maslina); flex: none; }

.vrh-akcije { display: flex; gap: 8px; }

.btn-ikona {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--crta);
  background: var(--kartica);
  color: var(--tinta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--sjena-mala);
}
.btn-ikona:active { transform: scale(.94); }
.btn-ikona svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.hero .ph-art { position: absolute; inset: 0; }
.hero .ph-art svg { width: 100%; height: 100%; }

.hero-veo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 39, 57, .10) 0%, rgba(13, 39, 57, .32) 55%, rgba(13, 39, 57, .78) 100%);
}

.hero-sadrzaj {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 84px 20px 30px;
}

.hero-oznaka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(6px);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(52px, 15vw, 84px);
  line-height: .98;
  text-shadow: 0 2px 24px rgba(13, 39, 57, .45);
}

.hero-pod {
  font-size: clamp(17px, 4.6vw, 21px);
  margin: 10px 0 4px;
  font-family: var(--font-naslov);
  letter-spacing: .04em;
}

.hero-opis { font-size: 14.5px; opacity: .92; margin: 0 0 18px; max-width: 46ch; }

.hero-gumbi { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Gumbi ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-tekst);
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.96); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-puni { background: var(--primarna); color: var(--na-primarnoj); box-shadow: var(--sjena-mala); }
.btn-puni:hover { color: var(--na-primarnoj); }

.btn-svijetli { background: rgba(255, 255, 255, .92); color: var(--navy-tamna); }
.btn-svijetli:hover { color: var(--navy-tamna); }

.btn-obrub { background: var(--kartica); border-color: var(--crta); color: var(--tinta); }
.btn-obrub:hover { color: var(--tinta); background: var(--kartica-2); }

.btn-mekani { background: var(--more-blijedo); color: var(--navy); }
[data-theme="dark"] .btn-mekani { color: var(--more-svijetlo); }
.btn-mekani:hover { color: var(--navy); }
[data-theme="dark"] .btn-mekani:hover { color: var(--more-svijetlo); }

.btn-mali { min-height: 44px; padding: 8px 14px; font-size: 14px; }

/* Srce / favorit */
.btn-srce {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--crta);
  background: var(--kartica);
  color: var(--prigusena);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease;
}
.btn-srce:active { transform: scale(.9); }
.btn-srce[aria-pressed="true"] { color: var(--crvena); border-color: color-mix(in srgb, var(--crvena) 40%, var(--crta)); background: color-mix(in srgb, var(--crvena) 8%, var(--kartica)); }

/* ---------- Kartice ---------- */
.kartica {
  background: var(--kartica);
  border: 1px solid var(--crta);
  border-radius: var(--radius);
  box-shadow: var(--sjena);
  padding: 18px;
  margin: 14px 0;
}

.kartica h3 { font-size: 21px; margin-bottom: 4px; }

.kartica-red { display: flex; align-items: flex-start; gap: 12px; }

.mreza { display: grid; gap: 14px; }

/* ---------- Čipovi ---------- */
.cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--pijesak);
  color: var(--navy);
  border: 1px solid color-mix(in srgb, var(--pijesak-tamni) 45%, transparent);
}
[data-theme="dark"] .cip { color: var(--more-svijetlo); }

.cip-maslina { background: color-mix(in srgb, var(--maslina) 14%, var(--kartica)); color: var(--maslina-tamna); border-color: color-mix(in srgb, var(--maslina) 35%, transparent); }
[data-theme="dark"] .cip-maslina { color: #B5C98F; }

.cip-more { background: var(--more-blijedo); color: var(--more); border-color: color-mix(in srgb, var(--more) 30%, transparent); }
[data-theme="dark"] .cip-more { color: var(--more-svijetlo); }

.cip-upozorenje { background: color-mix(in srgb, var(--crvena) 10%, var(--kartica)); color: var(--crvena); border-color: color-mix(in srgb, var(--crvena) 35%, transparent); }
[data-theme="dark"] .cip-upozorenje { color: #E8A7A2; }

.cip-red { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Vremenska traka ---------- */
.traka {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: none;
}
.traka::-webkit-scrollbar { display: none; }

.traka-dan {
  border: 1px solid var(--crta);
  background: var(--kartica);
  border-radius: var(--radius-m);
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-tekst);
  color: var(--tinta);
  box-shadow: var(--sjena-mala);
  transition: transform .12s ease;
}
.traka-dan:active { transform: scale(.96); }
.traka-dan .td-datum { font-family: var(--font-naslov); font-size: 24px; display: block; color: var(--navy); }
[data-theme="dark"] .traka-dan .td-datum { color: var(--more-svijetlo); }
.traka-dan .td-dan { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--prigusena); display: block; }
.traka-dan .td-naziv { font-size: 12.5px; font-weight: 600; display: block; margin-top: 6px; color: var(--maslina-tamna); }
[data-theme="dark"] .traka-dan .td-naziv { color: #B5C98F; }

/* ---------- Statistike sažetka ---------- */
.stat-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.stat {
  background: var(--kartica);
  border: 1px solid var(--crta);
  border-radius: var(--radius-m);
  padding: 12px 10px;
  text-align: center;
}
.stat b { font-family: var(--font-naslov); font-weight: 400; font-size: 22px; display: block; color: var(--navy); }
[data-theme="dark"] .stat b { color: var(--more-svijetlo); }
.stat span { font-size: 11.5px; color: var(--prigusena); line-height: 1.3; display: block; margin-top: 2px; }

/* ---------- Dnevni plan (accordion) ---------- */
.dan {
  background: var(--kartica);
  border: 1px solid var(--crta);
  border-radius: var(--radius);
  box-shadow: var(--sjena);
  margin: 14px 0;
  overflow: hidden;
}

.dan-glava {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--tinta);
  font-family: var(--font-tekst);
  min-height: 44px;
}

.dan-datum {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
[data-theme="dark"] .dan-datum { background: var(--more); }
.dan-datum b { font-family: var(--font-naslov); font-weight: 400; font-size: 22px; }
.dan-datum span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; opacity: .85; }

.dan-naslovi { flex: 1; min-width: 0; }
.dan-naslovi h3 { font-size: 19px; line-height: 1.2; }
.dan-oznaka { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--maslina-tamna); background: color-mix(in srgb, var(--maslina) 14%, transparent); padding: 3px 10px; border-radius: 999px; }
[data-theme="dark"] .dan-oznaka { color: #B5C98F; }

.dan-strelica { flex: none; color: var(--prigusena); transition: transform .25s ease; }
.dan[data-otvoren="true"] .dan-strelica { transform: rotate(180deg); }

.dan-tijelo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.dan[data-otvoren="true"] .dan-tijelo { grid-template-rows: 1fr; }
.dan-tijelo > div { overflow: hidden; }
.dan-sadrzaj { padding: 0 16px 18px; }

.dan-sadrzaj h4 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--prigusena);
  margin: 18px 0 8px;
  font-weight: 700;
}

.tocke { list-style: none; margin: 0; padding: 0; }
.tocke li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 15px;
}
.tocke li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--more-svijetlo);
}

.ruta-koraci { list-style: none; margin: 0; padding: 0; }
.ruta-koraci li { display: flex; gap: 10px; padding: 5px 0; font-size: 15px; align-items: baseline; }
.ruta-koraci .rk-br {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--pijesak);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(3px);
}
[data-theme="dark"] .ruta-koraci .rk-br { color: var(--more-svijetlo); }
.ruta-koraci small { color: var(--prigusena); }

/* Upozorenje / napomena */
.napomena {
  border-radius: var(--radius-m);
  padding: 12px 14px;
  font-size: 14px;
  margin: 14px 0 0;
  background: var(--more-blijedo);
  border: 1px solid color-mix(in srgb, var(--more) 25%, transparent);
}
.napomena b { color: var(--more); }
[data-theme="dark"] .napomena b { color: var(--more-svijetlo); }

.napomena-vazna {
  background: color-mix(in srgb, var(--crvena) 8%, var(--kartica));
  border-color: color-mix(in srgb, var(--crvena) 30%, transparent);
}
.napomena-vazna b { color: var(--crvena); }
[data-theme="dark"] .napomena-vazna b { color: #E8A7A2; }

/* ---------- Placeholderi za fotografije ---------- */
.ph {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
  background: var(--pozadina-2);
}
.ph svg { width: 100%; height: 100%; }
.ph-16-9 { aspect-ratio: 16 / 9; }
.ph-traka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ph-traka .ph { aspect-ratio: 4 / 3; }
.ph-potpis {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 6px rgba(13, 39, 57, .6);
  text-transform: uppercase;
}

/* ---------- Karta ---------- */
.karta-okvir {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--crta);
  box-shadow: var(--sjena);
  background: #DCEAF2;
}

#karta-mapa { height: clamp(380px, 58vh, 560px); width: 100%; z-index: 1; }

.karta-fallback {
  height: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: #14384F;
  font-size: 15px;
}

.btn-lociraj {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 500;
}

.karta-alati { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

.filter-cip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--crta);
  background: var(--kartica);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-tekst);
  transition: background .15s ease, transform .1s ease;
}
.filter-cip:active { transform: scale(.95); }
.filter-cip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
[data-theme="dark"] .filter-cip[aria-pressed="true"] { background: var(--more); border-color: var(--more); }

.ruta-prekidaci { display: grid; gap: 8px; margin: 12px 0; }

.ruta-prekidac {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--kartica);
  border: 1px solid var(--crta);
  border-radius: var(--radius-m);
  padding: 10px 14px;
  cursor: pointer;
  min-height: 44px;
}
.ruta-prekidac input { width: 20px; height: 20px; accent-color: var(--navy); flex: none; }
[data-theme="dark"] .ruta-prekidac input { accent-color: var(--more-svijetlo); }
.ruta-uzorak { flex: none; width: 34px; height: 0; border-top: 4px solid var(--maslina); border-radius: 2px; }
.ruta-uzorak.isprekidan { border-top-style: dashed; border-top-color: var(--more); }
.ruta-prekidac .rp-tekst { font-size: 14px; font-weight: 600; }
.ruta-prekidac small { display: block; font-weight: 400; color: var(--prigusena); }

/* Leaflet nadjačavanja */
.pin { background: none; border: none; }
.pin-krug {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50% 50% 50% 4px;
  background: var(--pin, #14384F);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(13, 39, 57, .35);
  font-size: 16px;
  transform: rotate(0deg);
}

.leaflet-popup-content-wrapper {
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(13, 39, 57, .25) !important;
  font-family: var(--font-tekst) !important;
}
.leaflet-popup-content { margin: 14px 16px !important; line-height: 1.45 !important; min-width: 210px; }

.popup-kat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6B7C4C; }
.popup-naziv { font-family: var(--font-naslov); font-size: 18px; color: #14384F; margin: 2px 0 4px; }
.popup-opis { font-size: 13.5px; color: #40525F; margin: 0 0 6px; }
.popup-vrijeme { font-size: 12.5px; color: #5D6E7B; margin: 0 0 10px; }
.popup-vrijeme b { color: #2E6E8E; }
.popup-gumbi { display: flex; flex-wrap: wrap; gap: 6px; }
.popup-gumbi .btn { min-height: 38px; padding: 6px 12px; font-size: 13px; }
.popup-btn-srce { background: #fff; border: 1px solid #E6DDCB; color: #5D6E7B; }
.popup-btn-srce[aria-pressed="true"] { color: #A9433E; border-color: #A9433E; }

/* ---------- Udaljenosti ---------- */
.udaljenosti { list-style: none; margin: 0; padding: 0; }
.udaljenosti li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--crta);
  font-size: 15px;
}
.udaljenosti li:last-child { border-bottom: 0; }
.udaljenosti .u-mjesto { flex: 1; }
.udaljenosti .u-km { font-family: var(--font-naslov); font-size: 17px; color: var(--navy); white-space: nowrap; }
[data-theme="dark"] .udaljenosti .u-km { color: var(--more-svijetlo); }
.udaljenosti .u-vrijeme { font-size: 12.5px; color: var(--prigusena); white-space: nowrap; }

.znacka-okvirno {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--prigusena);
  border: 1px solid var(--crta);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---------- Gastro ---------- */
.gastro-kartica .g-vrh { display: flex; gap: 12px; align-items: flex-start; }

.g-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--pijesak);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.g-info { flex: 1; min-width: 0; }
.g-meta { font-size: 13px; color: var(--prigusena); margin: 2px 0 0; }
.g-cijena { font-weight: 700; color: var(--maslina-tamna); letter-spacing: .05em; }
[data-theme="dark"] .g-cijena { color: #B5C98F; }

.g-jela { font-size: 14px; margin: 10px 0 0; }
.g-jela b { font-weight: 600; color: var(--navy); }
[data-theme="dark"] .g-jela b { color: var(--more-svijetlo); }

.g-gumbi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }

.g-provjera { font-size: 12.5px; color: var(--prigusena); margin-top: 10px; font-style: italic; }

/* ---------- Plaže ---------- */
.plaza-atributi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  margin: 12px 0;
  font-size: 13.5px;
}
.plaza-atributi div { display: flex; gap: 7px; align-items: baseline; }
.plaza-atributi .pa-ikona { flex: none; }
.plaza-atributi b { font-weight: 600; }
.plaza-atributi span { color: var(--prigusena); }

/* ---------- Naš plan ---------- */
.plan-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

.plan-prazno {
  text-align: center;
  color: var(--prigusena);
  padding: 26px 18px;
  font-size: 14.5px;
  border: 1.5px dashed var(--crta);
  border-radius: var(--radius);
  margin: 14px 0;
}

.plan-stavka {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--kartica);
  border: 1px solid var(--crta);
  border-radius: var(--radius-m);
  padding: 10px 12px;
  margin: 10px 0;
  box-shadow: var(--sjena-mala);
}
.plan-stavka .ps-ikona {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  background: var(--pijesak);
}
.plan-stavka .ps-info { flex: 1; min-width: 0; }
.plan-stavka .ps-naziv { font-weight: 600; font-size: 15px; line-height: 1.25; }
.plan-stavka .ps-kat { font-size: 12px; color: var(--prigusena); }
.plan-stavka select {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--crta);
  background: var(--kartica-2);
  color: var(--tinta);
  font-size: 13px;
  font-family: var(--font-tekst);
  padding: 4px 6px;
  max-width: 96px;
}
.plan-stavka .ps-akcije { display: flex; gap: 6px; align-items: center; flex: none; }

.favoriti-red { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

select.kat-filter {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--crta);
  background: var(--kartica);
  color: var(--tinta);
  font-family: var(--font-tekst);
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 14px;
}

/* ---------- Checklista ---------- */
.check-napredak { margin: 4px 0 14px; }
.check-napredak-tekst { font-size: 13.5px; color: var(--prigusena); margin-bottom: 6px; display: block; }
.check-crta { height: 8px; border-radius: 999px; background: var(--pozadina-2); overflow: hidden; border: 1px solid var(--crta); }
.check-crta > div { height: 100%; width: 0%; background: linear-gradient(90deg, var(--maslina), var(--more)); border-radius: 999px; transition: width .3s ease; }

.checklista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.check-stavka {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--kartica);
  border: 1px solid var(--crta);
  border-radius: var(--radius-m);
  padding: 11px 14px;
  cursor: pointer;
  min-height: 48px;
  font-size: 15px;
  transition: opacity .2s ease;
}
.check-stavka input { width: 22px; height: 22px; accent-color: var(--maslina); flex: none; }
.check-stavka:has(input:checked) { opacity: .55; }
.check-stavka:has(input:checked) span { text-decoration: line-through; }

/* ---------- Korisno ---------- */
.korisno-ikona {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--more-blijedo);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
}

.hitno {
  background: var(--navy);
  color: #fff;
  border: none;
}
[data-theme="dark"] .hitno { background: var(--more); }
.hitno h3 { color: #fff; }
.hitno p { color: rgba(255, 255, 255, .8); }
.hitno-broj {
  font-family: var(--font-naslov);
  font-size: 54px;
  line-height: 1;
  color: #fff;
  display: inline-block;
  text-decoration: none;
}
.hitno-broj:hover { color: #fff; }
.hitno .cip-red { margin-top: 14px; }
.hitno .cip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; text-decoration: none; min-height: 36px; }
.hitno .cip:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* ---------- Podnožje ---------- */
.podnozje {
  text-align: center;
  color: var(--prigusena);
  font-size: 13px;
  padding: 34px 20px 10px;
}
.podnozje .srce { color: var(--crvena); }

/* ---------- Donja navigacija ---------- */
.donja-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 950;
  display: flex;
  gap: 2px;
  background: color-mix(in srgb, var(--kartica) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--crta);
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 6px 30px rgba(13, 39, 57, .18);
  width: min(430px, calc(100% - 20px));
}

.nav-stavka {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  border-radius: 999px;
  color: var(--prigusena);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 6px 2px;
}
.nav-stavka:hover { text-decoration: none; color: var(--prigusena); }
.nav-stavka svg { width: 21px; height: 21px; }
.nav-stavka[aria-current="true"] { background: var(--navy); color: #fff; }
[data-theme="dark"] .nav-stavka[aria-current="true"] { background: var(--more); }

/* ---------- Povratak na vrh ---------- */
.na-vrh {
  position: fixed;
  right: 14px;
  bottom: calc(var(--nav-visina) + 26px + env(safe-area-inset-bottom));
  z-index: 940;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.na-vrh.vidljiv { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------- Modal (odabir dana) ---------- */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal-pozadina { position: absolute; inset: 0; background: rgba(13, 39, 57, .5); }
.modal-list {
  position: relative;
  width: min(480px, 100%);
  background: var(--kartica);
  border-radius: 22px 22px 0 0;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px rgba(13, 39, 57, .3);
  animation: modal-gore .25s ease;
}
@keyframes modal-gore { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-list h3 { font-size: 20px; }
.modal-list .modal-lokacija { color: var(--prigusena); font-size: 14px; margin: 4px 0 14px; }
.modal-dani { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal-dani .btn { justify-content: flex-start; }
.modal-dani .btn:last-child { grid-column: 1 / -1; }
.modal-odustani { margin-top: 10px; width: 100%; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  bottom: calc(var(--nav-visina) + 30px + env(safe-area-inset-bottom));
  z-index: 1100;
  background: var(--navy-tamna);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(13, 39, 57, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: calc(100% - 32px);
  text-align: center;
}
.toast.vidljiv { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Pristupačnost ---------- */
:focus-visible { outline: 3px solid var(--more-svijetlo); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Veći zasloni ---------- */
@media (min-width: 760px) {
  .hero { min-height: 520px; border-radius: 0 0 36px 36px; }
  .mreza-2 { grid-template-columns: 1fr 1fr; }
  .stat-mreza { grid-template-columns: repeat(6, 1fr); }
  .sekcija-glava h2 { font-size: 34px; }
  .modal { align-items: center; }
  .modal-list { border-radius: 22px; }
}