/* === Dodatki k style.css === */
/* Ta datoteka NE prepisuje obstoječih pravil iz css/style.css.        */
/* Vsebuje samo nove razrede za razcepnik in aplikacijo za občane.     */

/* ============================================================
   RAZCEPNIK (index.html)
   ============================================================ */

.split-page {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 24px;
  min-height: 100vh;
}

.split-header {
  background: var(--color-bg);
  padding: 20px 18px 18px;
  border-bottom: 1px solid rgba(24, 95, 165, 0.12);
  text-align: center;
}

.split-logos {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(24, 95, 165, 0.10);
}

.split-logos img {
  width: 48%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}

.split-logos img:last-child {
  width: 38%;
  max-height: 55px;
}

.split-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 6px;
}

.split-lead {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.split-body {
  padding: 18px 16px 0;
}

/* --- Kartici --- */

/* Mreza namesto stolpca: grid-auto-rows: 1fr izenaci visine vseh kartic
   ne glede na dolzino besedila. V navadnem stolpcu se visine ne bi
   poravnale. */
.split-cards {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 14px;
}

.split-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: 0 2px 12px rgba(24, 95, 165, 0.05);
  transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}

.split-card:hover,
.split-card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 4px 18px rgba(24, 95, 165, 0.14);
  transform: translateY(-1px);
}

.split-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Prva kartica (ZER) — poudarjena z barvo in robom, ne z velikostjo,
   da so vse tri enako visoke. */
.split-card--primary {
  background: var(--color-primary-light);
  border: 1.5px solid rgba(24, 95, 165, 0.30);
}

.split-card--primary .split-card-title {
  color: var(--color-primary-dark);
}

.split-card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(24, 95, 165, 0.12);
  border-radius: 20px;
  padding: 4px 10px;
  margin-bottom: 10px;
}

.split-card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 8px;
}

.split-card-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.split-card-go {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.split-card--primary .split-card-go {
  color: var(--color-primary-dark);
}

/* --- Vrstica pod karticama --- */

.split-help {
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 18px 0 0;
}

.split-help a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.split-help a:hover { text-decoration: underline; }

.split-footer {
  margin-top: 22px;
  text-align: center;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.split-footer strong { color: var(--color-text); font-weight: 500; }

@media (min-width: 601px) {
  .split-page { padding: 12px 12px 24px; }
  .split-header { border-radius: 16px; border: 1px solid rgba(24, 95, 165, 0.12); }
  .split-body { padding: 16px 0 0; }
}

/* ============================================================
   ČAROVNIK ZA OBČANE (obcani.html)
   ============================================================ */

/* --- Glava --- */

.ob-header {
  background: var(--color-bg);
  padding: 16px 18px;
  border-bottom: 1px solid rgba(24, 95, 165, 0.12);
}

.ob-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ob-brand { font-size: 15px; font-weight: 700; color: var(--color-primary-dark); }
.ob-brand span { display: block; font-size: 11.5px; font-weight: 400; color: var(--color-text-muted); }

.ob-back { font-size: 13px; font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.ob-back:hover { text-decoration: underline; }

.ob-phone {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
}
.ob-phone a { color: var(--color-primary); font-weight: 600; text-decoration: none; }

/* --- Napredek --- */

.ob-progress { padding: 10px 16px 0; }

.ob-progress-bar { display: flex; gap: 6px; }

.ob-progress-step {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
}
.ob-progress-step.active { background: var(--color-primary); }
.ob-progress-step.done { background: var(--color-success); }

.ob-progress-label {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Kartice ukrepov --- */

.ukrep-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--color-bg);
}

.ukrep-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }

.ukrep-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  cursor: pointer;
}

.ukrep-toggle:hover { background: var(--color-primary-light); }
.ukrep-card.selected .ukrep-toggle { background: var(--color-primary-light); }

