/* =====================================================================================
   kaza.rs — JEDAN SISTEM POLJA (korak 2 od 3, 05.09.2026.)

   Tokeni su u css/tema-tokens.css (korak 1, već pušten). Ovaj fajl ih koristi.
   Učitava se u header.php POSLE modals.css, dakle posle style.css i posle svih listova iz pages.
   Redosled je NOSIV: više pravila dole pobeđuje style.css samo zato što ima istu
   specifičnost i učitava se kasnije.

   Preuzimanje: element dobije class="kz-field" (input/select/textarea) ili
   class="kz-choice-input" (checkbox/radio). Ništa se ne prepisuje.

   Zatečeno stanje koje ovo zamenjuje, izmereno uživo na naslovnoj:
     Ulica / Broj / Grad   48px, zaobljenje 0, ivica 2px #8b929e, slog 15 w400
     dva izbornika         44px, zaobljenje 6,5, ivica 1,5px, slog 15 w600
   Pretraga u heroju je namerni IZUZETAK i ostaje pilula (v. korak 3).
   ===================================================================================== */

/* GDE IDE: NOVI css/components/field.css, učitan u header.php odmah uz components/modals.css
   (red ~248), dakle POSLE style.css i POSLE pages/home.css. Redosled je NOSIV: više pravila
   dole pobeđuje style.css samo zato što ima istu specifičnost (0,2,1) i učitava se kasnije.
   Blok :root iz „tokeni“ ide u tema-tokens.css. Provereno u renderu (mock sa kopiranim
   živim pravilima iz style.css) na 390, 800 i 1280; brojevi u komentarima su OČITANI. */

/* B1. Osnova: text, search, number, tel, password, email, select, textarea.
   Specifičnost (0,1,1) namerno: pobeđuje globalno `input,select,textarea` (0,0,1) iz
   style.css 1781; stanja ispod su (0,2,1) da bi POSLE učitavanja pobedila
   `input:hover:not(.field-invalid)` (0,2,1) 1853 i `input:focus:not(.field-invalid)` 1859. */
input.kz-field,
select.kz-field,
textarea.kz-field {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: var(--kz-field-h);
  margin: 0;
  padding: 0 var(--kz-field-px);
  border: var(--kz-field-bw) solid var(--kz-field-border);
  border-radius: var(--kz-field-r);
  background-color: var(--kz-field-bg);
  color: var(--kz-field-fg);
  font-family: var(--kz-field-font);
  font-size: var(--kz-field-fs);
  font-weight: var(--kz-field-fw);
  line-height: var(--kz-field-lh);
  letter-spacing: -0.005em;
  caret-color: var(--kz-field-caret);
  outline: none;                 /* prsten crta :focus-visible ispod */
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--kz-field-t) var(--kz-field-ease),
              background-color var(--kz-field-t) var(--kz-field-ease);
}

/* placeholder: JEDNA boja, ne bledi na fokus. !important je NUŽAN: style.css 1998
   `input::-webkit-input-placeholder{color:… !important}` inače pobeđuje i vraća hladnu
   #6b7280 (IZMERENO u renderu: bez !important očitano rgb(107,114,128)). */
input.kz-field::placeholder,
textarea.kz-field::placeholder,
input.kz-field::-webkit-input-placeholder,
textarea.kz-field::-webkit-input-placeholder {
  color: var(--kz-field-placeholder) !important;
  opacity: 1;
  font-weight: var(--kz-field-fw);
}

/* B2. Po tipovima */

/* search: bez sistemskog X (imamo .search-clear-btn), mesto za njega desno.
   view_home.php 127 i header.php 1302 nose inline style="-webkit-appearance:searchfield"
   na ne-računarima; inline pobeđuje appearance:none, ali uz belu pozadinu i našu ivicu
   ne crta ništa vidljivo (tako je i danas pod P6). */
input.kz-field[type="search"] {
  padding-right: var(--kz-field-pad-icon);
}
input.kz-field[type="search"]::-webkit-search-cancel-button,
input.kz-field[type="search"]::-webkit-search-decoration,
input.kz-field[type="search"]::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* number: brojke iste širine, bez strelica (cene/kvadrati se kucaju; tastaturu na
   telefonu daje inputmode="numeric" u markupu) */
