/* =====================================================================================
   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; }