/* New Design Theme: glassmorphism + soft microinteractions
   Animations are subtle and respect prefers-reduced-motion */

:root {
  /* Color system (modern HSL neutrals + accent) */
  --bg: hsl(210 20% 98%);
  --panel: hsl(0 0% 100% / 0.6);
  --panel-tint: hsl(0 0% 100% / 0.36);
  --border: hsl(210 16% 91% / 0.7);
  --text: hsl(220 15% 20%);
  --muted: hsl(215 12% 45%);
  --accent: hsl(205 100% 50%);
  --accent-2: hsl(270 83% 66%);
  --accent-3: hsl(167 70% 55%);

  /* Glass */
  --glass-bg: var(--panel);
  --glass-dark: hsl(0 0% 100% / 0.22);
  --glass-border: var(--border);

  /* Elevation (multi-layer modern shadows) */
  --elev-1: 0 1px 2px rgba(0,0,0,.05), 0 3px 8px rgba(0,0,0,.06);
  --elev-2: 0 6px 12px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.10);

  --radius-lg: 16px;
  --radius-md: 12px;
  --anim-fast: 180ms;
  --anim-slow: 550ms;
  --brand-1: #a8c5ff; /* pastel blue */
  --brand-2: #ffc9de; /* pastel pink */
  --brand-3: #c7ffd8; /* mint */
  --brand-4: #ffe7a1; /* warm */
  --neon: #72e3ff;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Keyframes */
@keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity:1; transform:none; } }
@keyframes pulse-soft { 0%,100% { box-shadow: 0 0 0 0 rgba(120,232,255,0.0);} 50% { box-shadow: 0 0 18px 0 rgba(120,232,255,0.35);} }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes dash-flow { to { stroke-dashoffset: -180; } }

/* Global font + base */
#cm-designer-new, #cm-designer-new * { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--text); }
#cm-designer-new { background: var(--bg); }

/* Glassmorphism containers */
.cm-preview-container,
.cm-design-elements,
.cm-submit-form,
.cm-product-card,
.cm-design-toolbar,
.cm-design-details,
.cm-final-preview { 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: none; /* requested */
}

/* Subtle entrance */
.cm-preview-container,
.cm-design-elements,
.cm-submit-form,
.cm-product-card,
.cm-design-details { animation: fade-in-up var(--anim-slow) ease-in-out both; }

/* Buttons */
.cm-btn-primary,
.cm-btn-secondary,
.cm-btn-download {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease, background var(--anim-fast) ease;
  background: linear-gradient(135deg, hsl(206 100% 47%), hsl(250 70% 60%));
  color: white;
}
.cm-btn-primary:hover,
.cm-btn-secondary:hover,
.cm-btn-download:hover { transform: translateY(-1px) scale(1.01); box-shadow: var(--elev-2); }
.cm-btn-download i { font-size: 18px; }

/* Toolbar */
.cm-design-toolbar { gap: 8px; background: var(--glass-dark); border: 1px solid var(--glass-border); }
.cm-design-toolbar button { transition: transform var(--anim-fast) ease, background var(--anim-fast) ease; }
.cm-design-toolbar button:hover { transform: scale(1.06); background: rgba(255,255,255,0.7); }

/* Product cards hover */
.cm-product-card { transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease; }
.cm-product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(18,38,63,.16); }

/* Category tabs */
.cm-category-btn { position: relative; }
.cm-category-btn::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); background-size: 200% 200%; transform: scaleX(0); transform-origin: left; transition: transform var(--anim-fast) ease; }
.cm-category-btn:hover::after, .cm-category-btn.active::after { transform: scaleX(1); animation: gradient-shift 4s ease-in-out infinite; }

/* Animated gradient borders for key areas */
.cm-preview-container,
.cm-design-details,
.cm-final-table {
  position: relative;
}
.cm-preview-container::before,
.cm-design-details::before,
.cm-final-table::before { display: none !important; }

/* Design drop zone border neon pulse */
#cm-design-drop-zone { border: 1.5px dashed rgba(114,227,255,0.55) !important; animation: pulse-soft 5.2s ease-in-out infinite; }

/* Final table polish */
.cm-final-table th, .cm-final-table td { background: rgba(255,255,255,0.7); }
.cm-final-table th { font-weight: 700; }

/* Compact table typography and remove borders */
#cm-designer-new .cm-final-table th *,
#cm-designer-new .cm-final-table td *,
#cm-designer-new .cm-final-table th,
#cm-designer-new .cm-final-table td { font-size: 13px !important; border: none !important; }

/* Element hover microinteraction */
.cm-element-item { transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease; }
.cm-element-item:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-soft); }

/* Pulsing focus for active object delete button */
#cm-delete-active { animation: pulse-soft 3.8s ease-in-out infinite; }
#cm-delete-active, #cm-delete-active i { color: #fff !important; }

/* Hide decorative boxes in Step 4 preview */
#cm-designer-new .cm-final-preview .cm-preview-container { 
  background: transparent !important; 
  border: none !important; 
  box-shadow: none !important; 
  backdrop-filter: none !important; 
  padding: 10px 30px 0 30px !important;
}
#cm-designer-new .cm-final-preview .cm-preview-container::before { display: none !important; }

/* Remove border/shadow under details table */
#cm-designer-new .cm-final-preview .cm-design-details { 
  background: transparent !important; 
  border: none !important; 
  box-shadow: none !important; 
}
#cm-designer-new .cm-final-preview .cm-design-details::before { display: none !important; }