input.kz-field[type="number"] {
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
input.kz-field[type="number"]::-webkit-outer-spin-button,
input.kz-field[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* tel: brojke iste širine, uvek s leva na desno */
input.kz-field[type="tel"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  direction: ltr;
}

/* password: tačkice razmaknute SAMO kad ima sadržaja; placeholder ostaje normalan */
input.kz-field[type="password"]:not(:placeholder-shown) {
  letter-spacing: 0.08em;
}

/* select: sopstvena strelica (mastilo), mesto za nju desno, dug tekst se seče */
select.kz-field {
  padding-right: var(--kz-field-pad-icon);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1f2a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--kz-field-icon-x) center;
  background-size: var(--kz-field-icon) var(--kz-field-icon);
}
select.kz-field::-ms-expand { display: none; }
/* prazan izbor („Izaberi…“, value="") čita se kao placeholder (očitano: rgb(111,106,96) prazan, rgb(27,31,42) izabran) */
select.kz-field:has(option[value=""]:checked) {
  color: var(--kz-field-placeholder);
}
select.kz-field option {
  color: var(--kz-field-fg);
}

/* textarea: visina po sadržaju, ne 48 */
textarea.kz-field {
  height: auto;
  min-height: var(--kz-field-min-lines);
  padding: var(--kz-field-py) var(--kz-field-px);
  line-height: 1.5;
  resize: vertical;
  overflow: auto;
}

/* B3. Stanja */

/* hover: tamnija ivica, ništa drugo (readonly/disabled ne reaguju). Specifičnost (0,4,1)
   pobeđuje style.css 1853 (0,2,1) bez obzira na redosled. */
input.kz-field:hover:not(:disabled):not([readonly]),
select.kz-field:hover:not(:disabled),
textarea.kz-field:hover:not(:disabled):not([readonly]) {
  border-color: var(--kz-field-border-hover);
}

/* focus (i mišem): ivica mastilo, bez plavog i bez 1px senke iz style.css 1859 */
input.kz-field:focus,
select.kz-field:focus,
textarea.kz-field:focus {
  border-color: var(--kz-field-border-focus);
  outline: none;
  box-shadow: none;
}

/* focus-visible: PUN prsten preko outline (ne box-shadow, da ne ratuje sa autofill senkom).
   outline prati border-radius (Chrome 94+, Safari 16.4+, FF 88+); na starijem Safariju je
   pravougaon, ali pun i vidljiv. Bez tranzicije: tastaturi treba odmah.
   OČITANO: outline "rgb(27,31,42) solid 2px", outline-offset 2px, :focus-visible true. */
input.kz-field:focus-visible,
select.kz-field:focus-visible,
textarea.kz-field:focus-visible {
  outline: var(--kz-field-ring-w) solid var(--kz-field-ring);
  outline-offset: var(--kz-field-ring-gap);
}

/* popunjeno: NIJE posebna ivica. Razlika je slog: placeholder #6f6a60 → sadržaj #1b1f2a,
   kursor opeka. Pravilo postoji da niko kasnije ne doda „popunjeno = zelena ivica“. */
input.kz-field:not(:placeholder-shown),
textarea.kz-field:not(:placeholder-shown) {
  color: var(--kz-field-fg);
}

/* samo za čitanje: meka podloga, meka ivica, tekst PUN (čita se), bez hover reakcije;
   fokus je moguć (kopiranje), pa prsten ostaje */
input.kz-field[readonly],
textarea.kz-field[readonly] {
  background-color: var(--kz-field-bg-soft);
  border-color: var(--kz-field-border-soft);
  color: var(--kz-field-fg);
  cursor: default;
}

/* onemogućeno: !important na ivici SAMO zato što style.css 1800
   `input[disabled]:hover{border:1px solid var(--border)!important}` vraća hladnu #d1d5db */
input.kz-field:disabled,
select.kz-field:disabled,
textarea.kz-field:disabled {
  background-color: var(--kz-field-bg-soft);
  border-color: var(--kz-field-border-soft) !important;
  color: var(--kz-field-fg-soft);
  -webkit-text-fill-color: var(--kz-field-fg-soft);   /* Safari inače ignoriše color na disabled */
  cursor: not-allowed;
  opacity: 1;                                          /* iOS spušta na .4, mi držimo boju */
}
select.kz-field:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c808b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
input.kz-field:disabled::placeholder,
textarea.kz-field:disabled::placeholder {
  color: var(--kz-field-fg-soft) !important;
}

/* greška: ivica opeka, bez senke. !important je NUŽAN: style.css 2184–2197 daje
   `border-color: var(--destructive) !important; box-shadow: 0 0 0 1px … !important` na (0,2,1);
   ovde je (0,2,1)/(0,3,1) i učitava se kasnije, pa pobeđuje. OČITANO: rgb(200,51,44), shadow none. */
input.kz-field.field-invalid,
select.kz-field.field-invalid,
textarea.kz-field.field-invalid,
input.kz-field.field-invalid:hover,
select.kz-field.field-invalid:hover,
textarea.kz-field.field-invalid:hover,
input.kz-field.field-invalid:focus,
select.kz-field.field-invalid:focus,
textarea.kz-field.field-invalid:focus {
  border-color: var(--kz-field-error) !important;
  box-shadow: none !important;
}
/* greška + tastatura: prsten ostaje mastilo (jedan prsten za ceo sajt), ivica ostaje opeka */
input.kz-field.field-invalid:focus-visible,
select.kz-field.field-invalid:focus-visible,
textarea.kz-field.field-invalid:focus-visible {
  outline: var(--kz-field-ring-w) solid var(--kz-field-ring) !important;
  outline-offset: var(--kz-field-ring-gap);
}

/* autofill: WebKit boji pozadinu i menja boju teksta. Neutralizacija = inset senka 1000px u
   boji polja + text-fill-color + beskonačno duga tranzicija pozadine. Zato prsten NIJE
   box-shadow: ovde bi ga pregazio. */
input.kz-field:-webkit-autofill,
input.kz-field:-webkit-autofill:hover,
input.kz-field:-webkit-autofill:focus,
textarea.kz-field:-webkit-autofill,
select.kz-field:-webkit-autofill {
  -webkit-text-fill-color: var(--kz-field-fg);
  -webkit-box-shadow: 0 0 0 1000px var(--kz-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--kz-field-bg) inset !important;
  caret-color: var(--kz-field-caret);
  transition: background-color 600000s 0s;
}
input.kz-field:autofill,
textarea.kz-field:autofill,
select.kz-field:autofill {
  -webkit-text-fill-color: var(--kz-field-fg);
  box-shadow: 0 0 0 1000px var(--kz-field-bg) inset !important;
}
/* autofill + readonly/disabled: meka podloga, ne bela */
input.kz-field[readonly]:-webkit-autofill,
input.kz-field:disabled:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--kz-field-bg-soft) inset !important;
  box-shadow: 0 0 0 1000px var(--kz-field-bg-soft) inset !important;
}

