/* =============================================
   GANG SHEET BUILDER — GLASSMORPHISM UX v3
   Sleek • Modern • Glass • Full-Screen
   ============================================= */

/* ---- Design Tokens ---- */
:root {
  --glass-primary: #7c5cfd;
  --glass-primary-light: #818cf8;
  --glass-primary-dark: #7c5cfd;
  --glass-primary-glow: rgba(124, 92, 253, 0.35);
  --glass-accent: #06b6d4;
  --glass-surface: rgba(255, 255, 255, 0.72);
  --glass-surface-strong: rgba(255, 255, 255, 0.88);
  --glass-bg: #eef2ff;
  --glass-bg-gradient: linear-gradient(180deg, #f8f9fc 0%, #f0f1f8 100%);
  --glass-border: rgb(207 207 207);
  --glass-border-subtle: rgba(148, 163, 184, 0.2);
  --glass-text: #1e1b4b;
  --glass-text-secondary: #64748b;
  --glass-blur: 6px;
  --glass-blur-heavy: 10px;
  --glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --glass-shadow-glow: 0 8px 32px rgba(124, 92, 253, 0.15);
  --glass-radius: 16px;
  --glass-radius-lg: 24px;
  --glass-radius-xl: 32px;
  --glass-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --glass-transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Global ---- */
body {
  background: rgb(245, 246, 248) !important;
  background-image: none !important;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--glass-bg-gradient) !important;
  background-attachment: fixed !important;
  /* min-height: 100vh; */
  overflow-x: hidden !important;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(
      ellipse at 20% 50%,
      rgba(124, 92, 253, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 20%,
      rgba(6, 182, 212, 0.02) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 40% 80%,
      rgba(168, 85, 247, 0.02) 0%,
      transparent 50%
    );
  animation: meshFloat 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes meshFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(2%, -1%) rotate(1deg);
  }
  66% {
    transform: translate(-1%, 2%) rotate(-1deg);
  }
}

.all-content {
  position: relative;
}

/* =============================================
   NAVBAR — Frosted Glass
   ============================================= */
.navbar {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow:
    var(--glass-shadow-sm),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5) !important;
  padding: 12px 24px !important;
  transition: var(--glass-transition) !important;
  /* backdrop-filter creates a new stacking context, which traps the
     profile dropdown's z-index inside the navbar's layer. Without an
     explicit position + high z-index here, anything in the auto-builder
     UI that paints above the navbar covers the dropdown. */
  position: relative !important;
  z-index: 1050 !important;
}

/* .site-logo .logo {
        width: auto;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
} */
.site-logo .logo-text {
  font-weight: 800 !important;
  font-size: 20px !important;
  background: linear-gradient(
    135deg,
    var(--glass-primary),
    var(--glass-accent)
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.5px !important;
}

.navbar .options a.btn,
.advance-btn {
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  transition: all var(--glass-transition) !important;
  border: none !important;
  overflow: hidden;
}

.navbar .options a.btn-primary,
.advance-btn {
  background: linear-gradient(
    135deg,
    var(--glass-primary),
    var(--glass-primary-light)
  ) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px var(--glass-primary-glow) !important;
}

.navbar .options a.btn-primary:hover,
.advance-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px var(--glass-primary-glow) !important;
}

.navbar .options .action-btn::after {
  background: rgba(148, 163, 184, 0.3) !important;
}

/* =============================================
   MAIN CARD — Full-Screen Glassmorphism
   ============================================= */
.card.create-design {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  transition: var(--glass-transition) !important;
  overflow: visible !important;
  animation: fadeInUp 0.5s ease-out both;
  /* min-height: calc(100vh - 55px) !important; */
}

/* =============================================
   TAB SWITCHER — Sliding Pill Toggle
   ============================================= */
/* .nav.nav-tabs.mobile-tabs {
  display: flex !important;
  position: relative !important;
  background: rgba(124, 92, 253, 0.08) !important;
  border-radius: 16px !important;
  padding: 5px !important;
  gap: 0 !important;
  border: 1px solid rgba(124, 92, 253, 0.12) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.04) !important;
  width: fit-content !important;
  margin: 0 auto 32px !important;
  list-style: none !important;
}

.nav.nav-tabs.mobile-tabs::after {
  content: '';
  position: absolute;
  top: 5px;
  height: calc(100% - 10px);
  background: white !important;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(124, 92, 253,0.2), 0 1px 3px rgba(0,0,0,0.06);
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  z-index: 0;
  left: var(--tab-indicator-left, 5px);
  width: var(--tab-indicator-width, 50%);
} */

/* Slider position now driven by JS via CSS custom properties */
/* 
.nav-item {
  flex: 1 !important;
  z-index: 1 !important;
}

.nav-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all var(--glass-transition) !important;
  color: var(--glass-text-secondary) !important;
  border-radius: 12px !important;
  padding: 12px 28px !important;
  border: none !important;
  background: transparent !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

.nav-item a.active {
  color: var(--glass-primary) !important;
  background: transparent !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.nav-item a:not(.active):hover {
  color: var(--glass-text) !important;
  background: transparent !important;
} */

/* =============================================
   UPLOAD DROP ZONE — Glass with Glow
   ============================================= */
.upload-area {
  border: 2px dashed rgba(124, 92, 253, 0.25) !important;
  border-radius: var(--glass-radius-lg) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 48px 32px !important;
  transition: all var(--glass-transition) !important;
  position: relative;
  overflow: hidden;
}

.upload-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 92, 253, 0.03),
    transparent
  );
  transition: left 0.6s ease;
}

.upload-area:hover::before {
  left: 100%;
}

.upload-area:hover,
.upload-area.drag-active {
  border-color: var(--glass-primary) !important;
  background: rgba(124, 92, 253, 0.04) !important;
  box-shadow:
    0 0 0 4px rgba(124, 92, 253, 0.08),
    var(--glass-shadow) !important;
  transform: translateY(-2px);
}

.svg-icon {
  margin-bottom: 4px;
}

.svg-icon svg {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 8px rgba(124, 92, 253, 0.2));
  animation: floatUpDown 3s ease-in-out infinite;
}

.upload-area:hover .svg-icon svg {
  transform: translateY(-4px) scale(1.08);
  animation: floatUpDown 1.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(124, 92, 253, 0.3));
}

@keyframes floatUpDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.upload-text {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1e1b4b !important;
  margin-bottom: 4px !important;
}

.upload-formats {
  font-size: 13px !important;
  color: #94a3b8 !important;
}

.upload-area .file-upload-btn,
.btn-imp {
  background: linear-gradient(
    135deg,
    var(--glass-primary),
    var(--glass-primary-light)
  ) !important;
  border-radius: 14px !important;
  padding: 14px 36px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px var(--glass-primary-glow) !important;
  transition: all var(--glass-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  letter-spacing: 0.3px !important;
  cursor: pointer;
}

.upload-area .file-upload-btn img {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}

.upload-area .file-upload-btn:hover,
.btn-imp:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px var(--glass-primary-glow) !important;
}

.upload-area .file-upload-btn:active,
.btn-imp:active {
  transform: translateY(0) scale(0.98) !important;
}

/* =============================================
   FILE INFO CARDS — Frosted Glass
   ============================================= */
.file-info-container .card {
  background: var(--glass-surface-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: all var(--glass-transition) !important;
  overflow: hidden !important;
  animation: scaleIn 0.3s ease-out both;
}

.file-info-container .card:hover {
  box-shadow: var(--glass-shadow-lg) !important;
  transform: translateY(-2px);
}

.file-info .file-image-container {
  background: linear-gradient(135deg, #f0f2f8, #e2e8f0) !important;
  border-radius: var(--glass-radius) var(--glass-radius) 0 0 !important;
}

.quantity-control .btn {
  border-radius: 10px !important;
  background: rgba(124, 92, 253, 0.06) !important;
  border: 1.5px solid rgba(124, 92, 253, 0.15) !important;
  color: var(--glass-primary) !important;
  font-weight: 700 !important;
  transition: all var(--glass-transition) !important;
}

.quantity-control .btn:hover {
  background: var(--glass-primary) !important;
  border-color: var(--glass-primary) !important;
  color: #fff !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px var(--glass-primary-glow) !important;
}

.file-dpi {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #008143 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
}

/* =============================================
   GENERATE DTF SHEET BUTTON
   ============================================= */
.generate-dtf-sheet button.learn-more .circle {
  background: linear-gradient(
    135deg,
    var(--glass-primary),
    var(--glass-primary-dark)
  ) !important;
  border-radius: 14px !important;
}

.generate-dtf-sheet button.learn-more .button-text {
  color: var(--glass-primary) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.generate-dtf-sheet button:hover .circle {
  box-shadow: 0 8px 24px var(--glass-primary-glow) !important;
}

.generate-dtf-sheet button:hover .button-text {
  color: #4d4d4d !important;
}

.generate-dtf-sheet button.previous-generated-sheet:not(.additional-sheet) {
  background: var(--darkColor) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  color: var(--white) !important;
  box-shadow: var(--glass-shadow-sm) !important;
  transition: all var(--glass-transition) !important;
}

.generate-dtf-sheet button.previous-generated-sheet:hover {
  box-shadow: var(--glass-shadow) !important;
  transform: translateY(-1px);
}

/* =============================================
   INPUTS — Glass Focus
   ============================================= */
/* input[type="number"],
input[type="text"],
textarea,
select {
  border-radius: 10px !important;
  border: 1.5px solid rgba(148,163,184,0.2) !important;
  background: rgba(255,255,255,0.7) !important;
  transition: all var(--glass-transition) !important;
  font-weight: 500 !important; */
/* } */

/* input[type="number"]:focus,
input[type="text"]:focus,
textarea:focus,
select:focus {
  border-color: var(--glass-primary) !important;
  box-shadow: 0 0 0 4px rgba(124, 92, 253,0.1), var(--glass-shadow-sm) !important;
  outline: none !important;
  background: rgba(255,255,255,0.95) !important;
} */

input[type="range"] {
  accent-color: var(--glass-primary);
  border-radius: 99px !important;
}

/* =============================================
   SCROLLBARS
   ============================================= */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(124, 92, 253, 0.2);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 92, 253, 0.35);
}

/* =============================================
   MODALS — Frosted Glass
   ============================================= */
.modal-content {
  background: var(--glass-surface-strong) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  border-radius: var(--glass-radius-lg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
  padding: 20px 24px !important;
}
.modal-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
  padding: 16px 24px !important;
}

.modal-backdrop.show {
  backdrop-filter: blur(4px) !important;
  background: rgba(15, 23, 42, 0.3) !important;
  z-index: 0;
}

/* =============================================
   EDITOR — Sidebar, Panels, Navbar
   ============================================= */
.sidebar {
  background: var(--glass-surface-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border-right: 1px solid var(--glass-border) !important;
}

.sidebar-item {
  border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
  transition: all var(--glass-transition) !important;
}

.sidebar-item:hover {
  background: rgba(124, 92, 253, 0.06) !important;
}

.sidebar-item:hover svg,
.sidebar-item.active svg {
  background: rgba(124, 92, 253, 0.1) !important;
  border-radius: 10px !important;
}

.editor-panels {
  background: var(--glass-surface-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border-left: 1px solid var(--glass-border) !important;
}

.editor-panel {
  background: rgba(248, 250, 252, 0.8) !important;
}

.editor-navbar {
  background: var(--glass-surface) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-sm) !important;
}

/* =============================================
   CONTEXT MENU
   ============================================= */
.context-menu {
  background: var(--glass-surface-strong) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) !important;
  border-radius: 14px !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow-lg) !important;
  overflow: hidden !important;
}