.ukrep-box {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid var(--color-border-strong);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: transparent;
}
.ukrep-card.selected .ukrep-box { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.ukrep-naziv { font-weight: 600; line-height: 1.35; }
.ukrep-opis { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; margin-top: 3px; }

/* Onemogočen ukrep */
.ukrep-card.disabled { opacity: 0.65; background: var(--color-bg-secondary); }
.ukrep-card.disabled .ukrep-toggle { cursor: not-allowed; }
.ukrep-card.disabled .ukrep-toggle:hover { background: none; }
.ukrep-zakaj {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  padding: 9px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Razširjeni del kartice */
.ukrep-body { padding: 4px 16px 16px; border-top: 1px solid var(--color-border); }

.subq { margin-top: 14px; }
.subq-q { font-size: 13.5px; font-weight: 600; line-height: 1.45; margin-bottom: 7px; }
.subq-opts { display: flex; flex-direction: column; gap: 6px; }

.subq-btn {
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}
.subq-btn:hover { border-color: var(--color-primary); }
.subq-btn.selected { border-color: var(--color-primary); background: var(--color-primary-light); font-weight: 600; }

.field-row { margin-top: 14px; }
.field-label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.field-hint { font-size: 12.5px; color: var(--color-text-muted); margin-top: 5px; line-height: 1.5; }

.input-unit { display: flex; align-items: center; gap: 8px; }
.input-unit .input-text { margin: 0; }
.input-unit .unit { font-size: 14px; color: var(--color-text-muted); font-weight: 600; }

.ne-vem-row { margin-top: 8px; }
.ne-vem-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); cursor: pointer; }