/* B4. Izbor: checkbox i radio (native input + klasa; MDL markup .mdl-checkbox__input je kasnija migracija) */
input.kz-choice-input {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--kz-choice-size);
  height: var(--kz-choice-size);
  margin: 0;
  padding: 0;
  border: var(--kz-choice-bw) solid var(--kz-field-border);
  border-radius: var(--kz-choice-r);
  background-color: var(--kz-field-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  vertical-align: middle;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--kz-field-t) var(--kz-field-ease),
              background-color var(--kz-field-t) var(--kz-field-ease);
}
input.kz-choice-input[type="radio"] {
  border-radius: 50%;
}
input.kz-choice-input:hover:not(:disabled) {
  border-color: var(--kz-field-border-hover);
}
input.kz-choice-input:focus-visible {
  outline: var(--kz-field-ring-w) solid var(--kz-field-ring);
  outline-offset: var(--kz-field-ring-gap);
}
/* štiklirano: opeka + bela kvačica (OČITANO: rgb(200,51,44), 20px) */
input.kz-choice-input[type="checkbox"]:checked {
  border-color: var(--kz-field-accent);
  background-color: var(--kz-field-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.2l2.8 2.8 6.2-6.4'/%3E%3C/svg%3E");
}
/* izabrano: opeka obod, beli prsten, opeka tačka (inset senka, ne pseudo-element) */
input.kz-choice-input[type="radio"]:checked {
  border-color: var(--kz-field-accent);
  background-color: var(--kz-field-accent);
  box-shadow: inset 0 0 0 4px var(--kz-field-bg);
}
input.kz-choice-input:disabled {
  border-color: var(--kz-field-border-soft);
  background-color: var(--kz-field-bg-soft);
  cursor: not-allowed;
}
input.kz-choice-input:disabled:checked {
  border-color: var(--kz-field-border-soft);
  background-color: var(--kz-field-border-soft);
}
input.kz-choice-input.field-invalid {
  border-color: var(--kz-field-error) !important;
  box-shadow: none !important;
}
input.kz-choice-input[type="radio"].field-invalid:checked {
  box-shadow: inset 0 0 0 4px var(--kz-field-bg) !important;
}
/* natpis uz izbor: klik na tekst je klik na kutiju; dodirna meta 44px (24 red + 2×10) */
.kz-choice {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  margin: 0;
  min-height: 44px;
  font-family: var(--kz-field-font);
  font-size: var(--kz-choice-fs);
  font-weight: 500;
  line-height: 1.5;
  color: var(--kz-field-fg);
  cursor: pointer;
  user-select: none;
}
.kz-choice > input.kz-choice-input { margin-top: 1px; }
.kz-choice:has(input:disabled) { color: var(--kz-field-fg-soft); cursor: not-allowed; }

/* B5. Pomoćni delovi: omotač, natpis, ikona, pomoć, greška, brojač */
.kz-fieldwrap {
  display: grid;
  align-content: start;   /* bez ovoga se u razvučenoj ćeliji roditelja textarea trak razvuče (VIĐENO u renderu) */
  gap: var(--kz-field-gap);
  min-width: 0;
  font-family: var(--kz-field-font);
}
.kz-label {
  display: block;
  margin: 0;
  font-family: var(--kz-field-font);
  font-size: var(--kz-field-label-fs);
  font-weight: var(--kz-field-label-fw);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--kz-field-label-fg);
}
.kz-label .kz-req { color: var(--kz-field-error); font-weight: 700; margin-left: 2px; }
/* ikona u polju: omotač oko polja, ikona levo, polje dobija levi razmak */
.kz-field-box {
  position: relative;
  min-width: 0;
}
.kz-field-box > .kz-field-icon {
  position: absolute;
  top: 50%;
  left: var(--kz-field-icon-x);
  width: var(--kz-field-icon);
  height: var(--kz-field-icon);
  transform: translateY(-50%);
  color: var(--kz-field-label-fg);
  pointer-events: none;
  display: block;
}
.kz-field-box > .kz-field-icon > svg { width: 100%; height: 100%; display: block; stroke-width: 2; }
.kz-field-box > .kz-field-icon + input.kz-field,
.kz-field-box > .kz-field-icon + select.kz-field {
  padding-left: var(--kz-field-pad-icon);
}
.kz-field-box > .kz-field-icon + textarea.kz-field { padding-left: var(--kz-field-pad-icon); }
.kz-field-box:has(> textarea.kz-field) > .kz-field-icon { top: var(--kz-field-py); transform: none; }
.kz-field-box:focus-within > .kz-field-icon { color: var(--kz-field-fg); }

