/* zk-forma-v5.css - novi izgled obrasca vlasnickog lista (08.09.2026., Petra odabrala B i C iz mockupa). Radi NAD postojecim [full_product_7159] obrascem: isti shortcode, ista polja, isti Woo tok. Nista se ne prepisuje - opcije.js i dalje crta popis dokumenata (.opt-omot), ovaj sloj ga samo rasporedi i oboji. Ukljucuje se klasom na : .zkv5-c (dvodijelna tamna kartica: proizvod, naslovnica) ili .zkv5-b (dva koraka: rezultat provjere). zk-forma-v5.js dodaje .zkv5-doc, .zkv5-seg, .zkv5-uk, korake. */ .zkv5 .v4-obrazac .full-product-7159-wrapper{padding:0 !important;border:0 !important;border-radius:22px !important;background:#1e3a5f !important;overflow:hidden;box-shadow:0 20px 50px rgba(15,23,42,.18);margin:0 !important;color:#fff} .zkv5 .v4-obrazac .full-product-7159-wrapper{display:grid;grid-template-columns:1.05fr 1fr;gap:0} .zkv5 .v4-obrazac form.variations_form{display:contents} .zkv5 .v4-obrazac table.variations,.zkv5 .v4-obrazac table.variations tbody,.zkv5 .v4-obrazac table.variations tr,.zkv5 .v4-obrazac table.variations th,.zkv5 .v4-obrazac table.variations td{display:block !important;width:100% !important;max-width:none !important;padding:0;margin:0;border:0;background:transparent;box-sizing:border-box} .zkv5 .v4-obrazac .opt-omot,.zkv5 .v4-obrazac .opt-lista,.zkv5 .v4-obrazac .opt-stavka{width:100% !important;max-width:none !important} .zkv5 .v4-obrazac table.variations th.label,.zkv5 .v4-obrazac table.variations th{display:none !important} .zkv5 .v4-obrazac table.variations{grid-column:1;padding:0 26px} .zkv5 .v4-obrazac .zkv5-glava{grid-column:1;padding:26px 26px 12px} .zkv5 .v4-obrazac .zkv5-glava h3{margin:0 0 4px;font-size:1.3rem;font-weight:700;color:#fff;letter-spacing:-.01em} .zkv5 .v4-obrazac .zkv5-glava p{margin:0;color:#b8c7dc;font-size:.86rem} /* popis dokumenata: uvijek otvoren, bez sazetka */ .zkv5 .v4-obrazac .opt-omot{position:static;width:100%} .zkv5 .v4-obrazac table.variations,.zkv5 .v4-obrazac table.variations td,.zkv5 .v4-obrazac .opt-lista,.zkv5 .v4-obrazac .opt-stavka{width:100%;box-sizing:border-box} .zkv5 .v4-obrazac .opt-sazetak{display:none !important} .zkv5 .v4-obrazac .opt-omot .opt-lista,.zkv5 .v4-obrazac .opt-omot.otvoreno .opt-lista{display:grid !important;position:static;max-height:none;overflow:visible;margin:0;padding:0;gap:7px;box-shadow:none;border:0;background:transparent} .zkv5 .v4-obrazac .opt-stavka{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);color:#fff;border-radius:12px;padding:10px 13px;font-size:.86rem} .zkv5 .v4-obrazac .opt-stavka:hover{border-color:rgba(255,255,255,.4)} .zkv5 .v4-obrazac .opt-stavka.aktivan{background:#fff;color:#0f172a;border:1.5px solid #fff;padding:10px 13px;font-weight:600} .zkv5 .v4-obrazac .opt-stavka .opt-cijena{color:inherit} .zkv5 .v4-obrazac .opt-stavka.aktivan .opt-cijena{color:#1e3a5f} /* opis odabrane varijacije (Woo ga crta u .single_variation_wrap) */ .zkv5 .v4-obrazac .single_variation_wrap{grid-column:1;padding:12px 26px 0} .zkv5 .v4-obrazac .woocommerce-variation-description{background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;color:#dbe5f1;font-size:.82rem;line-height:1.5} .zkv5 .v4-obrazac .woocommerce-variation-description .kt-var-opis li svg{color:#7ee2a0} .zkv5 .v4-obrazac .woocommerce-variation-price,.zkv5 .v4-obrazac .woocommerce-variation-availability,.zkv5 .v4-obrazac .woocommerce-variation-add-to-cart,.zkv5 .v4-obrazac .reset_variations{display:none !important} .zkv5 .v4-obrazac .var-uvjeti > summary{color:#7ee2a0} .zkv5 .v4-obrazac .var-uvjeti-tijelo{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#dbe5f1} .zkv5 .v4-obrazac .zkv5-rec{grid-column:1;padding:14px 26px 26px;color:#b8c7dc;font-size:.82rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .zkv5 .v4-obrazac .zkv5-rec b{color:#fff} .zkv5 .v4-obrazac .zkv5-rec .zv{color:#f5a623;letter-spacing:1px} /* desni bijeli stupac s poljima */ .zkv5 .v4-obrazac .shortcode-custom-fields{grid-column:2;grid-row:1/5;background:#fff;color:#0f172a;margin:0 !important;padding:26px !important;display:flex;flex-direction:column} .zkv5 .v4-obrazac .shortcode-custom-fields .zkv5-h4{margin:0 0 2px;font-size:1.05rem;font-weight:700} .zkv5 .v4-obrazac .shortcode-custom-fields .zkv5-p{margin:0 0 14px;color:#64748b;font-size:.82rem} .zkv5 .v4-obrazac .shortcode-custom-fields .form-row{display:block;grid-template-columns:none;margin:0 0 11px} .zkv5 .v4-obrazac,.zkv5 .prod-dno .v4-obrazac,.zkv5 .prod-dno{max-width:none;width:100%} .zkv5 .v4-obrazac .shortcode-custom-fields label{font-size:.8rem;font-weight:600;color:#334155;margin-bottom:5px;display:block} .zkv5 .v4-obrazac .shortcode-custom-fields input[type=text]{width:100%;border:1.5px solid #e2e8f0 !important;border-radius:12px !important;padding:12px 14px !important;font:inherit;font-size:.93rem;background:#fff;color:#0f172a;box-shadow:none} .zkv5 .v4-obrazac .shortcode-custom-fields input[type=text]:focus{outline:none;border-color:#1e3a5f !important;box-shadow:0 0 0 3px rgba(30,58,95,.12)} .zkv5 .v4-obrazac .shortcode-custom-fields select.zkv5-skriven{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0} .zkv5 .v4-obrazac .zkv5-seg{display:flex;background:#eef3fa;border-radius:999px;padding:4px;margin:0 0 6px} .zkv5 .v4-obrazac .zkv5-seg button{flex:1;border:0;background:transparent;border-radius:999px;padding:9px 6px;font:inherit;font-size:.84rem;font-weight:600;color:#64748b;cursor:pointer} .zkv5 .v4-obrazac .zkv5-seg button.on{background:#fff;color:#1e3a5f;box-shadow:0 2px 8px rgba(15,23,42,.08)} .zkv5 .v4-obrazac .zkv5-uk{display:flex;justify-content:space-between;align-items:center;margin:auto 0 10px;padding-top:12px;border-top:1px solid #e2e8f0;font-size:.82rem;color:#64748b} .zkv5 .v4-obrazac .zkv5-uk b{font-size:1.45rem;color:#1e3a5f;letter-spacing:-.01em} .zkv5 .v4-obrazac [id^=shortcode_add_to_cart_btn_]{border-radius:999px !important;padding:15px 22px !important;font-weight:700 !important;font-size:1rem !important;background:#22a34a !important} .zkv5 .v4-obrazac [id^=shortcode_add_to_cart_btn_]:hover{background:#1c8a3d !important;transform:none;box-shadow:none} .zkv5 .v4-obrazac .zkv5-jam{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:.76rem;color:#64748b} .zkv5 .v4-obrazac .zkv5-jam span{display:inline-flex;align-items:center;gap:5px} .zkv5 .v4-obrazac .zkv5-jam svg{width:13px;height:13px;color:#22a34a;flex:none} .zkv5 .v4-obrazac #kc_zk_validation_note_sc1,.zkv5 .v4-obrazac [id^=kc_zk_validation_note_]{color:#9a5b00 !important} .zkv5 .v4-obrazac .ns-rok{font-size:.76rem;color:#64748b;margin:10px 4px 0} /* stara kutija cijene i poseban opis nisu potrebni u v5 - cijena je u obrascu */ .zkv5 .cijena-box{display:none !important} /* proizvod: obrazac u punom redu ispod slike i cijene (JS ga vraca iz desnog stupca) */ .zkv5-c .prod-grid .prod-dno,.zkv5-c .prod-dno{grid-column:1/-1;margin-top:6px} .zkv5-c .prod-grid{grid-template-columns:1fr 1fr} /* naslovnica i uski stupci: jedan stupac (tamni dio pa bijeli) */ .zkv5 .nc-k-zk .v4-obrazac .full-product-7159-wrapper,.zkv5-b .v4-obrazac .full-product-7159-wrapper{grid-template-columns:1fr} .zkv5 .nc-k-zk .v4-obrazac .shortcode-custom-fields,.zkv5-b .v4-obrazac .shortcode-custom-fields{grid-column:1;grid-row:auto} .zkv5 .nc-k-zk{padding:0;background:transparent;border:0;box-shadow:none} .zkv5 .nc-k-zk > h3,.zkv5 .nc-k-zk > p{display:none} @media(max-width:860px){.zkv5 .v4-obrazac .full-product-7159-wrapper{grid-template-columns:1fr}.zkv5 .v4-obrazac .shortcode-custom-fields{grid-column:1;grid-row:auto}.zkv5 .v4-obrazac table.variations,.zkv5 .v4-obrazac .zkv5-glava,.zkv5 .v4-obrazac .single_variation_wrap,.zkv5 .v4-obrazac .zkv5-rec{padding-left:18px;padding-right:18px}.zkv5 .v4-obrazac .shortcode-custom-fields{padding:18px !important}} /* ---------- B: dva koraka ---------- */ .zkv5-b .v4-obrazac .full-product-7159-wrapper{background:#fff !important;color:#0f172a;box-shadow:0 14px 40px rgba(15,23,42,.07);border:1px solid #e2e8f0 !important} .zkv5-b .v4-obrazac .zkv5-glava{padding:22px 22px 10px} .zkv5-b .v4-obrazac .zkv5-glava h3{color:#0f172a;font-size:1.15rem} .zkv5-b .v4-obrazac .zkv5-glava p{color:#64748b} .zkv5-b .v4-obrazac .zkv5-koraci{display:flex;gap:6px;margin:0 0 16px} .zkv5-b .v4-obrazac .zkv5-koraci span{flex:1;height:5px;border-radius:99px;background:#e2e8f0} .zkv5-b .v4-obrazac .zkv5-koraci span.on{background:#1e3a5f} .zkv5-b .v4-obrazac .zkv5-korak-oz{float:right;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#64748b} .zkv5-b .v4-obrazac table.variations{padding:0 22px} .zkv5-b .v4-obrazac .opt-stavka{background:#fff;border:1.5px solid #e2e8f0;color:#0f172a;display:grid;grid-template-columns:20px 1fr auto;align-items:center} .zkv5-b .v4-obrazac .opt-stavka::before{content:"";width:16px;height:16px;border:2px solid #cbd5e1;border-radius:50%;display:block} .zkv5-b .v4-obrazac .opt-stavka.aktivan{background:#eef3fa;border-color:#1e3a5f} .zkv5-b .v4-obrazac .opt-stavka.aktivan::before{border:5px solid #1e3a5f} .zkv5-b .v4-obrazac .single_variation_wrap{padding:10px 22px 0} .zkv5-b .v4-obrazac .woocommerce-variation-description{background:#eef3fa;color:#334155} .zkv5-b .v4-obrazac .woocommerce-variation-description .kt-var-opis li svg{color:#22a34a} .zkv5-b .v4-obrazac .var-uvjeti > summary{color:#1e3a5f} .zkv5-b .v4-obrazac .var-uvjeti-tijelo{background:#f8fafc;border-color:#e2e8f0;color:#334155} .zkv5-b .v4-obrazac .zkv5-rec{display:none} .zkv5-b .v4-obrazac .zkv5-b-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px 22px} .zkv5-b .v4-obrazac .zkv5-b-foot .cij{font-size:.8rem;color:#64748b} .zkv5-b .v4-obrazac .zkv5-b-foot .cij b{display:block;font-size:1.45rem;color:#1e3a5f;line-height:1.1} .zkv5-b .v4-obrazac .zkv5-dalje{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:#22a34a;color:#fff;font:inherit;font-weight:700;font-size:.95rem;padding:14px 22px;cursor:pointer;white-space:nowrap} .zkv5-b .v4-obrazac .zkv5-dalje:hover{background:#1c8a3d} .zkv5-b .v4-obrazac .zkv5-dalje svg{width:16px;height:16px} .zkv5-b .v4-obrazac .shortcode-custom-fields{padding:22px !important} .zkv5-b .v4-obrazac .shortcode-custom-fields .zkv5-h4{margin-top:4px} .zkv5-b .v4-obrazac .zkv5-saz{display:flex;justify-content:space-between;align-items:center;background:#eef3fa;border-radius:12px;padding:10px 14px;font-size:.82rem;margin:0 0 14px} .zkv5-b .v4-obrazac .zkv5-saz a{color:#1e3a5f;font-weight:600;text-decoration:none;cursor:pointer} .zkv5-b .v4-obrazac .zkv5-uk{display:none} /* koraci: korak 1 = popis + opis + noga; korak 2 = polja */ .zkv5-b .v4-obrazac .shortcode-custom-fields{display:none} .zkv5-b .v4-obrazac .zkv5-korak2 .shortcode-custom-fields{display:flex} .zkv5-b .v4-obrazac .zkv5-korak2 table.variations,.zkv5-b .v4-obrazac .zkv5-korak2 .single_variation_wrap,.zkv5-b .v4-obrazac .zkv5-korak2 .zkv5-b-foot,.zkv5-b .v4-obrazac .zkv5-korak2 .zkv5-glava{display:none !important} .zkv5-b .v4-obrazac .zkv5-natrag{display:inline-flex;align-items:center;gap:6px;margin:10px auto 0;border:0;background:transparent;color:#1e3a5f;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .zkv5-b .v4-obrazac .zkv5-natrag svg{width:14px;height:14px} /* --- MOBITEL 08.09.2026.: zaglavlje obrasca (ikona + naslov + "Korak 1 od 2") pri povecanom fontu na telefonu nije stalo u red i razvlacilo je karticu. */ @media(max-width:860px){ .zkv5 .v4-obrazac .full-product-7159-wrapper, .zkv5 .v4-obrazac .zkv5-glava, .zkv5 .v4-obrazac table.variations, .zkv5 .v4-obrazac .shortcode-custom-fields{max-width:100%;min-width:0;box-sizing:border-box} .zkv5-b .v4-obrazac .zkv5-korak-oz{float:none;display:block;margin:0 0 6px} .zkv5 .v4-obrazac .zkv5-glava h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere} .zkv5 .v4-obrazac .zkv5-glava h3 svg{flex:0 0 auto;margin-right:0 !important} .zkv5 .v4-obrazac .opt-stavka{min-width:0;overflow-wrap:anywhere} .zkv5-b .v4-obrazac .zkv5-b-foot{flex-wrap:wrap} .zkv5-b .v4-obrazac .zkv5-dalje{flex:1 1 100%;justify-content:center;white-space:normal} } /* Petra 08.09.2026.: forma je na dodir/scroll (kad Rocket pusti odgodjeni JS) naglo postala sira od ekrana. Tvrda granica sirine koju preslagivanje ne moze probiti. */ @media(max-width:900px){ .prod-dno,.prod-dno .v4-obrazac,.v4-obrazac .full-product-7159-wrapper, .v4-obrazac table.variations,.v4-obrazac .opt-omot,.v4-obrazac .opt-lista, .v4-obrazac .shortcode-custom-fields{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box} .v4-obrazac table.variations,.v4-obrazac table.variations tbody, .v4-obrazac table.variations tr,.v4-obrazac table.variations td{display:block !important;width:100% !important;max-width:100% !important} } /* Petra 08.09.2026.: kartica obrasca na naslovnoj ostala bez bijele podloge - izmedju redova probijala je tamnoplava pozadina hera. */ .nc-k-zk, .zkv5-b .v4-obrazac, .zkv5-b .v4-obrazac .full-product-7159-wrapper{background:#fff;border-radius:18px} .zkv5-b .v4-obrazac .full-product-7159-wrapper{overflow:hidden} .zkv5-b .v4-obrazac .shortcode-custom-fields{background:#fff} /* Petra 09.09.2026.: na desktopu je bijela ploha unutarnjih slojeva (.prod-grid ima border-radius 0) virila preko zaobljenog ruba kartice i davala ostar kut. Kartica sada rezuje svoj sadrzaj na vlastitom radijusu. */ .nc-hero .nc-k.nc-k-zk{overflow:hidden} .nc-hero .nc-k.nc-k-zk .prod-grid{border-radius:18px}