@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Baloo+2:wght@600;700&family=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@600&family=Oswald:wght@500;700&family=Caveat:wght@600&family=Roboto+Slab:wght@600&family=Bebas+Neue&display=swap');
#paneelConfigurator{
  --primary:#1C5733; --primary-dark:#154226; --secondary:#76B82A;
  --text:#1E1E1E; --bg-white:#FFFFFF; --bg-light:#F4F4F4;
  --warn:#B8862F; --bad:#B3261E; --line:#E0E0E0;
  --font-body:'Roboto',sans-serif; --font-heading:'Baloo 2',sans-serif;
  font-family:var(--font-body); color:var(--text); background:var(--bg-white);
}
#paneelConfigurator *{ box-sizing:border-box; }
#paneelConfigurator .topbar{ display:flex; align-items:center; gap:14px; padding:16px 28px; background:var(--primary); color:#fff; }
#paneelConfigurator .brand-mark{ width:38px;height:38px;background:var(--secondary); display:flex;align-items:center;justify-content:center; font-family:var(--font-heading);font-weight:700;font-size:15px;flex-shrink:0;color:var(--primary-dark); }
#paneelConfigurator .brand-text strong{display:block;font-family:var(--font-heading);font-size:16px;font-weight:600;color:var(--secondary);}
#paneelConfigurator .brand-text span{font-size:12.5px;color:#CFE0D5;}
#paneelConfigurator .layout{ display:grid; grid-template-columns:320px 1fr; gap:1px; background:var(--line); }
@media (max-width:1050px){ #paneelConfigurator .layout{grid-template-columns:1fr;} }
#paneelConfigurator .panel{ background:var(--bg-light); padding:20px 22px; overflow-y:auto; }
#paneelConfigurator .center{ background:var(--bg-white); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:32px 24px; gap:12px; }
#paneelConfigurator section.block{margin-bottom:22px;}
#paneelConfigurator section.block:last-child{margin-bottom:0;}
#paneelConfigurator .step-label{ font-family:var(--font-heading); font-size:14px; font-weight:600; color:var(--primary); margin-bottom:10px; display:flex; align-items:baseline; gap:8px; }
#paneelConfigurator .step-num{ width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff; font-size:11.5px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
#paneelConfigurator .field-row{margin-bottom:12px;}
#paneelConfigurator .field-row label{display:block;font-size:12.5px;color:#5C5C5C;margin-bottom:6px;}
#paneelConfigurator .chip-group{display:flex;flex-wrap:wrap;gap:8px;}
#paneelConfigurator .chip{ border:1px solid var(--line); background:#fff; padding:7px 12px; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; color:var(--text); }
#paneelConfigurator .chip:hover{border-color:var(--secondary);}
#paneelConfigurator .chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}
#paneelConfigurator .custom-size{display:flex;gap:8px;align-items:center;margin-top:8px;}
#paneelConfigurator .custom-size input{width:66px;padding:7px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px;}
#paneelConfigurator .custom-size span{color:#5C5C5C;font-size:13px;}
#paneelConfigurator .orientation-picker{display:flex;gap:10px;}
#paneelConfigurator .orientation-card{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; background:#fff; border:1.5px solid var(--line); cursor:pointer; color:#8A8A8A; }
#paneelConfigurator .orientation-card svg{width:32px;height:32px;}
#paneelConfigurator .orientation-card span{font-size:12px;font-weight:500;color:#5C5C5C;}
#paneelConfigurator .orientation-card:hover{border-color:var(--secondary);}
#paneelConfigurator .orientation-card.active{border-color:var(--primary);background:#F2F9EA;color:var(--primary);}
#paneelConfigurator .orientation-card.active span{color:var(--primary);}
#paneelConfigurator .cta{ width:100%;padding:13px 14px;background:var(--primary);color:#fff;border:none;border-radius:6px; font-size:14px;font-weight:500;cursor:pointer; }
#paneelConfigurator .cta:hover{background:var(--primary-dark);}
#paneelConfigurator .cta:disabled{background:#B9C4BD;cursor:not-allowed;}
#paneelConfigurator .cta.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary);margin-top:10px;}
#paneelConfigurator .cta.ghost:hover{background:#F2F9EA;}
#paneelConfigurator .cta.preview{background:var(--secondary);color:#fff;margin-bottom:18px;}
#paneelConfigurator .cta.preview:hover{background:#68A324;}
#paneelConfigurator .recap-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:16px; }
#paneelConfigurator .recap-info{display:flex;align-items:center;gap:10px;font-size:13px;}
#paneelConfigurator .recap-shape{width:22px;height:22px;color:var(--primary);flex-shrink:0;}
#paneelConfigurator .recap-shape svg{width:100%;height:100%;}
#paneelConfigurator .btn-row{display:flex;gap:8px;margin-top:4px;}
#paneelConfigurator .btn-secondary{ flex:1;padding:9px 10px;background:#fff;border:1px solid var(--line);border-radius:6px; font-size:12.5px;font-weight:500;cursor:pointer;color:var(--text); }
#paneelConfigurator .btn-secondary:hover{border-color:var(--primary);color:var(--primary);}
#paneelConfigurator input[type=file]{display:none;}
#paneelConfigurator input[type=range]{width:100%;margin-top:4px;accent-color:var(--primary);}
#paneelConfigurator #textInput{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-family:var(--font-body);resize:vertical;min-height:70px;}
#paneelConfigurator .align-group{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;width:fit-content;}
#paneelConfigurator .align-btn{width:34px;height:32px;background:#fff;border:none;border-right:1px solid var(--line);cursor:pointer;color:#8A8A8A;display:flex;align-items:center;justify-content:center;}
#paneelConfigurator .align-btn:last-child{border-right:none;}
#paneelConfigurator .align-btn svg{width:17px;height:17px;}
#paneelConfigurator .align-btn:hover{color:var(--primary);background:var(--bg-light);}
#paneelConfigurator .align-btn.active{color:#fff;background:var(--primary);}

/* tab bar */
#paneelConfigurator .tabbar{ display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:16px; background:#fff; }
#paneelConfigurator .tab-btn{ flex:1; padding:10px 4px; background:#fff; border:none; border-right:1px solid var(--line); cursor:pointer; color:#8A8A8A; display:flex; align-items:center; justify-content:center; }
#paneelConfigurator .tab-btn:last-child{border-right:none;}
#paneelConfigurator .tab-btn svg{width:19px;height:19px;}
#paneelConfigurator .tab-btn:hover{color:var(--primary);background:var(--bg-light);}
#paneelConfigurator .tab-btn.active{color:#fff;background:var(--primary);}
#paneelConfigurator .tab-panel{display:none;}
#paneelConfigurator .tab-panel.active{display:block;}

/* font select */
#paneelConfigurator .font-select{position:relative;}
#paneelConfigurator .font-select-trigger{ width:100%;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:6px; background:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:space-between; }
#paneelConfigurator .font-select-trigger::after{content:'▾';font-size:11px;color:#8A8A8A;margin-left:8px;}
#paneelConfigurator .font-select-menu{ display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,.12); max-height:200px; overflow-y:auto; }
#paneelConfigurator .font-select-menu.open{display:block;}
#paneelConfigurator .font-select-option{padding:9px 12px;font-size:16px;cursor:pointer;}
#paneelConfigurator .font-select-option:hover{background:var(--bg-light);}

/* cmyk picker */
#paneelConfigurator .print-swatches{display:flex;flex-wrap:wrap;gap:6px;}
#paneelConfigurator .print-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
#paneelConfigurator .print-swatch.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary), inset 0 0 0 1px rgba(0,0,0,.12);}

#paneelConfigurator .res-status{margin-top:8px;padding:10px 12px;border-radius:6px;font-size:12.5px;line-height:1.45;border:1px solid var(--line);background:#fff;}
#paneelConfigurator .res-status.good{border-color:var(--secondary);background:#F2F9EA;color:#3E5F16;}
#paneelConfigurator .res-status.warn{border-color:var(--warn);background:#FBF4E4;color:#5C4818;}
#paneelConfigurator .res-status.bad{border-color:var(--bad);background:#FBECEA;color:#6B241D;}
#paneelConfigurator .res-status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;}
#paneelConfigurator .res-status.good .dot{background:var(--secondary);}
#paneelConfigurator .res-status.warn .dot{background:var(--warn);}
#paneelConfigurator .res-status.bad .dot{background:var(--bad);}

/* asset grid (figuur/achtergrond) */
#paneelConfigurator .asset-search{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;margin-bottom:10px;}
#paneelConfigurator .asset-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
#paneelConfigurator .asset-tile{ background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 4px; display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:10.5px;color:#5C5C5C; }
#paneelConfigurator .asset-tile:hover{border-color:var(--primary);}
#paneelConfigurator .asset-tile svg{width:28px;height:28px;color:var(--primary);}
#paneelConfigurator .asset-tile .swatch{width:28px;height:28px;border-radius:4px;border:1px solid var(--line);}

/* layers */
#paneelConfigurator .layer-row{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:7px 8px;margin-bottom:6px;cursor:grab;}
#paneelConfigurator .layer-row.selected{border-color:var(--primary);background:#F2F9EA;}
#paneelConfigurator .layer-row.dragging{opacity:0.4;}
#paneelConfigurator .layer-row.drag-over-top{border-top:2px solid var(--primary);}
#paneelConfigurator .layer-row.drag-over-bottom{border-bottom:2px solid var(--primary);}
#paneelConfigurator .layer-handle{color:#B9B9B9;font-size:13px;line-height:1;flex-shrink:0;cursor:grab;user-select:none;}
#paneelConfigurator .layer-badge{width:26px;height:22px;border-radius:4px;background:var(--bg-light);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--primary);flex-shrink:0;}
#paneelConfigurator .layer-label{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#paneelConfigurator .layer-actions{display:flex;gap:3px;}
#paneelConfigurator .layer-actions button{width:22px;height:22px;border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;font-size:11px;line-height:1;color:#5C5C5C;}
#paneelConfigurator .layer-actions button:hover{border-color:var(--primary);color:var(--primary);}
#paneelConfigurator .layer-actions button:last-child:hover{border-color:var(--bad);color:var(--bad);}
#paneelConfigurator .layers-empty{font-size:12.5px;color:#8A8A8A;}

#paneelConfigurator canvas#stage{ display:block; background:var(--bg-light); border:1px solid var(--line); max-width:100%; height:auto; cursor:default; }
#paneelConfigurator .hint{font-size:12px;color:#5C5C5C;text-align:center;margin:0;max-width:420px;}

#paneelConfigurator .summary h2{font-family:var(--font-heading);font-size:18px;margin:0 0 16px;font-weight:600;color:var(--secondary);}
#paneelConfigurator .spec-row{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line);}
#paneelConfigurator .spec-row span:first-child{color:#5C5C5C;}
#paneelConfigurator .price-total{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 4px;padding-top:10px;}
#paneelConfigurator .price-total .amount{font-family:var(--font-heading);font-size:26px;font-weight:700;color:var(--primary);}
#paneelConfigurator .price-note{font-size:11.5px;color:#5C5C5C;margin-bottom:14px;}
#paneelConfigurator .toast{margin-top:12px;padding:10px 12px;background:#F2F9EA;border:1px solid var(--secondary);border-radius:6px;font-size:12.5px;color:#3E5F16;display:none;}
#paneelConfigurator .disclaimer{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:#5C5C5C;line-height:1.5;}

/* besteloverzicht: toggle-knop + uitschuifpaneel */
#paneelConfigurator .center-toolbar{ display:flex; justify-content:flex-end; align-items:center; gap:10px; width:100%; }
#paneelConfigurator .toolbar-btn{ padding:10px 16px; background:var(--secondary); color:#fff; border:none; border-radius:8px; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap; }
#paneelConfigurator .toolbar-btn:hover{ background:#68A324; }
#paneelConfigurator .summary-toggle{ display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:13.5px; font-weight:500; cursor:pointer; }
#paneelConfigurator .summary-toggle:hover{ background:var(--primary-dark); }
#paneelConfigurator .summary-toggle svg{ width:18px; height:18px; flex-shrink:0; }
#paneelConfigurator .summary-toggle-price{ font-family:var(--font-heading); font-weight:700; background:rgba(255,255,255,.18); padding:3px 9px; border-radius:5px; }

#paneelConfigurator #summaryOverlay{ display:none; position:fixed; inset:0; background:rgba(20,20,20,0.5); z-index:900; }
#paneelConfigurator #summaryOverlay.open{ display:block; }
#paneelConfigurator #summaryDrawer{ position:fixed; top:0; right:0; height:100%; width:340px; max-width:90vw; background:var(--bg-light); box-shadow:-6px 0 24px rgba(0,0,0,.18); transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; padding:26px 22px; }
#paneelConfigurator #summaryOverlay.open #summaryDrawer{ transform:translateX(0); }
#paneelConfigurator #summaryDrawerClose{ position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:14px; color:#5C5C5C; }
#paneelConfigurator #summaryDrawerClose:hover{ border-color:var(--primary); color:var(--primary); }
#paneelConfigurator #summaryDrawer .panel.summary{ padding:0; background:transparent; overflow:visible; margin-top:26px; }

/* preview modal */
#pcModalOverlay{ display:none; position:fixed; inset:0; background:rgba(20,20,20,0.6); z-index:1000; align-items:center; justify-content:center; padding:24px; }
#pcModalOverlay.open{display:flex;}
#pcModal{ background:#fff; border-radius:10px; padding:22px; max-width:600px; width:100%; max-height:90vh; overflow-y:auto; font-family:'Roboto',sans-serif; position:relative; }
#pcModal .modal-close-x{ position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; border:1px solid #E0E0E0; background:#fff; cursor:pointer; font-size:14px; color:#5C5C5C; line-height:1; }
#pcModal .modal-close-x:hover{ border-color:#1C5733; color:#1C5733; }
#pcModal h3{font-family:'Baloo 2',sans-serif;color:#1C5733;margin:0 0 14px;}
#pcModal canvas{max-width:100%;border:1px solid #E0E0E0;display:block;margin:0 auto 16px;}
#pcModal .modal-actions{display:flex;gap:10px;}
#pcModal button{flex:1;padding:11px;border-radius:6px;font-size:13.5px;font-weight:500;cursor:pointer;border:1px solid #E0E0E0;background:#fff;}
#pcModal .modal-download{background:#1C5733;color:#fff;border:none;}
#pcModal .modal-download:hover{background:#154226;}