/* Parkiraj — mobitel na prvom mjestu: karta preko cijelog zaslona, kartica s rezultatom pri dnu (dohvatljiva palcem). */
:root {
  --naglasak: #0F4FA0;
  --z0: #F5A800; --z1: #7A1FE0; --z2: #00A83C; --stan: #0A3D91; --korisnik: #E01E5A;
  --tekst: #1f2328; --blijedo: #5f6368; --povrsina: #ffffff;
  --sjena: 0 2px 10px rgba(15, 30, 60, .16), 0 1px 3px rgba(15, 30, 60, .12);
  --vrh: env(safe-area-inset-top, 0px); --dno: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* inače "display: flex/grid" iz pravila ispod nadjača atribut hidden */
html, body { height: 100%; margin: 0; overflow: hidden; background: #f4f3f0; }
body {
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  color: var(--tekst); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
}
#karta { position: fixed; inset: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--naglasak); outline-offset: 2px; }

/* ---------- zaglavlje ---------- */
.zaglavlje {
  position: fixed; z-index: 3; top: calc(var(--vrh) + 10px); left: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.zaglavlje > * { pointer-events: auto; }
.znak {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--naglasak); color: #fff; font-weight: 800; font-size: 19px; box-shadow: var(--sjena);
}
.ime {
  padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: var(--sjena);
  font-size: 15.5px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ime strong { color: var(--naglasak); }
/* HR | EN uz naziv, kao u 6.0.2 */
.jezik {
  display: flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .88); box-shadow: var(--sjena);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.jezik button {
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: #475569;
  min-width: 34px; height: 30px; border-radius: 999px; cursor: pointer;
}
.jezik button[aria-pressed="true"] { background: var(--naglasak); color: #fff; }
#gumb-slojevi { margin-left: auto; }

/* ---------- okrugli gumbi ---------- */
.gumb-okrugli {
  width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--povrsina); box-shadow: var(--sjena);
  display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.gumb-okrugli svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gumb-okrugli.istaknut { width: 56px; height: 56px; background: var(--naglasak); color: #fff; }
.gumb-okrugli[aria-expanded="true"] { background: var(--naglasak); color: #fff; }
.gumb-okrugli[aria-busy="true"] svg { animation: vrti 1s linear infinite; }
@keyframes vrti { to { transform: rotate(360deg); } }

body[data-kartica-visoka] .gumbi-karte { display: none; }
.gumbi-karte {
  position: fixed; z-index: 3; right: 12px; bottom: calc(var(--visina-kartice, 190px) + 14px);
  display: flex; flex-direction: column; align-items: center; gap: 12px; transition: bottom .25s ease;
}

/* ---------- slojevi ---------- */
.slojevi {
  position: fixed; z-index: 5; top: calc(var(--vrh) + 66px); right: 12px; width: min(290px, calc(100vw - 24px));
  background: var(--povrsina); border-radius: 18px; box-shadow: var(--sjena); padding: 10px 16px 14px;
}
.slojevi-naslov { margin: 4px 0 4px; font-size: 13px; font-weight: 600; color: var(--blijedo); text-transform: uppercase; letter-spacing: .06em; }
.prekidac { display: flex; align-items: center; gap: 12px; min-height: 46px; font-size: 16px; }
.prekidac input { width: 22px; height: 22px; accent-color: var(--naglasak); margin: 0; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #eceef1; font-size: 13.5px; color: var(--blijedo); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.boja { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.boja.z0 { background: var(--z0); } .boja.z1 { background: var(--z1); } .boja.z2 { background: var(--z2); }
.boja.stan { border: 2px dashed var(--stan); }

/* ---------- kartica s rezultatom ---------- */
.kartica {
  position: fixed; z-index: 4; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; max-height: 82dvh;
  background: var(--povrsina); border-radius: 22px 22px 0 0; box-shadow: 0 -6px 26px rgba(15, 30, 60, .18);
  padding: 2px 16px calc(14px + var(--dno));
}
.rucka { align-self: center; width: 72px; height: 26px; border: 0; background: none; padding: 0; display: grid; place-items: center; }
.rucka span { display: block; width: 42px; height: 5px; border-radius: 3px; background: #c9ccd1; }
.sazetak { display: flex; align-items: center; gap: 14px; padding: 2px 0 12px; }
.znacka {
  flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font-size: 27px; font-weight: 800; line-height: 1; background: #e8eaed; color: #3c4043;
}
.znacka.z0 { background: var(--z0); color: #2B2000; }
.znacka.z1 { background: var(--z1); color: #fff; }
.znacka.z2 { background: var(--z2); color: #fff; }
.znacka.pocetno { background: var(--naglasak); color: #fff; }
.znacka.slab { background: #fff1c2; color: #7a4f00; }
.znacka.greska { background: #fde7e9; color: #a50e0e; }
.znacka.nije-zona { background: #eceff1; color: #5f6368; }
#naslov { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 750; }
#podnaslov { margin: 3px 0 0; font-size: 15px; color: var(--blijedo); }

.sms {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px; padding: 8px 14px; border-radius: 14px; background: #eef4fc;
}
.sms-oznaka { font-size: 12.5px; font-weight: 700; color: var(--naglasak); letter-spacing: .08em; }
#sms-broj { font-size: 26px; font-weight: 800; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
a.sms { color: inherit; text-decoration: none; } /* dodir otvara poruke s brojem zone (sms:) */
.sms-uputa { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--naglasak); text-align: right; }

.gumb-glavni {
  width: 100%; min-height: 54px; border: 0; border-radius: 15px; background: var(--naglasak); color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16.5px; font-weight: 650;
}
.gumb-glavni svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gumb-glavni.sekundarni { min-height: 46px; font-size: 15.5px; background: #e8f0fb; color: var(--naglasak); }
.gumb-glavni:disabled { opacity: .7; }

.detalji { overflow-y: auto; max-height: 0; transition: max-height .3s ease; overscroll-behavior: contain; }
.kartica[data-otvoreno="false"] .detalji { visibility: hidden; }
.kartica[data-otvoreno="true"] .detalji { max-height: 52dvh; }
.napomene { display: grid; gap: 8px; margin-top: 12px; }
.napomena { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; border-left: 4px solid; }
.napomena.upozorenje { background: #fff6d6; border-color: var(--z0); }
.napomena.info { background: #eef3fb; border-color: var(--naglasak); }
.podaci { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; margin: 14px 0 0; font-size: 15.5px; }
.podaci dt { color: var(--blijedo); }
.podaci dd { margin: 0; font-weight: 650; text-align: right; }
.izvori { margin: 14px 0 2px; font-size: 12px; line-height: 1.45; color: var(--blijedo); }

/* ---------- kako platiti (u kartici zone) ---------- */
.kako-platiti h3 { margin: 6px 0 2px; font-size: 15.5px; }
/* "Više": kako platiti, napomene i tablica podataka — u drugom planu (odluka autora 14. 10. 2026.) */
.vise { margin-top: 10px; border-top: 1px solid #eceef1; }
.vise summary { display: flex; align-items: center; min-height: 46px; font-size: 15.5px; font-weight: 700; cursor: pointer; list-style: none; }
.vise summary::-webkit-details-marker { display: none; }
.vise summary::after { content: "›"; margin-left: auto; font-size: 22px; line-height: 1; color: var(--blijedo); transform: rotate(90deg); transition: transform .2s; }
.vise:not([open]) summary::after { transform: none; }
.vise .napomene:empty { display: none; }
.redak-naplate { margin: 2px 0 10px; font-size: 14.5px; line-height: 1.45; color: #344054; }
.prijavi-red { margin: 8px 0 2px; font-size: 14px; color: var(--blijedo); }
.prijavi-red a, .prijavi-red .gumb-poveznica { color: var(--naglasak); font-weight: 600; text-decoration: none; font-size: inherit; }
.kp-red { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid #f1f3f5; font-size: 15px; }
.kp-oznaka { padding-top: 2px; font-size: 13.5px; color: var(--blijedo); }
.kp-red p { margin: 5px 0 0; }
.kp-red .napomena { margin-top: 8px; font-size: 13.5px; }
.kp-sms { display: inline-block; padding: 2px 0; color: var(--naglasak); font-weight: 650; text-decoration: none; }
.kp-parkomat { display: grid; gap: 2px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kp-parkomat span { font-size: 13.5px; color: var(--naglasak); }
.kp-karte { font-weight: 650; }
.kp-prijava { padding: 4px 0 8px; }

/* MapLibre kontrole: ispod zaglavlja, desno */
.maplibregl-ctrl-top-right { top: calc(var(--vrh) + 122px); }
.gumb-3d { position: fixed; z-index: 3; top: calc(var(--vrh) + 66px); right: 12px; }
.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 0 12px 0 0; }
.maplibregl-ctrl-attrib.maplibregl-compact { margin-top: 0; }

.bez-js { position: fixed; inset: auto 16px 16px; padding: 16px; background: #fff; border-radius: 12px; }

/* ---------- računalo / tablet ---------- */
@media (min-width: 760px) {
  .kartica { left: 16px; right: auto; bottom: 16px; width: 400px; border-radius: 22px; max-height: calc(100dvh - 110px); }
  .gumbi-karte { bottom: 28px; right: 16px; }
  .kartica .rucka { display: none; }
  .kartica .detalji { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gumbi-karte, .detalji { transition: none; }
  .gumb-okrugli[aria-busy="true"] svg { animation: none; }
}

/* ---------- kartice: Moja zona / Parkiraj besplatno ---------- */
.izbornik { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 12px; background: #f0f2f5; border-radius: 13px; }
.izbornik button { min-height: 40px; border: 0; border-radius: 10px; background: none; font-size: 15px; font-weight: 600; color: var(--blijedo); }
.izbornik button[aria-selected="true"] { background: #fff; color: var(--tekst); box-shadow: 0 1px 3px rgba(15, 30, 60, .15); }
.pogled { display: flex; flex-direction: column; min-height: 0; }
.pogled[hidden] { display: none; }

.redak-poveznica {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: 0 0 10px; padding: 8px 12px;
  border: 1px solid #dfe3ea; border-radius: 12px; background: #fff; text-align: left; font-size: 14.5px;
}
.redak-poveznica .p { flex: none; }
.redak-poveznica span:last-child { margin-left: auto; color: var(--naglasak); font-weight: 700; }

/* P oznake (karta, legenda, popis) */
.boja.p-besplatno, .boja.p-kupci, .boja.p-naplata, .p {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-style: normal;
  font-weight: 800; font-size: 13px; color: #fff; background: #1565C0;
}
.boja.p-kupci, .p.kupci { background: #fff; color: #1565C0; box-shadow: inset 0 0 0 2px #1565C0; }
.boja.p-naplata, .p.naplata { background: #6b7280; }
.legenda .boja.p-besplatno, .legenda .boja.p-kupci, .legenda .boja.p-naplata { width: 18px; height: 18px; font-size: 11px; border-radius: 5px; }

.biranje { display: flex; flex-direction: column; min-height: 0; }
.odrediste { font-size: 13px; font-weight: 700; color: var(--blijedo); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.odrediste-red { display: flex; gap: 8px; margin-bottom: 10px; }
.odrediste-red select {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid #d5d9e0; border-radius: 12px;
  background: #fff; font: inherit; font-size: 15.5px; color: var(--tekst);
}
.gumb-mali { min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: #e8f0fb; color: var(--naglasak); font-weight: 650; font-size: 14.5px; white-space: nowrap; }
.gumb-mali[aria-pressed="true"] { background: var(--naglasak); color: #fff; }

.popis { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; max-height: 150px; transition: max-height .3s ease; }
.kartica[data-otvoreno="true"] .popis { max-height: 50dvh; }
.popis li + li { border-top: 1px solid #eef0f3; }
.stavka { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; width: 100%; padding: 10px 2px; border: 0; background: none; text-align: left; }
.stavka .p { grid-row: span 2; width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
.stavka-ime { font-weight: 650; font-size: 15.5px; line-height: 1.25; }
.stavka-put { grid-column: 2; font-size: 14px; color: var(--blijedo); }
.stavka-min { grid-row: span 2; text-align: right; font-weight: 800; font-size: 18px; line-height: 1.1; }
.stavka-min small { display: block; font-size: 11.5px; font-weight: 600; color: var(--blijedo); }
.cip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: 1px; background: #e7f3ec; color: #0b6b33; }
.cip.placa { background: #eef0f3; color: #4b5563; }
.cip.kupci { background: #e8f0fb; color: #1565C0; }
.cip.osm { background: #fff3cd; color: #7a4f00; }

.detalj { overflow-y: auto; overscroll-behavior: contain; max-height: 230px; transition: max-height .3s ease; }
.kartica[data-otvoreno="true"] .detalj { max-height: 60dvh; }
.natrag { border: 0; background: none; padding: 4px 0 8px; color: var(--naglasak); font-weight: 650; font-size: 15px; }
.detalj h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.detalj .adresa { margin: 2px 0 10px; color: var(--blijedo); font-size: 14.5px; }
.put { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #f3f6fa; font-size: 15px; }
.put strong { display: block; font-size: 13px; color: var(--blijedo); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.gumbi-red { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.gumbi-red a, .gumbi-red button {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 6px 10px;
  border-radius: 12px; border: 0; background: #e8f0fb; color: var(--naglasak); font-weight: 650; font-size: 14.5px; text-decoration: none;
}
.gumbi-red a.glavni { background: var(--naglasak); color: #fff; }
.mala { font-size: 12.5px; color: var(--blijedo); margin: 6px 0; }
.mala a { color: var(--naglasak); }

.obavijest {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); top: calc(var(--vrh) + 64px);
  max-width: min(420px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 12px; background: #1f2328; color: #fff;
  font-size: 14.5px; box-shadow: var(--sjena);
}
.izvori-karte { margin: 10px 0 0; }
.kartica[data-otvoreno="false"] .izvori-karte { display: none; }
@media (min-width: 760px) {
  .popis, .detalj { max-height: none; }
  .kartica[data-otvoreno="false"] .izvori-karte { display: block; }
  .kartica { overflow-y: auto; }
}

.boja.p-osm { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-style: normal; font-weight: 800; font-size: 11px; color: #fff; background: #5B8FD6; }
.boja.parkomat { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 10px; color: #2B2000; background: var(--z0); }
.boja.znam { width: 12px; height: 12px; border-radius: 50%; background: #334155; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #cbd5e1; }
.znacka.znamenitost { background: #334155; color: #fff; font-size: 24px; }

.znacka.dogadaj { background: #C2410C; color: #fff; }
.boja.dog { width: 14px; height: 14px; border-radius: 50%; background: #C2410C; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #fdba74; }
.d { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; background: #C2410C; }
.redak-poveznica.danas { border-color: #fdba74; background: #fff7ed; }
.poveznica-dogadaja { display: block; margin: -4px 0 10px; }

/* ---------- parkomati: dodavanje (diskretno) ---------- */
.gumb-poveznica { padding: 0; border: 0; background: none; font: inherit; color: var(--naglasak); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- gumbi na karti: blago prozirni (odluka autora 14. 10. 2026.) ---------- */
.gumb-okrugli { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gumb-okrugli.istaknut { background: rgba(15, 79, 160, .86); }
.gumb-okrugli[aria-expanded="true"] { background: rgba(15, 79, 160, .9); }
.maplibregl-ctrl-group { background: rgba(255, 255, 255, .78) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* kompas samo kad je karta zakrenuta */
body:not([data-zakrenuto]) .maplibregl-ctrl-compass { display: none; }
body:not([data-zakrenuto]) .maplibregl-ctrl-group:not(:has(button:not(.maplibregl-ctrl-compass))) { display: none; }

/* ---------- Prijavi: gumb na karti i izbor ---------- */
.gumb-prijavi {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 22px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--sjena); font-size: 15px; font-weight: 700; color: #B42318;
}
.gumb-prijavi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gumb-prijavi[aria-pressed="true"] { box-shadow: 0 0 0 3px #B42318, var(--sjena); }
.prijava-sjena { position: fixed; inset: 0; z-index: 7; background: rgba(15, 25, 40, .45); }
.prijava-izbor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; max-width: 520px; margin: 0 auto;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -4px 24px rgba(0, 0, 0, .2);
}
.prijava-rucka { width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: #d0d5dd; }
.prijava-izbor h2 { margin: 0 0 12px; font-size: 20px; }
.prijava-opcija {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; margin: 0 0 10px; padding: 12px 14px;
  border: 1.5px solid #e4e7ec; border-radius: 16px; background: #fff; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.prijava-opcija i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-style: normal; font-weight: 800; font-size: 20px; }
.prijava-opcija b { display: block; font-size: 16.5px; }
.prijava-opcija small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--blijedo); }
.ik-parkomat { background: #FEF0C7; color: #2B2000; } .ik-greska { background: #FEE4E2; color: #B42318; } .ik-parkiraliste { background: #D1E9FF; color: var(--naglasak); }
.prijava-odustani { display: block; width: 100%; height: 48px; border: 0; background: none; font-size: 16px; font-weight: 600; color: var(--blijedo); }

/* ---------- slojevi: sklopiva legenda ---------- */
.legenda-sklop summary { min-height: 40px; display: flex; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--blijedo); cursor: pointer; }
.legenda-sklop .legenda { margin-top: 0; }

/* manji "Provjeri moju lokaciju" kad je rezultat već prikazan */
.gumb-glavni.sekundarni { min-height: 40px; font-size: 14.5px; }
.gumb-glavni.sekundarni svg { width: 18px; height: 18px; }

/* ---------- 7.0: tablice, parkiranja, Moja vozila, podsjetnici (iz 6.0.2; odluka autora 14. 10. 2026.) ---------- */
.izbornik { grid-template-columns: 1fr 1fr 1fr; }
.izbornik button { font-size: 14px; line-height: 1.15; padding: 4px 4px; }

.tablice { margin: 0 0 8px; }
.tablice-naslov { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--blijedo); text-transform: uppercase; letter-spacing: .06em; }
.tablice-popis { display: flex; flex-wrap: wrap; gap: 7px; }
.tablica {
  display: inline-flex; align-items: baseline; gap: 5px; min-height: 40px; padding: 7px 11px; border: 1.5px solid #cfd6e2; border-radius: 10px;
  background: #fff; color: var(--tekst); font: inherit; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; font-size: 15px;
}
.tablica small { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 800; color: var(--blijedo); }
.tablica em { font-family: system-ui, sans-serif; font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--blijedo); }
.tablica[aria-pressed="true"] { border-color: var(--naglasak); background: #e8f0fb; color: var(--naglasak); }
.tablica.dodaj { font-family: system-ui, sans-serif; font-weight: 650; font-size: 14px; color: var(--naglasak); border-style: dashed; }
.sms.s-tablicom { background: var(--naglasak); color: #fff; }
.sms.s-tablicom .sms-oznaka, .sms.s-tablicom .sms-uputa { color: #fff; }
.sms-uputa b { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sms-strana { margin: -2px 0 10px; font-size: 13.5px; }
.pitanje-isti { margin: 0 0 10px; font-size: 15.5px; font-weight: 600; }
#gumb-isti-parkomat { margin-bottom: 8px; }

/* aktivna parkiranja: iznad kartice, a gumbi na karti iznad njih */
@media (max-width: 759px) { .gumbi-karte { bottom: calc(var(--visina-kartice, 190px) + 14px + var(--visina-parkiranja, 0px)); } }
.parkiranja {
  position: fixed; z-index: 3; left: 12px; right: 12px; bottom: calc(var(--visina-kartice, 190px) + 14px);
  display: grid; gap: 8px; transition: bottom .25s ease;
}
.parkiranje { background: #fff; border-radius: 16px; box-shadow: var(--sjena); padding: 10px 12px; border: 2px solid transparent; }
.parkiranje.uskoro { border-color: var(--z0); }
.parkiranje.isteklo { border-color: #D92D20; }
.parkiranje-vrh { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.oznaka-auta { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: 14.5px; border: 1.5px solid var(--tekst); border-radius: 6px; padding: 0 6px; }
.oznaka-auta small { font-size: 10.5px; margin-right: 3px; }
.cip-zona { font-size: 12px; font-weight: 700; color: #fff; border-radius: 999px; padding: 2px 9px; }
.cip-zona.z0 { background: var(--z0); color: #2B2000; } .cip-zona.z1 { background: var(--z1); }
.sat { margin-left: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.parkiranje.puno .sat { font-size: 24px; line-height: 1.1; }
.parkiranje.uskoro .sat { color: #B54708; }
.parkiranje.isteklo .sat { color: #B42318; }
.parkiranje-meta { margin-top: 4px; font-size: 12.5px; color: var(--blijedo); }
.traka { height: 5px; background: #eceef1; border-radius: 5px; margin: 6px 0 8px; overflow: hidden; }
.traka i { display: block; height: 100%; background: var(--naglasak); }
.parkiranje.uskoro .traka i { background: var(--z0); } .parkiranje.isteklo .traka i { background: #D92D20; }
.parkiranje-gumbi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.parkiranje-gumbi a, .parkiranje-gumbi button {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; padding: 4px; border: 0; border-radius: 10px;
  background: #eef2f8; color: var(--naglasak); font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1.15; text-decoration: none;
}
.parkiranje-gumbi a.glavni { background: var(--naglasak); color: #fff; }
.parkiranje-napomena { margin: 6px 0 0; font-size: 11.5px; color: var(--blijedo); }
.parkiranje-napomena.z0 { color: #7a4f00; }
/* nema mjesta iznad kartice: parkiranja ispod zaglavlja; dok je kartica otvorena samo sažeto (dodir spušta karticu) */
body[data-parkiranja-gore] .parkiranja { top: calc(var(--vrh) + 64px); bottom: auto; right: 72px; gap: 6px; }
body[data-parkiranja-gore]:has(.kartica[data-otvoreno="true"]) .parkiranje { padding: 6px 10px; cursor: pointer; }
body[data-parkiranja-gore]:has(.kartica[data-otvoreno="true"]) .parkiranje-detalji { display: none; }
/* obavijest ispod parkiranja kad su ona na vrhu */
body[data-parkiranja-gore] .obavijest { top: auto; bottom: calc(var(--visina-kartice, 190px) + 14px); }
@media (min-width: 760px) {
  .parkiranja { left: 432px; right: auto; width: 360px; bottom: 16px; }
  body[data-parkiranja-gore] .parkiranja { top: auto; bottom: 16px; }
}

/* opći donji prozor (kalendar, vozilo, auto) */
.prozor h2 { margin: 0 0 8px; font-size: 19px; }
.prozor p { margin: 0 0 12px; font-size: 14.5px; }
.prozor .gumb-glavni { margin-top: 8px; }
.prozor .gumb-glavni.sekundarni { min-height: 48px; font-size: 15.5px; text-decoration: none; }
.prozor .zatvori { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: none; font-size: 26px; color: var(--blijedo); }
.polje { display: grid; gap: 4px; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--blijedo); }
.polje input, .polje select {
  min-height: 46px; padding: 0 12px; border: 1px solid #d5d9e0; border-radius: 12px; background: #fff;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--tekst);
}
.polje input.oznaka { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.polje-naslov { margin: 4px 0 6px; font-size: 13.5px; font-weight: 600; color: var(--blijedo); }

/* Moja vozila */
.moje { overflow-y: auto; overscroll-behavior: contain; max-height: 34dvh; transition: max-height .3s ease; }
.kartica[data-otvoreno="true"] .moje { max-height: 62dvh; }
.moje-dio { padding: 2px 0 14px; }
.moje-dio + .moje-dio { border-top: 1px solid #eceef1; padding-top: 12px; }
.moje h2 { margin: 0 0 8px; font-size: 16.5px; }
.prekidac.mali { min-height: 40px; font-size: 14px; color: #344054; }
.gumb-mali.blok { width: 100%; margin-top: 8px; }
.vozilo { display: flex; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid #eef0f3; }
.vozilo-odaberi { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 50px; padding: 0; border: 0; background: none; text-align: left; }
.vozilo-drzava { flex: none; min-width: 30px; text-align: center; font-size: 11px; font-weight: 800; color: #fff; background: #1d4ed8; border-radius: 4px; padding: 2px 4px; }
.vozilo-drzava.izvan-eu { background: #475467; }
.vozilo b { display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15.5px; }
.vozilo small { display: block; font-size: 12.5px; color: var(--blijedo); }
.vozilo-obrisi { flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--blijedo); display: grid; place-items: center; }
.vozilo-obrisi svg, .auto-gumbi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auto-kartica .auto-red { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.auto-kartica b { display: block; font-size: 15.5px; }
.auto-kartica small { display: block; font-size: 12.5px; color: var(--blijedo); }
.auto-gumbi { display: grid; grid-template-columns: 1fr 1fr 48px; gap: 8px; margin-bottom: 4px; }
.auto-gumbi.dva { grid-template-columns: 1fr 1fr; }
.auto-gumbi a, .auto-gumbi button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 4px 8px; border: 0; border-radius: 12px;
  background: #e8f0fb; color: var(--naglasak); font: inherit; font-size: 14.5px; font-weight: 650; text-decoration: none;
}
.auto-gumbi .glavni { background: var(--naglasak); color: #fff; }
.dani { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.dani button { min-height: 40px; border: 1.5px solid #cfd6e2; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; }
.dani button[aria-pressed="true"] { border-color: var(--naglasak); background: #e8f0fb; color: var(--naglasak); }
.re-gumbi button.glavni { background: var(--naglasak); color: #fff; }
.re-gumbi button:disabled { opacity: .5; }
.stanarska-upozorenje { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: #fff6d6; border-left: 4px solid var(--z0); font-size: 13.5px; }
.stanarska-upozorenje.isteklo { background: #fde7e9; border-color: #D92D20; }
.stanarska-upozorenje b { display: block; font-size: 14px; }
#stanarska-upozorenje { padding: 6px 10px; } #stanarska-upozorenje small { display: none; } /* u "Moja zona" samo jedan redak */
.stanarska-upozorenje button { margin-left: auto; flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; color: var(--naglasak); font-weight: 650; font-size: 13.5px; }

/* oznaka auta na karti (povlači se prstom) */
.auto-oznaka { width: 40px; height: 40px; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); background: #D92D20; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); border: 2.5px solid #fff; display: grid; place-items: center; cursor: grab; }
.auto-oznaka svg { width: 22px; height: 22px; transform: rotate(45deg); fill: #fff; }
@media (prefers-reduced-motion: reduce) { .parkiranja, .moje { transition: none; } }

/* ---------- prozor „Novo” (jednom po velikoj verziji; odluka autora 14. 10. 2026.) ---------- */
.prozor { max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }
/* tipkovnica (upis imena, tablice): prozor ide iznad nje; --tipkovnica postavlja js/app.js (visualViewport) */
.prozor { bottom: var(--tipkovnica, 0px); max-height: calc(90dvh - var(--tipkovnica, 0px)); }
.novo-oznaka { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: #e8f0fb; color: var(--naglasak); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.prozor.novo h2 { font-size: 21px; line-height: 1.2; padding-right: 30px; }
.novo-popis { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.novo-popis li { display: flex; gap: 11px; align-items: flex-start; }
.novo-popis i { flex: none; width: 30px; height: 30px; border-radius: 9px; background: #f0f4fa; display: grid; place-items: center; font-style: normal; font-size: 16px; }
.novo-popis b { display: block; font-size: 14.5px; line-height: 1.3; }
.novo-popis small { display: block; font-size: 12.5px; color: var(--blijedo); }
.prozor .novo-zahvala { margin: 0 0 8px; font-size: 13.5px; }
.prozor .novo-kraj { margin: 0 0 4px; font-size: 13px; color: var(--blijedo); }
.novo-redak { margin: 4px 0 0; background: #f4f8fd; color: var(--naglasak); font-weight: 650; }
.novo-molba { margin: 0 0 12px; padding: 12px; border-radius: 14px; background: #FEF3F2; border: 1.5px solid #FDA29B; }
.novo-molba b { display: block; font-size: 15px; color: #B42318; }
.prozor .novo-molba p { margin: 4px 0 8px; font-size: 13.5px; }
.novo-molba .gumb-glavni.sekundarni { margin-top: 0; min-height: 44px; background: #fff; color: #B42318; box-shadow: inset 0 0 0 1.5px #B42318; }

/* ---------- QA 14. 10. 2026.: dodirne zone najmanje 44 px (HR | EN, Prijavi) ---------- */
.jezik button { min-width: 44px; height: 44px; font-size: 13.5px; }
.gumb-prijavi { height: 46px; border-radius: 23px; }
.ime { white-space: nowrap; }
.parkiranje-gumbi a.glavni { white-space: nowrap; }
@media (max-width: 380px) { .ime { padding: 7px 11px; } .jezik button { min-width: 40px; } .zaglavlje { gap: 8px; } }

/* ---------- Telegram grupa (odluka autora 14. 10. 2026.) ---------- */
.ik-telegram { background: #E3F2FD; color: #229ED9; }
#poveznica-telegram { text-decoration: none; margin-top: 8px; }
#telegram-napomena { margin: 4px 2px 0; }

/* ---------- PWA: nova verzija i instalacija (odluka autora 15. 10. 2026.) ---------- */
.nova-verzija {
  position: fixed; z-index: 9; left: 12px; right: 12px; top: calc(var(--vrh) + 60px); max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: #1f2328; color: #fff;
  font-size: 14.5px; box-shadow: var(--sjena);
}
.nova-verzija button { margin-left: auto; flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: #fff; color: var(--naglasak); font-weight: 700; }
.instalacija .gumb-glavni { margin-top: 8px; text-decoration: none; }
.koraci { margin: 6px 0 0; padding-left: 22px; font-size: 14px; } .koraci li { margin: 4px 0; }

/* tab „Moje”: ime korisnika i olovčica */
#tab-ime { display: inline-block; max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
#tab-vozila .olovka { display: inline-block; margin-left: 5px; padding: 2px 4px; font-size: 0.85em; opacity: 0.75; }
#ime-polje { width: 100%; min-height: 48px; font-size: 18px; padding: 10px 12px; border: 1.5px solid #c9ced6; border-radius: 12px; margin: 6px 0 12px; }