/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 "Pridobite ponudbo" (vodeni konfigurator)

   VSEBINA/POSLOVNA LOGIKA: povzeta iz v1/izracun.html (edini uradni vir) —
   isti izbiri "dejavnost" (6 možnosti) in "kaj potrebujete" (davčna
   blagajna / najem tiskalnika / oboje), ista dodatna vprašanja (obseg
   tiskanja, število prodajnih mest/blagajn, barvno tiskanje, format),
   ista kontaktna polja (ime, podjetje, e-naslov, telefon, sporočilo),
   ista "demo izračun" logika predloga paketa (glej js/izracun.js).

   PREUREDITEV (dovoljena — glej brif, točka 15): v1 je imel 3 korake
   (Dejavnost → Kaj+obseg → Kontakt+predlog). V2 preuredi v 4 bolj
   intuitivne korake (Izbira → Podrobnosti → Kontakt → Pregled), ker
   brif eksplicitno zahteva, da izbira "kaj potrebujete" ŽE V PRVEM
   koraku požene pogojno prikazovanje polj — to je bil v v1 šele drugi
   korak. Nobeno VPRAŠANJE ali IZBIRA ni bila dodana ali odstranjena,
   samo razporeditev po zaslonih in dodan samostojen "Pregled" korak
   (v1 je predlog/kontakt združil v en zaslon).

   OBLIKA: temen hero (isti jezik kot pri DeliMe/TAStudio/Booking
   Studio — circuit/glow/motif ozadje, [data-parallax]), svetla
   konfiguratorska "kartica" (ne cel bel zaslon — noga je temna, znotraj
   Pregleda je temen "Naš predlog" panel), povezan števec korakov po
   ISTI geometrijski tehniki kot pri produktnih podstraneh (glej opombo
   ob ".izr-proces-crta" spodaj) — tu z lastnim, ločenim imenskim
   prostorom ("izr-"), ker gre za DRUGAČEN mehanizem: tam scroll/hover
   pripoveduje zgodbo, tu uporabnikovo dejansko stanje čarovnika (klik
   Naprej/Nazaj) določa aktivni korak — zato ločen JS (js/izracun.js),
   brez poseganja v obstoječi main.js. ═══════════════════════════════ */

body.izr-stran{ --izr-a: var(--cyan); --izr-b: var(--blue); }

/* ═══ HERO ═══════════════════════════════════════════════════════ */
.izr-hero{
  position:relative; overflow:hidden; text-align:center; color:#fff;
  background:linear-gradient(165deg, var(--navy-mid), var(--navy) 55%, var(--navy-deep));
  padding:calc(var(--sp-7) + 20px) 0 var(--sp-6);
}
.izr-hero .wrap{ position:relative; z-index:2; max-width:720px; }
.izr-hero .eyebrow{ color:var(--lime); }
.izr-hero h1{ font-size:clamp(36px,4.6vw,58px); margin:2px 0 var(--sp-2); }
.izr-hero .lead{ max-width:560px; margin:0 auto; color:var(--muted-on-navy); }
.izr-hero .lead + .lead{ margin-top:10px; font-size:15px; opacity:.85; }

.izr-hero .circuit-field{ z-index:0; }
.izr-hero-bp{ width:600px; height:600px; left:-220px; top:-260px; opacity:.08; color:var(--izr-a); z-index:0; }
.izr-hero-circuit-gfx{ position:absolute; z-index:0; width:480px; height:480px; right:-140px; bottom:-140px; color:var(--lime); opacity:.06; }
.izr-hero .glow-green{ width:480px; height:480px; right:4%; top:-200px; opacity:.4; z-index:0; }
.izr-hero .glow-blue{ width:520px; height:520px; left:2%; bottom:-240px; opacity:.5; z-index:0; }

@media (max-width:600px){
  .izr-hero{ padding:calc(var(--sp-6) + 16px) 0 var(--sp-5); }
}