/* =============================================
   RESULT / PREVIEW
   ============================================= */
.result .product-size {
  background: var(--glass-surface-strong) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
}

/* .confirm-design {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #10b981, #008143) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: none !important;
    animation: none !important;
} */
/* .confirm-design {
  background: linear-gradient(135deg, #10b981, #008143) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(16,185,129,0.3) !important;
  font-weight: 700 !important;
  transition: all var(--glass-transition) !important;
} */

.confirm-design:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
  opacity: 1;
}

.result .action-btn .edit-design {
  border-radius: 14px !important;
  transition: all var(--glass-transition) !important;
}

/* =============================================
   EDITOR DROPDOWNS
   ============================================= */
.editor-dropdown .dropdown-toggle-item {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 10px !important;
  transition: all var(--glass-transition) !important;
}

.editor-dropdown .dropdown-toggle-item:hover {
  border-color: var(--glass-primary) !important;
}

.editor-dropdown .dropdown-body {
  background: var(--glass-surface-strong) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--glass-shadow-lg) !important;
}

.editor-dropdown .menu .item:hover,
.editor-dropdown .menu .item.selected {
  background: rgba(124, 92, 253, 0.08) !important;
  color: var(--glass-primary) !important;
}

/* =============================================
   DESIGN LIBRARY ITEMS
   ============================================= */
/* .design-library .item {
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  transition: all var(--glass-transition) !important;
}

.design-library .item:hover {
  border-color: var(--glass-primary) !important;
  box-shadow: 0 8px 24px rgba(124, 92, 253,0.12) !important;
  transform: translateY(-3px) scale(1.02);
}

.design-library .item img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.design-library .item:hover img {
  transform: scale(1.08);
}
 */

/* =============================================
   LOADING SPINNER — Modern Sleek Pulse
   ============================================= */
.file-uploading:not(.d-none) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--glass-radius-lg) !important;
  z-index: 10 !important;
}

.file-uploading:not(.d-none) img {
  display: none !important;
}

.file-uploading:not(.d-none)::after {
  content: "";
  width: 44px;
  height: 44px;
  border: 3px solid rgba(124, 92, 253, 0.15);
  border-top-color: var(--glass-primary);
  border-radius: 50%;
  animation: spinLoader 0.8s linear infinite;
}

@keyframes spinLoader {
  to {
    transform: rotate(360deg);
  }
}

/* =============================================
   GLOBAL BUTTONS — Gradients
   ============================================= */
.btn-primary {
  background: linear-gradient(
    135deg,
    var(--glass-primary),
    var(--glass-primary-light)
  ) !important;
  border: none !important;
  box-shadow: 0 4px 14px var(--glass-primary-glow) !important;
  transition: all var(--glass-transition) !important;
}

.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px var(--glass-primary-glow) !important;
}

.btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
}

.btn-info {
  background: linear-gradient(135deg, var(--glass-accent), #0891b2) !important;
  border: none !important;
  color: #fff !important;
}

.btn-danger,
.bg-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important;
}

/* =============================================
   SHEET SIZE MODAL
   ============================================= */
.choose-sheet-size .apply-size {
  background: linear-gradient(
    135deg,
    var(--glass-primary),
    var(--glass-primary-light)
  ) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px var(--glass-primary-glow) !important;
  font-weight: 700 !important;
}

/* =============================================
   CANVAS RULERS
   ============================================= */
.canvas-area .single-ruler {
  background: var(--glass-surface-strong) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
}

.canvas-area::before {
  background: var(--glass-primary-dark) !important;
}

/* =============================================
   POSITION / ALIGNMENT OPTIONS
   ============================================= */
.position-items .position-option {
  border: 1.5px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  transition: all var(--glass-transition) !important;
}

.position-items .position-option:hover {
  border-color: var(--glass-primary) !important;
  background: rgba(124, 92, 253, 0.04) !important;
  box-shadow: 0 2px 8px rgba(124, 92, 253, 0.1) !important;
}

/* =============================================
   MICRO-ANIMATIONS
   ============================================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes dragPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(124, 92, 253, 0.08),
      0 8px 32px rgba(0, 0, 0, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(124, 92, 253, 0.12),
      0 8px 32px rgba(0, 0, 0, 0.08);
  }
}

.upload-area.drag-active {
  animation: dragPulse 1s ease-in-out infinite;
}

.file-uploading:not(.d-none) {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 25%,
    rgba(124, 92, 253, 0.05) 50%,
    rgba(255, 255, 255, 0.8) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s linear infinite !important;
  border-radius: var(--glass-radius-lg) !important;
}

/* =============================================
   FULL-SCREEN FIXES
   ============================================= */
.all-content {
  /* min-height: 100vh !important; */
  background: rgba(255, 255, 255, 0.75) !important;
}

.card.create-design .card-body {
  padding: 20px !important;
}

/* ==============================================
   UX FIXES v4 — Generate, Edit/Dup, DPI badge
   ============================================== */

/* ── GENERATE DTF SHEET BUTTON — green pill ── */
.generate-dtf-sheet .learn-more,
.generate-dtf-sheet button.learn-more {
  /* all: unset !important; */
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 18px !important;
  background: #8dff8dbf !important;
  color: #1a3a2a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  box-shadow:
    0 2px 12px rgba(140, 170, 140, 0.18),
    inset 0 1px 2px rgba(255, 255, 255, 0.45) !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-width: 100% !important;
  border: 2.5px solid rgba(140, 175, 140, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  position: relative !important;
}
.generate-dtf-sheet .learn-more::before,
.generate-dtf-sheet button.learn-more::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 55%
  ) !important;
  border-radius: 50px !important;
  pointer-events: none !important;
}
.generate-dtf-sheet .learn-more:hover,
.generate-dtf-sheet button.learn-more:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow:
    0 4px 20px rgba(140, 170, 140, 0.25),
    inset 0 1px 3px rgba(255, 255, 255, 0.5) !important;
}
.generate-dtf-sheet .learn-more:active,
.generate-dtf-sheet button.learn-more:active {
  transform: translateY(0) scale(0.98) !important;
}
/* Hide old arrow circle, style just the text */
.generate-dtf-sheet .learn-more .circle {
  display: none !important;
}
.generate-dtf-sheet .learn-more .button-text {
  position: static !important;
  transform: none !important;
  color: #1a3a2a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: none !important;
  padding: 0 !important;
  opacity: 1 !important;
}
.generate-dtf-sheet .learn-more .button-text::before {
  content: "▶" !important;
  margin-right: 8px !important;
  font-size: 11px !important;
  opacity: 0.85 !important;
  display: inline-block; /* ✅ FIX */
  transition: transform 0.3s ease;
}
.generate-dtf-sheet .dropdown.show .learn-more .button-text::before {
  transform: rotate(90deg);
}
/* Wrapper centering */
.generate-dtf-sheet {
  display: grid;
  grid-template-columns: 1fr;
}