/* red ispod polja: pomoć/greška levo, brojač desno */
.kz-field-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.kz-help {
  margin: 0;
  font-size: var(--kz-field-help-fs);
  line-height: 1.45;
  color: var(--kz-field-help-fg);
}
/* greška: skrivena dok polje ne dobije .field-invalid (ili omotač .is-invalid iz JS-a);
   pomoć se tada sklanja da red ne raste. */
.kz-error {
  display: none;
  margin: 0;
  font-size: var(--kz-field-help-fs);
  font-weight: 500;
  line-height: 1.45;
  color: var(--kz-field-error-text);
}
.kz-fieldwrap.is-invalid .kz-error,
.kz-fieldwrap:has(.field-invalid) .kz-error { display: block; }
.kz-fieldwrap.is-invalid .kz-help,
.kz-fieldwrap:has(.field-invalid) .kz-help { display: none; }
/* brojač: brojke iste širine, mirna boja, opeka tek preko granice (JS dodaje .is-over) */
.kz-count {
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  font-size: var(--kz-field-count-fs);
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--kz-field-help-fg);
}
.kz-count.is-over { color: var(--kz-field-error-text); font-weight: 700; }

/* B6. Pokret */
@media (prefers-reduced-motion: reduce) {
  input.kz-field, select.kz-field, textarea.kz-field, input.kz-choice-input { transition-duration: 1ms; }
}

/* B7. Širine: NAMERNO PRAZNO za mere polja. 48/12/1/16 su isti na 390, 800 i 1280
   (OČITANO na 390: polje 302×48, font 16px, scrollWidth 390 = bez prelivanja).
   Jedina razlika po širini je hero pilula (P6: 64 → 60 na ≤750), rešena tokenom u C2. */

/* ================= C) NASLOVNA: preuzimanje i IZUZETAK ================= */

