/* ============================================================
   NINS — forma za predlog lokala
   VERZIJA 2 — geometrija i boje preuzete sa kontakt stranice
   (nins-global-css, blok .nins-kontakt):

     kartica forme   border-radius 20px, pozadina krem, padding 40px
     polje i dugme   border-radius 9px
     naslov          font-weight 800, letter-spacing -.02em
     oznaka polja    13.5px / 600
     dugme           crveno, padding 14px 30px
     fokus           crvena ivica + 0 0 0 3px rgba(238,64,54,.1)

   Crvena je boja svih akcija na sajtu, pa je i ovde nosi dugme.
   Zelena ostaje samo tamo gde znaci nesto: izabran status dima.
   ============================================================ */

.nins-forma{
  font-family:var(--nins-font,'Inter',sans-serif);
  color:var(--nins-crna,#161314);
  max-width:780px;

  --nf-r-kartica:20px;
  --nf-r-polje:9px;
}

/* ---------- Mamac ----------
   Nije "display:none" — deo automata preskace polja skrivena tim
   svojstvom. Ovako je van ekrana, ali i dalje postoji u DOM-u.
   Isti stil je upisan i direktno u HTML, kao rezerva ako CSS ne stigne. */
.nins-forma .nf-mamac{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* ---------- Grupe ---------- */
.nins-forma .nf-grupa{
  background:var(--nins-krem,#FBFAF8);
  border:1px solid var(--nins-siva-linija,#E7E4E0);
  border-radius:var(--nf-r-kartica);
  padding:40px;
  margin:0 0 18px;
}
.nins-forma .nf-grupa > legend{
  font-size:clamp(19px,2.2vw,25px);
  font-weight:800;letter-spacing:-.02em;line-height:1.2;
  padding:0;margin-bottom:6px;
}
.nins-forma .nf-uvod{
  margin:0 0 22px;font-size:15.5px;line-height:1.6;
  color:var(--nins-siva-tekst,#6E6862);
}

/* ---------- Polja ---------- */
.nins-forma .nf-red{display:flex;flex-wrap:wrap;gap:0 20px}
.nins-forma .nf-red .nf-polje{flex:1 1 240px}

.nins-forma .nf-polje{margin:0 0 20px}
.nins-forma .nf-polje label{
  display:block;font-size:13.5px;font-weight:600;
  color:var(--nins-crna,#161314);margin-bottom:6px;
}
.nins-forma .nf-obavezno{color:var(--nins-crvena,#EE4036)}
.nins-forma .nf-opciono{
  font-weight:400;font-size:12.5px;
  color:var(--nins-siva-tekst,#6E6862);
}

.nins-forma input[type=text],
.nins-forma input[type=email],
.nins-forma textarea{
  width:100%;padding:14px 16px;
  font-family:inherit;font-size:15px;line-height:1.45;
  color:var(--nins-crna,#161314);
  background:var(--nins-bela,#fff);
  border:1px solid var(--nins-siva-linija,#E7E4E0);
  border-radius:var(--nf-r-polje);
  transition:border-color .2s, box-shadow .2s;
}
.nins-forma textarea{resize:vertical;min-height:130px;padding-top:16px}

.nins-forma input::placeholder,
.nins-forma textarea::placeholder{
  color:var(--nins-siva-tekst,#6E6862);opacity:.75;
}

.nins-forma input:focus,
.nins-forma textarea:focus{
  outline:none;
  border-color:var(--nins-crvena,#EE4036);
  box-shadow:0 0 0 3px rgba(238,64,54,.1);
}

.nins-forma .nf-pomoc{
  display:block;margin-top:6px;font-size:12.5px;line-height:1.5;
  color:var(--nins-siva-tekst,#6E6862);
}

/* ---------- Izbor ----------
   Zelena je ovde zato sto nosi znacenje: izabran status dima je
   ista informacija koju na mapi nosi zeleni pin. */
.nins-forma .nf-izbor{
  border:none;padding:0;margin:0 0 22px;
}
.nins-forma .nf-izbor legend{
  font-size:13.5px;font-weight:600;padding:0;margin-bottom:10px;
  color:var(--nins-crna,#161314);
}
.nins-forma .nf-cek{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:500;
  padding:10px 17px;margin:0 8px 8px 0;
  background:var(--nins-bela,#fff);
  border:1px solid var(--nins-siva-linija,#E7E4E0);
  border-radius:999px;cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.nins-forma .nf-cek:hover{border-color:var(--nins-siva-linija-jaca,#D8D4CF)}
.nins-forma .nf-cek input{margin:0;accent-color:var(--nins-zelena-tamna,#17713F)}
.nins-forma .nf-cek:focus-within{
  border-color:var(--nins-zelena,#1F9D57);
  box-shadow:0 0 0 3px rgba(31,157,87,.12);
}
.nins-forma .nf-cek:has(input:checked){
  border-color:var(--nins-zelena-tamna,#17713F);
  background:var(--nins-zelena-blaga,#E9ECE7);
}

/* ---------- Dugme ---------- */
.nins-forma .nf-dugmad{margin:0}
.nins-forma .nf-dugme{
  display:inline-block;text-decoration:none;cursor:pointer;
  background:var(--nins-crvena,#EE4036);color:#fff;
  font-family:inherit;font-size:15px;font-weight:600;
  padding:14px 30px;border:none;
  border-radius:var(--nf-r-polje);
  transition:background .2s, box-shadow .2s, transform .12s;
}
.nins-forma .nf-dugme:hover{
  background:var(--nins-crvena-tamna,#CE322E);color:#fff;
  box-shadow:0 14px 34px -20px rgba(238,64,54,.7);
}
.nins-forma .nf-dugme:active{transform:translateY(1px)}
.nins-forma .nf-dugme:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(238,64,54,.3);
}

.nins-forma .nf-napomena-obrada{
  font-size:12.5px;line-height:1.6;
  color:var(--nins-siva-tekst,#6E6862);
  margin:0 0 22px;max-width:64ch;
}

/* ---------- Poruke ---------- */
.nins-forma .nf-greska{
  background:#fdecea;
  border:1px solid rgba(238,64,54,.35);
  border-left:4px solid var(--nins-crvena,#EE4036);
  border-radius:var(--nf-r-polje);
  padding:15px 20px;margin:0 0 20px;
  font-size:14.5px;line-height:1.55;color:#8a1f18;
}

.nins-forma .nf-hvala{
  background:var(--nins-krem,#FBFAF8);
  border:1px solid var(--nins-siva-linija,#E7E4E0);
  border-left:4px solid var(--nins-zelena-tamna,#17713F);
  border-radius:var(--nf-r-kartica);
  padding:40px;
}
.nins-forma .nf-hvala h2{
  margin:0 0 12px;
  font-size:clamp(21px,2.4vw,28px);
  font-weight:800;letter-spacing:-.02em;line-height:1.2;
}
.nins-forma .nf-hvala p{
  margin:0 0 14px;font-size:15.5px;line-height:1.6;
  color:var(--nins-crna-topla,#231F20);
}
.nins-forma .nf-hvala-veze{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:24px 0 0;
}
.nins-forma .nf-veza{
  font-size:14.5px;color:var(--nins-crvena,#EE4036);
  text-decoration:underline;
}
.nins-forma .nf-veza:hover{color:var(--nins-crvena-tamna,#CE322E)}

/* ---------- Mobilni ---------- */
@media (max-width:640px){
  .nins-forma .nf-grupa,
  .nins-forma .nf-hvala{padding:28px 22px}
  .nins-forma .nf-red{gap:0}
  .nins-forma .nf-dugme{width:100%;text-align:center}
  .nins-forma .nf-hvala-veze{flex-direction:column;align-items:stretch}
  .nins-forma .nf-hvala-veze .nf-veza{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .nins-forma *{transition:none !important}
}