/* ═══ KONFIGURATOR — okvir ═══════════════════════════════════════
   Namenoma ozek (wrap-narrow, ~840px) — čarovnik, ne razpredena
   stran; s tem tudi izbirne kartice/polja ne postanejo predolge
   vrstice besedila, kar bi bilo neprijetno za branje. ────────────── */
.izr-obmocje{ position:relative; }
.izr-shell{
  position:relative; z-index:1;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-lg);
  padding:var(--sp-6) var(--sp-5);
  margin-top:-56px; /* prekriva rob heroja, "kartica pluje nad heroj" */
}
@media (max-width:640px){
  .izr-shell{ padding:var(--sp-4) var(--sp-3); border-radius:var(--r-lg); margin-top:-36px; }
}

/* ═══ ŠTEVEC KORAKOV — "povezan od točke do točke", ista tehnika kot
   pri produktnih podstraneh (glej obsežno opombo v
   aplikacija-izdelek.css / aplikacija-delime.css): krogi so CENTRIRANI
   znotraj enako širokih stolpcev (za razliko od tam, kjer so poravnani
   levo — tu je vsak korak samo številka+kratka oznaka, ne besedilni
   blok, zato je centrirana postavitev vizualno bolj naravna). Segment
   črte med dvema korakoma sega od DESNEGA roba prejšnjega kroga do
   LEVEGA roba tega kroga — izpeljano geometrijsko (premer kroga 48px,
   razmik mreže var(--sp-3)=24px): left:-50%, right:calc(50% + 24px) —
   preverjeno z Playwright meritvijo (0px vrzel na obeh koncih). ───── */
.izr-koraki{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.izr-korak-postaja{ position:relative; text-align:center; }
.izr-korak-vozel{
  width:48px; height:48px; border-radius:50%; margin:0 auto 8px;
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  background:var(--surface); border:2px solid var(--line);
  font-family:var(--fh); font-weight:700; font-size:16px; color:var(--muted);
  transition:border-color var(--dur-med) var(--ease-premium), color var(--dur-med) var(--ease-premium),
    background var(--dur-med) var(--ease-premium), transform var(--dur-fast) var(--ease-premium),
    box-shadow var(--dur-med) var(--ease-premium);
}
.izr-korak-vozel svg{ width:20px; height:20px; }
.izr-korak-oznaka{
  font-family:var(--fh); font-weight:600; font-size:13px; color:var(--muted);
  transition:color var(--dur-med) var(--ease-premium);
}
.izr-korak-postaja.je-trenuten .izr-korak-vozel{
  border-color:var(--izr-a); color:var(--blue);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--izr-a) 14%, transparent);
  transform:scale(1.05);
}
.izr-korak-postaja.je-trenuten .izr-korak-oznaka{ color:var(--ink); font-weight:700; }
.izr-korak-postaja.je-opravljen .izr-korak-vozel{
  border-color:var(--green); background:var(--green); color:#fff;
}
.izr-korak-postaja.je-opravljen .izr-korak-oznaka{ color:var(--green); }

.izr-proces-crta{
  position:absolute; z-index:0; top:23px; left:-50%; right:calc(50% + 24px); height:2px;
  border-radius:1px; background:var(--line); overflow:hidden;
}
.izr-proces-crta::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--cyan), var(--green));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-premium);
}
.izr-korak-postaja.je-opravljen .izr-proces-crta::after{ transform:scaleX(1); }

@media (max-width:640px){
  .izr-korak-vozel{ width:36px; height:36px; font-size:14px; }
  .izr-korak-vozel svg{ width:16px; height:16px; }
  .izr-korak-oznaka{ display:none; }
  .izr-proces-crta{ top:17px; left:calc(-50% - 6px); right:calc(50% + 18px); }
  .izr-koraki{ margin-bottom:var(--sp-2); }
  .izr-korak-postaja.je-trenuten .izr-korak-vozel{ transform:scale(1.08); }
}
.izr-trenutna-oznaka{
  display:none; text-align:center; font-family:var(--fh); font-weight:700;
  font-size:13.5px; color:var(--ink); margin-bottom:var(--sp-4);
}
@media (max-width:640px){ .izr-trenutna-oznaka{ display:block; } }

