/* /doprinos — kalkulator u istom jeziku kao /statistika-pravila: uredničke
   brojke, tanke linije, a jedini glasan element na stranici je iznos.
   Zeleno je samo umanjenje (minus u obračunu), bronza su veze i koraci. */
.dp-shell{
  --dp-ink:#171512;--dp-ink-2:#2c2926;--dp-muted:#6e6860;--dp-faint:rgba(110,104,96,.82);
  --dp-line:rgba(61,52,43,.14);--dp-line-soft:rgba(61,52,43,.08);--dp-line-hi:rgba(61,52,43,.3);
  --dp-card:rgba(255,255,255,.66);--dp-tile:#fbf9f5;--dp-accent:#8b6f47;
  --dp-accent-soft:rgba(139,111,71,.08);--dp-accent-line:rgba(139,111,71,.35);
  --dp-ok:#2e7d32;--dp-warn:#9a6206;--dp-err:#a8452c;
  --dp-serif:"Cormorant Garamond","Cormorant Fallback",Georgia,serif;
  --dp-sans:Inter,"Inter Fallback",system-ui,sans-serif;
  --dp-sticky:104px;
}
.dp-shell [hidden]{display:none!important}

/* ——— Naslov ——— */
.dp-hero{position:relative;padding:clamp(24px,3.4vw,52px) 0 0}
.dp-hero>canvas.pr-sinapse-canvas{position:absolute;inset:-60px 0 0;width:100%;height:calc(100% + 60px);pointer-events:none;opacity:.6}
.dp-hero>*:not(canvas){position:relative;z-index:1}
.dp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px clamp(32px,5vw,88px);align-items:end}
.dp-kicker{margin:0 0 18px;font:600 10px/1.3 var(--dp-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--dp-accent)}
.dp-hero h1{margin:0;font:400 clamp(44px,5.4vw,82px)/.95 var(--dp-serif);letter-spacing:-.022em;color:var(--dp-ink)}
.dp-hero h1 span{display:inline-block}
.dp-sub{margin:22px 0 0;max-width:720px;font:400 14px/1.7 var(--dp-sans);color:var(--dp-muted)}
.dp-stamp{display:grid;gap:18px;min-width:230px;margin:0 0 6px;padding:2px 0 2px 24px;border-left:1px solid var(--dp-line)}
.dp-stamp dt{margin:0 0 7px;font:600 9.5px/1.3 var(--dp-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dp-muted)}
.dp-stamp dd{margin:0;font:400 12px/1.55 var(--dp-sans);color:var(--dp-faint)}
.dp-stamp dd b{display:block;margin:0 0 5px;font:400 34px/1 var(--dp-serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;color:var(--dp-ink)}
.dp-stamp dd b small{font:500 11px/1 var(--dp-sans);letter-spacing:.06em;color:var(--dp-muted)}
.dp-napomena{max-width:900px;margin:28px 0 0;padding:12px 18px;border-left:2px solid var(--dp-accent);background:var(--dp-accent-soft);font:400 12.5px/1.65 var(--dp-sans);color:#4a453e}

/* ——— Kalkulator ——— */
.dp-calc{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(360px,.86fr);gap:clamp(28px,4.2vw,72px);align-items:start;margin:clamp(40px,4.6vw,64px) 0 0}
.dp-form{min-width:0}
.dp-step{min-width:0;margin:0 0 clamp(30px,3.2vw,42px);padding:0;border:0}
.dp-step:last-child{margin-bottom:0}
.dp-step-h{display:flex;align-items:baseline;gap:14px;box-sizing:border-box;width:100%;margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--dp-line)}
.dp-step-h .n{font:400 17px/1 var(--dp-sans);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--dp-accent)}
.dp-step-h .t{font:400 clamp(24px,2.1vw,30px)/1.1 var(--dp-serif);color:var(--dp-ink)}

.dp-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dp-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.dp-field>label,.dp-lbl{margin:0;font:500 12px/1.4 var(--dp-sans);color:var(--dp-ink-2)}
.dp-hint{display:block;margin:12px 0 0;max-width:78ch;font:400 11.5px/1.6 var(--dp-sans);color:var(--dp-faint)}
.dp-field .dp-hint{margin-top:2px}
.dp-hint a,.dp-napomena a,.dp-sub a,.dp-sec .lead a,.dp-tabela-nap a,.dp-notes a,.dp-iznos-s a{color:var(--dp-accent);text-decoration:none;border-bottom:1px solid var(--dp-accent-line)}
.dp-hint a:hover,.dp-sec .lead a:hover,.dp-tabela-nap a:hover,.dp-notes a:hover{border-bottom-color:var(--dp-accent)}