@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  20% {
    transform: translate(-2px, 0) rotate(-10deg);
  }
  40% {
    transform: translate(2px, 0) rotate(10deg);
  }
  60% {
    transform: translate(-2px, 0) rotate(-10deg);
  }
  80% {
    transform: translate(2px, 0) rotate(10deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

/* ── EDIT BUTTON — clean indigo outline pill ── */
.action-btn .btn.btn-primary.generate-btn {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  background: transparent !important;
  color: var(--glass-primary) !important;
  border: 1.5px solid var(--glass-primary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  min-width: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0.02em !important;
}
.action-btn .btn.btn-primary.generate-btn:hover {
  background: var(--glass-primary) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(124, 92, 253, 0.28) !important;
}

/* ── DUPLICATE BUTTON — clean gray outline pill ── */
.action-btn .btn.duplicate-btn {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  background: transparent !important;
  color: #64748b !important;
  border: 1.5px solid #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  letter-spacing: 0.02em !important;
}
.action-btn .btn.duplicate-btn:hover {
  background: #f0f2f8 !important;
  border-color: #94a3b8 !important;
  color: #334155 !important;
  transform: translateY(-1px) !important;
}

/* ── Action button row ── */
/* .action-btn {
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
} */

/* ── DPI badge — green when good, red when bad ── */
/* Default green (good DPI) */
.file-dpi span#img-dpi {
  display: inline-block !important;
  padding: 2px 10px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  background: rgba(34, 197, 94, 0.12) !important;
  color: #16a34a !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}
/* Red when DPI is bad — class added by JS */
.file-dpi span#img-dpi.dpi-bad {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}
/* Also style the dpi-status alert box */
.dpi-status.alert-success {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  text-align: center !important;
}
.dpi-status.alert-warning,
.dpi-status.alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  text-align: center !important;
}

/* ── Quantity control ── */
/* .quantity-control {
  display: flex !important;
  align-items: center !important;
  background: rgba(124, 92, 253,0.06) !important;
  border: 1.5px solid rgba(124, 92, 253,0.15) !important;
  border-radius: 50px !important;
  padding: 3px !important;
  gap: 0 !important;
  width: fit-content !important;
  min-width: 130px !important;
}
.quantity-control .btn.minus,
.quantity-control .btn.plus {
  all: unset !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: var(--glass-primary) !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(124, 92, 253,0.25) !important;
}
.quantity-control .btn.minus:hover,
.quantity-control .btn.plus:hover {
  background: var(--glass-primary-dark) !important;
  transform: scale(1.1) !important;
}
.quantity-control .quantity-input {
  all: unset !important;
  text-align: center !important;
  width: 44px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--glass-primary) !important;
  padding: 0 4px !important;
}
.quantity-control .quantity-input::-webkit-outer-spin-button,
.quantity-control .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
} */

/* ==============================================
   UX FIXES v6
   ============================================== */

/* ── 1. Navbar action-btn: NEVER force-show hidden nav buttons ── */
/* Our .action-btn rule must NOT apply to .options .action-btn (nav) */
/* Only apply flex layout to .file-info .action-btn */
/* Explicitly protect navbar action-btn from being shown */
/* .navbar .action-btn,
.options .action-btn {
  display: none !important;
} */
.navbar .action-btn.d-flex,
.options .action-btn.d-flex {
  display: flex !important;
}

/* ── 3. GENERATE DTF SHEET — frosted glass pill like the inspo ── */
.generate-dtf-sheet .learn-more {
  /* all: unset !important; */
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 34px !important;
  background: rgba(220, 252, 231, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #14532d !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  border-radius: 60px !important;
  cursor: pointer !important;
  border: 2px solid rgba(34, 197, 94, 0.55) !important;
  box-shadow:
    0 2px 16px rgba(34, 197, 94, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: all 0.22s ease !important;
  min-width: 200px !important;
  position: relative !important;
}
.generate-dtf-sheet .learn-more:hover {
  background: rgba(187, 247, 208, 0.95) !important;
  border-color: rgba(34, 197, 94, 0.75) !important;
  box-shadow:
    0 6px 24px rgba(34, 197, 94, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transform: translateY(-1px) !important;
}
.generate-dtf-sheet .learn-more:active {
  transform: scale(0.98) !important;
}
.generate-dtf-sheet .learn-more .circle {
  display: none !important;
}
.generate-dtf-sheet .learn-more .button-text {
  position: static !important;
  transform: none !important;
  color: #14532d !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  padding: 0 !important;
  opacity: 1 !important;
}

/* ── Width + Height — side by side using CSS only ── */
/* Use a flex approach: footer is flex-column, but width+height divs 
   get inline-block so they sit side-by-side naturally */
.remove-bg-btn {
  background-image: linear-gradient(
    135deg,
    rgb(99, 102, 241),
    rgb(129, 140, 248)
  );
  background-color: transparent;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: rgba(124, 92, 253, 0.35) 0px 4px 14px 0px;
  display: flex;
  align-items: center;
  gap: 5px;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.remove-bg-btn:hover {
  background-image: linear-gradient(
    135deg,
    rgb(79, 82, 221),
    rgb(109, 120, 228)
  );
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* ── 6. DPI badge — whole .file-dpi paragraph as a pill, red when bad ── */
/* Reset any old individual-element badge styling */
.file-dpi {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border-radius: 50px !important;
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1.5px solid rgba(34, 197, 94, 0.3) !important;
  color: #15803d !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  width: fit-content !important;
}
.file-dpi strong {
  color: inherit !important;
  font-weight: 700 !important;
}
/* Remove individual span badge — span just shows text inline */
.file-dpi span#img-dpi {
  display: inline !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  border: none !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
/* Red state — whole pill goes red */
.file-dpi.dpi-bad {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #b91c1c !important;
}
.file-dpi span#img-dpi.dpi-bad {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
}

/* ── 7. Library section border ── */
/* #designLibrary {
  border: 1.5px solid rgba(124, 92, 253,0.18) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(8px) !important;
} */

/* ── 8. Quantity control ── */
/* .quantity-control {
  display: flex !important;
  align-items: center !important;
  background: rgba(124, 92, 253,0.06) !important;
  border: 1.5px solid rgba(124, 92, 253,0.15) !important;
  border-radius: 50px !important;
  padding: 3px !important;
  width: fit-content !important;
  min-width: 130px !important;
}
.quantity-control .btn.minus,
.quantity-control .btn.plus {
  all: unset !important;
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: var(--glass-primary) !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(124, 92, 253,0.25) !important;
}
.quantity-control .btn.minus:hover,
.quantity-control .btn.plus:hover {
  background: var(--glass-primary-dark) !important;
  transform: scale(1.1) !important;
}
.quantity-control .quantity-input {
  all: unset !important;
  text-align: center !important;
  width: 44px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--glass-primary) !important;
  padding: 0 4px !important;
}
.quantity-control .quantity-input::-webkit-outer-spin-button,
.quantity-control .quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important; margin: 0 !important;
} */

/* ============================================
   DASHBOARD LAYOUT OVERHAUL - Two Column Split
   ============================================ */

/* Two-column layout: left upload, right files */
/* .card.create-design .card-body > .row > .col-md-5 {
  flex: 0 0 40%;
  max-width: 40%;
}
.card.create-design .card-body > .row > .col-md-7 {
  flex: 0 0 60%;
  max-width: 60%;
} */

/* Main card padding */
.card.create-design {
  padding: 12px 25px;
}

/* File info container - no top margin, aligned with tabs */
.file-info-container {
  width: 100%;
  margin-top: 0 !important;
}

/* ---- Generate DTF Sheet Button ---- */
button.learn-more.generate-btn,
button.learn-more.generate-btn:hover,
button.learn-more.generate-btn:focus,
button.learn-more.generate-btn:active {
  background: #7c5cfd !important;
  background-image: none !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 40px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 4px 14px rgba(124, 92, 253, 0.35) !important;
  transition:
    background 0.2s,
    transform 0.2s !important;
  width: 100%;
}
button.learn-more.generate-btn:hover {
  background: #5558e6 !important;
  transform: translateY(-2px) !important;
}
button.learn-more.generate-btn .button-text {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
button.learn-more.generate-btn .circle {
  display: none !important;
}

/* ---- Width/Height Inputs - Compact ---- */
.size-row {
  display: flex;
  align-items: center;
  gap: 8px !important;
}
.size-row .form-group {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
}
.size-row .form-group input {
  width: 65px !important;
  padding: 4px 6px !important;
  font-size: 13px !important;
}
.size-row .form-group label {
  font-size: 13px !important;
  margin-bottom: 0;
  white-space: nowrap;
}
.product-size .size-row {
  gap: 8px !important;
  margin-bottom: 4px;
}

/* ---- Inner file card spacing ---- */
.file-info-container .card {
  /* margin-right: 15px; */
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
}
.file-info-container .card .card-body {
  padding: 15px;
}

/* ---- Hide DPI badge (duplicate) ---- */
.file-dpi {
  display: none !important;
}

/* ---- Right column breathing room ---- */
.card.create-design .card-body > .row > .col-md-7 {
  padding-right: 15px;
}

/* ============================================
   ADDITIONAL FIXES - JS-generated content
   ============================================ */

/* Hide Resolution paragraph in file-info-footer */
.file-info-footer > p.mt-2.mb-0 {
  display: none !important;
}

/* Hide DPI badge in file-info-footer */
.file-info-footer > p.file-dpi,
.file-info-footer > .file-dpi {
  display: none !important;
}

/* File card takes full width */
.uploaded-file-info .file-con {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.uploaded-file-info .col-md-4.file-con {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Image container in file card */
.file-con .file-info .file-image-container {
  flex: 0 0 150px !important;
  max-width: 180px !important;
  min-width: 120px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.file-con .file-info .file-image-container img {
  width: auto !important;
  height: 100% !important;
  max-height: 230px;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 16px !important;
}

/* Info footer flows horizontally */
.file-con .file-info .file-info-footer {
  flex: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 16px !important;
  padding: 10px 0 !important;
}

/* Width and Height form groups inline */
.file-info-footer .form-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  white-space: nowrap !important;
}
.file-info-footer .form-group label {
  font-size: 13px !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
}
.file-info-footer .form-group input {
  width: 65px !important;
  padding: 4px 6px !important;
  font-size: 13px !important;
}
.file-info-footer .form-group .quantity-control {
  display: inline-flex !important;
  align-items: center !important;
}

/* Quality badge compact */
.file-info-footer .dpi-status-box {
  padding: 4px 10px !important;
  font-size: 12px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Action buttons inline */
.file-info-footer .action-btn {
  display: inline-flex !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

/* ---- Generate DTF Sheet Button Override ---- */
.generate-dtf-sheet .learn-more.generate-btn {
  background: #22c45e !important;
  background-image: none !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 40px !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 4px 14px rgba(124, 92, 253, 0.35) !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}
.generate-dtf-sheet .learn-more.generate-btn:hover {
  background: #22c45dc2 !important;
  transform: translateY(-2px) !important;
}
.generate-dtf-sheet .learn-more.generate-btn .button-text {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.generate-dtf-sheet .learn-more.generate-btn .circle {
  display: none !important;
}

/* Remove the green background from the button */
.learn-more.generate-btn {
  background: #7c5cfd !important;
  background-color: #7c5cfd !important;
  background-image: none !important;
}

/* ============================================
   FLEX DIRECTION FIX & WIDTH/HEIGHT INLINE
   ============================================ */

/* Fix file-info-footer to row layout */
.file-info-footer {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 16px !important;
}

/* Width and Height form groups should be inline and on same row */
.file-info-footer .form-group {
  flex-direction: row !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Make label and input on same line for width/height */
.file-info-footer .form-group label {
  font-size: 12px !important;
  margin-bottom: 0 !important;
  margin-right: 4px !important;
  white-space: nowrap !important;
}
.file-info-footer .form-group input.form-control {
  width: 60px !important;
  padding: 3px 5px !important;
  font-size: 12px !important;
  height: auto !important;
}
.file-info-footer .form-group input.quantity-input {
  width: 45px !important;
}

/* Quantity control inline */
.file-info-footer .form-group .quantity-control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
/* Ensure text-center doesn't mess up alignment */
.file-con.text-center {
  text-align: left !important;
}

/* ============================================
   COMPACT WIDTH/HEIGHT - Same row
   ============================================ */

/* Make width/height form groups very compact */
.file-info-footer .form-group:nth-of-type(2),
.file-info-footer .form-group:nth-of-type(3) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 48% !important;
}
.file-info-footer .form-group:nth-of-type(2) label,
.file-info-footer .form-group:nth-of-type(3) label {
  font-size: 11px !important;
  margin-right: 2px !important;
}
.file-info-footer .form-group:nth-of-type(2) input.form-control,
.file-info-footer .form-group:nth-of-type(3) input.form-control {
  width: 50px !important;
  padding: 2px 4px !important;
  font-size: 12px !important;
  min-width: 45px !important;
}

/* ============================================
   TAB SLIDER FIX - Ensure tabs stay side by side
   ============================================ */

/* Prevent tab wrapping at smaller column widths */
/* .nav-tabs.mobile-tabs {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  max-width: 100% !important;
} */

/* Nav items must share the row */
/* .nav-tabs.mobile-tabs .nav-item {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

Tab links should not force width
.nav-tabs.mobile-tabs .nav-item a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  justify-content: center !important;
} */

/* ============================================
   QUANTITY BUTTON FIX
   ============================================ */

/* Quantity form group - make sure label and controls are in a proper row */
.file-info-footer > .form-group:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100%;
  flex: 0 0 100%;
  margin-bottom: 4px !important;
}

/* Quantity control should not stretch too wide */
.file-info-footer .quantity-control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}
.file-info-footer .quantity-control .quantity-input {
  width: 45px !important;
  text-align: center !important;
}

/* ============================================
   FIX: Tab slider padding & Quantity layout
   ============================================ */

/* Tab slider - auto-width based on content instead of equal width */
/* .nav.nav-tabs.mobile-tabs .nav-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

.nav.nav-tabs.mobile-tabs .nav-item a {
    padding: 10px 20px !important;
    white-space: nowrap !important;
} */

/* Quantity form-group: don't take full width */
.file-info-footer .form-group.mt-2.mb-0 {
  flex: 0 0 auto;
  width: auto;
}

/* Quantity control: don't stretch, stay compact */
.quantity-control {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* ============================================
   FIX: Quality badge size, padding, inputs, quantity gap
   ============================================ */

/* Quality badge: fit content, don't stretch full width */
.file-info-footer .dpi-status-box,
.file-info-footer .alert.dpi-status-box {
  width: fit-content !important;
  max-width: 100% !important;
  display: inline-block !important;
  font-size: 0.82rem !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
}

/* Add padding inside the file info footer so items don't touch card edges */
.file-info-footer {
  padding: 10px 15px !important;
}

/* Width/Height inputs: bigger so users can see and adjust */
.file-info-footer .form-group .form-control.img-width-inch,
.file-info-footer .form-group .form-control.img-height-inch,
.file-info-footer .form-group input[type="number"].img-width-inch,
.file-info-footer .form-group input[type="number"].img-height-inch {
  width: 75px !important;
  min-width: 75px !important;
  height: 32px !important;
  font-size: 0.9rem !important;
  padding: 4px 8px !important;
}

/* Quantity row: move selector closer to the word "Quantity" */
/* .file-info-footer .form-group.mt-2.mb-0 {
    justify-content: flex-start !important;
    gap: 12px !important;
} */

/* Edit/Duplicate buttons area: add some breathing room */
.file-info-footer .action-btn {
  padding-top: 4px !important;
}

/* ============================================
   FIX: Higher specificity overrides for padding & layout
   ============================================ */

/* Override the .file-con .file-info .file-info-footer rule with higher specificity */
.col-md-4.file-con .file-info .file-info-footer {
  padding: 10px 15px !important;
}

/* Also ensure the quality badge doesn't stretch */
.col-md-4.file-con .file-info .file-info-footer .dpi-status-box,
.col-md-4.file-con .file-info .file-info-footer .alert.dpi-status-box {
  width: fit-content !important;
  display: inline-block !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 0.8rem !important;
}

/* Quantity: tighter gap between label and controls */
/* .col-md-4.file-con .file-info .file-info-footer .form-group.mt-2.mb-0 {
    justify-content: flex-start !important;
    gap: 8px !important;
} */

/* Quantity label: reduce width so it's snug to text */
.col-md-4.file-con .file-info .file-info-footer .form-group.mt-2.mb-0 > label {
  width: auto !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================
   FIX: Width/Height on same row with bigger inputs
   ============================================ */

/* Force Width and Height groups to share the row */
.file-info-footer .form-group:nth-of-type(2),
.file-info-footer .form-group:nth-of-type(3),
.col-md-4.file-con .file-info .file-info-footer .form-group:nth-of-type(2),
.col-md-4.file-con .file-info .file-info-footer .form-group:nth-of-type(3) {
  flex: 1 1 auto !important;
  max-width: 48% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ============================================
   FIX: Generate DTF button shadow, Library layout, hover
   ============================================ */

/* 1. Remove the strange gradient shadow on left side of Generate DTF button */
.generate-dtf-sheet .learn-more::before,
.generate-dtf-sheet button.learn-more::before {
  content: none !important;
  display: none !important;
}

/* Also center the button text and remove left text-align */
.generate-dtf-sheet button.learn-more,
.generate-dtf-sheet .learn-more.generate-btn {
  text-align: center !important;
}

/* 2. Library designs: 2 per row instead of 4 (col-md-3 -> 50%) */
/* #designLibrary
 */

/* 3. Fix hover alignment — item should contain the image properly */
/* .design-library .item {
    width: 100% !important;
    height: auto !important;
    min-height: 100px !important;
    overflow: hidden !important;
    position: relative !important;
}

.design-library .item img {
    max-width: 100% !important;
    max-height: 160px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
} */

/* Folder shape for category items */
/* .library-categories .item,
.design-media .sub-library-item {
  background: #7c5cfd !important;
  border: none !important;
  border-radius: 0 8px 8px 8px !important;
  padding: 8px !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 2px 3px 6px rgba(0,0,0,0.18) !important;
  margin-top: 16px !important;
}

Folder tab (notch at top-left)
.library-categories .item::before,
.design-media .sub-library-item::before {
  content: '' !important;
  position: absolute !important;
  top: -14px !important;
  left: 0 !important;
  width: 50% !important;
  height: 14px !important;
  background: #7c5cfd !important;
  border-radius: 6px 6px 0 0 !important;
}

Image area inside folder
.library-categories .item .library-img,
.design-media .sub-library-item .library-img {
  background: rgba(255,255,255,0.85) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  padding: 4px !important;
}

Title text
.library-categories .item .title,
.design-media .sub-library-item .title {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
  display: block !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

Hover effect
.library-categories .item:hover,
.design-media .sub-library-item:hover {
  background: #7c74ff !important;
  box-shadow: 3px 5px 10px rgba(0,0,0,0.25) !important;
  transform: translateY(-2px) !important;
}

.library-categories .item:hover::before,
.design-media .sub-library-item:hover::before {
  background: #7c74ff !important;
} */

/* 4. Loading gif: ensure it's centered and covers the library area */
/* #designLibrary .loading.file-uploading:not(.d-none) {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 16px !important;
}

/* Loading spinner alignment fix */
#designLibrary .file-uploading:not(.d-none)::after {
  margin: auto !important;
}
*/



/* ================================================
   RESULT / REVIEW PAGE — V2 REDESIGN
   Multi-sheet ready, sticky confirm, compact cards
   ================================================ */

/* -- RESULT CONTAINER -- */
.result.row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 100vh;
  background: #f5f6f8;
}

.result > .col-md-4 {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 0 80px 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* -- BACK BUTTON -- */
.back-to-design {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 16px 0 0 0 !important;
  padding: 8px 14px !important;
  background: #fff !important;
  border: 1px solid #e0e3e8 !important;
  border-radius: 8px !important;
  color: #4b5563 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.back-to-design:hover {
  background: #f9fafb !important;
  border-color: #c9cdd4 !important;
  color: #111827 !important;
}
.back-to-design i {
  font-size: 11px !important;
}

/* -- HEADING -- */
h3.heading {
  font-size: 20px !important;
  margin: 16px 0 12px 0 !important;
}
/* .result .heading {
  align-self: flex-start;
  max-width: 720px;
  width: 100%;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-align: left !important;
  margin: 16px 0 12px 0 !important;
  padding: 0 !important;
  letter-spacing: -0.3px !important;
} */

/* Sheet count badge */
.sheet-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  background: #f3f4f6 !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
}

/* -- SHEET CARD — horizontal layout -- */
.result .result-con {
  overflow: auto;
  height: calc(100vh - 230px);
}

.result .card {
  border: none !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 2px 12px rgba(0, 0, 0, 0.04) !important;
  margin: 0 auto 16px auto !important;
  max-width: 720px !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: row !important;
  background: #fff !important;
  position: relative !important;
}

/* Sheet number label — dynamic via CSS counter so multi-sheet runs
   show "Sheet 1", "Sheet 2", "Sheet 3" instead of all reading
   "Sheet 1". Counter is scoped to the .generated-sheet-design wrapper
   and reset on each render. */
.result .generated-sheet-design { counter-reset: bda-sheet; }
.result .generated-sheet-design .created-design { counter-increment: bda-sheet; }
.result .card::before {
  content: "Sheet " counter(bda-sheet) !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* -- PREVIEW THUMBNAIL -- */
.result .result-content {
  width: 220px !important;
  min-width: 220px !important;
  min-height: 160px !important;
  background: repeating-conic-gradient(#f0f1f3 0% 25%, #e5e7ea 0% 50%) 0 0 /
    14px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  border-radius: 14px 0 0 14px !important;
  overflow: hidden !important;
}
.result .result-content .final-svg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
.svg-preview svg {
  max-width: 100% !important;
  max-height: 120px !important;
  height: auto !important;
  display: block !important;
}

/* -- CARD BODY -- */
.result .card-body {
  flex: 1 !important;
  padding: 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* -- SIZE ROW -- */
.result .product-size {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 10px 0 !important;
  margin: 0 0 10px 0 !important;
  border-bottom: 1px solid #f0f1f3 !important;
}
.result .size-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 14px !important;
}
.result .size-row p {
  margin: 0 !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.result .size-row p span {
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Change size link */
.result .product-size .change-product-size,
.result .change-product-size,
button.change-product-size,
.btn.change-product-size {
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #2563eb !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.result .change-product-size:hover,
.result .change-product-size:focus,
.result .change-product-size:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: underline !important;
  color: #1d4ed8 !important;
}

/* -- QUANTITY ROW -- */
.result .form-group.align-center {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 10px 0 !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid #f0f1f3 !important;
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
}
.result .form-group.align-center > label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* -- QUANTITY STEPPER -- */
.result .quantity-control,
.result .quantity-control.ml-3 {
  display: inline-flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 1px solid #d5d8dc !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  gap: 0 !important;
  height: 30px !important;
  box-shadow: none !important;
}

.result .quantity-control .btn.minus,
.result .quantity-control .btn.plus,
.result .quantity-control .minus,
.result .quantity-control .plus {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  border: none !important;
  border-radius: 0 !important;
  background: #f7f8f9 !important;
  color: #444 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: background 0.12s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.result .quantity-control .btn.minus:hover,
.result .quantity-control .btn.plus:hover,
.result .quantity-control .minus:hover,
.result .quantity-control .plus:hover {
  background: #ebedf0 !important;
  box-shadow: none !important;
}
.result .quantity-control .btn.minus:active,
.result .quantity-control .btn.plus:active,
.result .quantity-control .minus:active,
.result .quantity-control .plus:active {
  background: #dfe1e5 !important;
  box-shadow: none !important;
}
.result .quantity-control .btn.minus:focus,
.result .quantity-control .btn.plus:focus,
.result .quantity-control .minus:focus,
.result .quantity-control .plus:focus {
  box-shadow: none !important;
  outline: none !important;
}

.result .quantity-control .quantity-input,
.result .quantity-control .quantity-input.w-100 {
  width: 38px !important;
  min-width: 38px !important;
  height: 30px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid #d5d8dc !important;
  border-right: 1px solid #d5d8dc !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  background: #fff !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 30px !important;
}
.result .quantity-control .quantity-input::-webkit-inner-spin-button,
.result .quantity-control .quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}
.result .quantity-control .quantity-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* -- ACTION BUTTONS -- */
.result .action-btn {
  display: flex !important;
  justify-content: center;
  gap: 8px !important;
  margin: 0 !important;
  padding: 2px 0 0 0 !important;
}
.result .edit-design {
  flex: 0 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: #2563eb !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.result .edit-design:hover {
  background: #1d4ed8 !important;
}
.result .remove-created-design {
  flex: 0 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: transparent !important;
  color: #dc2626 !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.result .remove-created-design:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
}

/* ================================================
   STICKY FULL-WIDTH CONFIRM FOOTER
   ================================================ */
.result > .col-md-12 {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 1000 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.confirm-design {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99999;
  background-color: #22c55e;
  color: white;
  border: none;
  border-radius: 0px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
  transition:
    background-color 0.2s,
    transform 0.1s,
    box-shadow 0.2s;
  letter-spacing: 0.3px;
  width: 100% !important;
  max-width: 100% !important;
  /* position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #10b981, #008143) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  transition: all 0.2s !important;
  display: flex ;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: none !important;
  animation: none !important; */
}
.confirm-design:hover {
  background-color: #16a34a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
}
.confirm-design:active {
  background: linear-gradient(135deg, #047857, #065f46) !important;
}

/* -- RESPONSIVE: stack card on mobile -- */
@media (max-width: 640px) {
  .result .card {
    flex-direction: column !important;
    width: calc(100% - 16px) !important;
  }
  .result .result-content {
    width: 100% !important;
    min-width: unset !important;
    min-height: 140px !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .result .card-body {
    padding: 14px 16px !important;
  }
  .back-to-design {
    margin: 12px 0 0 12px !important;
  }
}

/* ===== FIX: Respect d-none on result section ===== */
/* The .result.row display:flex !important was overriding Bootstrap's d-none class,
   causing the review section and confirm bar to show before Generate is clicked */
.result.row.d-none {
  display: none !important;
}

.result.row.d-none + .confirm-design,
.result.row.d-none .confirm-design {
  display: none !important;
}

/* ===== FIX: Full-width grey background - no white edges ===== */
/* Moves the gradient off body onto .all-content so html/body bg matches
   the result section grey, eliminating white gaps at scrollbar gutter */
html {
  background-color: rgb(245, 246, 248) !important;
}

body {
  background: rgb(245, 246, 248) !important;
  background-image: none !important;
}

.all-content {
  background: transparent !important;
  background-image: none !important;
}

.card.create-design {
  background: rgba(255, 255, 255, 0.75) !important;
}

/* Make result section span full viewport width */
.result.row {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: rgb(245, 246, 248) !important;
}

/* ── Remove Background button state indicator ─────────────── */
.direct-remove-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.3s ease, color 0.3s ease, opacity 0.2s ease;
}
.direct-remove-bg .btn-spinner {
  animation: directRemoveBgSpin 0.8s linear infinite;
}
.direct-remove-bg[data-state="processing"] {
  cursor: not-allowed;
  opacity: 0.85;
}
.direct-remove-bg[data-state="done"],
.direct-remove-bg[data-state="done"]:disabled {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
  cursor: default;
  opacity: 1 !important;
}
@keyframes directRemoveBgSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Choose Sheet Size modal redesign ──────────────────── */
#changeDesignSizeModal .modal-dialog {
  max-width: 480px;
  margin: 120px auto;
  height: auto;
}
#changeDesignSizeModal .modal-content {
  border-radius: 20px;
  border: none;
  /* Clip the gradient header so it conforms to the rounded card edges
     instead of bleeding past the top corners (which left a "funky"
     unrounded purple band sticking out at the top-left/right). */
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
  background: #ffffff;
  height: auto;
}
#changeDesignSizeModal .modal-header {
  background: linear-gradient(135deg, #7c5cfd 0%, #7c5cfd 50%, #7c5cfd 100%);
  border-bottom: none !important;
  padding: 18px 22px !important;
  border-radius: 20px 20px 0 0;
  align-items: center;
}
#changeDesignSizeModal .modal-title,
#changeDesignSizeModal .modal-header .modal-title,
#changeDesignSizeModal .modal-header h5.modal-title {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
#changeDesignSizeModal .modal-title::before {
  content: "📐  ";
}
#changeDesignSizeModal .modal-header .close {
  background: transparent !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  text-shadow: none !important;
  padding: 0 4px !important;
}
#changeDesignSizeModal .modal-header .close:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border: none !important;
  color: #fff !important;
  opacity: 1 !important;
}
#changeDesignSizeModal .modal-body {
  padding: 24px 24px 8px;
  background: #f5f6fa;
  border-radius: 0 0 20px 20px;
}
#changeDesignSizeModal .modal-body .col-md-6 {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0;
}
#changeDesignSizeModal .sheet-toolbar {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(30, 27, 75, 0.08);
  display: flex;
  align-items: flex-start;
  overflow: visible;
}
#changeDesignSizeModal .size-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: #1e1b4b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
#changeDesignSizeModal #size-pill-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
#changeDesignSizeModal #size-pill-grid::-webkit-scrollbar { width: 4px; }
#changeDesignSizeModal #size-pill-grid::-webkit-scrollbar-track {
  background: #eef0f8;
  border-radius: 4px;
}
#changeDesignSizeModal #size-pill-grid::-webkit-scrollbar-thumb {
  background: #8b95b0;
  border-radius: 4px;
}
#changeDesignSizeModal .size-pill {
  background: #eef0f8;
  color: #1e1b4b;
  border: none;
  border-radius: 10px;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.15s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 40px;
}
#changeDesignSizeModal .size-pill > * {
  pointer-events: none; /* clicks always hit the <button>, not its children */
}
#changeDesignSizeModal .size-pill .size-pill-label {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
}
#changeDesignSizeModal .size-pill .size-pill-price {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.65;
  line-height: 1.1;
}
#changeDesignSizeModal .size-pill.active .size-pill-price {
  opacity: 0.85;
}
#changeDesignSizeModal .size-pill:hover { background: #d8dce8; }
#changeDesignSizeModal .size-pill.active {
  background: #1e1b4b;
  color: #fff;
}
#changeDesignSizeModal .modal-hint {
  text-align: center;
  font-size: 12px;
  color: #8b95b0;
  padding: 12px 0 16px;
  margin: 0;
}
#changeDesignSizeModal .modal-action-row {
  padding-bottom: 16px;
}
#changeDesignSizeModal .btn-primary.apply-size {
  background: linear-gradient(135deg, #7c5cfd, #7c5cfd);
  border: none;
  color: #fff;
  border-radius: 12px;
  padding: 11px 26px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(98, 70, 234, 0.3);
  transition: 0.2s;
}
#changeDesignSizeModal .btn-primary.apply-size:hover {
  box-shadow: 0 6px 20px rgba(98, 70, 234, 0.45);
  transform: translateY(-1px);
}
#changeDesignSizeModal .btn-secondary.back-design {
  background: transparent;
  border: 2px solid #c8ccd8;
  color: #1e1b4b;
  border-radius: 12px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