/* C1. Adresni obrazac i dva izbornika: markup dobija class="kz-field" na 5 mesta
   (view_home.php 186, 187, 188, 358, 377). Iz home.css se BRIŠU 849–851 (input pravila)
   i iz 1003–1006 sve osim rasporeda; raspored ostaje ovde. Posle toga regenerisati
   css/critical-home.css (header.php 199), jer inline kritični CSS danas duplira stara
   .hp-ev-field input pravila i bljesnuo bi starom ivicom do učitavanja. */
.hp-ev-field-no > input.kz-field { --kz-field-px: 12px; }   /* 84px kutija: 16 sa svake strane guši „Broj“ */
select.hp-rx-select.kz-field { flex: 1 1 auto; width: 100%; min-width: 0; }
/* natpisi uz izbornike prelaze na sistemski natpis (bez uppercase i tracking-widest) */
.hp-rx-hood-lbl, .hp-rx-other-lbl {
  font-family: var(--kz-field-font);
  font-size: var(--kz-field-label-fs);
  font-weight: var(--kz-field-label-fw);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--kz-field-label-fg);
}
.hp-rx-hood-lbl { margin-bottom: var(--kz-field-gap); }

/* C2. IZUZETAK: pretraga u heroju je ISTO polje u „hero“ veličini. Nosač
   (.input-location-container) JESTE polje, <input> unutra je samo tekst. Nosač uzima iste
   tokene i menja TRI: visinu (48→64), zaobljenje (12→999) i ivicu (1px→0, jer je zamenjuje
   uzdignuće e2 iz P6). Ovo ZAMENJUJE odgovarajuće deklaracije u p6.min.css (mora da se učita
   posle njega ili da se upiše u njega; sve je unutar .hompage-content, pa --kz-e3 postoji). */
.home-page .hompage-content .input-location-container {
  --kz-field-h: 64px;
  --kz-field-r: 999px;
  --kz-field-bw: 0px;
  height: var(--kz-field-h) !important;
  border-radius: var(--kz-field-r) !important;
  border: var(--kz-field-bw) solid transparent !important;
  transition: box-shadow var(--kz-field-t) var(--kz-field-ease),
              transform var(--kz-field-t) var(--kz-field-ease) !important;
}
/* prsten: PUN, isti mehanizam (outline). P6 je imao 0 0 0 1px rgba(27,31,42,.40) +
   0 0 0 5px rgba(27,31,42,.10): providan, pada 1.4.11 */
.home-page .hompage-content .input-location-container:focus-within {
  outline: var(--kz-field-ring-w) solid var(--kz-field-ring) !important;
  outline-offset: var(--kz-field-ring-gap) !important;
  box-shadow: inset 0 1px 0 #fff, var(--kz-e3) !important;
}
.home-page .hompage-content .SearchForm__input {
  font-family: var(--kz-field-font) !important;
  color: var(--kz-field-fg) !important;
  caret-color: var(--kz-field-caret);
  /* 17px/500 je P6-ova hero veličina i ostaje deo izuzetka; ako se traži strogo 16/400, menjaju se ta dva broja u p6.min.css */
}
.home-page .hompage-content .SearchForm__input::placeholder {
  color: var(--kz-field-placeholder) !important;   /* P6 --kz-ink-3 = 3,95:1, pada */
}
.home-page .hompage-content .input-location-container:focus-within .SearchForm__input::placeholder {
  color: var(--kz-field-placeholder) !important;   /* P6 bledi na #a9acb4 (~2,5:1); ne bledimo */
}
@media (max-width: 750px) {
  .home-page .hompage-content .input-location-container { --kz-field-h: 60px; }   /* P6 vrednost, ne nova */
  /* na fotografiji prsten mastila nestaje u tami: PUN beli, ne rgba(255,255,255,.35). Kontrast prema fotografiji PROVERITI u renderu uživo. */
  .home-page .hompage-content .input-location-container:focus-within {
    outline-color: #ffffff !important;
  }
}

/* -------------------------------------------------------------------------------------
   ZAOBLJENJE NA TELEFONU — zašto udvojena klasa

   style.css 4343-4345, unutar @media (max-width:440px):
       input:not([type=checkbox]):not([type=radio]) { border-radius: 0 !important }
   Specifičnost tog selektora je (0,2,1). `input.kz-field` je (0,1,1) i GUBI čak i sa
   !important, jer specifičnost odlučuje pre redosleda kad oba imaju !important.
   Udvojena klasa daje (0,2,1), pa odlučuje redosled, a field.css se učitava kasnije.

   Provereno uživo na 375px u četiri stanja:
     bez popravke 0px · samo !important 0px · ovako 12px · po uklanjanju opet 0px
   ------------------------------------------------------------------------------------- */