@media (prefers-reduced-motion:reduce){
  .izr-korak-vozel, .izr-korak-oznaka, .izr-proces-crta::after{ transition:none; }
}

/* ═══ KORAKI VSEBINE ═════════════════════════════════════════════ */
.izr-stopnja{ display:none; }
.izr-stopnja.on{ display:block; }
.izr-stopnja-glava{ margin-bottom:var(--sp-4); }
.izr-stopnja-glava h2{ font-size:clamp(22px,2.4vw,28px); margin-bottom:6px; }
.izr-stopnja-glava p{ color:var(--muted); font-size:15px; }

/* vstopna animacija ob prehodu med koraki (opacity+translateY,
   ~380ms, brez odboja) — sproži jo JS z dodajanjem ".vstopa" tik po
   preklopu ".on", odstrani po enkratnem prehodu (glej izracun.js) ─── */
.js .izr-stopnja.vstopa{ animation:izr-vstopi var(--dur-med) var(--ease-premium) both; }
@keyframes izr-vstopi{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .js .izr-stopnja.vstopa{ animation:none; }
}

/* ═══ IZBIRNE KARTICE (kaj potrebujete / dejavnost) ─────────────── */
.izr-izbire{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2);
}
.izr-izbire--kompaktne{ grid-template-columns:repeat(3,1fr); gap:10px; }
.izr-izbira{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:8px; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-2); cursor:pointer; font-family:var(--fb);
  transition:border-color var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium),
    box-shadow var(--dur-fast) var(--ease-premium), background var(--dur-fast) var(--ease-premium);
}
.izr-izbire--kompaktne .izr-izbira{ padding:var(--sp-2) 10px; gap:6px; }
.izr-izbira:hover, .izr-izbira:focus-visible{
  border-color:var(--cyan); transform:translateY(-2px); box-shadow:var(--sh-sm);
}
.izr-izbira-ik{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-alt); color:var(--blue);
  transition:background var(--dur-fast) var(--ease-premium), color var(--dur-fast) var(--ease-premium);
}
.izr-izbire--kompaktne .izr-izbira-ik{ width:36px; height:36px; border-radius:10px; }
.izr-izbira-ik svg{ width:22px; height:22px; stroke-width:1.75; }
.izr-izbire--kompaktne .izr-izbira-ik svg{ width:18px; height:18px; }
.izr-izbira b{ display:block; font-family:var(--fh); font-size:15px; color:var(--ink); }
.izr-izbire--kompaktne .izr-izbira b{ font-size:13.5px; }
.izr-izbira small{ display:block; color:var(--muted); font-size:12.5px; line-height:1.35; }
.izr-izbira-kljukica{
  position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%;
  background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.5);
  transition:opacity var(--dur-fast) var(--ease-premium), transform var(--dur-fast) var(--ease-premium);
}
.izr-izbira-kljukica svg{ width:12px; height:12px; }
.izr-izbira[aria-checked="true"]{
  border-color:var(--green); background:rgba(24,165,75,.06); box-shadow:0 0 0 3px rgba(24,165,75,.1);
}
.izr-izbira[aria-checked="true"] .izr-izbira-ik{ background:rgba(24,165,75,.14); color:var(--green); }
.izr-izbira[aria-checked="true"] .izr-izbira-kljukica{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion:reduce){
  .izr-izbira, .izr-izbira-ik, .izr-izbira-kljukica{ transition:none; }
  .izr-izbira:hover, .izr-izbira:focus-visible{ transform:none; }
}
@media (max-width:640px){
  .izr-izbire{ grid-template-columns:1fr; }
  .izr-izbire--kompaktne{ grid-template-columns:repeat(2,1fr); }
  .izr-izbira{ flex-direction:row; text-align:left; padding:14px 16px; }
  .izr-izbire--kompaktne .izr-izbira{ flex-direction:column; text-align:center; padding:var(--sp-2) 10px; }
}

