/* Smart Gangsheet Maydens styles */
.sgm-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111}
.sgm-topbar{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px;background:#0d1321;color:#fff;position:sticky;top:0;z-index:1000}
.sgm-toolbar{display:flex;gap:8px;justify-content:center;flex:1}
.sgm-top-actions{display:flex;gap:12px;align-items:center}
.sgm-zoombar{display:flex;gap:8px;align-items:center;background:#fff;color:#0d1321;padding:6px 8px;border-radius:8px}

.sgm-btn{
  background:#0d1321;
  color:#fff;
  border:0;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width: 50px;
  text-decoration: none;
}
.sgm-btn .dashicons { font-size: 18px; width: 18px; height: 18px; }
.sgm-btn-label { font-size: 10px; line-height: 1; opacity: 0.9; }

.sgm-btn.secondary{background:#1f2a44}
.sgm-btn.sgm-btn-sm{padding:6px 12px;border-radius:6px;min-width:auto;display:inline-flex;flex-direction:row;gap:6px;font-size:12px;line-height:1}
.sgm-btn.sgm-btn-sm:hover{text-decoration:none}
.sgm-btn-blue{background:#2271b1}
.sgm-btn-blue:hover{background:#1b5e9a}
.sgm-btn-orange{background:#ff8c00}
.sgm-btn-orange:hover{background:#e67e00}
.sgm-admin-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:100000}
.sgm-admin-modal-card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);text-align:center;width:50vw;max-width:640px;min-width:320px}
.sgm-admin-modal-card .dashicons{font-size:32px;width:32px;height:32px;color:#00a32a;margin-bottom:8px}
.sgm-admin-modal .sgm-admin-download{background:#2271b1;color:#fff;border:0;border-radius:8px;padding:8px 14px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.sgm-admin-modal .sgm-admin-download:hover{background:#1b5e9a}
.sgm-admin-modal .sgm-admin-download .dashicons{color:#fff;width:18px;height:18px}

/* Save & Add to Cart Button Style */
#sgm-add-cart {
  background-color: #bd0f18;
  color: #ffffff;
  font-weight: 600;
  padding: 8px 16px;
  flex-direction: row; /* Keep text inline if no icon or specific design */
  gap: 6px;
}

.sgm-builder{display:flex;gap:12px}
.sgm-left{width:280px;background:#f7f8fa;border-right:1px solid #e2e6ea;padding:12px;position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto}
.sgm-canvas-wrap{position:relative;flex:1;background:#fff;overflow:auto;display:flex}
.sgm-canvas-container{display:flex;flex-direction:column;align-items:center;gap:8px}
.sgm-canvas-bg{position:relative;margin:0;border:0;background-clip:padding-box}
.sgm-right{width:220px;background:#fff;border-left:1px solid #e2e6ea;padding:12px;position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto}
.sgm-layers{list-style:none;margin:0;padding:0}
.sgm-layer-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border:1px solid #eaeaea;border-radius:6px;margin:6px 0;cursor:pointer;background:#fff}
.sgm-layer-item.active{border-color:#0d1321;background:#f0f5ff}
.sgm-layer-name{font-size:12px;color:#333}
.sgm-checker{background-image:linear-gradient(45deg,#bbb 25%,transparent 25%),linear-gradient(-45deg,#bbb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bbb 75%),linear-gradient(-45deg,transparent 75%,#bbb 75%);background-size:var(--sgm-check-size,20px) var(--sgm-check-size,20px);background-position:0 0,0 calc(var(--sgm-check-size,20px)/2),calc(var(--sgm-check-size,20px)/2) calc(-1 * var(--sgm-check-size,20px)/2),calc(-1 * var(--sgm-check-size,20px)/2) 0;}
.sgm-ruler-x{position:sticky;top:0;height:24px;background:#fff;border-bottom:1px solid #ccc;display:flex;align-items:center;font-size:11px}
.sgm-ruler-y{display:none}
.sgm-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:9999}
.sgm-card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);width:auto;min-width:420px;max-width:95vw;text-align:center;}
.sgm-option{display:flex;align-items:center;justify-content:space-between;margin:8px 0;padding:12px;border-radius:8px;background:#0d1321;color:#fff;width:100%;box-sizing:border-box;cursor:pointer;}
.sgm-guideline{position:absolute;background:#2ecc71;opacity:.8;}
.sgm-info{position:absolute;right:12px;top:12px;background:#0d1321;color:#fff;padding:6px 10px;border-radius:8px;font-size:12px}
.sgm-zoom{display:none}
.sgm-measure{position:absolute;left:6px;bottom:6px;background:#0d1321;color:#fff;padding:4px 8px;border-radius:6px;font-size:12px;z-index:1001}
.sgm-canvas-bg{z-index:1}
.sgm-canvas-wrap #sgm-canvas-holder{z-index:2;}
.sgm-boundary{position:absolute;left:0;top:0;width:100%;height:100%;border:1px solid #9ea7b3;pointer-events:none;z-index:10;display:block;box-sizing:border-box}
.sgm-ruler-x{position:relative;height:24px;background:#fff;border:1px solid #ccc;border-radius:6px;display:block;font-size:11px;z-index:999;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.sgm-ruler-x canvas{display:block}
input.sgm-field,select.sgm-field{width:100%;padding:6px;border:1px solid #cfd8dc;border-radius:6px;margin:4px 0;box-sizing:border-box;}
.sgm-confirm-btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; margin: 0 5px; }
.sgm-confirm-yes { background: #bd0f18; color: #fff; }
.sgm-confirm-no { background: #ccc; color: #333; }

/* Product Type Selection */
.sgm-type-grid {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 16px;
}
.sgm-type-box {
    flex: 1;
    border: 2px solid #eee;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.sgm-type-box:hover {
    border-color: #0d1321;
    background: #f9f9f9;
}
.sgm-type-box.selected {
    border-color: #0d1321;
    background: #f0f5ff;
}
.sgm-type-img {
    display: block;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
}
.sgm-type-img img {
    width: 100%;
    height: auto;
    display: block;
}
.sgm-type-box h3 {
    margin: 0;
    font-size: 14px;
    color: #333;
}
.sgm-back-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    color: #666;
}
.sgm-back-btn:hover {
    text-decoration: underline;
}

/* Loading Modal */
.sgm-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sgm-progress-bar {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 4px;
    margin-top: 10px;
    height: 10px;
    overflow: hidden;
}

.sgm-progress-fill {
    height: 100%;
    background-color: #3498db;
    width: 0%;
    transition: width 0.3s ease;
}