.subq-note {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.subq-note.info { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* --- Tabela ocene --- */

/* ============================================================
   ZASCITA PRED VODORAVNIM PRELIVANJEM
   ============================================================
   Preverjeno s test-prelivanje.html pri sirinah 320, 360 in 390 px.
   Ta pravila odpravljajo vzroke, ne posameznih primerov, zato jih
   ne pisemo pri vsakem razredu posebej.

   1. Telo strani nikoli ne drsi vodoravno. Kjer je vsebina res
      sirsa (tabela ocene), drsi ona sama v svojem vsebniku.
   2. Dolgi neprelomljivi nizi — oznake pozivov (126SUB-OB26,
      118FS-PO24), e-naslovi, spletni naslovi, zneski z enotami —
      se prelomijo, namesto da bi raztegnili starsa.
   3. Otroci flex vsebnikov imajo privzeto min-width: auto, kar
      pomeni "ne skrci me pod mojo vsebino". To je najpogostejsi
      vzrok prelivanja, ki ga v kodi ni videti.
   4. Vnosna polja in gumbi ne presezejo sirine starsa.
   ============================================================ */

.ob-app, .zer-app, .split-page { overflow-x: clip; }

.step-card, .povzetek-sekcija, .subq-note, .info-block, .field-hint,
.result-text, .pojasnilo-list li, .kaj-uredimo li, .placilo-box,
.izlocitev-kontakt, .ukrep-opis, .ukrep-naziv,
.opt-opomba, .zakljucek-opomba, .consent-label span, .option-btn {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Flex vsebniki: otroci se smejo skrciti. */
.input-unit, .field-row, .nav-row, .foto-vrstica, .foto-glava,
.kredit-vrstica, .subq-opts, .ne-vem-row, .consent-label,
.zakljucek-izbira, .legal-links, .ob-progress {
  min-width: 0;
}
.input-unit > *, .field-row > *, .kredit-vrstica > *,
.foto-glava > *, .consent-label > * {
  min-width: 0;
}

/* Polja, izbirniki in gumbi ne presezejo starsa. */
.input-text, .select-text, textarea.input-text,
.btn-large, .btn-primary, .btn-secondary, .option-btn, .subq-btn {
  max-width: 100%;
}
.input-text, .select-text, textarea.input-text { box-sizing: border-box; }

/* Oznaka ob polju (EUR, m2, naprav) ne sme potiskati polja cez rob. */
.input-unit .unit { flex: 0 0 auto; white-space: nowrap; }
.input-unit .input-text { flex: 1 1 auto; }

/* Dolgi zneski in nazivi v tabeli ocene. */
.ocena-table td, .ocena-table th { overflow-wrap: anywhere; }

/* Tabela ocene je široka; brez tega se je zadnji stolpec odrezal.
   Na ozkih zaslonih se tabela prelomi v kartice (glej @media spodaj),
   zato drsenje takrat ni potrebno. */
/* Drobna opomba pod izbirno možnostjo (npr. pojasnilo o domnevi
   izdanega dovoljenja pri vprašanju o gradbenem dovoljenju). */
.opt-opomba {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: -4px 0 10px;
  padding: 0 4px;
}

.ocena-wrap {
  margin: 4px 0 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* Kjer drsenje vseeno ostane (600–760 px), mora biti vidno.
     Prehod v belo na desnem robu pove, da se vsebina nadaljuje;
     brez njega je videti kot navadna črta. Prehod se pojavi samo,
     kadar je vsebina res širša — background-attachment: local
     poskrbi, da izgine, ko je vsebina odrsana do konca. */
  background:
    linear-gradient(to right, var(--color-surface, #fff) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--color-surface, #fff) 30%, rgba(255,255,255,0)) right center,
    linear-gradient(to right, rgba(0,0,0,0.10), rgba(0,0,0,0)) left center,
    linear-gradient(to left,  rgba(0,0,0,0.10), rgba(0,0,0,0)) right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Debelejši in obarvan drsnik. */
.ocena-wrap { scrollbar-width: auto; scrollbar-color: var(--color-primary) var(--color-bg-secondary); }
.ocena-wrap::-webkit-scrollbar { height: 10px; }
.ocena-wrap::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
  border-radius: 6px;
}
.ocena-wrap::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 6px;
}
.ocena-wrap::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }
.ocena-wrap > .ocena-table { min-width: 520px; }

.ocena-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ocena-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--color-text-muted); font-weight: 700; padding: 7px 8px;
  border-bottom: 1px solid var(--color-border);
}
.ocena-table td { padding: 10px 8px; border-bottom: 1px solid var(--color-border); vertical-align: top; line-height: 1.4; }
.ocena-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ocena-table .ukrep-ime { font-weight: 600; }
.ocena-table .ukrep-pod { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-top: 2px; }
/* Drobna oznaka pod zneskom v stolpcu Spodbuda. Stolpec je poravnan
   desno, zato mora biti tudi oznaka. */
.ocena-table td.num .ukrep-pod { text-align: right; }

/* Opozorilo, da je del vrednosti naša ocena — nad tabelo in v
   povzetku. Navadna opomba, ne poudarjen okvir: ista velikost in
   barva kot druga pojasnila ob tabeli, brez krepkega tiska. */
.ocena-opozorilo {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  font-weight: 400;
  overflow-wrap: anywhere;
}
.ocena-opozorilo { margin: 0 0 12px; }
/* Ista opomba pod tabelo v povzetku potrebuje samo drug zamik. */
.povzetek-sekcija .ocena-opozorilo:last-child { margin: 10px 0 0; }

.ocena-table tfoot td {
  border-bottom: none; border-top: 2px solid var(--color-primary);
  font-weight: 700; font-size: 15px; color: var(--color-primary-dark); padding-top: 12px;
}
.ocena-table tr.brez td { color: var(--color-text-muted); }

.ocena-skupaj {
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 14px;
  text-align: center;
}
.ocena-skupaj-label { font-size: 13px; color: var(--color-text-muted); }
.ocena-skupaj-znesek { font-size: 30px; font-weight: 700; color: var(--color-primary-dark); line-height: 1.2; margin-top: 2px; }

.info-block {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  margin-top: 14px;
}
.info-block strong { color: var(--color-text); }

.pojasnilo-list { margin: 12px 0 0; padding: 0; list-style: none; }
.pojasnilo-list li {
  font-size: 13px; line-height: 1.55;
  background: var(--color-primary-light); color: var(--color-primary-dark);
  border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 8px;
}

/* --- Izločitve --- */

.izlocitev-box { text-align: left; }
.izlocitev-kontakt {
  margin-top: 16px; padding: 14px 16px;
  background: var(--color-primary-light); border-radius: var(--radius-lg);
  font-size: 14px; line-height: 1.6;
}
.izlocitev-kontakt a { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
.izlocitev-kontakt a:hover { text-decoration: underline; }

/* --- Zaključek pod pragom --- */

.pod-pragom-text { font-size: 15px; line-height: 1.6; }
.pod-pragom-text strong { color: var(--color-primary-dark); }

/* --- Noga --- */

.ob-footer { text-align: center; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.6; padding: 18px 16px 28px; }
.ob-footer strong { color: var(--color-text); font-weight: 500; }

/* Oznaka koordinatorja je povezava na koren, kjer stoji aplikacija ZER
   z logotipi sofinancerjev. Vidno naj ostane del noge, ne poudarjena
   povezava. */
.ob-footer > a { color: inherit; text-decoration: none; }
.ob-footer > a:hover { text-decoration: underline; }
.split-footer p a { color: inherit; text-decoration: none; }
.split-footer p a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .ob-header { padding: 14px 16px; }
  .ukrep-toggle { font-size: 14.5px; }
}

/* ------------------------------------------------------------
   Tabela ocene na ozkih zaslonih
   ------------------------------------------------------------
   Pod 600 px se tabela prelomi v kartice — ena kartica na ukrep,
   oznaka polja stoji NAD vrednostjo. Nobenega fiksnega min-width
   in nobenega vodoravnega drsenja tam ni, zato je znesek spodbude
   viden na vsaki širini in stranki ni treba drsati.
   ------------------------------------------------------------ */

@media (max-width: 599px) {

  /* V kartičnem načinu drsenja ni — kartice se prilagodijo širini. */
  .ocena-wrap { overflow-x: visible; }
  .ocena-wrap > .ocena-table { min-width: 0; }

  .ocena-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .ocena-table,
  .ocena-table tbody,
  .ocena-table tfoot,
  .ocena-table tr,
  .ocena-table td { display: block; width: 100%; }

  .ocena-table tbody tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 10px;
  }

  /* Oznaka polja stoji NAD vrednostjo, ne ob njej: pri dolgih
     vsebinah (npr. „300 EUR/m²“) je tako vsaka vrstica berljiva
     tudi na najožjih zaslonih. */
  .ocena-table tbody td {
    border-bottom: none;
    padding: 0;
    display: block;
    text-align: left;
    margin-top: 9px;
  }

  /* Prva celica je ime ukrepa — brez oznake, čez celo širino */
  .ocena-table tbody td:first-child { display: block; margin-top: 0; margin-bottom: 4px; }

  .ocena-table tbody td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 1px;
  }

  /* Vrednosti so poravnane levo, pod svojo oznako. */
  .ocena-table tbody td.num { text-align: left; white-space: normal; }
  .ocena-table tbody td .ukrep-pod { text-align: left; margin-top: 1px; }

  /* Spodbuda je najpomembnejši podatek — poudarjena in ločena */
  .ocena-table tbody td[data-label="Spodbuda"] {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--color-border);
    font-size: 17px;
    font-weight: 700;
    color: var(--color-primary-dark);
  }
  .ocena-table tbody tr.brez td[data-label="Spodbuda"] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  /* Skupaj */
  .ocena-table tfoot tr {
    border-top: 2px solid var(--color-primary);
    padding-top: 12px;
    display: block;
  }
  .ocena-table tfoot td {
    border: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 5px;
    font-size: 15px;
  }
  .ocena-table tfoot td:empty { display: none; }
  .ocena-table tfoot td[data-label]::before {
    content: attr(data-label);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--color-text-muted);
  }
}