#changeDesignSizeModal .btn-secondary.back-design:hover {
  background: #f0edff;
}

/* ── Autofill empty state ───────────────────────────── */
.auto-fill-con .autofill-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: #6c43e0;
  background: linear-gradient(135deg, #faf9ff 0%, #f3f0ff 100%);
  border: 1.5px dashed #c5bffa;
  border-radius: 14px;
  gap: 8px;
}
.auto-fill-con .cn-obj-editing-tools.active ~ .autofill-empty-state {
  display: none;
}
.auto-fill-con .autofill-empty-state .ae-icon {
  font-size: 36px;
  opacity: 0.85;
  margin-bottom: 4px;
}
.auto-fill-con .autofill-empty-state .ae-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e1b4b;
}
.auto-fill-con .autofill-empty-state .ae-sub {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
  max-width: 240px;
}

/* ── Add Text tab — make it scrollable inside the left column ── */
.left .tab-content.position-relative {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 130px);
}
#addTextPanel {
  -webkit-overflow-scrolling: touch;
}

/* ── Choose Sheet Size modal — strip lag-inducing effects ─── */
/* Disable Bootstrap fade animation for this modal — instant open */
#changeDesignSizeModal.fade .modal-dialog,
#changeDesignSizeModal .modal-dialog {
  transition: none !important;
  transform: none !important;
}
#changeDesignSizeModal.fade {
  transition: none !important;
}
/* Skip the GPU-heavy backdrop blur when this modal is open */
body.size-modal-open .modal-backdrop.show {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15, 23, 42, 0.5) !important;
}
/* Trim the heavy drop-shadow & remove pill hover transition */
#changeDesignSizeModal .modal-content {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}
#changeDesignSizeModal .size-pill {
  transition: none;
}

