/* TEMACON upitnik – oslanja se na varijable iz style.css / brand.css */

.uf-kod {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  background: var(--smoke-color2); border-radius: 12px; padding: 20px 24px; margin-bottom: 30px;
}
.uf-kod_tekst { flex: 1 1 260px; }
.uf-kod_tekst strong { display: block; color: var(--title-color); font-family: var(--title-font); font-size: 18px; }
.uf-kod_tekst span { font-size: 14px; }
.uf-kod_forma { display: flex; gap: 10px; flex: 1 1 380px; }
.uf-kod_forma input.form-control { height: 50px; background: #fff; font-family: monospace; letter-spacing: .04em; padding-right: 15px; }
.uf-kod_forma .th-btn { padding: 15px 26px; white-space: nowrap; }
.uf-kod_poruka { flex-basis: 100%; margin: 0; font-size: 14px; }
.uf-kod_poruka:empty { display: none; }
.uf-kod_poruka.error, .uf-poruka.error { color: var(--error-color); }
.uf-poruka.success { color: var(--theme-color-text, #597821); }

.uf-obavijest { border-left: 4px solid var(--theme-color); background: #F4F9EA; padding: 14px 18px; border-radius: 8px; margin-bottom: 24px; font-size: 15px; color: var(--title-color); }
.uf-link { background: none; border: 0; padding: 0; color: var(--theme-color-text, #597821); text-decoration: underline; font-weight: 600; }

/* koraci */
.uf-koraci { scroll-margin-top: 110px; margin-bottom: 24px; }
.uf-koraci ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.uf-koraci li { flex: 1 0 auto; }
.uf-korak {
  width: 100%; display: flex; align-items: center; gap: 10px; border: 1px solid var(--th-border-color);
  background: #fff; border-radius: 10px; padding: 10px 14px; text-align: left; color: var(--body-color);
  font-size: 14px; transition: border-color .2s, background .2s;
}
.uf-korak:disabled { opacity: .45; cursor: not-allowed; }
.uf-korak_broj {
  flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--smoke-color2); color: var(--title-color); font-weight: 700; font-size: 13px;
}
.uf-korak_naziv { white-space: nowrap; font-weight: 600; }
.uf-korak.gotovo .uf-korak_broj { background: #E6F2D0; color: #3E5517; }
.uf-korak.aktivno { border-color: var(--theme-color); background: #F4F9EA; color: var(--title-color); }
.uf-korak.aktivno .uf-korak_broj { background: var(--theme-color); color: var(--title-color); }

/* forma i paneli */
.uf-forma { position: relative; background: #fff; border: 1px solid var(--th-border-color); border-radius: 16px; padding: 40px; }
.uf-ucitavanje { text-align: center; margin: 40px 0; }
.uf-panel_naslov { font-size: 28px; margin-bottom: 8px; }
.uf-panel_opis { margin-bottom: 10px; }
.uf-sekcija { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--th-border-color); }
.uf-panel_opis + .uf-sekcija, .uf-panel_naslov + .uf-sekcija { border-top: 0; margin-top: 0; }
.uf-sekcija_naslov { font-size: 18px; color: var(--theme-color-text, #597821); margin-bottom: 18px; letter-spacing: .02em; }
.uf-polje { margin-bottom: 20px; }
.uf-oznaka { display: block; font-weight: 600; font-size: 15px; color: var(--title-color); margin: 0 0 8px; }
.uf-obavezno { color: var(--error-color); }
.uf-pomoc { display: block; margin-top: 6px; color: var(--gray-color); font-size: 13px; }
.uf-forma.contact-form2 .form-control { color: var(--title-color); padding-right: 20px; }
.uf-forma textarea.form-control { height: auto; min-height: 110px; padding-top: 14px; padding-bottom: 14px; line-height: 1.5; resize: vertical; }
.uf-polje.ima-gresku .form-control { border-color: var(--error-color); }
.uf-polje.ima-gresku .uf-oznaka, .uf-polje.ima-gresku .uf-privola label { color: var(--error-color); }
.uf-polje.ima-gresku .uf-sektor { border-color: var(--error-color); }

.uf-info { background: var(--smoke-color2); border-radius: 10px; padding: 16px 20px; font-size: 15px; }
.uf-info p:last-child, .uf-info ol:last-child { margin-bottom: 0; }
.uf-info ol { padding-left: 20px; }
.uf-info li { margin-bottom: 6px; }

/* jedinica uz broj */
.uf-jedinica { position: relative; }
.uf-jedinica input.form-control { padding-right: 78px; }
.uf-jedinica span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--gray-color); pointer-events: none; }

/* opcije (radio / checkbox) */
.uf-opcije { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.uf-opcija label { font-weight: 400; margin: 0; line-height: 1.5; color: var(--title-color); }
.uf-opcije input[type="radio"] ~ label { line-height: 1.5; padding-top: 1px; }
.uf-opcije input[type="radio"] ~ label::before { top: 1px; }
.uf-drugo { flex-basis: 100%; height: 48px !important; }

/* grupa malih brojeva */
.uf-grupa { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.uf-grupa_dio label { font-size: 13px; color: var(--body-color); margin: 0 0 4px; }

/* sektor kartice */
.uf-sektori input[type="radio"] ~ label::before { display: none; }
.uf-sektor {
  position: relative; display: block !important; height: 100%; padding: 26px 24px !important; margin: 0;
  border: 2px solid var(--th-border-color); border-radius: 14px; background: #fff; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s; line-height: 1.5 !important;
}
.uf-sektor:hover { border-color: #CFE4A8; transform: translateY(-2px); }
.uf-sektori input:checked + .uf-sektor { border-color: var(--theme-color); box-shadow: 0 10px 30px rgba(160, 206, 78, .25); background: #FBFDF7; }
.uf-sektor_ikona { display: inline-flex; width: 52px; height: 52px; border-radius: 12px; align-items: center; justify-content: center; background: var(--smoke-color2); font-size: 24px; color: var(--title-color); margin-bottom: 14px; }
.uf-sektori input:checked + .uf-sektor .uf-sektor_ikona { background: var(--theme-color); }
.uf-sektor_slovo { position: absolute; top: 20px; right: 22px; font-family: var(--title-font); font-weight: 700; font-size: 28px; color: #E3E8EF; }
.uf-sektor strong { display: block; font-family: var(--title-font); font-size: 20px; color: var(--title-color); margin-bottom: 6px; }
.uf-sektor_opis { display: block; font-size: 14px; font-weight: 400; color: var(--body-color); }

/* dokumenti */
.uf-legenda { font-size: 13px; color: var(--body-color); margin-bottom: 14px; }
.uf-dok_red { display: grid; grid-template-columns: 1fr auto minmax(180px, 30%); gap: 10px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--th-border-color); }
.uf-dok_naziv { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--title-color); }
.uf-dok_id { flex: 0 0 auto; min-width: 38px; font-weight: 700; color: var(--theme-color-text, #597821); font-size: 13px; }
.uf-dok_tip { flex: 0 0 auto; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 6px; background: var(--smoke-color2); color: var(--gray-color); }
.uf-dok_tip-P { background: #E6F2D0; color: #3E5517; }
.uf-dok_red input.form-control { height: 44px; font-size: 14px; }

.uf-seg { display: inline-flex; border: 1px solid #E4E4E4; border-radius: 8px; overflow: hidden; }
.uf-seg input[type="radio"] ~ label::before { display: none; }
.uf-seg label {
  padding: 0 !important; margin: 0; width: 42px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--body-color); background: #F8F8F8; border-left: 1px solid #E4E4E4; cursor: pointer; line-height: 1 !important;
}
.uf-seg label:first-of-type { border-left: 0; }
.uf-seg input:checked + label { background: var(--theme-color); color: var(--title-color); }
.uf-seg input[value="I"]:checked + label { background: #FFD47A; }
.uf-seg input[value="N"]:checked + label, .uf-seg input[value="NP"]:checked + label { background: #CBD2DC; }

/* privola */
.uf-privola label { font-weight: 400; line-height: 1.5; }

/* gumbi */
.uf-gumbi { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--th-border-color); }
.uf-gumbi_razmak { flex: 1; }
.uf-gumbi .th-btn[hidden] { display: none; }
.uf-forma[hidden], .uf-koraci[hidden], .uf-kod[hidden] { display: none; }

.uf-gotovo { text-align: center; background: #fff; border: 1px solid var(--th-border-color); border-radius: 16px; padding: 60px 30px; }
.uf-gotovo_ikona { font-size: 56px; color: var(--theme-color); margin-bottom: 10px; }
.uf-gotovo p { max-width: 560px; margin: 0 auto 26px; }

@media (max-width: 767px) {
  .uf-forma { padding: 24px 18px; }
  .uf-panel_naslov { font-size: 22px; }
  .uf-korak_naziv { display: none; }
  .uf-korak.aktivno .uf-korak_naziv { display: inline; }
  .uf-koraci li { flex: 0 0 auto; }
  .uf-dok_red { grid-template-columns: 1fr; }
  .uf-kod_forma { flex-wrap: wrap; }
  .uf-kod_forma .th-btn { width: 100%; }
}