/* ═══ "KAJ POTREBUJETE" — PRODUKTNE KARTICE (avgust 2026, prenova) ══════
   Vizualni zgled: obstoječe domače "rešitve" kartice (.resitev-kartica,
   glej pages.css — "tip-produkt" različica z GreenTill/tiskalnikom na
   radialnem ozadju). NAMENOMA ne podedujemo tistih razredov neposredno
   (pages.css je domov-scoped, ta stran ostaja samostojna po istem
   dogovoru kot pri produktnih podstraneh) — spodaj je vzporeden, a
   samostojen sistem, ki isti vizualni jezik uporablja za IZBIRLJIVE
   (role="radio") kartice, ne za povezave.

   Osnovna ".izr-izbira" mehanika (radiogroup, tipkovnica, kljukica)
   ostaja — ta blok jo samo razširi/preglasi za ".izr-izbira--produkt"
   modifikator, ki ga ima SAMO skupina "Kaj potrebujete" (6 kartic
   "Dejavnost" v 2. koraku ostane pri kompaktni različici zgoraj,
   nespremenjeno). ─────────────────────────────────────────────────── */
.izr-izbire--produkt{ grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }

.izr-izbira--produkt{
  flex-direction:column; align-items:stretch; text-align:left;
  padding:0; gap:0; overflow:hidden; border-radius:var(--r-lg);
  border-color:rgba(51,72,97,.10);
}
.izr-izbira--produkt:hover, .izr-izbira--produkt:focus-visible{
  transform:translateY(-4px) scale(1.006); box-shadow:0 18px 40px rgba(23,52,80,.12); border-color:rgba(4,123,193,.35);
}