input.kz-field.kz-field { border-radius: var(--kz-field-r) !important; }

/* -------------------------------------------------------------------------------------
   DODAVANJE I IZMENA OGLASA (.add-page) — preuzimanje bez diranja šablona

   Polja tamo su VEĆ 48px visine, slog 16px i ivica 1px (izmereno uživo na /add/location),
   pa se ovde menja samo ono što se razlikuje od sistema: zaobljenje 8 → 12 i hladna ivica
   #8b929e → topla #857c6e. Visina, razmaci i slog se NE diraju, da se levak ne pomeri.
   Levak pada sa 257 na 4, pa je svaka nepotrebna izmena tamo rizik bez dobitka.

   Zašto pravilo, a ne class="kz-field" na 58 mesta u view_add_edit_functions.php:
   taj fajl dele dodavanje i izmena, pa je jedno pravilo lakše proveriti i vratiti.

   Specifičnost: `.add-page input[type="text"]` je (0,2,1), isto kao
   `input:not([type=checkbox]):not([type=radio])` iz style.css 4343, ali field.css se
   učitava kasnije, pa pobeđuje po redosledu i ispod 440px.

   IZUZETI: telefon (intlTelInput crta svoj raspored oko polja) i skriveni unos Dropzone-a.
   ------------------------------------------------------------------------------------- */
.add-page input[type="text"]:not(.custom-phone-input):not(.dz-hidden-input),
.add-page input[type="number"],
.add-page input[type="email"],
.add-page input[type="search"],
.add-page select,
.add-page textarea {
    border-radius: var(--kz-field-r) !important;
    border-color: var(--kz-field-border);
    caret-color: var(--kz-field-caret);
}

.add-page input[type="text"]:not(.custom-phone-input):not(.dz-hidden-input):hover,
.add-page input[type="number"]:hover,
.add-page select:hover,
.add-page textarea:hover {
    border-color: var(--kz-field-border-hover);
}

.add-page input[type="text"]:not(.custom-phone-input):not(.dz-hidden-input):focus-visible,
.add-page input[type="number"]:focus-visible,
.add-page select:focus-visible,
.add-page textarea:focus-visible {
    outline: var(--kz-field-ring-w) solid var(--kz-field-ring);
    outline-offset: var(--kz-field-ring-gap);
}

.add-page input::placeholder,
.add-page textarea::placeholder {
    color: var(--kz-field-placeholder) !important;
    opacity: 1;
}

/* -------------------------------------------------------------------------------------
   PROCENA (.procena-page)

   Dva nalaza izmerena uživo na 375:
   1) SVA polja su bila 15px. Ispod 16px iOS zumira celu stranu na dodir polja. To je
      kvar u korišćenju, ne kozmetika, i to na strani koja se šalje ljudima.
   2) `.val-addr-input` u view_valuation.php VEĆ traži zaobljenje 12px, ali ga ispod 440px
      gasi style.css 4343-4345 (`border-radius:0 !important`, specifičnost (0,2,1)).
      Zato ovde ide (0,2,1) + !important: `.procena-page input.val-addr-input`.

   Visine (51 i 45px) se NE diraju, obe su iznad 44 i raspored ostaje kakav jeste.
   ------------------------------------------------------------------------------------- */
.procena-page input.val-addr-input,
.procena-page .valuation-field input,
.procena-page .valuation-field select {
    font-size: 16px !important;
    border-radius: var(--kz-field-r) !important;
    border-color: var(--kz-field-border);
    caret-color: var(--kz-field-caret);
}

.procena-page input.val-addr-input:hover,
.procena-page .valuation-field input:hover,
.procena-page .valuation-field select:hover {
    border-color: var(--kz-field-border-hover);
}

.procena-page input.val-addr-input:focus-visible,
.procena-page .valuation-field input:focus-visible,
.procena-page .valuation-field select:focus-visible {
    outline: var(--kz-field-ring-w) solid var(--kz-field-ring);
    outline-offset: var(--kz-field-ring-gap);
}

.procena-page input.val-addr-input::placeholder {
    color: var(--kz-field-placeholder);
    opacity: 1;
}

/* -------------------------------------------------------------------------------------
   AGENCIJE (.agencies-page)

   Sva tri vidljiva polja bila su na 14px, a ispod 16px iOS zumira celu stranu na dodir.
   Menja se SAMO slog; visine (32, 44 i 37px) i raspored se ne diraju, jer su polja
   spojena u jednu traku pretrage pa bi promena visine razmakla red.
   ------------------------------------------------------------------------------------- */
