/* EXTRO' kalkulator — sezione nativa di /okov-za-ugaone-i-zakrivljene-kapije/. Solo token e linguaggio visivo gia' presenti in style.css (--fm-*, fm-panel, fm-btn, fm-card); tutto e' confinato sotto #fm-extro per non toccare il resto della pagina. */ #fm-extro{background:var(--fm-bg-elevated);border:1px solid var(--fm-border);border-radius:var(--fm-radius-lg);padding:40px;margin-bottom:56px;scroll-margin-top:100px} #fm-extro *{box-sizing:border-box} #fm-extro .fx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px} #fm-extro .fx-head .fm-h2{margin:0 0 8px} #fm-extro .fx-sub{margin:0;color:var(--fm-text-secondary);font-size:15px;line-height:1.6;max-width:640px} #fm-extro .fx-head .fm-badge{margin:0;white-space:nowrap} #fm-extro .fx-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start} #fm-extro .fx-card{background:var(--fm-bg-card);border:1px solid var(--fm-border);border-radius:var(--fm-radius);box-shadow:var(--fm-shadow-sm);padding:24px} #fm-extro .fx-h3{font-size:17px;font-weight:700;color:var(--fm-text);margin:0 0 18px} #fm-extro .fx-step{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--fm-blue);color:#fff;font-size:13px;margin-right:8px} #fm-extro .fx-field{margin-bottom:16px} #fm-extro label{display:block;font-size:13px;font-weight:600;color:var(--fm-text);margin-bottom:6px} #fm-extro input,#fm-extro select{width:100%;padding:12px 14px;border:1px solid var(--fm-border-strong);border-radius:var(--fm-radius-sm);background:#fff;font:inherit;font-size:16px;color:var(--fm-text);transition:border-color .2s var(--fm-ease),box-shadow .2s var(--fm-ease)} #fm-extro input:focus,#fm-extro select:focus{outline:0;border-color:var(--fm-blue);box-shadow:0 0 0 3px rgba(11,31,58,.12)} #fm-extro .fx-unit{font-size:12px;color:var(--fm-text-tertiary);margin-top:5px;line-height:1.45} #fm-extro .fx-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px} #fm-extro .fx-stat{border:1px solid var(--fm-border);border-radius:var(--fm-radius-sm);padding:12px;background:var(--fm-bg-elevated)} #fm-extro .fx-stat small{display:block;color:var(--fm-text-tertiary);font-size:11px;text-transform:uppercase;letter-spacing:.03em} #fm-extro .fx-stat strong{display:block;color:var(--fm-blue);font-size:22px;margin-top:2px} #fm-extro .fx-result{margin-top:16px;border-top:1px solid var(--fm-border);padding-top:10px} #fm-extro .fx-row{display:flex;justify-content:space-between;padding:5px 0;font-size:14px;color:var(--fm-text-secondary)} #fm-extro .fx-row strong{color:var(--fm-text)} #fm-extro .fx-status{margin-top:14px;padding:12px 14px;border-radius:var(--fm-radius-sm);font-size:13px;line-height:1.5;border:1px solid} #fm-extro .fx-status.ok{background:#eaf8ee;border-color:#bfe8c8;color:var(--fm-success)} #fm-extro .fx-status.bad{background:#fff0f0;border-color:#efb5b5;color:#9e2525} #fm-extro .fx-view{border:1px solid var(--fm-border);border-radius:var(--fm-radius-sm);padding:14px;background:#fff;margin-bottom:14px} #fm-extro .fx-view:last-child{margin-bottom:0} #fm-extro .fx-view-title{font-weight:700;font-size:13px;color:var(--fm-blue);margin:0 0 8px;letter-spacing:.02em} #fm-extro svg{width:100%;height:auto;display:block} /* Animacija "POGLED ODOZGO": dugme je unutar te iste kartice, ne dira ostatak fx-view. */ #fm-extro .fx-view-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px} #fm-extro .fx-view-head .fx-view-title{margin:0} #fm-extro .fx-anim-btn{border:1px solid var(--fm-blue);background:#fff;color:var(--fm-blue);border-radius:var(--fm-radius-sm);padding:6px 12px;font-size:12px;font-weight:700;font-family:inherit;line-height:1.3;cursor:pointer;white-space:nowrap;transition:background .2s var(--fm-ease),color .2s var(--fm-ease)} #fm-extro .fx-anim-btn:hover{background:var(--fm-blue);color:#fff} #fm-extro .fx-anim-btn[aria-pressed="true"]{background:var(--fm-blue);color:#fff} #fm-extro .fx-anim-btn:disabled{opacity:.4;cursor:not-allowed} #fm-extro .fx-summary{margin-top:24px} #fm-extro .fx-table-wrap{overflow-x:auto;border:1px solid var(--fm-border);border-radius:var(--fm-radius-sm)} #fm-extro table{width:100%;border-collapse:collapse;background:#fff} #fm-extro th,#fm-extro td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--fm-border);font-size:14px;vertical-align:top} #fm-extro th{background:var(--fm-bg-elevated);color:var(--fm-text-secondary);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em} #fm-extro tbody tr:last-child td{border-bottom:0} #fm-extro .fx-prod{color:var(--fm-blue);font-weight:700;text-decoration:none} #fm-extro .fx-prod:hover{text-decoration:underline} #fm-extro .fx-sku{display:block;font-size:12px;color:var(--fm-text-tertiary);margin-top:3px} #fm-extro .fx-na{display:inline-block;margin-top:5px;font-size:12px;font-weight:600;color:#9e2525} #fm-extro .fx-unavailable td{background:#fffafa} #fm-extro .fx-qty{font-weight:800;font-size:16px;color:var(--fm-text);white-space:nowrap} #fm-extro .fx-price,#fm-extro .fx-line{white-space:nowrap} #fm-extro .fx-line{font-weight:700;color:var(--fm-blue)} #fm-extro .fx-cartbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px;padding:18px 20px;border-radius:var(--fm-radius);background:#fff;border:1px solid var(--fm-border)} #fm-extro .fx-total small{display:block;font-size:12px;color:var(--fm-text-tertiary)} #fm-extro .fx-total strong{font-size:24px;color:var(--fm-blue)} #fm-extro .fx-total .fx-vat{font-size:12px;color:var(--fm-text-tertiary)} #fm-extro .fx-cta{display:flex;flex-direction:column;align-items:flex-end;gap:6px} #fm-extro .fx-addall{border:0;cursor:pointer;font-size:15.5px;padding:15px 30px;font-family:inherit} #fm-extro .fx-addall:disabled{opacity:.45;cursor:not-allowed;transform:none} #fm-extro .fx-addall.is-loading{cursor:progress} #fm-extro .fx-cartnote{font-size:12px;color:var(--fm-text-tertiary);text-align:right} /* Dugmad "Dodaj sve u korpu" + "Preuzmi PDF konfiguracije" zajedno */ #fm-extro .fx-btnrow{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px} #fm-extro .fx-pdf{cursor:pointer;font-size:15.5px;padding:13.5px 28.5px;font-family:inherit;background:#fff;border:1.5px solid var(--fm-blue);color:var(--fm-blue)} /* Il tema (.fm-btn-ghost:hover) imposta color:#fff !important: qui lo sfondo resta bianco, quindi il testo va mantenuto scuro in ogni stato (!important necessario per battere quello del tema). */ #fm-extro .fx-pdf:hover,#fm-extro .fx-pdf:focus,#fm-extro .fx-pdf:focus-visible,#fm-extro .fx-pdf:active{color:var(--fm-blue) !important} #fm-extro .fx-pdf:disabled{opacity:.45;cursor:not-allowed;transform:none} #fm-extro .fx-pdf.is-loading{cursor:progress} #fm-extro .fx-msg{margin-top:12px;padding:13px 16px;border-radius:var(--fm-radius-sm);font-size:14px;line-height:1.5;border:1px solid} #fm-extro .fx-msg.ok{background:#eaf8ee;border-color:#bfe8c8;color:var(--fm-success)} #fm-extro .fx-msg.bad{background:#fff0f0;border-color:#efb5b5;color:#9e2525} #fm-extro .fx-msg a{color:inherit;font-weight:700} @media (max-width:900px){ #fm-extro .fx-layout{grid-template-columns:1fr} } @media (max-width:600px){ #fm-extro{padding:24px 16px;margin-bottom:40px} #fm-extro .fx-head{flex-direction:column;gap:12px} #fm-extro .fx-head .fm-badge{white-space:normal} #fm-extro .fx-card{padding:18px 16px} #fm-extro .fx-view{padding:8px} /* Na mobilnom "POGLED ODOZGO" ostaje potpuno statičan: bez dugmeta, bez animacije. */ #fm-extro .fx-anim-btn{display:none} /* distinta: righe tabella -> schede impilate */ #fm-extro .fx-table-wrap{border:0;overflow:visible} #fm-extro table,#fm-extro tbody,#fm-extro tr,#fm-extro td{display:block;width:100%} #fm-extro thead{display:none} #fm-extro tr{border:1px solid var(--fm-border);border-radius:var(--fm-radius-sm);margin-bottom:10px;background:#fff;overflow:hidden} #fm-extro td{border-bottom:1px solid var(--fm-border);padding:9px 14px;display:flex;justify-content:space-between;gap:12px} #fm-extro td:first-child{display:block;background:var(--fm-bg-elevated)} #fm-extro td[data-label]:not(:first-child)::before{content:attr(data-label);font-size:12px;color:var(--fm-text-tertiary);font-weight:600;flex:0 0 auto} #fm-extro td[data-label="Opis"]{display:block;font-size:13px;color:var(--fm-text-secondary)} #fm-extro td[data-label="Opis"]::before{display:none} #fm-extro tr td:last-child{border-bottom:0} #fm-extro .fx-cartbar{flex-direction:column;align-items:stretch} #fm-extro .fx-cta{align-items:stretch} #fm-extro .fx-addall{width:100%;justify-content:center} #fm-extro .fx-btnrow{flex-direction:column;justify-content:stretch} #fm-extro .fx-pdf{width:100%;justify-content:center;font-size:15px;padding:13.5px 16px} #fm-extro .fx-cartnote{text-align:center} } /* Solo pagina EXTRO' (page-id-2688; questo file e' caricato solo qui): i 5 prodotti del sistema sulla stessa riga su desktop. Sotto 1200px resta il comportamento standard di .fm-grid (auto-fill, minmax 240px) - style.css non viene toccato. */ @media (min-width:1200px){ body.page-id-2688 .fm-content .fm-grid{grid-template-columns:repeat(5,minmax(0,1fr))} } /* Uvod o sistemu EXTRO' (fmatik_render_extro_intro) */ #fm-extro-intro{margin-bottom:40px;max-width:900px} #fm-extro-intro .fm-h2{margin:0 0 16px} #fm-extro-intro h3{font-size:19px;font-weight:700;color:var(--fm-text);margin:26px 0 8px} #fm-extro-intro p{font-size:16px;line-height:1.7;color:var(--fm-text-secondary);margin:0 0 12px} #fm-extro-intro .fx-intro-cta{margin-top:20px} /* Izbor binara (R500/R1000): kartice iznad postojećeg