.dp-form input[type=text],.dp-form select{width:100%;box-sizing:border-box;height:46px;margin:0;padding:0 14px;border:1px solid var(--dp-line);border-radius:2px;background:rgba(255,255,255,.72);font:400 14px/1.2 var(--dp-sans);font-variant-numeric:tabular-nums;color:var(--dp-ink);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.dp-form input[type=text]:hover,.dp-form select:hover{border-color:var(--dp-line-hi)}
.dp-form input[type=text]:focus,.dp-form select:focus{outline:none;border-color:var(--dp-accent);background:#fff;box-shadow:0 0 0 3px rgba(139,111,71,.16)}
.dp-form input[aria-invalid=true]{border-color:var(--dp-err);box-shadow:0 0 0 3px rgba(168,69,44,.1)}
.dp-select{position:relative}
.dp-select select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;text-overflow:ellipsis}
.dp-select::after{content:"";position:absolute;right:16px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--dp-muted);border-bottom:1.5px solid var(--dp-muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.dp-unit{position:relative}
.dp-unit input[type=text]{padding-right:48px;text-align:right}
.dp-unit>span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:500 12px/1 var(--dp-sans);color:var(--dp-faint);pointer-events:none}
.dp-unit-siroka input[type=text]{padding-right:74px}
.dp-unit-uska{max-width:180px}

/* Površine: naziv i opis lijevo, unos i cijena po m² desno. */
.dp-povrsine{border-top:0}
.dp-pov{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,210px);gap:8px 28px;align-items:start;padding:14px 0;border-bottom:1px solid var(--dp-line-soft)}
.dp-pov:first-child{padding-top:2px}
.dp-pov-naziv{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.dp-pov-naziv label{font:500 14px/1.35 var(--dp-sans);color:var(--dp-ink)}
.dp-k{font:500 10.5px/1 var(--dp-sans);font-variant-numeric:tabular-nums;letter-spacing:.03em;color:var(--dp-accent);padding:4px 7px 3px;border-radius:2px;background:var(--dp-accent-soft);white-space:nowrap}
.dp-pov-opis p{margin:6px 0 0;max-width:58ch;font:400 11.5px/1.55 var(--dp-sans);color:var(--dp-faint)}
.dp-pov-unos{display:flex;flex-direction:column;gap:6px;min-width:0}
.dp-cijena{min-height:15px;text-align:right;font:400 11px/1.35 var(--dp-sans);font-variant-numeric:tabular-nums;color:var(--dp-faint)}
.dp-cijena b{font-weight:500;color:var(--dp-ink-2)}

/* Dodatni uslovi: redovi koji se otvaraju, sa brojem izabranog. */
.dp-dodatno{margin:20px 0 0;border-top:1px solid var(--dp-line)}
.dp-more{border-bottom:1px solid var(--dp-line)}
.dp-more>summary{display:flex;align-items:center;gap:12px;padding:15px 0;cursor:pointer;list-style:none;font:500 13px/1.4 var(--dp-sans);color:var(--dp-ink-2);transition:color .16s ease}
.dp-more>summary::-webkit-details-marker{display:none}
.dp-more>summary::before{content:"";flex:none;width:20px;height:20px;box-sizing:border-box;border:1px solid var(--dp-line-hi);border-radius:50%;
  background:linear-gradient(var(--dp-accent),var(--dp-accent)) center/9px 1.5px no-repeat,linear-gradient(var(--dp-accent),var(--dp-accent)) center/1.5px 9px no-repeat;transition:border-color .16s ease}
.dp-more[open]>summary::before{background:linear-gradient(var(--dp-accent),var(--dp-accent)) center/9px 1.5px no-repeat}
.dp-more>summary:hover{color:var(--dp-ink)}
.dp-more>summary:hover::before{border-color:var(--dp-accent)}
.dp-more>summary:focus-visible{outline:2px solid var(--dp-accent);outline-offset:3px}
.dp-more-n{margin-left:auto;font:500 11.5px/1 var(--dp-sans);font-style:normal;font-variant-numeric:tabular-nums;color:var(--dp-accent);white-space:nowrap}
.dp-more-n:empty{display:none}
.dp-more-body{display:grid;gap:12px;padding:0 0 20px 32px}
.dp-more-body .dp-hint{margin-top:0}

.dp-check{display:flex;gap:10px;align-items:flex-start;margin:0;font:400 12.5px/1.55 var(--dp-sans);color:var(--dp-ink-2);cursor:pointer}
.dp-check input{flex:none;width:15px;height:15px;margin:2px 0 0;accent-color:var(--dp-accent);cursor:pointer}
.dp-check em{font-style:normal;color:var(--dp-muted)}

/* Način plaćanja: tri kartice, izabrana je uokvirena crnim. */
.dp-opcije{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dp-opcija{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;padding:15px 16px 16px;border:1px solid var(--dp-line);border-radius:2px;background:rgba(255,255,255,.5);cursor:pointer;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.dp-opcija:hover{border-color:var(--dp-line-hi);background:rgba(255,255,255,.8)}
.dp-opcija input{position:absolute;top:15px;right:14px;width:15px;height:15px;margin:0;accent-color:var(--dp-ink);cursor:pointer}
.dp-opcija .t{padding-right:24px;font:500 12.5px/1.35 var(--dp-sans);color:var(--dp-ink)}
.dp-opcija .v{margin:6px 0 2px;font:400 27px/1 var(--dp-serif);font-variant-numeric:lining-nums;color:var(--dp-ink);white-space:nowrap}
.dp-opcija .o{font:400 11.5px/1.5 var(--dp-sans);color:var(--dp-faint)}
.dp-opcija:has(input:checked){border-color:var(--dp-ink);background:#fff;box-shadow:inset 0 0 0 1px var(--dp-ink)}
.dp-opcija:has(input:focus-visible){outline:2px solid var(--dp-accent);outline-offset:2px}
.dp-cl92{margin:14px 0 0}
.dp-zelena{margin:16px 0 0}

.dp-osnovica-red{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.dp-osnovica-red .dp-unit{flex:0 1 280px;min-width:200px}
.dp-vrati{appearance:none;padding:0;border:0;border-bottom:1px solid var(--dp-accent-line);background:none;font:500 12px/1.4 var(--dp-sans);color:var(--dp-accent);cursor:pointer}
.dp-vrati:hover{border-bottom-color:var(--dp-accent)}

/* ——— Obračun ——— */
.dp-res{position:sticky;top:var(--dp-sticky);max-height:calc(100vh - var(--dp-sticky) - 20px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  box-sizing:border-box;min-width:0;padding:22px 26px 20px;border:1px solid var(--dp-line);background:var(--dp-tile);scroll-margin-top:var(--dp-sticky);
  container-type:inline-size;container-name:obracun}
.dp-res-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;padding:0 0 14px;border-bottom:1px solid var(--dp-line)}
.dp-res-top h2{margin:0;font:600 10px/1.3 var(--dp-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--dp-ink)}
.dp-tag{padding:5px 9px 4px;border:1px solid var(--dp-accent-line);border-radius:999px;font:600 9px/1 var(--dp-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dp-accent)}

.dp-koraci{margin:0;padding:0;list-style:none}
.dp-koraci li{display:grid;grid-template-columns:16px minmax(0,auto) minmax(0,1fr);align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--dp-line-soft);font:400 13px/1.4 var(--dp-sans);color:var(--dp-muted)}
.dp-koraci li i{position:relative;width:16px;height:16px;box-sizing:border-box;border:1.5px solid var(--dp-line-hi);border-radius:50%}
.dp-koraci li.ok{color:var(--dp-ink-2)}
.dp-koraci li.ok i{border-color:var(--dp-ok);background:var(--dp-ok)}
.dp-koraci li.ok i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:3.5px;height:7px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg)}
.dp-koraci li b{justify-self:end;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--dp-ink)}
.dp-prazno{margin:16px 0 0;font:400 12.5px/1.6 var(--dp-sans);color:var(--dp-muted)}
.dp-greske{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.dp-greske li,.dp-greska{margin:0;font:400 12.5px/1.55 var(--dp-sans);color:var(--dp-err)}

.dp-iznos-k{margin:0;font:600 9.5px/1.3 var(--dp-sans);letter-spacing:.15em;text-transform:uppercase;color:var(--dp-muted)}
.dp-iznos-v{margin:10px 0 10px;font:400 clamp(42px,3.9vw,60px)/.95 var(--dp-serif);font-size:clamp(38px,11cqi,60px);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.015em;color:var(--dp-ink);overflow-wrap:anywhere}
.dp-iznos-v small{margin-left:5px;font:500 12px/1 var(--dp-sans);letter-spacing:.08em;color:var(--dp-muted)}
.dp-iznos-s{margin:0;font:400 12.5px/1.6 var(--dp-sans);color:var(--dp-muted)}
.dp-iznos-s b{font-weight:500;color:var(--dp-ink-2);white-space:nowrap}
.dp-rate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:4px 0 12px;border:1px solid var(--dp-line);background:var(--dp-line)}
.dp-rate>div{min-width:0;padding:12px 14px;background:#fdfcfa}
.dp-rate span{display:block;font:600 9px/1.3 var(--dp-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--dp-muted)}
.dp-rate b{display:block;margin:7px 0 4px;font:400 25px/1 var(--dp-serif);font-variant-numeric:lining-nums tabular-nums;color:var(--dp-ink);white-space:nowrap}
.dp-rate small{display:block;font:400 11px/1.4 var(--dp-sans);color:var(--dp-faint)}
.dp-kontekst{margin:18px 0 4px;font:400 11.5px/1.6 var(--dp-sans);color:var(--dp-muted)}

.dp-t{width:100%;border-collapse:collapse;font:400 12px/1.45 var(--dp-sans);font-variant-numeric:tabular-nums}
.dp-t th{padding:8px 8px;border-bottom:1px solid var(--dp-line);text-align:left;font:600 9px/1.3 var(--dp-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dp-muted)}
.dp-t td{padding:8px 8px;border-bottom:1px solid var(--dp-line-soft);vertical-align:top;color:var(--dp-ink-2)}
.dp-t th:first-child,.dp-t td:first-child{padding-left:0}
.dp-t th:last-child,.dp-t td:last-child{padding-right:0}
.dp-t .n{text-align:right;white-space:nowrap}
.dp-t td small{display:block;margin-top:2px;font-size:10.5px;color:var(--dp-faint)}
.dp-t tr.sum td{font-weight:600;color:var(--dp-ink)}
.dp-t tr.minus td{color:var(--dp-muted)}
.dp-t tr.minus td.n{color:var(--dp-ok)}
.dp-t tr.total td{padding-top:12px;border-top:1px solid var(--dp-ink);border-bottom:0;font-size:13px;font-weight:600;color:var(--dp-ink)}
/* Na telefonu kolona din/m² prelazi u sitni red ispod naziva namjene. */
.dp-t-mob{display:none}
@container obracun (max-width:430px){
  .dp-t .c3{display:none}
  .dp-t-mob{display:block}
}
@container obracun (max-width:380px){
  .dp-rate{grid-template-columns:1fr}
}

.dp-notes{display:grid;gap:9px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--dp-line-soft);list-style:none}
.dp-notes li{position:relative;padding-left:16px;font:400 12px/1.6 var(--dp-sans);color:#4a453e}
.dp-notes li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--dp-accent)}
.dp-notes li.warn::before{background:var(--dp-warn)}
.dp-ref{white-space:nowrap;color:var(--dp-faint)}