.agencies-page .citycombo-input,
.agencies-page #agencies-q,
.agencies-page #agencies-sort-select {
    font-size: 16px !important;
}

/* -------------------------------------------------------------------------------------
   PROZOR ZA PRIJAVU I REGISTRACIJU (#signup-login-modal)

   Postoji na SVAKOJ strani i nosi 15 polja, sva skrivena dok se prozor ne otvori.
   Izmereno na 390 (prozor otkriven u pregledacu, bez ijednog upisa): sva polja su vec
   52px visine sa slogom 16px, dakle bez zumiranja na iOS-u i iznad dodirnog praga.

   Menja se samo ono sto odstupa od sistema: zaobljenje 0 -> 12 i hladna ivica #8b929e
   -> topla #857c6e (stara na pescanoj podlozi daje 2,48:1, ispod praga od 3:1).
   Visine i razmaci se NE diraju.
   ------------------------------------------------------------------------------------- */
#signup-login-modal input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
#signup-login-modal select,
#signup-login-modal textarea {
    border-radius: var(--kz-field-r) !important;
    border-color: var(--kz-field-border);
    caret-color: var(--kz-field-caret);
}

#signup-login-modal input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus-visible,
#signup-login-modal select:focus-visible,
#signup-login-modal textarea:focus-visible {
    outline: var(--kz-field-ring-w) solid var(--kz-field-ring);
    outline-offset: var(--kz-field-ring-gap);
}

/* -------------------------------------------------------------------------------------
   POSLEDNJA TRI POLJA KOJA ZUMIRAJU STRANU (06.09.2026)

   Ispod 16px iOS zumira celu stranu na dodir polja. Popis celog sajta na 390 je nasao
   jos tacno tri takva polja, svako na svojoj strani:

     /map/         #locationTextField (.search-input-row .searchbox)  15px, visina 36
     /trziste      #calcPrice (.calc-field input)                     15px, visina 48
     /my/settings  #select-email-language                             15px, visina 47

   Sva tri su stilizovana inline <style> blokovima u svojim sablonima, koji dolaze POSLE
   field.css u dokumentu. Zato je ovde !important nuzan, nije navika.

   Mapi se uz slog dize i visina sa 36 na 44 (dodirni prag).

   ISPRAVKA 13.09.2026. Prva verzija je digla samo polje na 44px i ostavila red
   (.search-input-row iz header.php) na 38px sa sivom ivicom. Polje je tada virilo 3px
   iznad i ispod reda i belom pozadinom PREKRILO gornju i donju liniju okvira, pa je
   pretraga na /map/ stajala bez ikakve ivice, na racunaru i na telefonu. Napomena
   „nista se ne sece" je bila tacna i promasila je stvar: okvir se ne sece, on nestane.

   Zato okvir sada nosi RED, kao kod ostalih polja gde roditelj crta ivicu, a polje
   unutra je 2px nize (dve ivice) i bez sopstvene ivice. Specificnost: red u header.php
   je (0,1,0) bez !important, polje (0,2,0) sa !important; ova pravila su jaca.

   Dve mere, jer su susedi razliciti (Vladan, 13.09.: „box u skladu sa ostalim"):
     telefon   (body.map-page-phone)  44px, ivica i zaobljenje iz tokena polja; pored
               njega je samo tekst „Filteri", a 44 je dodirni prag
     racunar   38px, ivica var(--border), zaobljenje 3px: TACNO kao susedni filteri
               .btn-header-items (style.css:1501), izmereno 38px na y=55; okvir na 44
               i 12px je stajao 3px iznad njih i vidno okrugliji
   ------------------------------------------------------------------------------------- */
.map-page .search-input-row {
    height: 44px;
    border: var(--kz-field-bw) solid var(--kz-field-border);
    border-radius: var(--kz-field-r);
}

.map-page .search-input-row:focus-within {
    border-color: var(--kz-field-border-focus);
}

.map-page .search-input-row .searchbox {
    font-size: 16px !important;
    height: 42px !important;
    min-height: 0 !important;
}

.map-page:not(.map-page-phone) .search-input-row {
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 3px;
}

.map-page:not(.map-page-phone) .search-input-row:focus-within {
    border-color: var(--input);
}

.map-page:not(.map-page-phone) .search-input-row .searchbox {
    height: 36px !important;
    border-radius: 3px !important;
}