/* Make icons in download buttons white */
#cm-designer-new .cm-download-section i { color: #fff !important; }

/* Match font weight with submit button */
#cm-designer-new .cm-download-section .cm-btn-download,
#cm-designer-new .cm-btn-submit { font-weight: 600 !important; }

/* Less saturated gradient for download buttons */
#cm-designer-new .cm-download-section .cm-btn-download { 
  background-image: linear-gradient(135deg, #6366f1, #8b5cf6) !important; /* indigo → violet */
}
#cm-designer-new .cm-download-section .cm-btn-download:hover { 
  background-image: linear-gradient(135deg, #7c83ff, #9a6bff) !important; 
}

/* Custom paddings */
#cm-designer-new .cm-download-section { padding: 0 30px !important; }
#cm-designer-new .cm-design-details { padding: 0 30px !important; }

/* Hide preview headings */
#cm-designer-new .cm-preview-container > h4 { display: none !important; }

/* Form fields (Step 4) */
#cm-designer-new .cm-form-field label { font-size: 13px !important; }
#cm-designer-new .cm-form-field input,
#cm-designer-new .cm-form-field textarea { border: 1px solid #e0e0e0 !important; }
#cm-designer-new .cm-form-field input:focus,
#cm-designer-new .cm-form-field textarea:focus { border-color: #6844ec !important; outline: none; box-shadow: none; }

/* Equal width for both download buttons; bottom one with extra spacing */
#cm-designer-new .cm-download-section .cm-btn-download { width: 100% !important; max-width: 100% !important; }
#cm-designer-new .cm-download-section .cm-btn-download:last-child { margin-bottom: 20px !important; }

/* Typography scale override - more compact */
#cm-designer-new .cm-step-header h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
#cm-designer-new .cm-step-header p { font-size: clamp(.9rem, 1.3vw, 1rem); color: var(--muted); }
#cm-designer-new .cm-product-info h3 { font-size: clamp(1rem, 1.4vw, 1.15rem); }
#cm-designer-new .cm-design-toolbar button { width: 42px; height: 42px; }

/* Progress state colors */
.cm-progress-step.active .cm-step-number { background: hsl(224 76% 56%) !important; color: white !important; border-color: transparent !important; }
.cm-progress-step.completed .cm-step-number { background: hsl(152 61% 45%) !important; color: white !important; border-color: transparent !important; }

/* Step 2 polish */
.cm-customize-layout { gap: 28px; align-items: start; }
.cm-product-display { border-radius: 16px; border: 1px solid var(--glass-border); background: var(--panel); box-shadow: var(--elev-1); padding: 16px; }
#cm-product-preview { border-radius: 12px; border: 1px solid var(--border); background: white; }
.cm-image-toggle { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.cm-view-btn { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: white; color: var(--text); transition: all var(--anim-fast) ease; }
.cm-view-btn:hover { box-shadow: var(--elev-1); transform: translateY(-1px); }
.cm-view-btn.active { background: hsl(210 100% 97%); border-color: hsl(214 95% 76%); color: hsl(214 80% 35%); }

.cm-customize-options { border-radius: 16px; border: 1px solid var(--glass-border); background: var(--panel); box-shadow: var(--elev-1); }
.cm-option-group label { font-weight: 600; color: var(--muted); }

.cm-color-grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 10px; }
.cm-color-option { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); transition: transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease; }
.cm-color-option:hover { transform: scale(1.04); }
.cm-color-option.selected { outline: 2px solid hsl(214 95% 76%); outline-offset: 2px; box-shadow: 0 0 0 4px hsl(210 100% 97%); }

.cm-size-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; }
.cm-size-option { border-radius: 10px; border: 1px solid var(--border); background: white; font-weight: 600; padding: 10px 0; transition: background var(--anim-fast) ease, transform var(--anim-fast) ease; }
.cm-size-option:hover { transform: translateY(-1px); background: hsl(0 0% 100% / .9); }
.cm-size-option.selected { background: linear-gradient(135deg, hsl(206 100% 47%), hsl(250 70% 60%)); color: white; border-color: transparent; }
/* Ensure selected size text is white (theme override safe) */
#cm-designer-new .cm-size-option.selected { color: #fff !important; }

/* Enforce modern button visuals with !important to beat theme skins */
#cm-designer-new .cm-btn-primary,
#cm-designer-new .cm-select-product-btn,
#cm-designer-new .cm-btn-download {
  background-image: linear-gradient(135deg, #2563eb, #7c3aed) !important; /* blue→violet */
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
}
#cm-designer-new .cm-btn-primary:hover,
#cm-designer-new .cm-select-product-btn:hover,
#cm-designer-new .cm-btn-download:hover {
  background-image: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
}

#cm-designer-new .cm-btn-secondary {
  background: #ffffff !important;
  color: #334155 !important; /* slate-700 */
  border: 1px solid #e5e7eb !important; /* slate-200 */
  border-radius: 8px !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
}
#cm-designer-new .cm-btn-secondary:hover { background: #f8fafc !important; }

/* View toggle buttons */
#cm-designer-new .cm-view-btn { background: #fff !important; color: #334155 !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; }
#cm-designer-new .cm-view-btn.active { background: #eef2ff !important; color: #1e40af !important; border-color: #93c5fd !important; }

/* Disabled toolbar buttons (requires selection) */
#cm-designer-new .cm-design-toolbar [data-requires-selection="true"][disabled] {
  opacity: .45 !important;
  filter: grayscale(40%);
  cursor: not-allowed !important;
}