/* ── Switch to Manual Build button (auto builder tabs) ── */
.tabs.p-0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.switch-manual-btn {
  background: #1e1b4b;
  border: none;
  color: #fff;
  padding: 7px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
  margin-right: 24px;
}
.switch-manual-btn:hover {
  background: #2d2870;
  box-shadow: rgba(30, 27, 75, 0.3) 0px 5px 18px;
}

/* ── Autofill panel redesign ──────────────────────── */
.single-panel#autofill .panel-body.auto-fill-con {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.single-panel#autofill .cn-obj-editing-tools {
  background: #ffffff;
  border: 1px solid #ece9fb;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(30, 27, 75, 0.04);
  /* Hidden until an object is selected on the canvas — active-obj.js
     toggles `.active`. Shown only when active so the empty-state copy
     ("Select a graphic to autofill") stands alone before selection. */
  display: none;
  flex-direction: column;
  gap: 14px;
}
.single-panel#autofill .cn-obj-editing-tools.active {
  display: flex;
}

/* Autofill panel layout fix — use a simple block layout for the form column.
   Bootstrap's `.row` is flex-row + flex-wrap; someone overrode flex-direction
   to column but left wrap on, causing children to wrap into new columns to
   the right. `display: block` sidesteps the entire flex problem. */
#autofill .panel-body.auto-fill-con .cn-obj-editing-tools > .row.col-px-1 {
  display: block;
}
#autofill .panel-body.auto-fill-con .cn-obj-editing-tools > .row.col-px-1 > .col-md-12 {
  margin-bottom: 14px;
}
#autofill .panel-body.auto-fill-con .cn-obj-editing-tools > .row.col-px-1 > .col-md-12:last-child {
  margin-bottom: 0;
}