.dp-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--dp-line-soft)}
.dp-btn{appearance:none;padding:10px 14px;border:1px solid var(--dp-line);border-radius:2px;background:rgba(255,255,255,.72);font:600 9.5px/1 var(--dp-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--dp-ink-2);cursor:pointer;transition:border-color .16s ease,color .16s ease,background-color .16s ease}
.dp-btn:hover:not([disabled]){border-color:var(--dp-ink);color:var(--dp-ink);background:#fff}
.dp-btn:focus-visible,.dp-vrati:focus-visible,.dp-mini button:focus-visible{outline:2px solid var(--dp-accent);outline-offset:2px}
.dp-btn[disabled]{opacity:.42;cursor:default}
.dp-btn.gotovo{border-color:rgba(46,125,50,.5);color:var(--dp-ok)}
.dp-btn-tiho{margin-left:auto;border-color:transparent;background:none;color:var(--dp-muted)}
.dp-btn-tiho:hover:not([disabled]){border-color:var(--dp-line);background:none}

/* ——— Odjeljci ispod kalkulatora ——— */
.dp-sec{margin:clamp(64px,7vw,108px) 0 0}
.dp-sec-head{margin:0 0 22px}
.dp-sec-head-red{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 40px;flex-wrap:wrap}
.dp-sec h2{margin:0 0 8px;font:400 clamp(28px,2.6vw,38px)/1.05 var(--dp-serif);color:var(--dp-ink)}
.dp-sec .lead{max-width:80ch;margin:0;font:400 13px/1.7 var(--dp-sans);color:var(--dp-muted)}

/* Traka „osnovica × k zone × k namjene = din/m²”. */
.dp-formula{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.25fr) auto minmax(0,1.1fr);align-items:stretch;margin:0 0 18px;border:1px solid var(--dp-line);background:var(--dp-tile)}
.dp-formula-c{display:flex;flex-direction:column;gap:7px;min-width:0;padding:16px 20px 15px;color:inherit;text-decoration:none;transition:background-color .16s ease}
a.dp-formula-c:hover{background:#fff}
a.dp-formula-c:focus-visible{outline:2px solid var(--dp-accent);outline-offset:-2px}
.dp-formula-c .k{font:600 9.5px/1.3 var(--dp-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dp-muted)}
.dp-formula-c b{font:400 clamp(22px,1.9vw,30px)/1 var(--dp-serif);font-variant-numeric:lining-nums tabular-nums;color:var(--dp-ink);white-space:nowrap}
.dp-formula-c .o{font:400 11px/1.5 var(--dp-sans);color:var(--dp-faint)}
a.dp-formula-c .k::after{content:" ↓";content:" ↓"/"";color:var(--dp-accent);letter-spacing:0;opacity:0;transition:opacity .16s ease}
a.dp-formula-c:hover .k::after{opacity:1}
.dp-formula-r{background:rgba(139,111,71,.06)}
.dp-formula-op{display:flex;align-items:center;justify-content:center;padding:0 2px;font:300 26px/1 var(--dp-serif);color:var(--dp-faint)}

.dp-wrap{overflow-x:auto;border:1px solid var(--dp-line);background:var(--dp-card);scrollbar-width:thin}
.dp-zt{width:100%;min-width:780px;border-collapse:collapse;font:400 12.5px/1.45 var(--dp-sans);font-variant-numeric:tabular-nums}
.dp-zt th,.dp-zt td{padding:9px 14px;border-bottom:1px solid var(--dp-line-soft)}
.dp-zt thead th{font:600 9px/1.3 var(--dp-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dp-muted);border-bottom:1px solid var(--dp-line);white-space:nowrap}
.dp-zt thead tr:first-child th{padding-top:12px}
.dp-zt .dp-zt-grupa{text-align:left;color:var(--dp-ink)}
.dp-zt .n{text-align:right;white-space:nowrap}
.dp-zt .dp-zt-prva,.dp-zt .dp-zt-grupa{border-left:1px solid var(--dp-line)}
.dp-zt th.dp-zt-zona{position:sticky;left:0;z-index:1;min-width:190px;background:#faf8f4;text-align:left}
.dp-zt tbody th.dp-zt-zona{font:500 12.5px/1.4 var(--dp-sans);color:var(--dp-ink)}
.dp-zt tbody tr:last-child th,.dp-zt tbody tr:last-child td{border-bottom:0}
.dp-zt td{color:var(--dp-ink-2)}
/* Zvjezdica sjedi u desnom paddingu ćelije, da broj ostane poravnat sa ostalima. */
.dp-zt td{position:relative}
.dp-zt sup{position:absolute;top:8px;right:5px;font-size:10px;line-height:1;color:var(--dp-accent)}
.dp-zt tbody tr:hover td,.dp-zt tbody tr:hover th.dp-zt-zona{background:#fffdf9}
/* Grupa izabrane opštine je puna, druga utihne; izabrana zona je red sa bronzanom ivicom. */
.dp-zt.g-centralne [data-g=prigradske],.dp-zt.g-prigradske [data-g=centralne]{color:var(--dp-faint)}
.dp-zt.g-centralne thead [data-g=centralne],.dp-zt.g-prigradske thead [data-g=prigradske]{color:var(--dp-accent)}
.dp-zt tr.is-sel td,.dp-zt tr.is-sel th.dp-zt-zona{background:#f3ece1}
.dp-zt tr.is-sel th.dp-zt-zona{box-shadow:inset 3px 0 0 var(--dp-accent)}
.dp-zt.g-centralne tr.is-sel td[data-g=centralne],.dp-zt.g-prigradske tr.is-sel td[data-g=prigradske]{font-weight:600;color:var(--dp-ink)}
.dp-tabela-nap{display:grid;gap:5px;margin:14px 0 0;padding:0;list-style:none;font:400 11.5px/1.6 var(--dp-sans);color:var(--dp-faint)}
.dp-tabela-nap b{font-weight:500;color:var(--dp-muted)}
.dp-tabela-nap sup{color:var(--dp-accent)}

/* ——— Izvori ——— */
.dp-akti{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px}
.dp-akt{display:inline-flex;align-items:center;gap:6px;padding:7px 11px 6px;border:1px solid var(--dp-line);border-radius:999px;background:rgba(255,255,255,.5);font:500 11px/1 var(--dp-sans);font-variant-numeric:tabular-nums;color:var(--dp-ink-2);text-decoration:none;transition:border-color .16s ease,color .16s ease}
.dp-akt span{color:var(--dp-faint);transition:color .16s ease}
.dp-akt:hover{border-color:var(--dp-accent);color:var(--dp-accent)}
.dp-akt:hover span{color:var(--dp-accent)}
.dp-akt:focus-visible{outline:2px solid var(--dp-accent);outline-offset:2px}
.dp-akt-tiho{border-style:dashed}
.dp-teme{border-top:1px solid var(--dp-line)}
.dp-tema{border-bottom:1px solid var(--dp-line)}
.dp-tema>summary{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:16px;padding:17px 0;cursor:pointer;list-style:none}
.dp-tema>summary::-webkit-details-marker{display:none}
.dp-tema>summary::before{content:"";width:20px;height:20px;box-sizing:border-box;border:1px solid var(--dp-line-hi);border-radius:50%;
  background:linear-gradient(var(--dp-accent),var(--dp-accent)) center/9px 1.5px no-repeat,linear-gradient(var(--dp-accent),var(--dp-accent)) center/1.5px 9px no-repeat;transition:border-color .16s ease}
.dp-tema[open]>summary::before{background:linear-gradient(var(--dp-accent),var(--dp-accent)) center/9px 1.5px no-repeat}
.dp-tema>summary:hover::before{border-color:var(--dp-accent)}
.dp-tema>summary:focus-visible{outline:2px solid var(--dp-accent);outline-offset:3px}
.dp-tema>summary .t{font:400 clamp(20px,1.8vw,24px)/1.2 var(--dp-serif);color:var(--dp-ink)}
.dp-tema>summary .m{font:400 11.5px/1.45 var(--dp-sans);font-variant-numeric:tabular-nums;color:var(--dp-faint);text-align:right}
.dp-citati{margin:0;padding:0 0 18px 36px;list-style:none}
.dp-cit{margin:0;padding:13px 14px 14px;border-top:1px solid var(--dp-line-soft);scroll-margin-top:calc(var(--dp-sticky) + 16px);transition:background-color .4s ease}
.dp-cit:first-child{border-top:0}
.dp-cit:target{background:rgba(139,111,71,.1)}
.dp-cit b{display:block;margin:0 0 6px;font:600 9.5px/1.45 var(--dp-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dp-accent)}
.dp-cit b a{color:inherit;text-decoration:none;border-bottom:1px solid var(--dp-accent-line)}
.dp-cit b a:hover{border-bottom-color:var(--dp-accent)}
/* Cormorant crta „stare” cifre (30% liči na „зо%”); u citatu su brojevi suština. */
.dp-cit q{display:block;max-width:104ch;font:400 17.5px/1.55 var(--dp-serif);font-variant-numeric:lining-nums;color:var(--dp-ink-2);quotes:"„" "”"}

/* ——— Traka sa iznosom na telefonu, dok se popunjava forma ——— */
.dp-mini{position:fixed;left:0;right:0;bottom:var(--consent-h,0px);z-index:950;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(23,21,18,.95);color:#f5f1ea;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -10px 30px -12px rgba(0,0,0,.35);
  transform:translateY(110%);visibility:hidden;transition:transform .3s cubic-bezier(.19,1,.22,1),visibility 0s linear .3s}
.dp-mini.on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.19,1,.22,1),visibility 0s}
.dp-mini>div{min-width:0}
.dp-mini span{display:block;font:600 9px/1.3 var(--dp-sans);letter-spacing:.15em;text-transform:uppercase;color:rgba(245,241,234,.62)}
.dp-mini b{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 23px/1.05 var(--dp-serif);font-variant-numeric:lining-nums tabular-nums}
.dp-mini button{appearance:none;flex:none;padding:10px 13px;border:1px solid rgba(245,241,234,.38);border-radius:2px;background:none;font:600 9.5px/1 var(--dp-sans);letter-spacing:.13em;text-transform:uppercase;color:#f5f1ea;cursor:pointer}

/* ——— Uži ekrani ——— */
@media(max-width:1180px){
  .dp-formula{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dp-formula-op{display:none}
  .dp-formula-c{border-bottom:1px solid var(--dp-line)}
  .dp-formula-c:nth-of-type(odd){border-right:1px solid var(--dp-line)}
  .dp-formula-c:nth-last-of-type(-n+2){border-bottom:0}
  .dp-opcije{grid-template-columns:1fr}
  .dp-opcija{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding-right:44px}
  .dp-opcija .t{grid-column:1;padding-right:0}
  .dp-opcija .o{grid-column:1}
  .dp-opcija .v{grid-column:2;grid-row:1/span 2;align-self:center;margin:0;font-size:24px}
}
@media(max-width:980px){
  .dp-hero-grid{grid-template-columns:1fr}
  .dp-stamp{grid-template-columns:repeat(2,minmax(0,max-content));gap:14px 40px;margin:0;padding:0 0 0 18px}
  .dp-calc{grid-template-columns:minmax(0,1fr)}
  .dp-res{position:static;max-height:none;overflow:visible}
}
@media(max-width:640px){
  .dp-hero{padding-top:18px}
  .dp-hero h1{font-size:clamp(38px,11vw,52px)}
  .dp-hero h1 span{display:inline}
  .dp-sub{font-size:13.5px}
  .dp-stamp{grid-template-columns:1fr}
  .dp-grid2{grid-template-columns:1fr}
  .dp-pov{grid-template-columns:1fr;gap:10px}
  .dp-pov-unos{flex-direction:row;align-items:center;gap:14px}
  .dp-pov-unos .dp-unit{flex:1 1 auto;min-width:0}
  /* Stalna širina cijene, da sva polja za m² budu ista; dok cijene nema, polje je puno. */
  .dp-cijena{flex:0 0 108px;min-height:0;text-align:right}
  .dp-cijena:empty{display:none}
  .dp-more-body{padding-left:0}
  .dp-res{padding:18px 16px 16px}
  .dp-formula{grid-template-columns:1fr}
  .dp-formula-c{border-right:0!important;border-bottom:1px solid var(--dp-line)!important}
  .dp-formula-c:last-child{border-bottom:0!important}
  .dp-tema>summary{grid-template-columns:20px minmax(0,1fr);gap:4px 14px}
  .dp-tema>summary .m{grid-column:2;text-align:left}
  .dp-citati{padding-left:0}
  .dp-cit{padding-left:0;padding-right:0}
  .dp-cit:target{padding-left:10px;padding-right:10px}
  .dp-cit q{font-size:16.5px}
  .dp-btn-tiho{margin-left:0}
}
@media(min-width:981px){.dp-mini{display:none}}
@media(prefers-reduced-motion:reduce){
  .dp-mini,.dp-mini.on{transition:none}
  .dp-cit{transition:none}
}

/* ——— Štampa: obračun i tabela, bez forme i izvora ——— */
@media print{
  .h2-top,.vpaa-legal-subnav-bar,.vpaa-footer,.dp-form,.dp-btns,.dp-mini,.dp-izvori,.dp-formula,.dp-hero canvas,.dp-sub,#vpaa-consent{display:none!important}
  /* Ljuska ima inline padding za fiksno zaglavlje, koje se ne štampa. */
  .dp-shell{padding-top:0!important;padding-bottom:0!important}
  .dp-hero{padding-top:0}
  .dp-hero h1{font-size:30px}
  .dp-hero h1 span{display:inline}
  .dp-hero-grid{grid-template-columns:1fr auto}
  .dp-napomena{margin-top:14px}
  .dp-calc{display:block;margin-top:18px}
  .dp-res{position:static;max-height:none;overflow:visible;padding:0;border:0;background:none}
  .dp-sec{margin-top:28px;break-inside:avoid}
  .dp-wrap{overflow:visible;border:0}
  .dp-zt{min-width:0}
  .dp-zt th.dp-zt-zona{position:static}
}