/* ============================================================
   KORAK 4 — FINANCIRANJE
   ============================================================ */

.varstvo-opozorilo {
  background: var(--color-success-bg);
  color: #173404;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 4px;
}
.varstvo-opozorilo strong { display: block; margin-bottom: 3px; }

.select-text {
  width: 100%;
  padding: 13px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-bg);
}
.select-text:focus { outline: none; border-color: var(--color-primary); }

.kredit-izid { margin-top: 4px; }

.kredit-vrstica {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.kredit-vrstica:last-child { border-bottom: none; }
.kredit-vrstica .oznaka { color: var(--color-text-muted); }
.kredit-vrstica .znesek { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Vrstice, kjer vrednost ni znesek, ampak besedilo — mora se lomiti,
   sicer na 320 px potisne vrstico čez rob. */
.kredit-vrstica.besedilo .znesek { white-space: normal; text-align: right; font-weight: 600; }

.kredit-vrstica.poudarek {
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  border-bottom: none;
  margin-top: 8px;
}
.kredit-vrstica.poudarek .znesek { font-size: 19px; color: var(--color-primary-dark); }

.razred-znacka {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 10px;
}
.razred-zadostuje { background: var(--color-success-bg); color: var(--color-success); }
.razred-mejno { background: var(--color-warning-bg); color: var(--color-warning-text); }
.razred-ne { background: var(--color-danger-bg); color: var(--color-danger); }

/* ============================================================
   KORAK 5 — POVZETEK
   ============================================================ */

.povzetek-sekcija { margin-top: 22px; }
.povzetek-naslov {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--color-primary-dark); margin: 0 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--color-border);
}