/* Direction <select> — native chevron off, painted SVG chevron in the select.
   URL-encoded (no `;utf8,`) for cross-browser reliability. !important on the
   background-image so it wins over the existing `.single-panel#autofill
   select.form-control` rule which uses a different (down-pointing) chevron. */
#autofill .panel-body.auto-fill-con .cn-obj-editing-tools select.form-control.obj-direction {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #faf9ff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%236b46c1'%3E%3Cpath d='M3.204 5L8 10.481 12.796 5H3.204z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 12px !important;
  padding: 8px 32px 8px 12px !important;
  line-height: 1.4 !important;
  min-height: 40px !important;
  height: auto !important;
}

/* Duplicate button — full width, with a touch of top spacing. */
#autofill .panel-body.auto-fill-con .cn-obj-editing-tools button.duplicate-selected-obj {
  margin-top: 8px;
  width: 100%;
}
.single-panel#autofill .cn-obj-editing-tools .col-md-12 {
  padding: 0;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}
.single-panel#autofill .form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px;
  margin: 0 !important;
}
.single-panel#autofill .form-group .label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6c43e0 !important;
  width: auto !important;
  margin: 0 !important;
}
.single-panel#autofill .form-group .form-control {
  width: 100% !important;
  border: 1.5px solid #e2daf7 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: #1e1b4b !important;
  background: #faf9ff !important;
  transition: 0.15s;
  box-shadow: none !important;
}
.single-panel#autofill .form-group .form-control:focus {
  border-color: #6c43e0 !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(108, 67, 224, 0.12) !important;
}
.single-panel#autofill select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%236c43e0'%3E%3Cpath d='M3.204 5L8 10.481 12.796 5H3.204z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

/* Direction segmented control feel */
.single-panel#autofill .obj-direction option { padding: 8px; }

/* Switch (Keep in safe zone) */
.single-panel#autofill .switch-wrap {
  background: #faf9ff;
  border: 1.5px solid #ece9fb;
  border-radius: 10px;
  padding: 10px 12px !important;
  justify-content: space-between !important;
}
.single-panel#autofill .switch-wrap .switch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse;
  cursor: pointer;
  width: 100%;
  justify-content: space-between;
}
.single-panel#autofill .switch-wrap .switch-text {
  font-size: 13px;
  font-weight: 600;
  color: #1e1b4b;
}
.single-panel#autofill .switch-wrap .switch-checkbox { display: none; }

/* Custom canvas scrollbars (injected by zoom.js into <head>): the default
   only fades them in on hover, which makes them undiscoverable on touch
   devices and easy to miss with a mouse. Make them permanently visible
   when they're rendered, and slightly thicker so they're easier to grab. */
.gs-scrollbar-y,
.gs-scrollbar-x {
  opacity: 1 !important;
}
.gs-scrollbar-y {
  width: 10px !important;
}
.gs-scrollbar-x {
  height: 10px !important;
}
.gs-scrollbar-thumb-y,
.gs-scrollbar-thumb-x {
  background: rgba(98, 70, 234, 0.55) !important;
  min-height: 32px !important;
  min-width: 32px !important;
}
.gs-scrollbar-thumb-y:hover,
.gs-scrollbar-thumb-x:hover {
  background: rgba(98, 70, 234, 0.85) !important;
}

/* Switch toggle — translateX-based knob slide so width caps can't stretch it.
   General `.switch-label` selector so the same look applies to any toggle. */
.switch-label .switch-toggle {
  position: relative;
  display: inline-block;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 22px !important;
  border-radius: 999px;
  background: #d6d0e8;          /* OFF state — light gray-purple */
  background-image: none;
  transition: background 0.2s ease;
  flex-shrink: 0;
  flex-grow: 0;
}
.switch-label .switch-checkbox:checked + .switch-toggle {
  background: linear-gradient(135deg, #7c5cfd, #7c5cfd); /* ON state */
}
.switch-label .switch-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: auto;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.switch-label .switch-checkbox:checked + .switch-toggle::after {
  transform: translateX(16px);  /* slides knob to ON position */
}

/* Duplicate button */
.single-panel#autofill .duplicate-selected-obj {
  width: 100%;
  background: linear-gradient(135deg, #7c5cfd, #7c5cfd) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 4px 14px rgba(98, 70, 234, 0.25);
}
.single-panel#autofill .duplicate-selected-obj:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(98, 70, 234, 0.4);
}
.single-panel#autofill .duplicate-selected-obj::before {
  content: '✦  ';
}

/* ── Folder card — show first design as thumbnail ── */
.folder-card .folder-icon:has(img) {
  background: #ffffff;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ece9fb;
}
.folder-card .folder-icon .folder-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #ffffff;
}

/* ── Multi-sheet tab strip (auto-builder Generate result) ── */
.sheet-tabs-strip {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  /* Top breathing room so the active-tab "lift" + ring don't clip
     against the heading above when there are 2+ sheets. Plus sticky
     positioning so the tabs stay visible while scrolling through a
     tall sheet preview — was the "tabs disappear and I have to scroll
     looking for them" bug. */
  margin: 16px 0 14px;
  padding: 8px 4px 4px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sheet-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  min-width: 110px;
}
.sheet-tab:hover { background: #f0f2f8; border-color: #5b9eef; }
.sheet-tab.active {
  background: #7c5cfd;
  border-color: #7c5cfd;
  color: #fff;
}
.sheet-tab.active .sheet-tab-size { color: rgba(255,255,255,0.85); }
.sheet-tab-num {
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sheet-tab-final {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(166, 255, 0, 0.18);
  color: #008143;
}
.sheet-tab.active .sheet-tab-final { background: rgba(166,255,0,0.85); color: #09031a; }
/* Quantity badge — shown when the customer bumps a sheet's qty above 1
   (the existing logic in renderSheetTabs / the .quantity-input listener
   appends this span). Style it as a pill so the operator instantly
   spots which tab has more pieces. */
.sheet-tab-qty {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(124, 92, 253, 0.14);
  color: #4338ca;
  letter-spacing: 0.2px;
}
.sheet-tab.active .sheet-tab-qty {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.sheet-tab-size {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #94a3b8;
}

/* ── Side-by-side add-ons + customer notes on the confirmation page ── */
.addons-notes-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 18px;
}
.addons-notes-row > .add-ons-section,
.addons-notes-row > .customer-notes-section {
  margin-top: 0 !important;
}
@media (max-width: 768px) {
  .addons-notes-row { grid-template-columns: 1fr; }
}

/* ── Manual editor sheet-picker dropdown (multi-sheet carry-over) ── */
.manual-sheet-dropdown-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 12px;
  font-size: 13px;
  color: #64748b;
}
.manual-sheet-dropdown-wrap label {
  margin: 0;
  font-weight: 700;
  color: #090f1a;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.6px;
}
.manual-sheet-dropdown {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 28px 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")
    no-repeat right 8px center;
  font-size: 13px;
  font-weight: 500;
  color: #090f1a;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.manual-sheet-dropdown:hover { border-color: #5b9eef; }
.manual-sheet-dropdown:focus {
  border-color: #7c5cfd;
  box-shadow: 0 0 0 3px rgba(124, 92, 253, 0.18);
}

/* Legacy in-editor tab strip — superseded by the dropdown above */
.manual-sheet-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.manual-sheet-tab {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  min-width: 110px;
  align-items: flex-start;
}
.manual-sheet-tab:hover { background: #f0f2f8; border-color: #5b9eef; }
.manual-sheet-tab.active {
  background: #7c5cfd;
  border-color: #7c5cfd;
  color: #fff;
}
.manual-sheet-tab.active .manual-sheet-tab-size { color: rgba(255,255,255,0.85); }
.manual-sheet-tab-num {
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.manual-sheet-tab-final {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(166, 255, 0, 0.18);
  color: #008143;
}
.manual-sheet-tab.active .manual-sheet-tab-final {
  background: rgba(166,255,0,0.85);
  color: #09031a;
}
.manual-sheet-tab-size {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #94a3b8;
}

/* Sheet-tab quantity multiplier badge (e.g. "Sheet 1 ×3") */
.sheet-tab-qty {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(91, 158, 239, 0.18);
  color: #5b9eef;
  margin-left: 4px;
}
.sheet-tab.active .sheet-tab-qty {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Generate-button loading state — instant feedback while the generation
   pipeline is running so the page doesn't look frozen. */
.generate-btn.is-loading {
  opacity: 0.85;
  cursor: wait !important;
  pointer-events: none;
}
.gen-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -3px;
  animation: gen-spin 0.7s linear infinite;
}
@keyframes gen-spin { to { transform: rotate(360deg); } }

/* ── Canvas Options floating panel (manual builder) ── */
/* Positioned BELOW + RIGHT of the ruler corner so it doesn't sit on top
   of the rulers (which start at top:0, left:0 of the canvas wrap). */
/* Floating low-DPI warning badges, painted on top of the manual
   builder canvas. Toggled by the "Show warnings" row in the canvas
   options panel. Container is positioned relative to the canvas
   wrap and pointer-events:none so only the dismiss-X is clickable. */
#dpi-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 60;
}
.dpi-warning-overlay {
  position: absolute;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px 3px 6px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: all;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  white-space: nowrap;
  line-height: 1;
  cursor: default;
  user-select: none;
}
.dpi-warning-overlay .dpi-warn-x {
  font-size: 10px;
  opacity: 0.8;
  cursor: pointer;
  padding: 1px 2px;
  border-radius: 50%;
  line-height: 1;
}
.dpi-warning-overlay .dpi-warn-x:hover {
  opacity: 1;
  background: rgba(0,0,0,0.2);
}

/* Pinned to the LEFT of the canvas wrap, clear of the rulers
   (top ruler is 20px tall, left ruler is 20px wide). The right side
   is reserved for the floating zoom controls + scrollbars. */
#canvas-options-btn {
  position: absolute;
  top: 28px;
  left: 28px;
  background: #09031a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(9, 3, 26, 0.3);
  letter-spacing: 0.2px;
  transition: background .15s;
}
#canvas-options-btn:hover { background: #1a1130; }

#canvas-options-panel {
  position: absolute;
  top: 66px;
  left: 28px;
  background: #09031a;
  border-radius: 12px;
  padding: 6px;
  z-index: 1001;
  box-shadow: 0 8px 24px rgba(9, 3, 26, 0.4);
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
}
#canvas-options-panel.open { display: flex; }

.canvas-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.canvas-opt-row:hover { background: rgba(255, 255, 255, 0.07); }
.canvas-opt-label {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.canvas-opt-coming {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(124, 92, 253, 0.25);
  color: #a78bfa;
  margin-left: 4px;
}
.canvas-opt-toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: #444;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.canvas-opt-toggle::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
}
.canvas-opt-toggle.on { background: #7c5cfd; }
.canvas-opt-toggle.on::after { transform: translateX(14px); }

/* Edit-mode toolbar — shown above the editor canvas when the customer
   reaches the editor via the result panel's "Edit Design" button. Lets
   them switch sheets, confirm, or back out without leaving this view. */
.edit-mode-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 0 0 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.edit-mode-toolbar .edit-mode-back,
.edit-mode-toolbar .edit-mode-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.edit-mode-toolbar .edit-mode-back {
  background: #fff;
  color: #475569;
  border-color: #e2e8f0;
}
.edit-mode-toolbar .edit-mode-back:hover {
  background: #f0f2f8;
  color: #090f1a;
}
.edit-mode-toolbar .edit-mode-confirm {
  margin-left: auto;
  background: #008143;
  color: #fff;
}
.edit-mode-toolbar .edit-mode-confirm:hover {
  background: #0a6f3c;
}
.edit-mode-toolbar .edit-mode-sheet-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}
.edit-mode-toolbar .edit-mode-sheet-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #090f1a;
  cursor: pointer;
  outline: none;
  min-width: 200px;
}
.edit-mode-toolbar .edit-mode-sheet-select:focus {
  border-color: #7c5cfd;
  box-shadow: 0 0 0 3px rgba(124, 92, 253, .18);
}

/* ============================================================
   Single-image edit mode (✎ Edit on a card)
   When the customer clicks Edit on a file card, the body gets
   class `single-image-editing` (set by obj-remove-bg.js). These
   rules hide everything that operates on the gang sheet as a
   whole — irrelevant when working on one image in isolation.
   ============================================================ */
body.single-image-editing #canvas-options-btn,
body.single-image-editing #canvas-options-panel,
body.single-image-editing #canvas-warnings-row,
body.single-image-editing .change-design-size,
body.single-image-editing .nav-panel .change-design-size,
body.single-image-editing .options .action-btn .change-design-size {
    display: none !important;
}
/* Keep the canvas Background-Preview pill visible in single-image edit
   mode — same as the manual builder. Customers want to flip the canvas
   background to white / black while reviewing a single-image edit too. */
body.single-image-editing #bg-float-panel {
    display: inline-flex !important;
}

