/* nekretnine/assets/predaja.css - obrazac predaje oglasa (nadopuna ns.css ljusci) */

.nk-wrap { max-width: 780px; margin: 0 auto; padding: 32px 20px 64px; }
.nk-wrap h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0 0 12px; }
.nk-uvod { color: #4a5568; margin: 0 0 28px; }

.nk-grupa { border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; margin: 0 0 20px; }
.nk-grupa legend { font-weight: 600; padding: 0 8px; color: #1e3a5f; }

.nk-polje { margin: 0 0 16px; position: relative; }
.nk-polje:last-child { margin-bottom: 0; }
.nk-polje label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.nk-polje input[type="text"],
.nk-polje input[type="email"],
.nk-polje select,
.nk-polje textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #cbd5e0;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.nk-polje textarea { resize: vertical; }
.nk-polje input:focus, .nk-polje select:focus, .nk-polje textarea:focus {
  outline: none; border-color: #1e3a5f; box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}
.nk-pomoc { display: block; font-size: 13px; color: #718096; margin-top: 6px; }

.nk-privola { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; font-size: 14px; }
.nk-privola input { margin-top: 3px; flex: 0 0 auto; }
.nk-privola label { line-height: 1.5; }

.nk-gumb { margin-top: 8px; }
.nk-link {
  background: none; border: 0; padding: 8px 0; margin-left: 12px;
  color: #1e3a5f; text-decoration: underline; cursor: pointer; font: inherit;
}

.nk-greska {
  margin-top: 16px; padding: 12px 14px; border-radius: 8px;
  background: #fff5f5; border: 1px solid #feb2b2; color: #822727;
}

/* Honeypot - skriven od korisnika, vidljiv botovima koji citaju DOM. */
.nk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Popis prijedloga autocompletea (ista klasa kao provjera-forma). */
.nk-polje .nc-auto {
  position: absolute; z-index: 20; left: 0; right: 0;
  background: #fff; border: 1px solid #cbd5e0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.nk-polje .nc-auto button {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  background: none; border: 0; border-bottom: 1px solid #edf2f7; font: inherit; cursor: pointer;
}
.nk-polje .nc-auto button:last-child { border-bottom: 0; }
.nk-polje .nc-auto button:hover { background: #f7fafc; }

#nk-slike-slot:empty { display: none; }

/* --- Fotografije (Task 4) --- */
.nk-drop {
  border: 2px dashed #cbd5e0; border-radius: 10px; padding: 22px 16px;
  text-align: center; background: #f7fafc; cursor: pointer;
}
.nk-drop.is-over { border-color: #1e3a5f; background: #ebf4ff; }
.nk-drop:focus-visible { outline: 2px solid #1e3a5f; outline-offset: 2px; }
.nk-drop p { margin: 0 0 10px; color: #4a5568; }

.nk-slicice {
  display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
}
.nk-slicica {
  position: relative; margin: 0; border: 1px solid #e2e8f0; border-radius: 8px;
  overflow: hidden; background: #fff;
}
.nk-slicica img { display: block; width: 100%; height: 96px; object-fit: cover; }
.nk-slicica figcaption {
  padding: 6px 8px; font-size: 12px; color: #4a5568;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nk-slicica.is-prenosim { opacity: .55; }
.nk-slicica-x {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: rgba(26, 32, 44, .75); color: #fff;
  font: 600 13px/1 sans-serif; cursor: pointer;
}
.nk-slicica-x:disabled { opacity: .5; cursor: default; }

/* 03.09.2026. Petra: "Oglasavate kao" kao dvije kartice umjesto golog fieldseta; Katastor savjet uz javnu adresu */
.nk-polje-radio { border: none; padding: 0; margin: 0 0 18px; min-width: 0; }
.nk-polje-radio legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 14px; color: #1A1533; }
.nk-polje-radio label { display: inline-flex; align-items: center; gap: 9px; margin: 0 10px 8px 0; padding: 11px 16px; border: 1px solid #DDD8EE; border-radius: 12px; background: #fff; cursor: pointer; font-weight: 500; color: #1A1533; transition: border-color .15s, box-shadow .15s, background .15s; }
.nk-polje-radio label:hover { border-color: #6E56F8; }
.nk-polje-radio label:has(input:checked) { border-color: #6E56F8; background: #F4F1FF; box-shadow: 0 0 0 3px rgba(110,86,248,.15); }
.nk-polje-radio input[type="radio"] { margin: 0; width: 16px; height: 16px; accent-color: #6E56F8; }
.nk-pro-tip { display: block; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #F4F1FF; border: 1px solid #DDD8EE; color: #1A1533; line-height: 1.5; }
.nk-pro-tip b { color: #4B3BD6; }

/* 03.09.2026. Petra: glavni CTA predaje = zeleni pill (klasa .zbtn ne postoji u oglasniku) */
.nk-gumb, button.zbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px; border: none; border-radius: 999px; background: #3BB54A; color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(59,181,74,.7); transition: background .18s, transform .18s, box-shadow .18s; }
.nk-gumb:hover, button.zbtn:hover { background: #2F9E3D; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(59,181,74,.8); }
.nk-gumb:focus-visible { outline: 3px solid rgba(59,181,74,.35); outline-offset: 2px; }
.nk-gumb:disabled { opacity: .6; cursor: wait; transform: none; }
#nk-posalji { margin-top: 18px; width: 100%; max-width: 420px; }
@media (max-width: 600px) { #nk-posalji { max-width: none; } }