.izr-izbira-vizual{
  position:relative; overflow:hidden; aspect-ratio:16/11;
  background:radial-gradient(circle at 50% 42%, #f8fafb, #edf1f3);
}
.izr-izbira-slika{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:11% 14% 7%;
  filter:drop-shadow(0 14px 18px rgba(23,52,80,.16));
  transition:transform var(--dur-med) var(--ease-premium);
}
.izr-izbira--produkt:hover .izr-izbira-slika, .izr-izbira--produkt:focus-visible .izr-izbira-slika{
  transform:scale(1.03);
}
/* "Oboje" — resnična kompozicija dveh OBSTOJEČIH produktnih izrezkov
   (isti sredstvi kot pri Tiskalnik/Blagajna zgoraj), ne nova/izmišljena
   slika: tiskalnik manjši in umaknjen zadaj-levo, blagajna večja
   spredaj-desno, oboje na istem radialnem ozadju. */
.izr-izbira--dvojna .izr-izbira-slika{ padding:14% 10% 9%; }
.izr-izbira--dvojna .izr-izbira-slika--tiskalnik{
  inset:6% 46% 30% 2%; padding:0; filter:drop-shadow(0 10px 14px rgba(23,52,80,.14));
}
.izr-izbira--dvojna .izr-izbira-slika--blagajna{
  inset:22% 0% 4% 34%; padding:0; filter:drop-shadow(0 14px 18px rgba(23,52,80,.18));
}
.izr-izbira--dvojna:hover .izr-izbira-slika--tiskalnik, .izr-izbira--dvojna:focus-visible .izr-izbira-slika--tiskalnik{ transform:translate(-2px,-2px) scale(1.03); }
.izr-izbira--dvojna:hover .izr-izbira-slika--blagajna, .izr-izbira--dvojna:focus-visible .izr-izbira-slika--blagajna{ transform:translate(2px,-2px) scale(1.03); }

/* NADALJEVANJE 12 — "GLOBALNA PORAVNAVA SPODNJEGA DELA KARTIC": pri 3
   kartic v isti vrstici (npr. "Tiskalnik" — daljši opis, prelomi v 2
   vrstici) se je "Izberi →" (.izr-izbira-cta) znašel na drugi Y kot pri
   kartici s krajšim, enovrstičnim opisom — kljub temu, da so gumbi (grid
   `align-items:stretch`) enako VISOKI (preverjeno s Playwright meritvijo:
   prej do 19px odstopanje pri 1440/1024px). ".izr-izbira--produkt" je že
   flex-column (podedovano od ".izr-izbira"), zato tu ".izr-izbira-vsebina"
   dobi `flex:1; display:flex; flex-direction:column` (zavzame ves
   preostali prostor POD sliko), CTA spodaj dobi `margin-top:auto` — enak
   recept kot ".dpt-cta-bottom" (depth-system.css), le en nivo globlje
   (vsebina, ne gumb sam, je "kartica" v tem primeru). Gumbov `clientWidth/
   Height` za CGP obrobo (izracun.js, `meriObrobo`) ostane nespremenjen —
   spreminjamo samo RAZPOREDITEV notranjega prostora, ne zunanje velikosti
   gumba, zato "izbrano" animacija ostane nedotaknjena. */
.izr-izbira--produkt .izr-izbira-vsebina{
  display:flex; flex-direction:column; flex:1;
  padding:20px 22px 22px; transition:background var(--dur-fast) var(--ease-premium);
}
.izr-izbira--produkt b{ display:block; font-family:var(--fh); font-weight:700; font-size:18px; color:var(--ink); transition:color var(--dur-fast) var(--ease-premium); }
.izr-izbira--produkt small{ display:block; color:var(--muted); font-size:13.5px; line-height:1.4; margin-top:3px; margin-bottom:14px; }
.izr-izbira-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto; align-self:flex-start;
  font-family:var(--fh); font-weight:700; font-size:13.5px; color:var(--blue);
}
.izr-izbira-cta svg{ width:15px; height:15px; transition:transform .3s var(--ease-premium); }
.izr-izbira--produkt:hover .izr-izbira-cta svg, .izr-izbira--produkt:focus-visible .izr-izbira-cta svg{ transform:translateX(5px); }

/* kljukica se pri produktni kartici seli na vogal slikovnega polja */
.izr-izbira--produkt .izr-izbira-kljukica{ top:12px; right:12px; z-index:2; }

/* ── "izbrano" — CGP obroba je GLAVNI signal (glej brif), ne polna
   pobarvana kartica: tanka (2px) gradientna obroba (cyan→modra→zelena→
   limeta, iz tokens.css), ki se ob izbiri EKRATNO "nariše" okoli
   oboda kartice (SVG rect, stroke-dasharray/-dashoffset, dolžina
   izmerjena v JS prek getTotalLength() — glej izracun.js) — namesto
   približka z border-image, kar da resnično "risanje po robu", ne
   samo pojavitev. Dodatni, SEKUNDARNI znaki: rahel CGP odtenek ozadja
   vsebine, vidna kljukica, nekoliko močnejši naslov — obroba ostaja
   prevladujoča. ─────────────────────────────────────────────────── */