.trziste-page .calc-field input,
.trziste-page .calc-field select {
    font-size: 16px !important;
}

.settings-page select#select-email-language {
    font-size: 16px !important;
}

/* -------------------------------------------------------------------------------------
   ZAOBLJENJA KOJA SU OSTALA VAN SISTEMA (06.09.2026)

   Popis na 390 je nasao pet strana sa zaobljenjem koje ne prati --kz-field-r (12px).
   Provera pozadine i ivice svakog polja odvaja stvarne od prividnih odstupanja:

     STVARNA (bela ispuna ili sopstvena ivica, ugao se VIDI)
       /map/         #locationTextField   0  -> 12
       /trziste      #invest-amount       0  -> 12   (roditelj mu je .invest-control, NE .calc-field;
                                                 prvi pokusaj ga je zato promasio. Inline kaze 10, globalno pravilo
       /trziste      #calcPrice           0  -> 12    input:not(...) ga gazi na 0)
       /my/settings  #select-email-language 8 -> 12
       /messages     #message-to-send     8  -> 12

     PRIVIDNA (providna pozadina, ivica 0, okvir nosi roditelj) - NE dirati
       /investitori  .citycombo-input   i  #agencies-q
       /investitori  #agencies-sort-select je namerna pilula 999px

   !important je nuzan jer sva ova polja gazi ili inline <style> u sablonu ili globalno
   input:not([type=checkbox]):not([type=radio]) iz style.css, oba jaca od jedne klase.
   ------------------------------------------------------------------------------------- */
.map-page .search-input-row .searchbox,
.trziste-page .calc-field input,
.trziste-page .calc-field select,
.settings-page select#select-email-language,
.messenger-page textarea.message-input {
    border-radius: var(--kz-field-r) !important;
}

/* -------------------------------------------------------------------------------------
   #invest-amount na /trziste: DVOSTRUKA KLASA, ne jedna

   Prvi pokusaj (.trziste-page .invest-amount-input) je pao iako ima !important. Uzrok je
   style.css, unutar @media (max-width: 440px):

       input:not([type="checkbox"]):not([type="radio"]) { border-radius: 0 !important; }

   To je (0,2,1) sa !important. Moje pravilo je bilo (0,2,0), pa je izgubilo po specificnosti,
   a redosled listova tu ne pomaze: kad su oba !important, prvo se poredi specificnost.
   Zato se klasa udvaja, isto kao kod input.kz-field.kz-field gore.

   Ostala cetiri polja su prosla jer su vec bila (0,2,1) ili jace: .calc-field input i
   textarea.message-input su izjednacena pa pobedjuju redosledom, .searchbox je (0,3,0),
   a select#select-email-language nosi id.
   ------------------------------------------------------------------------------------- */
.trziste-page input.invest-amount-input.invest-amount-input {
    border-radius: var(--kz-field-r) !important;
}

/* -------------------------------------------------------------------------------------
   SPISAK PREDLOGA ZA ADRESNA POLJA (.kz-ac-list) — 06.09.2026.

   Crta ga js/address-autocomplete.js. Namerno je odvojen od .val-ac-list sa /procena:
   ona strana radi i ne dira se, a ovde su dve stvari drugacije.

     1. Red je najmanje 44px visok. Na /procena je 11px razmaka uz slog 14,5px, sto
        ispadne oko 40px, ispod praga koji vazi na celom sajtu.
     2. Klasa .kz-ac-up okrece spisak NAGORE. Na telefonu tastatura pojede donju
        polovinu ekrana, pa spisak ispod polja zavrsi van vidljivog dela. JS meri
        mesto i dodaje tu klasu samo kad ispod stvarno nema prostora.

   Spisak visi na <body>, ne u kartici, pa ga nijedan overflow ne sece i ne treba mu
   trka sa z-indeksima susednih slojeva.
   ------------------------------------------------------------------------------------- */
.kz-ac-list {
    position: absolute;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--popover, #fff);
    border: 1px solid var(--border);
    border-radius: var(--kz-field-r, 12px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 15px
}

.kz-ac-list.kz-ac-up {
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .14)
}

.kz-ac-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 9px;
    cursor: pointer;
    color: var(--secondary-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.kz-ac-list li.active,
.kz-ac-list li:hover {
    background: var(--accent)
}

.kz-ac-list li b {
    font-weight: 600;
    color: var(--foreground)
}

.kz-ac-grad {
    color: var(--muted-foreground)
}