/* Konfigurator teleskopske kapije (KIT3000) — sezione nativa di /okov-za-teleskopske-kapije/.
   Solo token e linguaggio visivo gia' presenti in style.css (--fm-*, fm-h2, fm-btn, fm-badge);
   tutto e' confinato sotto #fm-teleskop per non toccare il resto della pagina. */
#fm-teleskop{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-teleskop *{box-sizing:border-box}
#fm-teleskop [hidden]{display:none!important}
#fm-teleskop .ft-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px}
#fm-teleskop .ft-head .fm-h2{margin:0 0 8px}
#fm-teleskop .ft-sub{margin:0;color:var(--fm-text-secondary);font-size:15px;line-height:1.6;max-width:640px}
#fm-teleskop .ft-head .fm-badge{margin:0;white-space:nowrap}
#fm-teleskop .ft-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-teleskop .ft-h3{display:flex;align-items:center;font-size:17px;font-weight:700;color:var(--fm-text);margin:0 0 18px}
#fm-teleskop .ft-num{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--fm-blue);color:#fff;font-size:13px;margin-right:10px}

/* Prikaz kapije */
#fm-teleskop .ft-viz{margin-bottom:24px}
#fm-teleskop .ft-viz-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}
#fm-teleskop .ft-viz-head .ft-h3{margin:0}
#fm-teleskop .ft-controls{display:flex;gap:8px;flex-wrap:wrap}
#fm-teleskop .ft-btn{border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;padding:11px 18px;border-radius:var(--fm-radius-sm);line-height:1.2}
#fm-teleskop .ft-btn-navy{background:var(--fm-blue);color:#fff}
#fm-teleskop .ft-btn-ghost{background:#fff;color:var(--fm-blue);border:1px solid var(--fm-border-strong)}
#fm-teleskop .ft-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
#fm-teleskop #ft-gate{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--fm-border);border-radius:var(--fm-radius-sm)}
#fm-teleskop .ft-svg-cap{font-size:13px;font-weight:700;fill:var(--fm-blue);letter-spacing:.04em}
#fm-teleskop .ft-svg-lbl{font-size:14px;font-weight:700;fill:#48525c}
#fm-teleskop .ft-svg-green{fill:#1fa83e;font-size:12px;letter-spacing:.05em}
#fm-teleskop .ft-svg-small{font-size:11px;fill:#59646f}
#fm-teleskop .ft-svg-leaf{font-size:15px;font-weight:800;fill:var(--fm-blue);paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
#fm-teleskop .ft-svg-leafsub{font-size:12px;font-weight:600;fill:#48525c;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
#fm-teleskop .ft-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-size:13px;color:var(--fm-text-secondary)}
#fm-teleskop .ft-sw{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:7px;vertical-align:-2px}
#fm-teleskop .ft-sw1{background:#0B1F3A}#fm-teleskop .ft-sw2{background:#3d5a7d}
#fm-teleskop .ft-anim-status{margin-top:10px;font-size:14px;font-weight:600;color:var(--fm-blue)}

