/* ================================================
   TISKARNA KONFIGURATOR v2 — konfigurator.css
   ================================================ */
.tk-wrap {
    font-family:'Outfit','Segoe UI',sans-serif;
    max-width:1240px; margin:0 auto; padding:2rem 1rem;
    color:#1c1510;
    --acc:   #e8390c;
    --acc-h: #c82d08;
    --bg:    #faf7f2;
    --surf:  #ffffff;
    --brd:   rgba(28,21,16,.12);
    --mut:   rgba(28,21,16,.50);
    --rad:   .875rem;
    --sh:    0 4px 20px rgba(28,21,16,.09);
}
.tk-header{text-align:center;margin-bottom:2rem}
.tk-header h2{font-family:'Space Grotesk','Outfit',sans-serif;font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem}
.tk-header p{font-size:.95rem;color:var(--mut);max-width:520px;margin:0 auto;line-height:1.7}

/* LAYOUT */
.tk-layout{display:grid;grid-template-columns:260px 1fr 280px;gap:1.5rem;align-items:start}

/* STEP CARDS */
.tk-sidebar{display:flex;flex-direction:column;gap:.9rem}
.tk-step{background:var(--surf);border:1.5px solid var(--brd);border-radius:var(--rad);padding:1.2rem;box-shadow:var(--sh)}
.tk-step-label{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);margin-bottom:.8rem;display:flex;align-items:center;gap:.45rem}
.tk-step-num{width:19px;height:19px;border-radius:50%;background:var(--acc);color:#fff;font-size:.65rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* PRODUKT TABS */
.tk-product-tabs{display:flex;gap:.5rem;margin-bottom:.9rem}
.tk-prod-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.55rem .3rem;background:var(--bg);border:1.5px solid var(--brd);border-radius:.625rem;cursor:pointer;font-family:inherit;font-size:.75rem;font-weight:600;color:var(--mut);transition:all .2s}
.tk-prod-btn:hover{border-color:var(--acc);color:var(--acc)}
.tk-prod-btn.active{background:rgba(232,57,12,.08);border-color:var(--acc);color:var(--acc)}
.tk-prod-icon{font-size:1.4rem}

/* VIEW TABS */
.tk-view-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.tk-view-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.55rem .4rem;background:var(--bg);border:1.5px solid var(--brd);border-radius:.625rem;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:600;color:var(--mut);transition:all .2s;text-align:center;line-height:1.2}
.tk-view-btn:hover{border-color:var(--acc);color:var(--acc)}
.tk-view-btn.active{background:rgba(232,57,12,.08);border-color:var(--acc);color:var(--acc)}
.tk-view-btn .tk-view-ico{font-size:1.2rem}
/* Badge za naložen motiv */
.tk-view-btn.has-motif::after{content:'✓';position:absolute;top:4px;right:6px;font-size:.65rem;color:var(--acc);font-weight:700}
.tk-view-btn{position:relative}

/* BARVE */
.tk-color-label{font-size:.72rem;color:var(--mut);font-weight:600;margin-bottom:.45rem}
.tk-colors{display:flex;flex-wrap:wrap;gap:.35rem}
.tk-color{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tk-color:hover{transform:scale(1.18)}
.tk-color.active{border-color:var(--acc)!important;transform:scale(1.15);box-shadow:0 0 0 3px rgba(232,57,12,.2)}

/* UPLOAD */
.tk-upload-btn{display:flex;align-items:center;gap:.55rem;padding:.7rem .9rem;background:rgba(232,57,12,.06);border:1.5px dashed rgba(232,57,12,.35);border-radius:.75rem;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--acc);transition:background .2s,border-color .2s;width:100%}
.tk-upload-btn:hover{background:rgba(232,57,12,.1);border-color:var(--acc)}
.tk-upload-icon{font-size:1rem}
.tk-upload-hint{font-size:.72rem;color:var(--mut);margin-top:.45rem;line-height:1.5}

/* SLIDER */
.tk-motif-size{margin-top:.75rem}
.tk-motif-size label,.tk-field-sm label{font-size:.72rem;color:var(--mut);font-weight:600;display:block;margin-bottom:.35rem}
.tk-slider-row{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--mut)}
.tk-slider-row input[type=range]{flex:1;accent-color:var(--acc);height:4px}