/* ============================================================
   Recolor panel (single-image edit → right sidebar)
   Layout based on a customer-supplied design; colors swapped to
   the brand palette (manager dashboard → Brand palette):
     • Primary             #7c5cfd
     • Primary darker      #6c43e0   (Apply gradient end)
     • Light Surface       #f0f2f8   (subtle row backgrounds)
     • Borders / muted     #e2e8f0
     • Text/Headings       #090f1a
   ============================================================ */
.recolor-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(9, 3, 26, 0.04);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Cap to the sidebar's available width so a long <select> option
     can't push the panel wider and force horizontal scroll. NOTE:
     deliberately NOT setting overflow:hidden — that was clipping the
     Coloris color picker popup, which made it impossible to change
     the color a second time. The min-width:0 + max-width:65% rules
     below contain the children without needing to clip. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Allow the row's children to shrink instead of forcing the row wider
   than the panel. Without this, a wide <select> + label combo would
   blow the layout out. */
.recolor-panel * { box-sizing: border-box; }
.recolor-panel .row > * { min-width: 0; }
.recolor-panel .row > .mode-select,
.recolor-panel .row > .color-wrap { max-width: 65%; }

.recolor-panel .helper {
  /* User reported "Tip: knock out black …" cut off at "knock out".
     Force wrapping on long sentences so the helper doesn't push
     the panel wider than its container. */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.recolor-panel .recolor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.recolor-panel .recolor-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #090f1a;
}
.recolor-panel .revert-btn {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s, color .15s, border-color .15s;
}
.recolor-panel .revert-btn:hover {
  background: rgba(124, 92, 253, 0.08);
  color: #7c5cfd;
  border-color: rgba(124, 92, 253, 0.35);
}
.recolor-panel .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid #f0f2f8;
  gap: 12px;
}
.recolor-panel .row label {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  margin: 0;
}
.recolor-panel .color-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f2f8;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  transition: border-color .15s;
}
.recolor-panel .color-wrap:hover { border-color: #7c5cfd; }

/* Coloris init wraps .color-picker inputs in a .clr-field (40×40 colored
   square) — fine on its own, but inside our .color-wrap we already render
   a custom swatch + hex label, so the injected square is redundant. It
   only became visible when the input default was a non-white color (e.g.
   Knock-out / Halftone start at #000), showing up as a big black box next
   to the swatch. Force the injected wrapper into the visual position of
   the (already-hidden) input so it doesn't claim layout space. */
.recolor-panel .color-wrap .clr-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
  opacity: 0;
}
.recolor-panel .color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(9, 3, 26, 0.1);
  background: #fff;
  display: inline-block;
  flex-shrink: 0;
}
.recolor-panel .color-hex {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: #334155;
  text-transform: uppercase;
}
/* Dropdowns — bold purple border + white background. Matches the
   look of an obviously-clickable control inside the tool panel. */
.recolor-panel .mode-select,
.tool-panel select {
  background: #ffffff;
  border: 2px solid #7c5cfd;
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  color: #090f1a;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c5cfd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color .12s, box-shadow .12s;
}
.recolor-panel .mode-select:hover,
.tool-panel select:hover {
  border-color: #4c1d95;
}
.recolor-panel .mode-select:focus,
.tool-panel select:focus,
.recolor-panel .mode-select:focus-visible,
.tool-panel select:focus-visible {
  outline: none;
  border-color: #4c1d95;
  box-shadow: 0 0 0 3px rgba(124, 92, 253, 0.25);
}

/* Primary Apply button — purple fill (brand) with green border so it
   reads as the "go" action. */
.recolor-panel .apply-btn,
.tool-panel .apply-btn {
  width: 100%;
  margin-top: 14px;
  background: #7c5cfd;
  color: #ffffff;
  border: 3px solid #059669;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter .12s, transform .12s, box-shadow .12s;
  box-shadow: 0 4px 12px -4px rgba(124, 92, 253, 0.35);
}
.recolor-panel .apply-btn:hover,
.tool-panel .apply-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(124, 92, 253, 0.5);
}
.recolor-panel .apply-btn:active,
.tool-panel .apply-btn:active { transform: translateY(0); }
.recolor-panel .apply-btn:disabled,
.tool-panel .apply-btn:disabled {
  filter: none;
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.recolor-panel .helper {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin-top: 10px;
  line-height: 1.45;
}

/* ============================================================
   Tool panel accordion (Knock out color, Recolor, future tools)
   Each .tool-panel has a clickable .tool-header that toggles a
   .tool-body open/closed. The per-tool Revert button lives in
   the header (top-right) and stops click propagation so toggling
   doesn't fire when reverting.
   ============================================================ */
/* Closed (default) tool panel — subtle dashed container so users can
   still see where one section ends and the next begins, without it
   competing visually with the active tool. */
.tool-panel {
  border: 1px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  /* ZERO padding so the header fills the panel edge-to-edge and its
     hover background covers the ENTIRE panel area (no visible gap on
     any side). All inner spacing now lives on .tool-header (collapsed
     row) and .tool-body (expanded content). */
  padding: 0 !important;
  margin: 6px 0 !important;
  background: #f8fafc !important;
  /* Clip the header hover background to the panel's rounded corners. */
  overflow: hidden;
  transition: border-color .15s, background .15s, box-shadow .15s, padding .15s, margin .15s;
  box-shadow: none !important;
}

/* Open tool panel — bold purple frame, soft purple tint, shadow.
   Makes the active tool obvious at a glance. Only bottom padding so
   the body's contents don't kiss the panel border. */
.tool-panel.is-open {
  border: 3px solid #7c5cfd !important;
  border-radius: 10px !important;
  padding: 0 0 12px !important;
  margin: 10px 0 !important;
  background: #faf5ff !important;
  box-shadow: 0 2px 8px rgba(124, 92, 253, 0.15) !important;
}

.tool-panel .tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Padding sits ENTIRELY on the header now so its hover background
     sweeps the full panel width AND height (no longer leaves a 4 px
     band on top/bottom or sides). No border-radius — the panel's
     overflow:hidden + border-radius takes care of the corners. */
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  border-radius: 0;
  transition: background .15s;
}
/* Hover the WHOLE PANEL (not just the header) when closed — the
   previous header-only wash left a dashed-border ring around the
   colored area which felt like the hover wasn't covering anything.
   Now the panel itself goes solid-bordered + white-filled + lifts
   slightly so the click target is unambiguous. */
