/* WPD Product Designer — frontend editor */

/* Buttons injected in the theme */
.wpd-single-btn-wrap{margin:0 0 12px;width:100%}
.wpd-open-designer.wpd-btn-single{width:100%;display:block}
.wpd-open-designer.wpd-btn-archive{margin-top:8px;font-size:12px;padding:8px 14px}
.wpd-apply-wrap{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13px;cursor:pointer}
.wpd-perpiece{font-size:11px;color:#8b929a}

/* Saved design preview box on the product page */
.wpd-saved-design{display:flex;align-items:center;gap:14px;background:#f0f7f1;border:1px solid #bfe0c4;border-radius:8px;padding:12px 14px;margin:0 0 18px}
.wpd-saved-design .wpd-sd-thumb{width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid #d7dde4;border-radius:6px;display:inline-block;flex:0 0 auto}
.wpd-saved-design .wpd-sd-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wpd-saved-design .wpd-sd-info strong{color:#1e6b2e;font-size:14px}
.wpd-saved-design .wpd-sd-fee{font-size:12px;color:#555}
.wpd-saved-design .wpd-sd-edit{flex:0 0 auto;font-size:12px;padding:8px 14px}

/* ---- Modal shell ---- */
#wpd-modal{position:fixed;inset:0;z-index:999999;display:none;background:#14161a}
#wpd-modal.wpd-open{display:block}
body.wpd-locked{overflow:hidden!important}
#wpd-app{display:flex;flex-direction:column;height:100%;width:100%;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	font-size:13px;color:#e8eaed;-webkit-font-smoothing:antialiased}
#wpd-app *,#wpd-app *:before,#wpd-app *:after{box-sizing:border-box}
#wpd-app button{cursor:pointer;font-family:inherit}
#wpd-app input,#wpd-app select,#wpd-app textarea{font-family:inherit;font-size:13px;color:#e8eaed;
	background:#0e1013;border:1px solid #33373d;border-radius:6px;padding:6px 8px;max-width:100%}
#wpd-app input[type=color]{padding:2px;height:32px;width:40px;cursor:pointer}
#wpd-app input[type=range]{padding:0}
#wpd-app label{font-size:12px;color:#aab0b7}

/* ---- Header ---- */
.wpd-header{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#1c1f24;border-bottom:1px solid #2a2e34;flex:0 0 auto}
.wpd-header .wpd-title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wpd-header .wpd-spacer{flex:1}
.wpd-price{font-size:14px;white-space:nowrap}
.wpd-price strong{color:#7dd97d}
.wpd-qty{width:64px!important;text-align:center}
.wpd-btn{border:0;border-radius:6px;padding:9px 16px;font-weight:600;font-size:13px;background:#2f343b;color:#e8eaed}
.wpd-btn:hover{background:#3a4048}
.wpd-btn.wpd-primary{background:#4c8bf5;color:#fff}
.wpd-btn.wpd-primary:hover{background:#3a76dd}
.wpd-btn.wpd-danger{background:#c0392b;color:#fff}
.wpd-btn:disabled{opacity:.5;cursor:default}
.wpd-close{background:none;border:0;color:#aab0b7;font-size:26px;line-height:1;padding:2px 8px}
.wpd-close:hover{color:#fff}

/* Variation option bar (variable products) */
.wpd-varbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 16px;background:#181b1f;border-bottom:1px solid #2a2e34;flex:0 0 auto}
.wpd-var-field{display:flex;align-items:center;gap:6px;font-size:12px;color:#aab0b7}
.wpd-varbar select{min-width:130px}
.wpd-var-msg{font-size:12px;color:#8b929a}
.wpd-var-msg.wpd-var-ok{color:#7dd97d}
.wpd-var-msg.wpd-var-err{color:#e74c3c}

/* ---- Body layout ---- */
.wpd-body{display:flex;flex:1 1 auto;min-height:0}

/* Left toolbar */
.wpd-tools{display:flex;flex:0 0 auto;min-height:0}
.wpd-tabs{display:flex;flex-direction:column;background:#1c1f24;border-right:1px solid #2a2e34;overflow-y:auto}
.wpd-tab{background:none;border:0;color:#aab0b7;padding:12px 10px;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:4px;width:70px;border-left:3px solid transparent}
.wpd-tab svg{width:20px;height:20px;fill:currentColor}
.wpd-tab.wpd-active{color:#fff;background:#24282e;border-left-color:#4c8bf5}
.wpd-panel{width:250px;background:#20242a;border-right:1px solid #2a2e34;overflow-y:auto;padding:14px;display:none}
.wpd-panel.wpd-active{display:block}
.wpd-panel h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#8b929a}
.wpd-panel .wpd-row{margin-bottom:12px}
.wpd-panel .wpd-row-inline{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.wpd-full{width:100%}

/* Clipart / template grids */
.wpd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.wpd-grid .wpd-item{background:#fff;border-radius:6px;padding:6px;cursor:pointer;border:2px solid transparent;text-align:center}
.wpd-grid .wpd-item:hover{border-color:#4c8bf5}
.wpd-grid .wpd-item img{max-width:100%;height:70px;object-fit:contain;display:block;margin:0 auto}
.wpd-grid .wpd-item span{display:block;font-size:11px;color:#333;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpd-cat-title{font-size:12px;font-weight:600;color:#cfd3d8;margin:14px 0 6px}

/* Shapes */
.wpd-shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wpd-shape{background:#2a2e35;border:1px solid #3a4048;border-radius:6px;height:56px;display:flex;align-items:center;justify-content:center;color:#e8eaed}
.wpd-shape:hover{border-color:#4c8bf5}
.wpd-shape svg{width:26px;height:26px;fill:currentColor}

/* ---- Canvas area ---- */
.wpd-stage{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0}
.wpd-viewtabs{display:flex;gap:6px;padding:10px 14px 0;flex-wrap:wrap}
.wpd-viewtab{background:#2a2e35;border:1px solid #3a4048;color:#cfd3d8;border-radius:6px 6px 0 0;padding:7px 14px;font-size:12px}
.wpd-viewtab.wpd-active{background:#e9ebee;color:#14161a;font-weight:600;border-color:#e9ebee}
.wpd-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:16px;background:
	repeating-conic-gradient(#191c20 0 25%,#1e2126 0 50%) 0 0/24px 24px}
.wpd-canvas-holder{background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.5);border-radius:4px;overflow:hidden;line-height:0}
.wpd-hint{padding:6px 14px;color:#767d85;font-size:11px;flex:0 0 auto;text-align:center}

/* ---- Right panel: properties + layers ---- */
.wpd-right{flex:0 0 260px;background:#20242a;border-left:1px solid #2a2e34;display:flex;flex-direction:column;min-height:0}
.wpd-props{flex:1 1 55%;overflow-y:auto;padding:14px;border-bottom:1px solid #2a2e34}
.wpd-props h4,.wpd-layers h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#8b929a}
.wpd-props .wpd-row{margin-bottom:10px}
.wpd-props .wpd-row-inline{display:flex;gap:6px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.wpd-btn-group{display:flex;gap:4px;flex-wrap:wrap}
.wpd-btn-sm{background:#2a2e35;border:1px solid #3a4048;color:#e8eaed;border-radius:5px;padding:5px 9px;font-size:12px;min-width:30px}
.wpd-btn-sm:hover,.wpd-btn-sm.wpd-on{border-color:#4c8bf5;color:#fff;background:#31405c}
.wpd-empty-props{color:#767d85;font-size:12px}

.wpd-layers{flex:1 1 45%;overflow-y:auto;padding:14px}
.wpd-layer{display:flex;align-items:center;gap:6px;background:#262a31;border:1px solid #33373d;border-radius:6px;padding:6px 8px;margin-bottom:6px}
.wpd-layer.wpd-selected{border-color:#4c8bf5}
.wpd-layer .wpd-lname{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.wpd-licon{background:none;border:0;color:#8b929a;padding:2px;font-size:13px;line-height:1}
.wpd-licon:hover{color:#fff}
.wpd-licon.wpd-on{color:#4c8bf5}

/* Toast + spinner */
.wpd-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1c1f24;color:#fff;border:1px solid #3a4048;padding:12px 20px;border-radius:8px;z-index:1000001;display:flex;gap:14px;align-items:center;box-shadow:0 6px 30px rgba(0,0,0,.5)}
.wpd-toast a{color:#7db3ff}
.wpd-loading{position:absolute;inset:0;background:rgba(20,22,26,.75);display:flex;align-items:center;justify-content:center;z-index:10;color:#fff;font-size:14px;gap:10px}
.wpd-spin{width:22px;height:22px;border:3px solid #3a4048;border-top-color:#4c8bf5;border-radius:50%;animation:wpdspin .8s linear infinite}
@keyframes wpdspin{to{transform:rotate(360deg)}}

/* ---- Responsive ---- */
@media (max-width: 900px){
	.wpd-body{flex-direction:column;overflow-y:auto}
	.wpd-tools{order:2;flex-direction:column}
	.wpd-tabs{flex-direction:row;border-right:0;border-top:1px solid #2a2e34;overflow-x:auto}
	.wpd-tab{border-left:0;border-top:3px solid transparent;width:auto;min-width:64px}
	.wpd-tab.wpd-active{border-top-color:#4c8bf5}
	.wpd-panel{width:100%;max-height:280px}
	.wpd-stage{order:1;min-height:340px}
	.wpd-right{order:3;flex:0 0 auto;border-left:0;border-top:1px solid #2a2e34;flex-direction:row}
	.wpd-props{border-bottom:0;border-right:1px solid #2a2e34}
	.wpd-props,.wpd-layers{max-height:260px;flex:1 1 50%}
	.wpd-header{flex-wrap:wrap;gap:8px}
}