/* Koraci + rezime */
#fm-teleskop .ft-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start}
#fm-teleskop .ft-steps{display:grid;gap:18px}
#fm-teleskop .ft-opts{display:grid;gap:12px}
#fm-teleskop .ft-opts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
#fm-teleskop .ft-opts-3{grid-template-columns:repeat(3,minmax(0,1fr))}
#fm-teleskop .ft-opt{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;width:100%;padding:14px;border:2px solid var(--fm-border);border-radius:var(--fm-radius-sm);background:#fff;cursor:pointer;font-family:inherit;color:var(--fm-text);transition:border-color .2s var(--fm-ease),box-shadow .2s var(--fm-ease)}
#fm-teleskop .ft-opt:hover{border-color:var(--fm-border-strong)}
#fm-teleskop .ft-opt:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(11,31,58,.18)}
#fm-teleskop .ft-opt.is-active{border-color:var(--fm-cta);box-shadow:0 0 0 3px rgba(57,211,83,.18)}
#fm-teleskop .ft-opt-media{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;background:var(--fm-bg-elevated);border-radius:8px;overflow:hidden;margin-bottom:6px}
#fm-teleskop .ft-opt-media img{width:100%;height:100%;object-fit:contain;display:block}
#fm-teleskop .ft-opt-title{font-size:16px;font-weight:800;color:var(--fm-blue)}
#fm-teleskop .ft-opt-desc{font-size:12.5px;line-height:1.45;color:var(--fm-text-tertiary)}
#fm-teleskop .ft-note{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--fm-text-secondary)}
#fm-teleskop .ft-inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#fm-teleskop label{display:block;font-size:13px;font-weight:600;color:var(--fm-text);margin-bottom:6px}
#fm-teleskop .ft-inputwrap{position:relative}
#fm-teleskop input{width:100%;padding:12px 40px 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)}
#fm-teleskop input:focus{outline:0;border-color:var(--fm-blue);box-shadow:0 0 0 3px rgba(11,31,58,.12)}
#fm-teleskop .ft-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--fm-text-tertiary);font-weight:700;font-size:14px}
#fm-teleskop .ft-status{margin-top:14px;padding:12px 14px;border-radius:var(--fm-radius-sm);font-size:13px;line-height:1.5;border:1px solid}
#fm-teleskop .ft-status.ok{background:#eaf8ee;border-color:#bfe8c8;color:var(--fm-success)}
#fm-teleskop .ft-status.bad{background:#fff0f0;border-color:#efb5b5;color:#9e2525}
#fm-teleskop .ft-tech{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
#fm-teleskop .ft-tech div{background:var(--fm-bg-elevated);border-radius:var(--fm-radius-sm);padding:11px 12px}
#fm-teleskop .ft-tech small{display:block;color:var(--fm-text-tertiary);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
#fm-teleskop .ft-tech b{display:block;color:var(--fm-blue);font-size:17px;margin-top:2px}

#fm-teleskop .ft-summary{position:sticky;top:100px}
#fm-teleskop .ft-conf{margin:0 0 14px;border-top:1px solid var(--fm-border)}
#fm-teleskop .ft-conf div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--fm-border);font-size:14px}
#fm-teleskop .ft-conf dt{color:var(--fm-text-tertiary);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
#fm-teleskop .ft-conf dd{margin:0;font-weight:700;color:var(--fm-text);text-align:right}
#fm-teleskop .ft-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
#fm-teleskop .ft-metrics div{background:var(--fm-bg-elevated);border-radius:var(--fm-radius-sm);padding:10px 12px}
#fm-teleskop .ft-metrics small{display:block;color:var(--fm-text-tertiary);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
#fm-teleskop .ft-metrics b{display:block;color:var(--fm-blue);font-size:17px;margin-top:2px}
#fm-teleskop .ft-table-wrap{border:1px solid var(--fm-border);border-radius:var(--fm-radius-sm);overflow:hidden}
#fm-teleskop table{width:100%;border-collapse:collapse;background:#fff}
#fm-teleskop th,#fm-teleskop td{text-align:left;padding:10px;border-bottom:1px solid var(--fm-border);font-size:13px;vertical-align:top}
#fm-teleskop th{background:var(--fm-bg-elevated);color:var(--fm-text-secondary);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#fm-teleskop tbody tr:last-child td{border-bottom:0}
#fm-teleskop .ft-prod{color:var(--fm-blue);font-weight:700;text-decoration:none}
#fm-teleskop .ft-prod:hover{text-decoration:underline}
#fm-teleskop .ft-sku{display:block;font-size:11.5px;color:var(--fm-text-tertiary);margin-top:3px}
#fm-teleskop .ft-na{display:block;margin-top:4px;font-size:12px;font-weight:600;color:#9e2525}
#fm-teleskop .ft-unavailable td{background:#fffafa}
#fm-teleskop .ft-qty,#fm-teleskop .ft-line{white-space:nowrap;font-weight:700}
#fm-teleskop .ft-line{color:var(--fm-blue)}
#fm-teleskop .ft-pending{color:var(--fm-text-tertiary);font-style:italic}
#fm-teleskop .ft-cartbar{display:grid;gap:10px;margin-top:14px}
#fm-teleskop .ft-total small{display:block;font-size:12px;color:var(--fm-text-tertiary)}
#fm-teleskop .ft-total strong{font-size:24px;color:var(--fm-blue)}
#fm-teleskop .ft-vat{font-size:12px;color:var(--fm-text-tertiary)}
#fm-teleskop .ft-addall{border:0;cursor:pointer;font-size:15.5px;padding:15px 24px;font-family:inherit;width:100%;justify-content:center;text-transform:uppercase}
#fm-teleskop .ft-addall:disabled{opacity:.45;cursor:not-allowed;transform:none}
#fm-teleskop .ft-addall.is-loading{cursor:progress}
#fm-teleskop .ft-cartnote{font-size:12px;color:var(--fm-text-tertiary);text-align:center}
#fm-teleskop .ft-msg{margin-top:12px;padding:13px 16px;border-radius:var(--fm-radius-sm);font-size:14px;line-height:1.5;border:1px solid}
#fm-teleskop .ft-msg.ok{background:#eaf8ee;border-color:#bfe8c8;color:var(--fm-success)}
#fm-teleskop .ft-msg.bad{background:#fff0f0;border-color:#efb5b5;color:#9e2525}
#fm-teleskop .ft-msg a{color:inherit;font-weight:700}

