/* Google Fonts for customizer text — must load for fonts to display */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Pinyon+Script&family=Tangerine:wght@400;700&family=Allura&family=Sacramento&family=Dancing+Script:wght@400..700&family=Parisienne&family=Alex+Brush&family=UnifrakturMaguntia&family=Pirata+One&family=MedievalSharp&family=Lobster&family=Pacifico&family=Bebas+Neue&family=Playfair+Display:wght@400..900&family=Oswald:wght@200..700&family=Montserrat:wght@100..900&family=Roboto:wght@100..900&family=Lora:wght@400..700&display=swap');

.wcc-app{display:flex;flex-wrap:wrap;gap:20px;margin:16px 0;padding:12px;border:1px solid #e5e5e5;border-radius:6px;background:#fafafa;width:100%;align-items:flex-start}
.wcc-stage-wrap{flex:1 1 50%;min-width:260px;order:1}
.wcc-controls{flex:1 1 320px;min-width:260px;order:2}
.wcc-stage{position:relative;display:inline-block;max-width:100%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.wcc-stage img.wcc-canvas{display:block;max-width:100%;height:auto;user-select:none;pointer-events:none}
.wcc-zone{position:absolute;border:1px dashed #888;overflow:hidden;background:rgba(0,0,0,.04)}
.wcc-zone.circle{border-radius:50%}
.wcc-zone .wcc-zone-img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);max-width:none;cursor:move;user-select:none;-webkit-user-drag:none}
.wcc-zone .wcc-zone-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#666;font-size:12px;text-align:center;padding:4px}
.wcc-textbox{position:absolute;border:1px dashed #888;background:rgba(255,255,255,.5);overflow:hidden;padding:2px;font-size:14px;color:#000;outline:none;line-height:1.2;white-space:pre-wrap;word-wrap:break-word}
.wcc-textbox:focus{border-color:#0073aa}
.wcc-icon-instance{position:absolute;cursor:move;user-select:none}
.wcc-icon-instance img{max-width:100%;display:block;-webkit-user-drag:none;pointer-events:none}
.wcc-icon-instance.grayscale img{filter:grayscale(1)}
.wcc-icon-instance .wcc-icon-handle{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;background:#0073aa;border-radius:50%;cursor:nwse-resize}
.wcc-icon-instance .wcc-icon-del{position:absolute;left:-8px;top:-8px;width:18px;height:18px;background:#c00;color:#fff;border-radius:50%;text-align:center;line-height:16px;font-size:12px;cursor:pointer}
.wcc-section{margin-bottom:14px;padding:8px;background:#fff;border:1px solid #eee;border-radius:4px}
.wcc-section h4{margin:0 0 8px}
.wcc-zone-row,.wcc-text-row{margin-bottom:8px}
.wcc-zone-row label,.wcc-text-row label{display:block;font-size:12px;font-weight:600;margin-bottom:2px}
.wcc-text-toolbar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:4px}
.wcc-text-toolbar select,.wcc-text-toolbar button{font-size:12px;padding:2px 6px}
.wcc-addon{display:block;margin-bottom:4px}
.wcc-addon-price{margin-left:4px;color:#555;font-size:12px}
.wcc-zone-handle{position:absolute;right:-8px;bottom:-8px;width:14px;height:14px;background:#0073aa;border-radius:50%;cursor:nwse-resize;z-index:5}

/* Cart preview thumbnail — keep aspect ratio across themes */
.wcc-cart-preview{display:block;max-width:144px;width:auto !important;height:auto !important;margin-top:6px;border:1px solid #eee;background:#fff;padding:2px;object-fit:contain}
.wcc-cart-preview-inline{max-width:176px}
.wcc-cart-actions{margin-top:6px}
.wcc-edit-customization{display:inline-block;font-size:12px;font-weight:600;text-decoration:underline}

/* Old English Text MT — falls back to UnifrakturMaguntia (Google Fonts) when not installed locally */
@font-face{
  font-family:'Old English Text MT';
  src: local('Old English Text MT'), local('OldEnglishTextMT'), local('UnifrakturMaguntia');
  font-display:swap;
}

/* Toolbar buttons + visual feedback */
.wcc-text-toolbar button{
  background:#fff;border:1px solid #ccc;border-radius:3px;cursor:pointer;
  font-weight:600;color:#333;transition:background .12s,color .12s,border-color .12s;
}
.wcc-text-toolbar button:hover{background:#f1f1f1}
.wcc-text-toolbar button:active,
.wcc-text-toolbar button.active{background:#222;color:#fff;border-color:#222}

/* Zone size/rotation sliders */
.wcc-zone-tools{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.wcc-zone-tools .wcc-slider{display:flex;align-items:center;gap:6px;font-size:12px}
.wcc-zone-tools .wcc-slider span{width:60px;color:#555}
.wcc-zone-tools .wcc-slider input[type=range]{flex:1}
.wcc-zone-tools .wcc-slider-reset{
  width:24px;height:24px;line-height:22px;text-align:center;padding:0;
  background:#fff;border:1px solid #ccc;border-radius:50%;cursor:pointer;
  font-size:14px;color:#333;transition:background .12s,color .12s,border-color .12s;
}
.wcc-zone-tools .wcc-slider-reset:hover{background:#f1f1f1}
.wcc-zone-tools .wcc-slider-reset:active{background:#222;color:#fff;border-color:#222}

/* Layers */
.wcc-layer-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.wcc-layer-row label{flex:0 0 110px;font-size:12px;font-weight:600;color:#333}
.wcc-layer-row select{flex:1;font-size:13px;padding:3px 6px}
.wcc-layer-overlay{display:block}