/* =====================================================
   CLEAN LIGHT REDESIGN — no dark theme, buttons only
   ===================================================== */

/* ── REMOVE SOLID COLOR + BASIC BG REMOVAL → stacked full-width ── */
.remove-image-bg {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin-top: 12px !important;
}
.remove-image-bg .item {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
  border: 1.5px solid transparent !important;
  line-height: 1.4 !important;
}
.remove-image-bg .item.remove-solid-color {
  background: #f0f4ff !important;
  color: #7c5cfd !important;
  border-color: #c7d2fe !important;
}
.remove-image-bg .item.remove-solid-color:hover {
  background: #e0e7ff !important;
  border-color: #a5b4fc !important;
  box-shadow: 0 2px 8px rgba(79,70,229,0.15) !important;
}
.remove-image-bg .item.remove-image-background {
  background: #fff7ed !important;
  color: #c2410c !important;
  border-color: #fed7aa !important;
}
.remove-image-bg .item.remove-image-background:hover {
  background: #ffedd5 !important;
  border-color: #fb923c !important;
  box-shadow: 0 2px 8px rgba(194,65,12,0.15) !important;
}

/* ── CHANGE SIZE BUTTON ── */
.btn.change-image-size.bg-secondary {
  background: #f0f2f8 !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 7px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  transition: all 0.18s !important;
}
.btn.change-image-size.bg-secondary:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
}

/* ── CHANGE OBJ SIZE BUTTON (pill) ── */
.btn.change-obj-size {
  background: #f0f4ff !important;
  color: #7c5cfd !important;
  border: 1.5px solid #c7d2fe !important;
  border-radius: 50px !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  padding: 4px 14px !important;
  transition: all 0.18s !important;
}
.btn.change-obj-size:hover {
  background: #e0e7ff !important;
  border-color: #a5b4fc !important;
}