@media (max-width:1000px){
  #fm-teleskop .ft-layout{grid-template-columns:minmax(0,1fr)}
  #fm-teleskop .ft-summary{position:static}
}
@media (max-width:600px){
  #fm-teleskop{padding:24px 16px;margin-bottom:40px}
  #fm-teleskop .ft-head{flex-direction:column;gap:12px}
  #fm-teleskop .ft-head .fm-badge{white-space:normal}
  #fm-teleskop .ft-card{padding:18px 16px}
  /* Mobilni: prikaz kapije je statičan — bez dugmadi, bez animacije, bez statusa animacije. */
  #fm-teleskop .ft-controls,#fm-teleskop .ft-anim-status{display:none!important}
  #fm-teleskop .ft-opts-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  #fm-teleskop .ft-inputs,#fm-teleskop .ft-tech{grid-template-columns:1fr}
  #fm-teleskop .ft-opt{padding:10px}
  #fm-teleskop .ft-opt-title{font-size:15px}
  /* distinta: righe tabella -> schede impilate (stesso schema del kalkulator EXTRO') */
  #fm-teleskop .ft-table-wrap{border:0;overflow:visible}
  #fm-teleskop table,#fm-teleskop tbody,#fm-teleskop tr,#fm-teleskop td{display:block;width:100%}
  #fm-teleskop thead{display:none}
  #fm-teleskop tr{border:1px solid var(--fm-border);border-radius:var(--fm-radius-sm);margin-bottom:10px;background:#fff;overflow:hidden}
  #fm-teleskop td{border-bottom:1px solid var(--fm-border);padding:9px 14px;display:flex;justify-content:space-between;gap:12px}
  #fm-teleskop td:first-child{display:block;background:var(--fm-bg-elevated)}
  #fm-teleskop 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-teleskop tr td:last-child{border-bottom:0}
  #fm-teleskop td.ft-pending{display:block}
}

/* Korak 1 (dužina jednog krila, 2 info pločice umesto 3) i Korak 4 (Težina kapije + preporuka
   motora) — samo nova pravila potrebna za ove izmene, ostatak fajla je nepromenjen. */