/* ACTION BTNS */
.tk-canvas-actions{display:flex;gap:.35rem;margin-top:.7rem;flex-wrap:wrap}
.tk-action-btn{flex:1;padding:.38rem .4rem;font-family:inherit;font-size:.68rem;font-weight:700;cursor:pointer;border:1.5px solid var(--brd);border-radius:.45rem;background:var(--bg);color:var(--mut);transition:all .2s;white-space:nowrap}
.tk-action-btn:hover{border-color:var(--acc);color:var(--acc);background:rgba(232,57,12,.06)}
.tk-action-btn--danger:hover{border-color:#c00;color:#c00;background:rgba(204,0,0,.06)}

/* FIELDS */
.tk-field-sm select,.tk-qty-row input[type=number]{padding:.55rem .75rem;background:var(--bg);border:1.5px solid var(--brd);border-radius:.55rem;font-family:inherit;font-size:.875rem;color:#1c1510}
.tk-field-sm select{width:100%;cursor:pointer}
.tk-field-sm select:focus,.tk-qty-row input:focus{outline:none;border-color:var(--acc)}
.tk-qty-row{display:flex;align-items:center;gap:.4rem}
.tk-qty-btn{width:32px;height:32px;border-radius:.45rem;border:1.5px solid var(--brd);background:var(--bg);font-size:1rem;cursor:pointer;font-weight:700;color:#1c1510;transition:all .2s;line-height:1}
.tk-qty-btn:hover{border-color:var(--acc);color:var(--acc)}
.tk-qty-row input[type=number]{width:58px;text-align:center}

/* ── CANVAS ── */
.tk-canvas-wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.tk-product-preview{position:relative;width:100%;max-width:650px;border-radius:1rem;overflow:hidden;background:var(--bg);box-shadow:var(--sh);border:1.5px solid var(--brd);user-select:none}
.tk-product-preview .tk-product-svg{width:100%;display:block;pointer-events:none}
#tkCanvas{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important}
.tk-print-hint{position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);background:rgba(28,21,16,.65);color:#fff;backdrop-filter:blur(4px);padding:.35rem .9rem;border-radius:2rem;font-size:.72rem;font-weight:500;pointer-events:none;white-space:nowrap;transition:opacity .3s;z-index:10}
.tk-print-hint.hidden{opacity:0}
.tk-view-label-bar{display:flex;align-items:center;gap:.5rem}
#tkViewLabel{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.tk-canvas-tip{font-size:.75rem;color:var(--mut);text-align:center;max-width:300px;line-height:1.5}

/* ── FORM ── */
.tk-form-wrap{position:sticky;top:90px}
.tk-form-card{background:var(--surf);border:1.5px solid var(--brd);border-radius:var(--rad);padding:1.75rem;box-shadow:var(--sh)}
.tk-form-title{font-family:'Space Grotesk','Outfit',sans-serif;font-size:1.2rem;font-weight:700;letter-spacing:-.015em;margin-bottom:.3rem}
.tk-form-sub{font-size:.8rem;color:var(--mut);margin-bottom:1.1rem;line-height:1.6}
.tk-field{margin-bottom:.9rem}
.tk-field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:.35rem}
.tk-field input,.tk-field textarea{width:100%;padding:.65rem .85rem;background:var(--bg);border:1.5px solid var(--brd);border-radius:.55rem;font-family:inherit;font-size:.875rem;color:#1c1510;transition:border-color .2s;resize:none}
.tk-field input:focus,.tk-field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(232,57,12,.08)}
.tk-field input::placeholder,.tk-field textarea::placeholder{color:rgba(28,21,16,.28)}

/* Predogledi */
.tk-preview-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:.45rem}
.tk-thumbs-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.tk-thumb-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.tk-thumb-item img{width:70px;height:70px;object-fit:contain;border:1.5px solid var(--brd);border-radius:.5rem;background:var(--bg);padding:.2rem}
.tk-thumb-item span{font-size:.65rem;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:center;line-height:1.2;max-width:70px}

.tk-error{background:rgba(232,57,12,.08);border:1.5px solid rgba(232,57,12,.3);border-radius:.55rem;padding:.6rem .85rem;font-size:.83rem;color:var(--acc);margin-bottom:.75rem}
.tk-submit{width:100%;background:var(--acc);color:#fff;border:none;padding:.85rem;border-radius:2rem;font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .2s,transform .15s;box-shadow:0 4px 14px rgba(232,57,12,.28)}
.tk-submit:hover{background:var(--acc-h);transform:translateY(-1px)}
.tk-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.tk-form-note{font-size:.7rem;color:rgba(28,21,16,.35);text-align:center;margin-top:.55rem}
.tk-success{text-align:center;padding:2rem .5rem}
.tk-success-icon{font-size:2.5rem;margin-bottom:.7rem}
.tk-success h3{font-size:1.15rem;font-weight:700;margin-bottom:.4rem}
.tk-success p{font-size:.875rem;color:var(--mut);line-height:1.65}

/* ── RESPONSIVE ── */
@media(max-width:960px){
    .tk-layout{grid-template-columns:1fr 1fr}
    .tk-sidebar{grid-column:1;grid-row:1}
    .tk-canvas-wrap{grid-column:2;grid-row:1}
    .tk-form-wrap{grid-column:1/-1;grid-row:2;position:static}
}
@media(max-width:600px){
    .tk-layout{grid-template-columns:1fr}
    .tk-canvas-wrap{grid-row:2}
    .tk-sidebar{grid-row:1}
    .tk-form-wrap{grid-row:3;position:static}
    .tk-wrap{padding:1rem .5rem}
    .tk-view-tabs{grid-template-columns:1fr 1fr}
}