/* ── UNDO / REDO BUTTONS ── */
.action-btn button.btn:has(svg),
button.btn[class*="undo"], button.btn[class*="redo"] {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #374151 !important;
  padding: 5px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: all 0.18s !important;
}
.action-btn button.btn:has(svg):hover {
  background: #f0f2f8 !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}
.btn.undo-btn svg path {
  fill: #374151 !important;
}
.btn.redo-btn svg.icon-inactive path {
  fill: #94a3b8 !important;
}
.btn.redo-btn svg.icon-primary path {
  fill: #374151 !important;
}

/* ── DUPLICATE (obj toolbar) ── */
.btn.duplicate-obj {
  background: #fff !important;
  color: #64748b !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 50px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 5px 16px !important;
  transition: all 0.18s !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.btn.duplicate-obj:hover {
  background: #f0f2f8 !important;
  border-color: #94a3b8 !important;
  color: #334155 !important;
}
.btn.duplicate-obj svg path {
  fill: #7c5cfd !important;
}

/* ── POSITION ── */
.btn.change-positions {
  background: #f0f4ff !important;
  color: #7c5cfd !important;
  border: 1.5px solid #c7d2fe !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 5px 14px !important;
  transition: all 0.18s !important;
}
.btn.change-positions:hover {
  background: #e0e7ff !important;
  border-color: #a5b4fc !important;
  box-shadow: 0 2px 8px rgba(79,70,229,0.15) !important;
}
.btn.change-positions svg path {
  fill: #7c5cfd !important;
}

/* ── FLIP & ROTATE DROPDOWN TOGGLES ── */
.btn.btn-secondary.dropdown-toggle {
  background: #f8faff !important;
  border: 1.5px solid #dde3f5 !important;
  border-radius: 8px !important;
  color: #7c5cfd !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.18s !important;
  box-shadow: none !important;
}
.btn.btn-secondary.dropdown-toggle:hover {
  background: #eef2ff !important;
  border-color: #a5b4fc !important;
}
.btn.btn-secondary.dropdown-toggle svg path {
  fill: #7c5cfd !important;
}
.btn.btn-secondary.dropdown-toggle i {
  color: #7c5cfd !important;
}

/* ── REMOVE BACKGROUND (btn-primary) ── */
/* .btn.btn-primary.remove-background {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1.5px solid #fecdd3 !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  transition: all 0.18s !important;
  box-shadow: none !important;
}
.btn.btn-primary.remove-background:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
  box-shadow: 0 2px 8px rgba(225,29,72,0.15) !important;
}
.btn.btn-primary.remove-background i {
  color: #e11d48 !important;
} */

/* ── REMOVE / DELETE (danger) ── */
.btn.bg-danger.delete-obj,
.btn.btn-danger.remove-created-design {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1.5px solid #fecdd3 !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  transition: all 0.18s !important;
  box-shadow: none !important;
}
.btn.bg-danger.delete-obj:hover,
.btn.btn-danger.remove-created-design:hover {
  background: #ffe4e6 !important;
  border-color: #fda4af !important;
  box-shadow: 0 2px 8px rgba(225,29,72,0.15) !important;
}
.btn.bg-danger.delete-obj svg path,
.btn.bg-danger.delete-obj svg.icon-warning path {
  fill: #e11d48 !important;
}
.btn.btn-danger.remove-created-design i {
  color: #e11d48 !important;
}

/* ── DUPLICATE BUTTON (design list) ── */
.btn.duplicate-btn {
  background: #fff !important;
  color: #64748b !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 50px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 5px 16px !important;
  transition: all 0.18s !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.btn.duplicate-btn:hover {
  background: #f0f2f8 !important;
  border-color: #94a3b8 !important;
  color: #334155 !important;
}

/* ── BACK TO DESIGN ── */
.back-to-design-btn,
button[class*="back-to-design"], a[class*="back-to-design"] {
  background: #f0f2f8 !important;
  color: #64748b !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  padding: 6px 14px !important;
  transition: all 0.18s !important;
}

/* ── GENERATE DTF SHEET ── */
/* .btn.generate-btn, .generate-gang-sheet {
  background: linear-gradient(135deg, #7c5cfd, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 20px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.3) !important;
  transition: all 0.2s !important;
  width: 100% !important;
}
.btn.generate-btn:hover, .generate-gang-sheet:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,0.4) !important;
}

── PREVIOUS GENERATED SHEET ──
.btn.previous-generated-sheet {
  background: #fff !important;
  color: #7c5cfd !important;
  border: 1.5px solid #c7d2fe !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  transition: all 0.18s !important;
}
.btn.previous-generated-sheet:not(.additional-sheet):hover {
  background: #000000f5 !important;
  border-color: #909090 !important;
} */

/* ── POSITION ITEMS ── */
.position-option {
  background: #f0f2f8 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  transition: all 0.18s !important;
  margin-bottom: 6px !important;
}
.position-option:hover {
  background: #eef2ff !important;
  border-color: #a5b4fc !important;
  color: #7c5cfd !important;
}
.position-option svg path {
  fill: currentColor !important;
}

/* ── MINUS / PLUS QUANTITY ── */
.btn.minus, .btn.plus {
  background: #f0f2f8 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 7px !important;
  color: #374151 !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  transition: all 0.18s !important;
}
.btn.minus:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}
.btn.plus:hover {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #16a34a !important;
}

/* ── UPLOAD FILE BUTTON ── */
label.btn.mb-4 {
  background: #eef2ff !important;
  color: #7c5cfd !important;
  border: 1.5px dashed #a5b4fc !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  width: 100%;
}
label.btn.mb-4:hover {
  background: #e0e7ff !important;
  border-color: #818cf8 !important;
}
label.btn.mb-4 svg path {
  fill: #7c5cfd !important;
}

/* ── CONFIRM DESIGNS BUTTON ── */
/* button[class*="confirm-design"], .btn.confirm-designs {
  background: #7c5cfd !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  transition: all 0.18s !important;
}
button[class*="confirm-design"]:hover {
  background: #7c5cfd !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3) !important;
} */

/* ── SAVE YOUR DESIGN (submit) ── */
/* button[class*="save-design-btn"], button[type="submit"] {
  background: linear-gradient(135deg, #7c5cfd, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.25) !important;
  transition: all 0.2s !important;
} */

/* Don't Save & Go Back Button */
.action-btn .no-save-go-back-btn {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
  white-space: nowrap;
}

.action-btn .no-save-go-back-btn:hover {
  background-color: #c0392b;
  transform: scale(1.05);
}

/* ── BACK TO LIBRARY ── */
.btn.back-to-library, .btn.back-selected-library-media {
  color: #94a3b8 !important;
  transition: color 0.15s !important;
}
.btn.back-to-library:hover, .btn.back-selected-library-media:hover {
  color: #7c5cfd !important;
}

/* ── DEL FILE BUTTON ── */
/* ── GENERAL POLISH ── */
button:active { transform: scale(0.96) !important; }
button:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

/* ── FLIP / ROTATE ICON FILLS ── */
.dropdown.flip-settings .btn svg path { fill: #7c5cfd !important; }
.dropdown.rotate-settings .btn svg path { fill: #7c5cfd !important; }






/* Sidebar container */
.editor-sidebar {
  background: #ffffff !important;
  width: 88px !important;
  border-right: 1px solid #e8eaf0 !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.04) !important;
}

.items.hide-scrollbar {
  width: 88px !important;
  padding: 12px 8px !important;
  gap: 8px !important;
}

/* Tab items */
.tool-item {
  width: 72px !important;
  height: auto !important;
  min-height: 64px !important;
  border-radius: 10px !important;
  /* background: transparent !important; */
  color: #9aa0b4 !important;
  padding: 8px 4px !important;
  gap: 5px !important;
  transition: all 0.15s ease !important;
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.tool-item:hover,
.tool-item.active {
  background: #f5f5f5 !important;
  transform: translateY(-2px);
}

/* .tool-item.active {
  background: transparent !important;
} */

/* Icon wrapper - colored tile */
.tool-item .icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.tool-item:hover .icon,
.tool-item.active .icon {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.tool-item .icon svg {
  width: 20px !important;
  height: 20px !important;
}

.tool-item[data-type="graphics"] .icon {
    background: #eeeefc;
}
.tool-item[data-type="graphics"] .icon svg {
    fill: #7073f7 !important;
}

.tool-item[data-type="uploads"] .icon {
    background: #e2f2fd;
}

.tool-item[data-type="uploads"] .icon svg {
    fill: #0ea5ec !important;
}

.tool-item[data-type="text"] .icon {
    background: #d2f9e5;
}
.tool-item[data-type="text"] .icon svg,
.tool-item[data-type="text"] .icon svg path {
    fill: #22a878 !important;
}

.tool-item[data-type="ourLibrary"] .icon {
    background: #fef3c7;
}

.tool-item[data-type="ourLibrary"] .icon svg {
  fill: #e6a72a !important;
}

.tool-item[data-type="myLibrary"] .icon {
    background: #ea4999;
}

.tool-item[data-type="myLibrary"] .icon svg,
.tool-item[data-type="myLibrary"] .icon svg path {
  fill: #fefefe !important;
}

/* Title text */
.tool-item .title {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: #6b7280 !important;
}

.tool-item.active .title {
  color: #374151 !important;
  font-weight: 700 !important;
}