.placilo-box {
  background: var(--color-warning-bg);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-warning-text);
}
.placilo-box p { margin: 0 0 10px; }
.placilo-box p:last-child { margin: 0; }
.placilo-box strong { color: #4a2a04; }

.placilo-izracun {
  background: rgba(255,255,255,0.65);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 12px 0;
}
.placilo-izracun .kredit-vrstica { border-bottom-color: rgba(0,0,0,0.08); font-size: 14px; }
.placilo-izracun .kredit-vrstica.ostane { border-bottom: none; padding-top: 12px; }
.placilo-izracun .kredit-vrstica.ostane .oznaka { color: #4a2a04; font-weight: 700; }
.placilo-izracun .kredit-vrstica.ostane .znesek { font-size: 19px; color: #4a2a04; }

.kaj-uredimo { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.65; }
.kaj-uredimo li { margin-bottom: 5px; }

.natisni-vrstica { text-align: right; margin-bottom: 10px; }
.btn-natisni {
  background: none; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: 8px 14px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--color-text-muted); cursor: pointer;
}
.btn-natisni:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* --- Tiskanje povzetka --- */
@media print {
  .ob-header, .ob-progress, .ob-footer,
  .nav-row, .natisni-vrstica, .legal-links, .consent-row,
  /* Pojasnilo o financiranju brez lastnih sredstev na uvodnem zaslonu.
   Za marsikoga odločilen podatek, zato poudarjen okvir in mesto nad
   gumbom — viden mora biti brez drsenja. */
/* Nalaganje predracuna izvajalca. Odpre se samo ob odgovoru „Da“
   na vprasanje, ali stranka predracun ze ima. Nalaganje je neobvezno. */
.predracun-blok {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}
.predracun-naslov { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.predracun-blok .foto-gumb { margin-top: 10px; }

.predracun-vrstica {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface, #fff);
  font-size: 13.5px;
}
.predracun-ime { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.predracun-velikost { flex: 0 0 auto; color: var(--color-text-muted); font-size: 12.5px; }
.predracun-odstrani {
  flex: 0 0 auto;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  color: var(--color-text-muted);
}
.predracun-odstrani:hover { color: var(--color-danger); }

.predracun-stanje { margin-top: 8px; font-size: 13px; color: var(--color-text-muted); }
.predracun-stanje.napaka { color: var(--color-danger); }

.financiranje-okvir {
  margin: 4px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-primary);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
}
.financiranje-naslov {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--color-primary-dark);
}
.financiranje-okvir p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.zakljucek-izbira { display: none !important; }
  .screen { display: none !important; }
  .screen.active { display: block !important; }
  .step-card { border: none !important; box-shadow: none !important; padding: 0 !important; }
  body { background: #fff !important; font-size: 11pt; }
  .zer-app { max-width: 100% !important; }
  .placilo-box, .ocena-skupaj, .info-block, .varstvo-opozorilo,
  .kredit-vrstica.poudarek, .placilo-izracun {
    background: #fff !important;
    border: 1px solid #ccc !important;
    color: #000 !important;
  }
  .povzetek-sekcija { page-break-inside: avoid; }
  a[href^="tel:"], a[href^="mailto:"] { color: #000; text-decoration: none; }
}

/* ============================================================
   KORAK 6 — FOTOGRAFIJE
   ============================================================ */

.foto-slot {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 14px 15px;
  margin-bottom: 10px;
  background: var(--color-bg);
}
.foto-slot.izpolnjen { border-style: solid; border-color: var(--color-success); background: var(--color-success-bg); }
.foto-slot.napaka { border-style: solid; border-color: var(--color-danger); background: var(--color-danger-bg); }

.foto-glava { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.foto-naziv { font-size: 14px; font-weight: 600; }
.foto-oznaka { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--color-danger); }
.foto-slot.izpolnjen .foto-oznaka { color: var(--color-success); }
.foto-opis { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.5; margin-top: 3px; }

.foto-vrstica { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.foto-predogled {
  width: 62px; height: 62px; flex: 0 0 62px;
  border-radius: var(--radius-md); object-fit: cover;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
}
.foto-gumb {
  flex: 1;
  display: inline-block;
  padding: 11px 14px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-primary);
  font-family: inherit; font-size: 14px; font-weight: 600;
  text-align: center; cursor: pointer;
}
.foto-gumb:hover { background: var(--color-primary-light); }
.foto-slot input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.foto-stanje { font-size: 12.5px; color: var(--color-text-muted); margin-top: 7px; line-height: 1.5; }
.foto-stanje.napaka { color: var(--color-danger); font-weight: 600; }

textarea.input-text { resize: vertical; min-height: 76px; font-family: inherit; }

.hvala-box {
  background: var(--color-success-bg);
  color: #173404;
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  font-size: 15px;
  line-height: 1.65;
}
.hvala-box h3 { margin: 0 0 8px; font-size: 19px; }
.hvala-box .email { font-weight: 700; word-break: break-all; }

/* Atribut hidden mora premagati razrede z lastnim display (npr. .nav-row) */
[hidden] { display: none !important; }

/* ============================================================
   PREVERJANJE VNOSA
   ============================================================ */

/* Gumb je videti onemogočen, klik pa vseeno sproži izpis, kaj manjka.
   Zato ne uporabljamo atributa disabled — ta klika ne bi propustil. */
.btn-primary.videz-onemogocen,
.btn-large.videz-onemogocen {
  background: var(--color-border-strong);
  cursor: not-allowed;
}
.btn-primary.videz-onemogocen:hover,
.btn-large.videz-onemogocen:hover { background: var(--color-border-strong); }

/* Polje z napako */
/* Nadomestno besedilo v poljih. Privzeta barva brskalnika je presvetla
   in se na nekaterih zaslonih komaj loči od ozadja; ta odtenek je
   opazno svetlejši od vpisanega besedila, a še vedno berljiv.
   Velja samo za aplikaciji /obcani/ in /podjetja/, ker je style.css
   last aplikacije ZER. */
.input-text::placeholder,
.input-text::-webkit-input-placeholder,
textarea.input-text::placeholder {
  color: #9ca3af;
  opacity: 1;            /* Firefox privzeto zniža prosojnost */
}

.input-text.polje-napaka,
.select-text.polje-napaka,
textarea.polje-napaka {
  border-color: var(--color-danger);
  background: #fdf6f6;
}
.input-text.polje-napaka:focus,
.select-text.polje-napaka:focus { border-color: var(--color-danger); }

.polje-napaka-txt {
  color: var(--color-danger);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  margin-top: 5px;
}

/* Kartica ukrepa z manjkajočim podatkom */
.ukrep-card.napaka { border-color: var(--color-danger); }
.ukrep-card.napaka .ukrep-toggle { background: #fdf6f6; }

/* Skupina gumbov (termin, predračun, podvprašanja) z manjkajočim odgovorom */
.subq-opts.polje-napaka {
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: 8px;
  background: #fdf6f6;
}

/* Kljukica o potrditvi, ki ni obkljukana */
/* ------------------------------------------------------------
   KROGCI IN KVADRATKI SE NE SMEJO SKRCITI
   ------------------------------------------------------------
   Vzrok: v flex vrstici je input privzeto skrcljiv. Kadar se
   besedilo ob njem prelomi v dve ali tri vrstice, flex zmanjsa
   sirino kontrolnika in krogci v istem seznamu niso vec enako
   veliki. Ni odvisno od dolzine besedila — odvisno je od tega,
   ali se prelomi.

   Zato fiksna sirina in visina, flex-shrink: 0 in poravnava na
   prvo vrstico besedila. Velja za VSE sezname z izbiro v
   aplikacijah za obcane in podjetja.

   css/style.css je last aplikacije ZER; tam je enako pravilo ze
   zapisano za potrditveno kljukico.
   ------------------------------------------------------------ */

.consent-label input[type="radio"],
.consent-label input[type="checkbox"],
.zakljucek-izbira input[type="radio"],
.zakljucek-izbira input[type="checkbox"],
.ne-vem-row input[type="checkbox"],
.consent-row input[type="radio"],
.consent-row input[type="checkbox"],
.form-row input[type="radio"],
.form-row input[type="checkbox"] {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  align-self: flex-start;
  margin-top: 2px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Vrstica z izbiro mora dovoliti prelom besedila, ne pa krcenja
   kontrolnika. */
.consent-label { align-items: flex-start; }
.ne-vem-row label { align-items: flex-start; }

/* Izbira ob zaključku povzetka: dve izključujoči možnosti.
   Videz je enak potrditveni vrstici, le da sta možnosti dve in da
   je izbira obvezna, preden se gumb omogoči. */
.zakljucek-izbira {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}
.zakljucek-izbira .consent-label { margin: 0; }
.zakljucek-opomba {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.zakljucek-izbira.polje-napaka {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger) inset;
}

/* Soglasje k obdelavi osebnih podatkov na zaslonu povzetka. Stoji
   pod okvirom z moznostmi in mora biti od njega vidno loceno — je
   svoje dejanje, ne del izbire. */
#povzetek-soglasje-vrsta { margin-top: 14px; }

.consent-row.polje-napaka {
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: 10px;
  background: #fdf6f6;
}

/* Skrito polje proti robotom — človek ga ne vidi, bralnik zaslona
   ga preskoči (aria-hidden), samodejni izpolnjevalci pa ga zapolnijo. */
.med-polje {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#turnstile-mesto:not(:empty) { margin: 14px 0 4px; }

/* Naslov samo za bralnike zaslona */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Povezava za odklep predpostavk */
.popravi-predpostavke {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: underline;
}


/* ------------------------------------------------------------
   Razcepnik na telefonu
   ------------------------------------------------------------
   S tremi karticami mora biti druga vsaj delno vidna brez drsenja,
   sicer obiskovalec ne ve, da je poti več kot ena. Zato na ozkih
   zaslonih stisnemo glavo in zmanjšamo razmike v karticah.
   ------------------------------------------------------------ */

@media (max-width: 600px) {
  .split-header { padding: 12px 16px 14px; }
  .split-logos { margin-bottom: 10px; padding-bottom: 9px; gap: 10px; }
  .split-logos img { max-height: 54px; }
  .split-logos img:last-child { max-height: 40px; }
  .split-title { font-size: 17px; line-height: 1.25; margin-bottom: 3px; }
  .split-lead { font-size: 13px; }

  .split-body { padding: 12px 14px 0; }
  .split-cards { gap: 10px; }
  .split-card { padding: 14px 15px; }
  .split-card-badge { margin-bottom: 7px; padding: 3px 8px; font-size: 10.5px; }
  .split-card-title { font-size: 16px; margin-bottom: 5px; }
  .split-card-sub { font-size: 13px; line-height: 1.45; }
  .split-card-go { padding-top: 10px; font-size: 13.5px; }

  .split-help { font-size: 13px; margin-top: 14px; }
  .split-footer { margin-top: 16px; }
}

/* Zelo nizki zasloni: še nekoliko tesneje. */
@media (max-width: 600px) and (max-height: 700px) {
  .split-logos img { max-height: 44px; }
  .split-logos img:last-child { max-height: 34px; }
  .split-title { font-size: 16px; }
  .split-card-sub { font-size: 12.5px; }
  .split-card { padding: 12px 14px; }
}