#fm-teleskop .ft-tech-2{grid-template-columns:1fr 1fr}
#fm-teleskop .ft-motor-list{display:grid;gap:14px;margin-top:12px}
#fm-teleskop .ft-motor-card{display:flex;gap:14px;padding:14px;border:2px solid var(--fm-border);border-radius:var(--fm-radius-sm);background:#fff}
#fm-teleskop .ft-motor-card.ft-unavailable{background:#fffafa}
#fm-teleskop .ft-motor-card .ft-opt-media{flex:0 0 96px;width:96px;aspect-ratio:1/1;margin-bottom:0}
#fm-teleskop .ft-motor-body{flex:1;min-width:0}
#fm-teleskop .ft-motor-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#fm-teleskop .ft-motor-actions .ft-btn{padding:9px 14px;font-size:13px}
/* Red motora u predračunu (#ft-bom) — isti tabelarni red kao KIT komponente, samo blago
   istaknut da bude jasno da je motor opcioni dodatak korisnika, ne fiksni deo kompleta. */
#fm-teleskop tr.ft-motor-bomrow{background:#f3f7ff}
#fm-teleskop tr.ft-motor-bomrow td:first-child{border-left:3px solid var(--fm-blue)}
@media (max-width:600px){
  #fm-teleskop .ft-tech-2{grid-template-columns:1fr}
  #fm-teleskop .ft-motor-card{flex-direction:column}
  #fm-teleskop .ft-motor-card .ft-opt-media{width:100%;flex:none}
}

/* Video (Kako montirati teleskopsku kapiju) — lite preview facade, responsive 16:9.
   Pre klika prikazuje se samo thumbnail + dugme Play (vidi JS); iframe se kreira tek na klik. */
#fm-teleskop .ft-video{margin-top:24px}
#fm-teleskop .ft-video .fm-h2{margin:0 0 16px}
#fm-teleskop .ft-video-frame{position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--fm-radius-sm);overflow:hidden;background:#000;cursor:pointer}
#fm-teleskop .ft-video-frame img{width:100%;height:100%;object-fit:cover;display:block}
#fm-teleskop .ft-video-frame video{width:100%;height:100%;display:block;background:#000}
#fm-teleskop .ft-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(11,31,58,.85);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;padding-left:4px;transition:transform .2s var(--fm-ease),background .2s var(--fm-ease)}
#fm-teleskop .ft-video-frame:hover .ft-video-play,#fm-teleskop .ft-video-frame:focus-visible .ft-video-play{transform:translate(-50%,-50%) scale(1.08);background:var(--fm-cta)}
#fm-teleskop .ft-video-frame:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(11,31,58,.35)}

/* Dugmad "Dodaj sve u korpu" + "Preuzmi PDF konfiguracije" zajedno.
   Izgled PDF dugmeta je isti kao u EXTRO' konfiguratoru (.fx-pdf u fm-extro-kalkulator.css). */
/* Desktop: i due pulsanti stanno affiancati nella colonna del riepilogo (~370px utili): font 14px, padding orizzontale 13px, gap 8px. */
#fm-teleskop .ft-btnrow{display:flex;flex-wrap:wrap;gap:8px}
#fm-teleskop .ft-btnrow .ft-addall{flex:1 1 auto;width:auto;font-size:14px;padding:14px 13px}
#fm-teleskop .ft-pdf{flex:1 1 auto;justify-content:center;cursor:pointer;font-size:14px;padding:14px 13px;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: lo sfondo resta bianco, quindi il testo va mantenuto scuro in ogni stato (!important necessario per battere quello del tema). */
#fm-teleskop .ft-pdf:hover,#fm-teleskop .ft-pdf:focus,#fm-teleskop .ft-pdf:focus-visible,#fm-teleskop .ft-pdf:active{color:var(--fm-blue) !important}
#fm-teleskop .ft-pdf:disabled{opacity:.45;cursor:not-allowed;transform:none}
#fm-teleskop .ft-pdf.is-loading{cursor:progress}
@media (max-width:600px){
  #fm-teleskop .ft-btnrow{flex-direction:column;gap:10px}
  #fm-teleskop .ft-btnrow .ft-addall,#fm-teleskop .ft-pdf{width:100%}
  #fm-teleskop .ft-btnrow .ft-addall{font-size:15.5px;padding:15px 24px}
  #fm-teleskop .ft-pdf{font-size:15px;padding:13.5px 16px}
}