.tool-panel:not(.is-open):hover {
  border-style: solid !important;
  border-color: #7c5cfd !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(124, 92, 253, 0.12) !important;
  transform: translateY(-1px);
}
.tool-panel:not(.is-open):hover .tool-header h3 {
  color: #4c1d95;
}
.tool-panel:not(.is-open):hover .tool-chevron {
  color: #7c5cfd;
}
/* Header gets transparent background — the panel itself owns the
   hover state now. Keyboard focus uses a light purple wash so it's
   distinguishable from mouse hover. */
.tool-panel .tool-header { background: transparent; }
.tool-panel .tool-header:hover { background: transparent; }
.tool-panel .tool-header:focus { outline: none; }
.tool-panel:not(.is-open) .tool-header:focus-visible {
  outline: none;
  background: rgba(124, 92, 253, 0.08);
}
.tool-panel.is-open .tool-header { background: transparent; }
.tool-panel.is-open .tool-header:hover { background: transparent; }
.tool-panel .tool-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #090f1a;
}
.tool-panel.is-open .tool-header h3 { color: #4c1d95; }
.tool-panel .tool-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tool-panel .tool-chevron {
  color: #64748b;
  transition: transform .2s, color .2s;
  flex-shrink: 0;
}
.tool-panel.is-open .tool-chevron { transform: rotate(180deg); color: #7c5cfd; }

.tool-panel .tool-body {
  display: none;
  /* The panel itself has zero padding, so the body provides its own
     inset spacing (matching the header's horizontal padding so labels
     line up vertically). */
  padding: 4px 14px 0;
}
.tool-panel.is-open .tool-body { display: block; }

/* Inline Revert button — sits inside .tool-body below Apply.
   Pinned visible with a clearly-colored fill + border so it can't
   accidentally vanish into the panel background. !important guards
   the layout properties (display, width) against any ancestor or
   utility class that might try to set display:none on .btn / etc. */
.tool-panel .revert-btn-inline {
  /* Hard block layout — forces a new line below the Apply button
     even when the parent is a flex/inline row that was sitting it
     beside Apply (the "I can't see it because it's to the right"
     bug). flex-basis:100% covers the case where the parent is a
     flex container and would otherwise let two buttons share a row. */
  display: flex !important;
  flex-basis: 100% !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  clear: both !important;
  gap: 6px;
  width: 100% !important;
  margin-top: 12px !important;
  padding: 9px 14px !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px !important;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s !important;
  text-align: center !important;
  line-height: 1.2 !important;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.08);
}
.tool-panel .revert-btn-inline:hover {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #f87171 !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.18) !important;
}
.tool-panel .revert-btn-inline:active {
  background: #fecaca !important;
  color: #7f1d1d !important;
  border-color: #ef4444 !important;
  transform: translateY(0);
}
.tool-panel .revert-btn-inline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8fafc;
  color: #94a3b8;
  border-color: #e2e8f0;
  box-shadow: none;
}

/* Tool-tab hover/active — hard-pinned here so any later mobile or
   responsive sheet can't undo the lift + soft-tile feel. Identical
   intent to new-css-builder.css:467, kept here as the last word. */
.tool-item:hover,
.tool-item.active {
  transform: translateY(-2px);
  background: rgb(245, 245, 245) !important;
}
.tool-item:hover .icon,
.tool-item.active .icon {
  transform: translateY(-1px) !important;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px !important;
}

/* Tolerance / generic stacked-row hints — must wrap at any width.
   The "Lower = strict match only…" text was being cut off because
   its parent flex row was treating it as a non-shrinking item. */
.tool-panel .tool-hint {
  width: 100%;
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Stacked row variant — used for the tolerance group where label,
   slider, and hint all stack vertically. */
.tool-panel .row.row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.tool-panel .row.row-stack > * {
  max-width: 100%; /* override the 65% cap from the horizontal row */
}

/* ============================================================
   Sticky footer in the Graphics column (single-image edit only)
   Two pinned buttons at the bottom of the #graphics single-panel:
     • Don't save & go back
     • Save
   Hidden by default; surfaced when body.single-image-editing.
   ============================================================ */
#graphics .graphics-sticky-footer {
  display: none;
  position: sticky;
  /* Sit ABOVE the bottom edge so the buttons aren't half-clipped by
     whatever browser chrome / iOS toolbar is at the very bottom edge.
     The bottom inset also keeps the buttons clear of narrow scrollbars
     and gives the shadow room to read. */
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 16px 8px 24px;          /* ↑ extra bottom space so buttons aren't cut off */
  padding: 12px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 30px -10px rgba(9, 3, 26, 0.22), 0 2px 6px rgba(9, 3, 26, 0.05);
  gap: 8px;
}
body.single-image-editing #graphics .graphics-sticky-footer {
  display: flex;
}
#graphics .graphics-footer-btn {
  flex: 1 1 0;
  min-width: 0;                   /* allow buttons to shrink in narrow sidebars */
  padding: 12px 10px;             /* ↑ vertical padding so labels never get cropped */
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter .12s, transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
/* Don't save & go back — RED (destructive). Per request. */
#graphics .graphics-footer-discard {
  background: #fff;
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.45);
}
#graphics .graphics-footer-discard:hover {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  border-color: #b91c1c;
  box-shadow: 0 6px 14px -6px rgba(185, 28, 28, 0.55);
}
/* Save — GREEN (safe). Stays unchanged. */
#graphics .graphics-footer-save {
  background: linear-gradient(135deg, #008143 0%, #006a37 100%);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(0, 129, 67, 0.45);
}
#graphics .graphics-footer-save:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(0, 129, 67, 0.55);
}

/* Eyedropper button next to the knockout color picker. */
.knockout-eyedropper {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  background: #fff;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  flex-shrink: 0;
}
.knockout-eyedropper:hover {
  background: rgba(124, 92, 253, 0.08);
  color: #7c5cfd;
  border-color: rgba(124, 92, 253, 0.45);
}
.knockout-eyedropper.is-active {
  background: linear-gradient(135deg, #7c5cfd 0%, #6c43e0 100%);
  color: #fff;
  border-color: #6c43e0;
  box-shadow: 0 4px 10px -4px rgba(124, 92, 253, 0.5);
}

/* ============================================================
   Smart background removal preview modal
   ============================================================ */
.smartbg-modal[hidden] { display: none; }
.smartbg-modal {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(9, 3, 26, 0.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.smartbg-modal-card {
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(9, 3, 26, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.smartbg-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 20px 22px 14px;
  border-bottom: 1px solid #f0f2f8;
}
.smartbg-close {
  all: unset; cursor: pointer; font-size: 22px; line-height: 1;
  color: #64748b; padding: 4px 8px; border-radius: 6px;
}
.smartbg-close:hover { background: #f0f2f8; color: #090f1a; }

.smartbg-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}
.smartbg-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.smartbg-preview-cell {
  display: flex; flex-direction: column; gap: 6px;
}
.smartbg-preview-label {
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #64748b;
}
.smartbg-preview-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: default;
}
.smartbg-preview-frame canvas,
.smartbg-preview-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
/* When restore mode is ON, the preview frames take pointer events so
   the brush can paint. Cursor becomes a crosshair. */
.smartbg-modal.is-restore-mode .smartbg-preview-frame {
  cursor: crosshair;
}
.smartbg-modal.is-restore-mode .smartbg-preview-frame canvas {
  pointer-events: auto;
}

/* Brush controls strip — used by both Restore and Erase modes. */
.smartbg-brush-controls[hidden] { display: none; }
.smartbg-brush-controls {
  margin-top: 14px;
  padding: 12px;
  background: #faf5ff;
  border: 1px solid rgba(124, 92, 253, 0.25);
  border-radius: 10px;
}
#smartbgModal.is-erase-mode .smartbg-brush-controls {
  background: #fff5f5;
  border-color: rgba(239, 68, 68, 0.30);
}
.smartbg-restore-row {
  display: flex; align-items: center; gap: 10px;
}
.smartbg-restore-row label {
  font-size: 13px; font-weight: 600; color: #334155; margin: 0;
}

/* When in erase mode, the previews get a red crosshair cursor to
   visually distinguish from restore. */
#smartbgModal.is-erase-mode .smartbg-preview-frame {
  cursor: crosshair;
}
#smartbgModal.is-erase-mode .smartbg-preview-frame canvas {
  pointer-events: auto;
}
/* Active toggle styling for the Eraser button. */
#smartbgModal.is-erase-mode .smartbg-btn-erase-toggle {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  border-color: #b91c1c;
}
.smartbg-btn-erase-toggle {
  background: #fff; color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.45);
}
.smartbg-btn-erase-toggle:hover { background: rgba(239, 68, 68, 0.08); }

.smartbg-modal-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid #f0f2f8;
  background: #fafbff;
}
.smartbg-btn {
  all: unset; cursor: pointer;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  font-family: inherit;
  transition: filter .12s, transform .12s, background .12s, border-color .12s;
}
.smartbg-btn-cancel {
  background: #fff; color: #475569; border: 1px solid #e2e8f0;
}
.smartbg-btn-cancel:hover { background: #f0f2f8; color: #090f1a; }
.smartbg-btn-restore-toggle {
  background: #fff; color: #4c1d95; border: 1px solid rgba(124, 92, 253, 0.45);
}
.smartbg-btn-restore-toggle:hover { background: rgba(124, 92, 253, 0.08); }
.smartbg-modal.is-restore-mode .smartbg-btn-restore-toggle {
  background: linear-gradient(135deg, #7c5cfd 0%, #6c43e0 100%);
  color: #fff;
  border-color: #6c43e0;
}
.smartbg-btn-apply {
  background: linear-gradient(135deg, #008143 0%, #006a37 100%);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(0, 129, 67, 0.45);
}
.smartbg-btn-apply:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

@media (max-width: 540px) {
  .smartbg-preview-grid { grid-template-columns: 1fr; }
}

/* Image upscaler — pill-style toggles (scale + sharpening). One active
   per group; the JS handler bumps .is-active. Buttons are full-width
   inside their .upscaler-pills flex container. */
.upscaler-pills { display: flex; gap: 6px; width: 100%; }
.upscaler-pill {
  flex: 1;
  padding: 8px 10px;
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.upscaler-pill:hover { background: #eef2f7; }
.upscaler-pill.is-active {
  background: #7c5cfd;
  border-color: #7c5cfd;
  color: #fff;
}