.izr-izbira-obroba{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.izr-izbira-obroba rect{
  fill:none; stroke:url(#izrObrobaGradient); stroke-width:2; stroke-linecap:round;
  transition:stroke-dashoffset .6s var(--ease-premium);
}
.izr-izbira--produkt[aria-checked="true"]{
  border-color:transparent; background:#fff; box-shadow:0 18px 40px rgba(23,52,80,.12);
}
.izr-izbira--produkt[aria-checked="true"] .izr-izbira-vsebina{ background:linear-gradient(180deg, rgba(23,185,236,.05), rgba(171,208,57,.05)); }
.izr-izbira--produkt[aria-checked="true"] b{ color:var(--navy); }
.izr-izbira--produkt[aria-checked="true"] .izr-izbira-kljukica{ background:var(--green); }

@media (prefers-reduced-motion:reduce){
  .izr-izbira-obroba rect{ transition:none; }
  .izr-izbira--produkt:hover, .izr-izbira--produkt:focus-visible{ transform:none; }
  .izr-izbira--produkt:hover .izr-izbira-slika, .izr-izbira--produkt:focus-visible .izr-izbira-slika,
  .izr-izbira--dvojna:hover .izr-izbira-slika--tiskalnik, .izr-izbira--dvojna:hover .izr-izbira-slika--blagajna{ transform:none; }
}

@media (max-width:900px){
  .izr-izbire--produkt{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .izr-izbire--produkt{ grid-template-columns:1fr; }
  .izr-izbira--produkt, .izr-izbira--produkt.izr-izbira{ flex-direction:column; padding:0; }
  .izr-izbira-vizual{ aspect-ratio:16/10; }
}

/* ═══ POLJA (obrazec) ────────────────────────────────────────────
   Premium, umirjen vhodni sistem: velikodušna višina, mehka obroba,
   restrained fokus (cyan), brez težkih sivih škatel/debelih robov. */
.izr-polja{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3) var(--sp-2); }
.izr-polje{ display:flex; flex-direction:column; gap:6px; }
.izr-polje.sirok{ grid-column:1 / -1; }
.izr-polje label{ font-family:var(--fh); font-weight:600; font-size:14px; color:var(--ink); }
.izr-nujno{ color:var(--blue); }
.izr-namig{ font-size:12.5px; color:var(--muted); margin:0; }

.izr-polje input[type=text], .izr-polje input[type=email], .izr-polje input[type=tel],
.izr-polje select, .izr-polje textarea{
  width:100%; font-family:var(--fb); font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:13px 16px; transition:border-color var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
.izr-polje select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px;
}
.izr-polje textarea{ min-height:104px; resize:vertical; line-height:1.5; }
.izr-polje input::placeholder, .izr-polje textarea::placeholder{ color:#9aa8b5; }
.izr-polje input:focus, .izr-polje select:focus, .izr-polje textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(23,185,236,.14);
}
.izr-polje.ima-napako input, .izr-polje.ima-napako select, .izr-polje.ima-napako textarea{
  border-color:#c0392b;
}
.izr-napaka{
  display:none; align-items:center; gap:6px; font-size:12.5px; color:#c0392b; font-weight:600;
}
.izr-napaka svg{ width:14px; height:14px; flex-shrink:0; }
.izr-polje.ima-napako .izr-napaka{ display:flex; }

@media (max-width:640px){
  .izr-polja{ grid-template-columns:1fr; }
}

/* ── pogojne skupine polj (glej izracun.js: hidden+disabled ob skritju,
   opacity/translateY reveal ob prikazu — 340ms, brez odboja) ──────── */
.izr-cona{ margin-top:var(--sp-3); }
.izr-cona[hidden]{ display:none; }
.js .izr-cona.vstopa{ animation:izr-cona-vstopi .38s var(--ease-premium) both; }
@keyframes izr-cona-vstopi{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .js .izr-cona.vstopa{ animation:none; } }
.izr-cona-naslov{
  font-family:var(--fh); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.izr-cona-naslov svg{ width:16px; height:16px; color:var(--izr-a); }

/* ═══ NAVIGACIJA MED KORAKI ──────────────────────────────────────── */
.izr-navigacija{ display:flex; gap:12px; justify-content:space-between; margin-top:var(--sp-5); }
.izr-navigacija .drzi-desno{ margin-left:auto; }

/* ═══ PREGLED (povzetek) ─────────────────────────────────────────
   Brez velike "računovodske" tabele — oznake + vrednosti, tanki
   ločniki, veliko belega prostora (glej brif, točka 23). ─────────── */
.izr-pregled-sklop{ margin-bottom:var(--sp-4); }
.izr-pregled-glava{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.izr-pregled-glava h3{ font-size:15px; font-family:var(--fh); font-weight:700; color:var(--ink); }
.izr-uredi{
  background:none; border:0; padding:2px 0; color:var(--blue); font-weight:700; font-size:13px;
  font-family:var(--fb); cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.izr-uredi:hover{ text-decoration:underline; }
.izr-pregled-vrstica{
  display:flex; justify-content:space-between; gap:var(--sp-3);
  padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px;
}
.izr-pregled-vrstica:last-child{ border-bottom:0; }
.izr-pregled-vrstica span:first-child{ color:var(--muted); }
.izr-pregled-vrstica span:last-child{ color:var(--ink); font-weight:600; text-align:right; max-width:60%; }

.izr-predlog{
  position:relative; overflow:hidden; color:#fff; border-radius:var(--r-lg);
  background:linear-gradient(150deg, var(--navy-deep), var(--navy));
  padding:var(--sp-4) var(--sp-3); margin-bottom:var(--sp-4);
}
.izr-predlog-oznaka{
  font-family:var(--fh); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--lime);
}
.izr-predlog h3{ font-size:1.5rem; margin:6px 0 8px; color:#fff; }
.izr-predlog p{ color:var(--muted-on-navy); font-size:14.5px; line-height:1.5; }
/* 21. 9. 2026 — pravilo ".izr-predlog .ph-l" odstranjeno skupaj z značko
   "Demo izračun" v izracun.html (osirotelo bi bilo). Skupni ".ph/.ph-l"
   razred v components.css ostaja nedotaknjen — je splošna placeholder
   oznaka projekta, ne last te strani.
   "margin-top" pojasnila dvignjen 6px→12px: prej je pojasnilo tesno
   sledilo znački (ta je imela svojih 12px odmika od opisa zgoraj), zdaj
   pa sledi neposredno opisu priporočila in mora ta odmik nositi samo —
   brez tega bi se 12.5px drobni tisk zlepil s 14.5px opisom. Nobene
   prazne vrzeli za odstranjeno značko ne ostane: vsi razmiki v tem bloku
   so eksplicitni (base.css ima "p{margin:0}"). */
.izr-predlog-demo{ margin-top:12px; font-size:12.5px; color:#9fb8cc; }

.izr-oddano{
  display:none; text-align:center; padding:var(--sp-4) var(--sp-2);
  background:var(--surface-alt); border-radius:var(--r-lg); border:1px solid var(--line);
}
.izr-oddano.vidno{ display:block; }
.izr-oddano-ik{
  width:52px; height:52px; border-radius:50%; margin:0 auto 14px;
  background:rgba(24,165,75,.12); color:var(--green); display:flex; align-items:center; justify-content:center;
}
.izr-oddano-ik svg{ width:26px; height:26px; }
.izr-oddano h3{ font-size:19px; margin-bottom:6px; }
.izr-oddano p{ color:var(--muted); font-size:14.5px; max-width:440px; margin:0 auto; }
/* stanje napake — enak barvni jezik (#c0392b) kot pri validaciji polj zgoraj */
.izr-oddano.napaka .izr-oddano-ik{ background:rgba(192,57,43,.12); color:#c0392b; }

/* past za robote (honeypot) — vizualno in za bralnik zaslona odstranjena,
   a še vedno prisotna v DOM/tabulatorskem zaporedju izklopljena (tabindex=-1) */
.izr-past{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; left:-9999px;
}

.izr-opomba{
  font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:var(--sp-3);
  padding-top:var(--sp-2); border-top:1px solid var(--line);
}

.izr-telefon-vrstica{
  text-align:center; margin-top:var(--sp-4); color:var(--muted); font-size:14px;
}
.izr-telefon-vrstica a{ color:var(--blue); font-weight:600; }