/** Shopify CDN: Minification failed

Line 5527:0 Unexpected "}"

**/
/* ====================================================
   V10 TECHPACK STUDIOS - CLEANED & OPTIMIZED
   Only includes CSS that's actually being used
   Reduced from 10,956 lines to essential styles only
   ==================================================== */

/* ==============================================
   BULK ORDER REVIEW - QUANTITY DISPLAY STYLES
   ============================================== */

.v10-review-garment-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.v10-review-garment-item:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.v10-garment-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.v10-garment-color-swatch {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.v10-garment-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.v10-garment-number {
  font-weight: 700;
  color: #10b981;
  font-size: 16px;
}

.v10-garment-type {
  font-weight: 600;
  color: #ffffff;
}

.v10-garment-separator {
  color: rgba(255, 255, 255, 0.3);
}

.v10-garment-fabric,
.v10-garment-colorway,
.v10-garment-code {
  color: rgba(255, 255, 255, 0.7);
}

.v10-quantity-display {
  background: rgba(0, 0, 0, 0.3);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.v10-size-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.v10-size-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.v10-size-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
  text-transform: uppercase;
  font-weight: 600;
}

.v10-size-qty {
  font-size: 18px;
  font-weight: 700;
  color: #10b981;
}

.v10-quantity-total {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.v10-quantity-total span {
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}

.v10-quantity-total strong {
  font-size: 20px;
  color: #10b981;
  font-weight: 700;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .v10-garment-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .v10-size-grid {
    gap: 12px;
  }
  
  .v10-size-item {
    min-width: 40px;
    padding: 6px;
  }
}

/* ==============================================
   RESET GLOBAL BLACK COLOR SCHEME FOR TECHPACK V10
   ============================================== */

/* Override the global black color scheme specifically for TechPack V10 elements */
.techpack-v10,
.v10-step,
[class*="v10-"],
.techpack-step,
.techpack-container,
.v10-modal,
.v10-modal *,
.garments-grid,
.garments-grid *,
body[class*="techpack"] *,
.page-techpack-v10 *,
[id*="techpack"] *,
[id*="v10"] * {
  /* Reset problematic global color variables to normal Shopify values */
  --color-scheme-5-background: transparent;
  --color-scheme-5-button-label: inherit;
  --color-foreground: var(--color-base-text, 18, 18, 18);
  
  /* Ensure backgrounds are not forced to black */
  background-color: transparent;
  
  /* Ensure text colors use theme defaults */
  color: inherit;
}

/* Additional specific resets for common TechPack elements */
.v10-step input,
.v10-step button,
.v10-step select,
.v10-step textarea,
.techpack-step input,
.techpack-step button,
.techpack-step select,
.techpack-step textarea {
  /* Reset form element colors */
  --color-scheme-5-background: transparent;
  --color-foreground: var(--color-base-text, 18, 18, 18);
  background-color: transparent;
  color: inherit;
}

/* ==============================================
   CSS CUSTOM PROPERTIES - DARK THEME ONLY
   ============================================== */

:root {
  /* Enhanced Dark Theme Colors - Professional Financial Dashboard */
  --v10-bg-primary: #1a1a1a;          /* Darker primary background for better contrast */
  --v10-bg-secondary: #2d2d2d;        /* Medium grey for cards - perfect contrast */
  --v10-bg-tertiary: #2a2a2a;         /* Match Steps 1-3 medium dark grey */
  --v10-bg-card: #2d2d2d;             /* Card backgrounds - medium grey */
  --v10-bg-card-hover: #343434;       /* Card hover state */
  --v10-bg-modal: #202020;            /* Modal backgrounds */
  --v10-bg-input: #343434;            /* Input backgrounds */
  --v10-bg-hover: #3f3f3f;            /* Hover states - lighter grey */
  --v10-bg-active: #4a4a4a;           /* Active states */

  /* Enhanced Glass Morphism Effects */
  --v10-glass-bg: rgba(45, 45, 45, 0.85);
  --v10-glass-border: rgba(255, 255, 255, 0.12);
  --v10-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --v10-glass-shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.4);
  --v10-backdrop-blur: blur(16px);

  /* Enhanced Text Colors - High Contrast Hierarchy */
  --v10-text-primary: #ffffff;        /* Pure white for headers */
  --v10-text-secondary: #e8e8e8;      /* Light grey for body text */
  --v10-text-tertiary: #c1c1c1;       /* Medium grey for descriptions */
  --v10-text-muted: #9a9a9a;          /* Muted grey text */
  --v10-text-disabled: #666666;       /* Disabled text */
  --v10-text-success: #10b981;        /* Success text - proper green */
  --v10-text-warning: #f59e0b;        /* Warning text */
  --v10-text-error: #ef4444;          /* Error text */

  /* Enhanced Border Colors */
  --v10-border-primary: #3f3f3f;      /* Primary borders - subtle but visible */
  --v10-border-secondary: #333333;    /* Secondary borders */
  --v10-border-light: rgba(255, 255, 255, 0.1); /* Light accent borders */
  --v10-border-focus: #6b7280;        /* Focus borders */
  --v10-border-success: #10b981;      /* Success borders */
  --v10-border-warning: #f59e0b;      /* Warning borders */
  --v10-border-error: #ef4444;        /* Error borders */

  /* Accent Colors */
  --v10-accent-primary: #a3a3a3;      /* Primary accent - light grey */
  --v10-accent-secondary: #d4d4d4;    /* Secondary accent - lighter grey */
  --v10-accent-success: #22c55e;      /* Success accent - proper green */
  --v10-accent-warning: #f59e0b;      /* Warning accent */
  --v10-accent-error: #ef4444;        /* Error accent */

  /* Warning Background Colors - Dark Theme */
  --v10-bg-warning: rgba(245, 158, 11, 0.15);     /* Warning background - darker orange for contrast */
  --v10-surface-warning: rgba(245, 158, 11, 0.12); /* Warning surface - slightly lighter orange */

  /* Shadows - Dark Theme Optimized */
  --v10-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --v10-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --v10-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --v10-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --v10-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --v10-shadow-focus: 0 0 0 3px rgba(163, 163, 163, 0.3);
  
  /* Lightweight shadows for interactive elements - Performance Optimized */
  --v10-shadow-hover: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  --v10-shadow-interactive: 0 1px 2px 0 rgba(0, 0, 0, 0.2);

  /* Border Radius - Linear Design (No rounded corners) */
  --v10-radius-xs: 0;
  --v10-radius-sm: 0;
  --v10-radius-md: 0;
  --v10-radius-lg: 0;
  --v10-radius-xl: 0;
  --v10-radius-2xl: 0;
  --v10-radius-full: 0;

  /* Transitions - Performance Optimized */
  --v10-transition-fast: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease-out;
  --v10-transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out;
  --v10-transition-slow: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
  
  /* Specific property transitions for better performance */
  --v10-transition-colors: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
  --v10-transition-shadow: box-shadow 0.15s ease-out;
  --v10-transition-interactive: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease-out, border-color 0.15s ease-out;

  /* Spacing Scale */
  --v10-space-1: 0.25rem;    /* 4px */
  --v10-space-2: 0.5rem;     /* 8px */
  --v10-space-3: 0.75rem;    /* 12px */
  --v10-space-4: 1rem;       /* 16px */
  --v10-space-5: 1.25rem;    /* 20px */
  --v10-space-6: 1.5rem;     /* 24px */
  --v10-space-8: 2rem;       /* 32px */
  --v10-space-10: 2.5rem;    /* 40px */
  --v10-space-12: 3rem;      /* 48px */
  --v10-space-16: 4rem;      /* 64px */

  /* Typography Scale */
  --v10-text-xs: 0.75rem;    /* 12px */
  --v10-text-sm: 0.875rem;   /* 14px */
  --v10-text-base: 1rem;     /* 16px */
  --v10-text-lg: 1.125rem;   /* 18px */
  --v10-text-xl: 1.25rem;    /* 20px */
  --v10-text-2xl: 1.5rem;    /* 24px */
  --v10-text-3xl: 1.875rem;  /* 30px */
  --v10-text-4xl: 2.25rem;   /* 36px */

  /* Z-Index Scale */
  --v10-z-dropdown: 1000;
  --v10-z-sticky: 1020;
  --v10-z-fixed: 1030;
  --v10-z-modal-backdrop: 1040;
  --v10-z-modal: 1050;
  --v10-z-tooltip: 1070;
}



/* ==============================================
   GLOBAL RESET & BASE STYLES
   ============================================== */

/* V10 TechPack scoped styles only - no global impact */
.v10-techpack-step *,
[id^="techpack-v10"] *,
.v10-modal-overlay *,
[class^="v10-"] * {
  box-sizing: border-box;
}

.v10-techpack-step,
[id^="techpack-v10"],
.v10-modal-overlay,
[class^="v10-"] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--v10-text-base);
  line-height: 1.6;
  color: var(--v10-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply background only to Step 4 container elements */
#techpack-v10-step-4 .v10-techpack-step,
#techpack-v10-step-4[id^="techpack-v10"],
#techpack-v10-step-4 .v10-modal-overlay {
  background-color: var(--v10-bg-primary);
}

/* V10 TechPack scoped headings */
.v10-techpack-step h1, .v10-techpack-step h2, .v10-techpack-step h3, .v10-techpack-step h4, .v10-techpack-step h5, .v10-techpack-step h6,
[id^="techpack-v10"] h1, [id^="techpack-v10"] h2, [id^="techpack-v10"] h3, [id^="techpack-v10"] h4, [id^="techpack-v10"] h5, [id^="techpack-v10"] h6,
.v10-modal-overlay h1, .v10-modal-overlay h2, .v10-modal-overlay h3, .v10-modal-overlay h4, .v10-modal-overlay h5, .v10-modal-overlay h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  color: var(--v10-text-primary);
}

.v10-techpack-step h1, [id^="techpack-v10"] h1, .v10-modal-overlay h1 { font-size: var(--v10-text-4xl); }
.v10-techpack-step h2, [id^="techpack-v10"] h2, .v10-modal-overlay h2 { font-size: var(--v10-text-3xl); }
.v10-techpack-step h3, [id^="techpack-v10"] h3, .v10-modal-overlay h3 { font-size: var(--v10-text-2xl); }
.v10-techpack-step h4, [id^="techpack-v10"] h4, .v10-modal-overlay h4 { font-size: var(--v10-text-xl); }
.v10-techpack-step h5, [id^="techpack-v10"] h5, .v10-modal-overlay h5 { font-size: var(--v10-text-lg); }
.v10-techpack-step h6, [id^="techpack-v10"] h6, .v10-modal-overlay h6 { font-size: var(--v10-text-base); }

.v10-techpack-step p, [id^="techpack-v10"] p, .v10-modal-overlay p {
  margin: 0 0 var(--v10-space-4) 0;
  color: var(--v10-text-secondary);
}

/* V10 TechPack scoped links and form elements */
.v10-techpack-step a, [id^="techpack-v10"] a, .v10-modal-overlay a {
  color: var(--v10-accent-primary);
  text-decoration: none;
  transition: var(--v10-transition-fast);
}

.v10-techpack-step a:hover, [id^="techpack-v10"] a:hover, .v10-modal-overlay a:hover {
  color: var(--v10-accent-secondary);
}
.v10-techpack-step button, [id^="techpack-v10"] button, .v10-modal-overlay button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* UNIVERSAL FOCUS FIX - Prevent ALL elements from losing shadows on focus */
*:focus {
  outline: none !important;
}

/* Catch-all for ANY clickable element with cursor pointer */
[style*="cursor: pointer"]:focus,
[style*="cursor:pointer"]:focus,
*[onclick]:focus {
  box-shadow: inherit !important;
  outline: none !important;
}

/* Maintain shadows on ALL interactive elements when focused */
button:focus,
[type="button"]:focus,
[type="submit"]:focus,
[role="button"]:focus,
.v10-btn:focus,
.btn:focus,
[class*="btn"]:focus,
[class*="button"]:focus,
.studio-tab:focus,
.studio-toggle__btn:focus,
.garment-card__actions button:focus,
.garment-card__edit:focus,
.garment-card__duplicate:focus,
.garment-card__delete:focus,
.garment-card__finalize:focus,
.collection-item__actions button:focus,
.collection-item__edit:focus,
.collection-item__remove:focus,
.collection-item__assign:focus,
.add-garment-btn:focus,
.add-design-btn:focus,
.add-colorway:focus,
.remove-colorway-btn:focus,
.v10-submission-option:focus,
.v10-client-btn:focus,
.currency-btn:focus,
.v10-file-remove:focus,
.bulk-tool-btn:focus,
.v10-guidance-btn:focus,
.selection-help:focus,
.studio-help-btn:focus,
.v10-techpack-step button:focus, 
[id^="techpack-v10"] button:focus, 
.v10-modal-overlay button:focus {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
  outline: none !important;
}
.v10-techpack-step input, .v10-techpack-step textarea, .v10-techpack-step select,
[id^="techpack-v10"] input, [id^="techpack-v10"] textarea, [id^="techpack-v10"] select,
.v10-modal-overlay input, .v10-modal-overlay textarea, .v10-modal-overlay select {
  font-family: inherit;
  font-size: var(--v10-text-base);
}

/* ==============================================
   LAYOUT COMPONENTS
   ============================================== */

.v10-techpack-landing {
  background: #2d2d2d; /* Medium dark grey for full page background */
  padding: 14rem 0; /* Maximum spacing for ultra-premium look */
  display: flex;
}

/* Keep min-height only for mobile if needed */
@media (max-width: 768px) {
  .v10-techpack-landing {
    min-height: 100vh;
    padding: 3.5rem 0; /* 75% less than 14rem */
  }
}

.v10-techpack-step {
  min-height: 100vh;
  background: var(--v10-bg-secondary);
  padding: var(--v10-space-8) 0;
}

.techpack-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0; /* Remove padding to prevent white space - let v10-app-container handle it */
  position: relative;
  overflow-x: hidden; /* Prevent horizontal overflow */
}

.techpack-content {
  background: var(--v10-bg-tertiary);
  border-radius: var(--v10-radius-xl);
  padding: var(--v10-space-12);
  box-shadow: var(--v10-shadow-lg);
  border: 1px solid var(--v10-border-primary);
  backdrop-filter: var(--v10-backdrop-blur);
}

@media (max-width: 768px) {
  .techpack-container {
    padding: 0; /* Remove mobile padding too */
  }
  
  .techpack-content {
    padding: var(--v10-space-6);
    border-radius: var(--v10-radius-lg);
  }
}

/* ==============================================
   PROGRESS SYSTEM
   ============================================== */

.simple-progress-container {
  margin-bottom: var(--v10-space-6);
  background: var(--v10-bg-card);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  box-shadow: var(--v10-shadow-md);
  border: 2px solid var(--v10-border-primary);
  backdrop-filter: var(--v10-backdrop-blur);
  position: relative;
}

.simple-progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--v10-space-2);
  padding: 0;
}

.simple-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v10-space-2);
  flex: 1;
  position: relative;
  padding: var(--v10-space-2);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
  background: transparent;
  border: 1px solid transparent;
}

.simple-step span {
  font-size: var(--v10-text-sm);
  font-weight: 500;
  color: var(--v10-text-secondary);
  text-align: center;
  white-space: nowrap;
  transition: var(--v10-transition);
}

.simple-step.active {
  background: rgba(75, 85, 99, 0.08);
  border: 2px solid var(--v10-accent-primary);
  box-shadow: var(--v10-shadow-md), 0 0 0 3px rgba(75, 85, 99, 0.1);
  transform: translateY(-2px);
}

.simple-step.active span {
  color: var(--v10-text-primary);
  font-weight: 600;
}

.simple-step.completed {
  background: rgba(16, 185, 129, 0.12);
  border: 2px solid var(--v10-accent-success);
  box-shadow: var(--v10-shadow-sm), 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.simple-step.completed span {
  color: var(--v10-accent-success);
  font-weight: 600;
}

.simple-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: var(--v10-bg-secondary);
  border: 2px solid var(--v10-border-primary);
  color: var(--v10-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--v10-text-sm);
  font-weight: 600;
  transition: var(--v10-transition);
  margin-bottom: var(--v10-space-1);
  box-shadow: var(--v10-shadow-sm);
  position: relative;
}

.simple-step.active .simple-step-circle {
  background: var(--v10-accent-primary);
  border-color: var(--v10-accent-primary);
  color: white;
  box-shadow: 0 0 0 4px rgba(75, 85, 99, 0.2), var(--v10-shadow-md);
  transform: scale(1.05);
}

.simple-step.completed .simple-step-circle {
  background: var(--v10-accent-success);
  border-color: var(--v10-accent-success);
  color: white;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), var(--v10-shadow-sm);
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .simple-progress-container {
    padding: var(--v10-space-3);
    margin-bottom: var(--v10-space-3);
  }
  
  .simple-progress-steps {
    gap: var(--v10-space-1);
  }
  
  .simple-step {
    padding: var(--v10-space-1);
    gap: var(--v10-space-1);
  }
  
  .simple-step span {
    font-size: var(--v10-text-xs);
  }
  
  .simple-step-circle {
    width: 28px;
    height: 28px;
    font-size: var(--v10-text-xs);
    margin-bottom: 0;
  }
}

/* ==============================================
   HEADERS
   ============================================== */

.techpack-header-with-help {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--v10-space-12);
  gap: var(--v10-space-6);
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
}

.techpack-header-content {
  flex: 1;
}

.techpack-title {
  font-size: var(--v10-text-3xl);
  font-weight: 700;
  color: var(--v10-text-primary);
  margin: 0 0 var(--v10-space-2) 0;
  line-height: 1.1;
}

.techpack-subtitle {
  font-size: var(--v10-text-lg);
  color: var(--v10-text-secondary);
  margin: 0;
  line-height: 1.5;
  font-weight: 400;
}

@media (max-width: 768px) {
  .techpack-header-with-help {
    flex-direction: column;
    gap: var(--v10-space-4);
  }
  
  .techpack-title {
    font-size: var(--v10-text-2xl);
  }
}

/* ==============================================
   BUTTON SYSTEM
   ============================================== */

.v10-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-3) var(--v10-space-6);
  border-radius: var(--v10-radius-md);
  font-size: var(--v10-text-base);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: var(--v10-transition);
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  text-decoration: none;
  font-family: inherit;
  
  /* Default Primary Style */
  background-color: var(--v10-accent-primary);
  color: white;
  border-color: var(--v10-accent-primary);
  box-shadow: var(--v10-shadow-sm);
}

.v10-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  /* Remove the grey background hover */
}

.v10-btn:active {
  transform: translateY(0);
  box-shadow: var(--v10-shadow-sm);
}

/* V10 Guidance Button System */
.v10-guidance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-3) var(--v10-space-4);
  background: #6b7280 !important;
  border: 1px solid #6b7280 !important;
  border-radius: var(--v10-radius-md);
  color: white !important;
  font-size: var(--v10-text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: var(--v10-transition);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}
.v10-guidance-btn:hover {
  background: #9ca3af !important;
  border-color: #9ca3af !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.v10-guidance-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.v10-guidance-btn::after {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  margin-left: var(--v10-space-2);
}

/* V10 Guidance Modal System */
.v10-guidance-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--v10-space-4);
}
.v10-guidance-modal.active {
  display: flex;
}
.v10-guidance-modal-content {
  background: var(--v10-bg-modal);
  border-radius: var(--v10-radius-xl);
  box-shadow: var(--v10-shadow-xl);
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
  max-width: 800px;
  border: 1px solid var(--v10-border-primary);
}
.v10-guidance-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v10-space-6);
  border-bottom: 1px solid var(--v10-border-primary);
  background: var(--v10-bg-secondary);
}
.v10-guidance-modal-title {
  font-size: var(--v10-text-xl);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
}
.v10-guidance-modal-close {
  background: none;
  border: none;
  color: var(--v10-text-muted);
  cursor: pointer;
  padding: var(--v10-space-2);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
}
.v10-guidance-modal-close:hover {
  background: var(--v10-bg-hover);
  color: var(--v10-text-primary);
}
.v10-guidance-modal-body {
  padding: var(--v10-space-6);
}

/* Mobile Responsive Design for Guidance Modal */
@media (max-width: 768px) {
  .v10-guidance-modal {
    padding: var(--v10-space-2);
  }
  
  .v10-guidance-modal-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  
  .v10-guidance-modal-header {
    padding: var(--v10-space-4);
  }
  
  .v10-guidance-modal-body {
    padding: var(--v10-space-4);
  }
  
  .v10-guidance-modal-title {
    font-size: var(--v10-text-lg);
  }
  
  .guidance-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

.v10-btn:focus {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
  outline: none;
}

.v10-btn:disabled,
.v10-btn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

.v10-btn--disabled:hover {
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Button Variants */
.v10-btn--primary {
  background-color: var(--v10-accent-primary);
  color: white;
  border-color: var(--v10-accent-primary);
}

.v10-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}


.v10-btn--secondary {
  background-color: #3a3a3a; /* Slightly lighter than var(--v10-bg-card) for better visibility */
  color: var(--v10-text-primary);
  border-color: var(--v10-border-primary);
}

.v10-btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.v10-btn--ghost {
  background-color: transparent;
  color: var(--v10-text-secondary);
  border-color: var(--v10-border-primary);
  box-shadow: none;
}

.v10-btn--ghost:hover {
  background-color: var(--v10-bg-hover);
  color: var(--v10-text-primary);
  box-shadow: none;
}

/* ==============================================
   HELP BOX SYSTEM
   ============================================== */

.v10-help-box {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--v10-radius-md);
  margin: var(--v10-space-4) 0;
}

.v10-help-icon {
  width: 24px;
  height: 24px;
  color: var(--v10-accent-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.v10-help-content {
  flex: 1;
  font-size: var(--v10-text-sm);
  color: var(--v10-text-primary);
  line-height: 1.5;
}

.v10-help-content strong {
  font-weight: 600;
  display: inline;
  margin-right: var(--v10-space-1);
}

/* Help box styling */
.v10-help-box {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.15);
}

/* Button Icons */
.v10-btn-icon,
.v10-btn-icon--left {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Step Actions */
.v10-step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--v10-space-4);
  margin-top: var(--v10-space-8);
  padding-top: var(--v10-space-8);
  border-top: 1px solid var(--v10-border-primary);
}

@media (max-width: 768px) {
  .v10-step-actions {
    flex-direction: row;
    gap: var(--v10-space-3);
    justify-content: space-between;
  }
  
  .v10-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ==============================================
   THEME TOGGLE SYSTEM
   ============================================== */

.v10-theme-toggle {
  display: flex;
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-1);
  gap: var(--v10-space-1);
}

.v10-theme-toggle--header {
  align-self: flex-start;
}

.v10-theme-btn {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-2) var(--v10-space-3);
  background: transparent;
  border: none;
  border-radius: var(--v10-radius-sm);
  font-size: var(--v10-text-sm);
  font-weight: 500;
  color: var(--v10-text-muted);
  cursor: pointer;
  transition: var(--v10-transition);
}

.v10-theme-btn--active {
  background: var(--v10-bg-tertiary);
  color: var(--v10-text-primary);
  box-shadow: var(--v10-shadow-sm);
}

.v10-theme-btn:hover:not(.v10-theme-btn--active) {
  color: var(--v10-text-secondary);
}

@media (max-width: 768px) {
  .v10-theme-toggle {
    margin-top: var(--v10-space-2);
  }
  
  .v10-theme-btn {
    padding: var(--v10-space-2);
    font-size: var(--v10-text-xs);
  }
}

/* ==============================================
   STUDIO CARDS
   ============================================== */

.v10-studio-card {
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-6);
  margin-bottom: var(--v10-space-6);
  box-shadow: var(--v10-glass-shadow);
  backdrop-filter: var(--v10-backdrop-blur);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.v10-studio-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--v10-border-light);
  border-radius: var(--v10-radius-lg) var(--v10-radius-lg) 0 0;
}

.v10-studio-card:hover {
  background: var(--v10-bg-card-hover);
  box-shadow: var(--v10-glass-shadow-strong);
  transform: translateY(-1px);
  border-color: var(--v10-border-light);
}

.v10-studio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-6);
  border-bottom: 1px solid var(--v10-border-secondary);
  padding-bottom: var(--v10-space-4);
}

.v10-studio-title {
  font-size: var(--v10-text-xl);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
  letter-spacing: -0.025em;
}

.v10-studio-subtitle {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-tertiary);
  margin: 0;
  line-height: 1.5;
}

.v10-edit-btn {
  background: transparent;
  border: 1px solid var(--v10-border-primary);
  color: var(--v10-text-tertiary);
  padding: var(--v10-space-2) var(--v10-space-3);
  border-radius: var(--v10-radius-md);
  font-size: var(--v10-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.v10-edit-btn:hover {
  background: var(--v10-bg-hover);
  color: var(--v10-text-secondary);
  border-color: var(--v10-border-light);
}

/* ==============================================
   UPLOAD SYSTEM
   ============================================== */

.v10-upload-zone {
  border: 2px dashed var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-12);
  text-align: center;
  background-color: var(--v10-bg-secondary);
  transition: var(--v10-transition);
  cursor: pointer;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.v10-upload-zone:hover {
  border-color: var(--v10-accent-primary);
  background-color: var(--v10-bg-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--v10-shadow-lg);
}

.v10-upload-content {
  pointer-events: none;
}

.v10-upload-icon {
  width: 48px;
  height: 48px;
  color: var(--v10-accent-primary);
  margin: 0 auto var(--v10-space-4) auto;
  display: block;
  transition: var(--v10-transition);
}

.v10-upload-zone:hover .v10-upload-icon {
  transform: scale(1.1);
  color: #f59e0b;
}

.v10-upload-zone--dragover {
  border-color: var(--v10-accent-primary);
  background-color: var(--v10-bg-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--v10-shadow-lg);
}

.v10-upload-zone--dragover .v10-upload-icon {
  transform: scale(1.1);
  color: #f59e0b;
}




.v10-upload-title {
  font-size: var(--v10-text-xl);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-2);
}

.v10-upload-subtitle {
  font-size: var(--v10-text-base);
  color: var(--v10-text-secondary);
  margin-bottom: var(--v10-space-4);
}

.v10-upload-specs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-2);
  font-size: var(--v10-text-sm);
  color: var(--v10-text-muted);
}

.v10-upload-spec {
  white-space: nowrap;
}

.v10-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.v10-upload-files {
  margin-top: var(--v10-space-6);
  display: grid;
  gap: var(--v10-space-4);
}

@media (max-width: 768px) {
  .v10-upload-zone {
    padding: var(--v10-space-8);
    min-height: 160px;
  }
  
  .v10-upload-specs {
    flex-direction: column;
    gap: var(--v10-space-1);
  }
}

/* ==============================================
   FILE MANAGEMENT SYSTEM
   ============================================== */

.v10-file-card {
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-4);
  transition: var(--v10-transition);
}

.v10-file-header {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
}

.v10-file-icon {
  width: 40px;
  height: 40px;
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v10-accent-primary);
  flex-shrink: 0;
}

.v10-file-info {
  flex: 1;
  min-width: 0;
}

.v10-file-name {
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v10-file-size {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-muted);
  margin: 0;
}

.v10-file-remove {
  width: 32px;
  height: 32px;
  border-radius: var(--v10-radius-md);
  background: transparent;
  border: 1px solid var(--v10-border-primary);
  color: var(--v10-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--v10-transition);
  flex-shrink: 0;
}

.v10-file-remove:hover {
  background: var(--v10-accent-error);
  border-color: var(--v10-accent-error);
  color: white;
}

.v10-file-progress {
  margin-top: var(--v10-space-3);
  padding-top: var(--v10-space-3);
  border-top: 1px solid var(--v10-border-primary);
}

.v10-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--v10-bg-secondary);
  border-radius: var(--v10-radius-sm);
  overflow: hidden;
  margin-bottom: var(--v10-space-2);
}

.v10-progress-fill {
  height: 100%;
  background: var(--v10-accent-primary);
  border-radius: var(--v10-radius-sm);
  transition: width 0.3s ease;
}

.v10-progress-text {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
}

/* ==============================================
   COLORWAY MODAL SYSTEM - CLEAN IMPLEMENTATION
   ============================================== */

/* Colorway Choice Modal - Using existing v10-submission-option pattern */
.v10-colorway-modal .v10-submission-options-grid {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-4);
  margin-bottom: var(--v10-space-6);
}

.v10-colorway-modal .v10-submission-option {
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: var(--v10-transition-interactive);
  font-size: var(--v10-text-base);
  font-weight: 500;
  will-change: transform;
  backface-visibility: hidden;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  box-shadow: var(--v10-shadow-sm);
  user-select: none;
}

/* Glass morphism hover effect for colorway modal buttons */
.v10-colorway-modal .v10-submission-option:hover {
  background-color: var(--v10-bg-hover);
  border-color: var(--v10-accent-primary);
  color: var(--v10-text-primary);
  transform: translate3d(0, -1px, 0);
  /* Glass morphism effect */
  backdrop-filter: blur(10px);
  background: rgba(75, 85, 99, 0.15);
  box-shadow: var(--v10-shadow-hover);
}

.v10-colorway-modal .v10-submission-card {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-4);
  padding: var(--v10-space-5);
}

.v10-colorway-modal .v10-submission-icon {
  width: 48px;
  height: 56px;
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v10-accent-primary);
  flex-shrink: 0;
}

.v10-colorway-modal .v10-submission-content {
  flex: 1;
  min-width: 0;
}

.v10-colorway-modal .v10-submission-title {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0 0 var(--v10-space-2);
  line-height: 1.2;
}

.v10-colorway-modal .v10-submission-description {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  line-height: 1.4;
  margin: 0 0 var(--v10-space-3);
}

.v10-colorway-modal .v10-submission-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v10-space-2);
  order: 3;
  margin-top: 0;
}

.v10-colorway-modal .v10-submission-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--v10-text-xs);
  font-weight: 500;
  line-height: 1;
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  background: var(--v10-bg-secondary);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--v10-border-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Stock Color Modal Specific Styles */
.v10-stock-colors-container {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-6);
}

.v10-stock-section {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-4);
}

.v10-stock-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #555555;
}

.v10-stock-colors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--v10-space-4);
}

/* Stock Color Buttons - Using exact same styling as Back/Add Color buttons */
.v10-stock-color-button {
  /* Base button styling - exact copy from .v10-btn */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-3) var(--v10-space-6);
  border-radius: var(--v10-radius-md);
  font-size: var(--v10-text-base);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition: var(--v10-transition);
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  text-decoration: none;
  font-family: inherit;
  width: 100%;
  
  /* Secondary button styling - exact copy from .v10-btn--secondary */
  background-color: var(--v10-bg-card);
  color: var(--v10-text-primary);
  border-color: var(--v10-border-primary);
}

.v10-stock-color-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.v10-stock-color-button.selected {
  background-color: var(--v10-accent-primary);
  color: white;
  border-color: var(--v10-accent-primary);
  box-shadow: var(--v10-shadow-sm);
}

/* Custom background colors for each button */
.v10-stock-color-button[data-color="black"] {
  background-color: #000000;
  color: #ffffff;
  border-color: #333333;
}

.v10-stock-color-button[data-color="black"]:hover {
  background-color: #1a1a1a;
  border-color: var(--v10-accent-primary);
}

.v10-stock-color-button[data-color="black"].selected {
  background-color: var(--v10-accent-primary);
  border-color: var(--v10-accent-primary);
  color: white;
}

.v10-stock-color-button[data-color="off-white"] {
  background-color: #f8f8f8;
  color: #333333;
  border-color: #cccccc;
}

.v10-stock-color-button[data-color="off-white"]:hover {
  background-color: #f0f0f0;
  border-color: var(--v10-accent-primary);
}

.v10-stock-color-button[data-color="off-white"].selected {
  background-color: var(--v10-accent-primary);
  border-color: var(--v10-accent-primary);
  color: white;
}

.v10-stock-color-button[data-color="white"] {
  background-color: #ffffff;
  color: #333333;
  border-color: #cccccc;
}

.v10-stock-color-button[data-color="white"]:hover {
  background-color: #fafafa;
  border-color: var(--v10-accent-primary);
}

.v10-stock-color-button[data-color="white"].selected {
  background-color: var(--v10-accent-primary);
  border-color: var(--v10-accent-primary);
  color: white;
}

.v10-stock-color-preview {
  width: 48px;
  height: 48px;
  border-radius: var(--v10-radius-md);
  border: 1px solid var(--v10-border-primary);
  box-shadow: var(--v10-shadow-sm);
}

/* Sample section button now uses .v10-submission-option with proper spacing */
.v10-stock-section .v10-submission-option {
  margin: 24px 0;
}

/* Note: Using existing Custom Colorways CSS classes for color picker */

/* Simple animation for section reveal */

.v10-sample-section-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.v10-sample-section-chevron {
  display: flex;
  align-items: center;
  color: var(--v10-text-secondary);
  transition: var(--v10-transition);
}

/* Color Picker Section */
.v10-color-picker-section {
  margin-top: 16px;
  padding: 0;
  background: transparent;
  border: none;
  display: none;
}

.v10-color-picker-section.active {
  display: block;
}

.v10-color-picker-group {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-4);
  align-items: center;
}

.v10-color-picker-label {
  font-size: var(--v10-text-sm);
  font-weight: 600;
  color: var(--v10-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin: 0;
}

.v10-color-picker-input {
  width: 100%;
  height: 60px;
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  cursor: pointer;
  background: transparent;
  transition: var(--v10-transition);
}

.v10-color-picker-input:hover {
  border-color: var(--v10-accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--v10-shadow-md);
}

.v10-color-picker-input:focus {
  outline: none;
  border-color: var(--v10-accent-primary);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.v10-color-name-display {
  font-size: var(--v10-text-base);
  font-weight: 500;
  color: var(--v10-text-primary);
  text-align: center;
  padding: var(--v10-space-3);
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  margin-top: var(--v10-space-3);
}

/* Custom Color Modal Card Layout */
.v10-custom-modal-container {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-6);
}

.v10-custom-input-card {
  background: var(--v10-bg-card, #3a3a3a);
  border: 1px solid var(--v10-border-primary, #555);
  border-radius: var(--v10-radius-lg, 12px);
  padding: var(--v10-space-5, 20px);
}

.v10-custom-input-label {
  display: block;
  font-size: var(--v10-text-sm, 14px);
  font-weight: 600;
  color: var(--v10-text-primary, #ffffff);
  margin-bottom: var(--v10-space-3, 12px);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.v10-custom-input-row {
  display: flex;
  gap: var(--v10-space-3, 12px);
  align-items: center;
}

.v10-custom-color-reference-card {
  background: var(--v10-bg-tertiary, #2a2a2a);
  border: 1px solid var(--v10-border-primary, #555);
  border-radius: var(--v10-radius-lg, 12px);
  padding: var(--v10-space-5, 20px);
  display: none;
}

.v10-custom-color-reference-card.active {
  display: block;
}

.v10-custom-color-reference-title {
  font-size: var(--v10-text-sm, 14px);
  font-weight: 600;
  color: var(--v10-text-primary, #ffffff);
  margin-bottom: var(--v10-space-4, 16px);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.v10-custom-color-picker-row {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-4, 16px);
  align-items: center;
  margin-bottom: var(--v10-space-5, 20px);
}

.v10-custom-color-info-card {
  background: var(--v10-bg-secondary, #404040);
  border: 1px solid var(--v10-border-primary, #555);
  border-radius: var(--v10-radius-md, 8px);
  padding: var(--v10-space-4, 16px);
  width: 100%;
  text-align: center;
}

.v10-custom-color-name-large {
  font-size: var(--v10-text-lg, 18px);
  font-weight: 600;
  color: var(--v10-text-primary, #ffffff);
  margin: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .v10-stock-colors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v10-space-3);
  }
  
  .v10-stock-color-button {
    padding: var(--v10-space-3);
    gap: var(--v10-space-2);
  }
  
  .v10-stock-color-preview {
    width: 40px;
    height: 40px;
  }
  
  .v10-colorway-modal .v10-submission-card {
    gap: var(--v10-space-3);
  }
  
  .v10-colorway-modal .v10-submission-icon {
    width: 40px;
    height: 40px;
  }
  
  .v10-custom-input-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .v10-custom-input-card,
  .v10-custom-color-reference-card {
    padding: var(--v10-space-4);
  }
}

/* ==============================================
   MODAL SYSTEM
   ============================================== */

.v10-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--v10-z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v10-space-4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Support JavaScript overflow hidden to prevent background scrolling */
body[style*="overflow: hidden"] {
  position: fixed !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/* Hide visual guide elements by default to prevent flash on page load */
.visual-guide-trigger-container,
.visual-guide-trigger,
[class*="size-distribution"],
[id*="size-distribution"] {
  display: none !important;
}

/* Only show visual guide elements on step 3 and 4 */
#techpack-v10-step-3 .visual-guide-trigger-container,
#techpack-v10-step-4 .visual-guide-trigger-container,
#techpack-v10-step-3 .visual-guide-trigger,
#techpack-v10-step-4 .visual-guide-trigger,
#techpack-v10-step-3 [class*="size-distribution"],
#techpack-v10-step-4 [class*="size-distribution"],
#techpack-v10-step-3 [id*="size-distribution"],
#techpack-v10-step-4 [id*="size-distribution"] {
  display: block !important;
}

.v10-modal-overlay[style*="display: block"],
.v10-modal-overlay:not([style*="display: none"]) {
  opacity: 1;
  visibility: visible;
}

.v10-modal {
  background: var(--v10-bg-modal);
  border-radius: 0;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.8),
    0 10px 20px -5px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  transform: scale(0.9) translateY(30px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: var(--v10-z-modal);
  width: 100%;
  max-width: 600px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.v10-modal-overlay[style*="display: block"] .v10-modal,
.v10-modal-overlay:not([style*="display: none"]) .v10-modal {
  transform: scale(1) translateY(0);
  animation: modalEnhancedEntrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalEnhancedEntrance {
  0% {
    transform: scale(0.8) translateY(40px);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.v10-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v10-space-4);
  padding: var(--v10-space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}

.v10-modal-title {
  font-size: var(--v10-text-xl);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
  line-height: 1.2;
  flex: 1;
}

.v10-modal-header-spacer {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.v10-modal-title.v10-text-center {
  text-align: center;
  flex: 1;
}

.v10-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-top: 1px solid #555555;
  background: #2a2a2a;
}

.v10-modal-footer .v10-btn[data-action="add-color"] {
  min-width: 120px;
}

.v10-modal-close {
  width: 40px;
  height: 40px;
  border-radius: var(--v10-radius-md);
  background: transparent;
  border: 1px solid var(--v10-border-primary);
  color: var(--v10-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--v10-transition);
  flex-shrink: 0;
}

.v10-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--v10-text-primary);
  border-color: var(--v10-accent-primary);
  transform: scale(1.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.v10-modal-body {
  padding: var(--v10-space-6);
  overflow-y: auto;
  max-height: calc(90vh - 140px);
  color: var(--v10-text-primary);
}

.v10-modal-message {
  font-size: var(--v10-text-base);
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-4);
  line-height: 1.6;
}

.v10-modal-details {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  line-height: 1.5;
}

.v10-modal-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--v10-space-3);
  padding: var(--v10-space-5) var(--v10-space-6);
  margin-top: var(--v10-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.v10-modal-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--v10-space-4);
  color: var(--v10-text-muted);
}

.v10-modal-icon--warning {
  color: var(--v10-accent-warning);
}

/* Client Verification Button Layout */
.v10-client-options-horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v10-space-4);
  margin: var(--v10-space-6) 0;
}

.v10-client-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--v10-space-6);
  height: auto;
  min-height: 140px;
  justify-content: center;
  border-radius: var(--v10-radius-lg);
  transition: var(--v10-transition-interactive);
  position: relative;
  overflow: hidden;
  
  /* Hardware acceleration hints for smooth performance */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.v10-client-btn-icon {
  margin-bottom: var(--v10-space-3);
  opacity: 0.8;
  transition: var(--v10-transition-fast);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.v10-client-btn-content {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-2);
}

.v10-client-btn-title {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  margin: 0;
  color: inherit;
  line-height: 1.3;
}

.v10-client-btn-description {
  font-size: var(--v10-text-sm);
  margin: 0;
  opacity: 0.8;
  line-height: 1.4;
  color: inherit;
}

.v10-client-btn:hover {
  transform: translate3d(0, -1px, 0); /* GPU-accelerated transform */
  box-shadow: var(--v10-shadow-hover); /* Lighter shadow for better performance */
  /* Glass morphism effect */
  backdrop-filter: blur(10px);
  background: rgba(75, 85, 99, 0.15);
}

.v10-client-btn:hover .v10-client-btn-icon {
  opacity: 1;
  transform: scale3d(1.1, 1.1, 1); /* GPU-accelerated scale */
}

@media (max-width: 768px) {
  .v10-modal {
    width: 95vw;
    max-width: none;
    margin: var(--v10-space-2);
  }
  
  .v10-modal-header {
    padding: var(--v10-space-4);
  }
  
  .v10-modal-body {
    padding: var(--v10-space-4);
  }
  
  .v10-modal-actions {
    flex-direction: row;
    gap: var(--v10-space-2);
    justify-content: space-between;
  }
  
  .v10-modal-actions .v10-btn {
    flex: 1;
  }
}

/* Modal Specific Variants */
.v10-modal--help {
  max-width: 700px;
}

.v10-modal--help .v10-modal-body {
  padding: var(--v10-space-8);
}

.v10-modal--measurement {
  max-width: 500px;
}


.v10-modal--verification {
  max-width: 600px;
}

/* New Terms & Conditions Modal Styling */
.v10-new-terms-modal {
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.v10-new-terms-modal .v10-modal-header {
  padding: var(--v10-space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.v10-new-terms-modal .v10-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
}

.v10-new-terms-modal .v10-modal-body {
  padding: 0;
  flex: 1;
  overflow-y: auto;
  max-height: calc(80vh - 140px); /* Account for header and footer */
}

.v10-new-terms-content {
  padding: var(--v10-space-6);
}

.v10-terms-section {
  margin-bottom: var(--v10-space-6);
  padding-bottom: var(--v10-space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.v10-terms-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.v10-terms-section h4 {
  color: var(--v10-text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--v10-space-3) 0;
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.v10-terms-section p {
  color: var(--v10-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.v10-new-terms-modal-actions {
  padding: var(--v10-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.v10-new-terms-understand {
  min-width: 200px;
  padding: var(--v10-space-4) var(--v10-space-6);
  font-size: 1rem;
  font-weight: 600;
}

/* Mobile responsiveness for new terms modal */
@media (max-width: 768px) {
  .v10-new-terms-modal {
    width: 95%;
    max-height: 85vh;
    margin: 2.5vh auto;
  }
  
  .v10-new-terms-modal .v10-modal-header,
  .v10-new-terms-content,
  .v10-new-terms-modal-actions {
    padding: var(--v10-space-4);
  }
  
  .v10-new-terms-modal .v10-modal-body {
    max-height: calc(85vh - 120px);
  }
  
  .v10-new-terms-understand {
    width: 100%;
    min-width: unset;
  }
  
  .v10-terms-section h4 {
    font-size: 1rem;
  }
  
  .v10-terms-section p {
    font-size: 0.9rem;
  }
}

.v10-modal--submission {
  max-width: 700px;
}

.v10-modal--success {
  max-width: 550px;
}

/* Modal Icon Variants */
.v10-modal-icon--help {
  background: var(--v10-accent-primary);
  color: white;
}

.v10-modal-icon--success {
  background: var(--v10-accent-success);
  color: white;
}

.v10-modal-icon--warning {
  background: var(--v10-accent-warning);
  color: white;
}

.v10-modal-icon--info {
  background: var(--v10-accent-info);
  color: white;
}

/* Premium Help Content Styling */
.help-content {
  font-size: var(--v10-text-base);
  line-height: 1.7;
  color: var(--v10-text-primary);
}

.help-content h4 {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0 0 var(--v10-space-3) 0;
  padding-bottom: var(--v10-space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.help-content h4:first-child {
  margin-top: 0;
}

.help-content h4:not(:first-child) {
  margin-top: var(--v10-space-6);
}

.help-content h4::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--v10-accent-primary);
  border-radius: 1px;
}

.help-content p {
  margin: 0 0 var(--v10-space-4) 0;
  color: var(--v10-text-secondary);
  line-height: 1.6;
}

.help-content ol,
.help-content ul {
  margin: 0 0 var(--v10-space-4) 0;
  padding-left: var(--v10-space-5);
}

.help-content li {
  margin-bottom: var(--v10-space-2);
  color: var(--v10-text-secondary);
  line-height: 1.6;
  position: relative;
}

.help-content ol > li {
  counter-increment: step-counter;
  margin-bottom: var(--v10-space-5); /* Increased spacing for better separation */
  min-height: 32px; /* Minimum height to accommodate numbered circles */
  padding-top: 4px; /* Small padding to align with circle */
}

.help-content ol {
  counter-reset: step-counter;
  list-style: none;
  padding-left: var(--v10-space-8); /* Increased padding for better spacing */
}

.help-content ol > li::before {
  content: counter(step-counter);
  position: absolute;
  left: calc(-1 * var(--v10-space-8)); /* Adjusted to match new padding */
  top: 4px; /* Slightly offset to align better with text */
  width: 24px;
  height: 24px;
  background: var(--v10-accent-primary);
  color: white;
  font-size: var(--v10-text-sm);
  font-weight: 600;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; /* Prevent circle from shrinking */
  z-index: 1; /* Ensure circle stays above other elements */
}

.help-content ul {
  list-style: none;
}

.help-content ul > li::before {
  content: '•';
  color: var(--v10-accent-primary);
  font-weight: 600;
  font-size: var(--v10-text-lg);
  position: absolute;
  left: calc(-1 * var(--v10-space-4));
  top: 0;
}

.help-content strong {
  font-weight: 600;
  color: var(--v10-accent-primary);
}

.help-content code {
  background: rgba(255, 255, 255, 0.1);
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: var(--v10-text-sm);
  color: var(--v10-accent-secondary);
}

/* Nested Lists Styling */
.help-content li ul,
.help-content li ol {
  margin: var(--v10-space-3) 0 var(--v10-space-3) 0; /* Increased margin for better separation */
  padding-left: var(--v10-space-6); /* Increased padding for better indentation */
}

.help-content li ul li {
  margin-bottom: var(--v10-space-2); /* Ensure nested items have proper spacing */
  min-height: auto; /* Reset min-height for nested items */
  padding-top: 0; /* Reset padding for nested items */
}

.help-content li ul li::before {
  content: '◦';
  color: var(--v10-text-muted);
  position: absolute;
  left: -16px; /* Fixed positioning for bullet points */
  top: 0;
  font-size: var(--v10-text-lg);
}

/* Mobile Help Content */
@media (max-width: 768px) {
  .help-content h4 {
    font-size: var(--v10-text-base);
    margin-bottom: var(--v10-space-2);
  }
  
  .help-content ol,
  .help-content ul {
    padding-left: var(--v10-space-5); /* Increased for mobile consistency */
  }
  
  .help-content ol {
    padding-left: var(--v10-space-6); /* Increased for mobile consistency */
  }
  
  .help-content ol > li {
    margin-bottom: var(--v10-space-4); /* Maintain good spacing on mobile */
    min-height: 28px; /* Adjusted for smaller mobile circles */
  }
  
  .help-content ol > li::before {
    width: 20px;
    height: 20px;
    font-size: 12px;
    left: calc(-1 * var(--v10-space-6)); /* Adjusted to match new mobile padding */
    top: 2px; /* Adjusted alignment for mobile */
  }
  
  .help-content li ul,
  .help-content li ol {
    padding-left: var(--v10-space-4); /* Adjusted nested indentation for mobile */
  }
}

@media (max-width: 768px) {
  .v10-client-options-horizontal {
    grid-template-columns: 1fr 1fr;
    gap: var(--v10-space-3);
    margin: var(--v10-space-4) 0;
  }

  .v10-client-btn {
    min-height: 120px;
    padding: var(--v10-space-4);
  }

  .v10-client-btn-title {
    font-size: var(--v10-text-base);
  }

  .v10-client-btn-description {
    font-size: var(--v10-text-xs);
  }
}

/* Client Verification Process Styling */
.v10-text-center {
  text-align: center;
}

.v10-process-title {
  font-size: var(--v10-text-xl);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0 0 var(--v10-space-6);
}

.v10-process-steps {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-4);
  margin-bottom: var(--v10-space-6);
}

.v10-process-step {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-4);
  padding: var(--v10-space-4);
  background: var(--v10-bg-secondary);
  border-radius: var(--v10-radius-md);
  border: 1px solid var(--v10-border-primary);
  transition: var(--v10-transition);
}

.v10-process-step:hover {
  /* Removed glass morphism hover effects */
}

.v10-process-number {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--v10-accent-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--v10-text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.v10-process-content {
  flex: 1;
}

.v10-process-content strong {
  display: block;
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-2);
}

.v10-process-content p {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.v10-process-divider {
  height: 1px;
  background: var(--v10-border-primary);
  margin: var(--v10-space-6) 0;
}

.v10-verification-description {
  font-size: var(--v10-text-base);
  color: var(--v10-text-secondary);
  margin: 0 0 var(--v10-space-6);
  line-height: 1.6;
}

.v10-vat-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-2);
  font-size: var(--v10-text-sm);
  color: var(--v10-text-muted);
  margin-top: var(--v10-space-4);
  padding: var(--v10-space-3);
  background: var(--v10-bg-secondary);
  border-radius: var(--v10-radius-md);
  border: 1px solid var(--v10-border-primary);
}

.v10-vat-notice svg {
  flex-shrink: 0;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .v10-process-step {
    padding: var(--v10-space-3);
    gap: var(--v10-space-3);
  }
  
  .v10-process-number {
    width: 28px;
    height: 28px;
    font-size: var(--v10-text-xs);
  }
  
  .v10-process-content strong {
    font-size: var(--v10-text-sm);
  }
  
  .v10-process-content p {
    font-size: var(--v10-text-xs);
  }
  
  .v10-vat-notice {
    font-size: var(--v10-text-xs);
    padding: var(--v10-space-2);
  }
}

/* Keep access studio modal (submission options) vertical on mobile */
@media (max-width: 768px) {
  .v10-submission-options-grid {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Submission Type Modal Styling */
.v10-submission-description {
  font-size: var(--v10-text-base);
  color: var(--v10-text-secondary);
  margin: 0 0 var(--v10-space-6);
  line-height: 1.6;
}

.v10-submission-options-grid {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-4);
  margin-bottom: var(--v10-space-6);
}

.v10-submission-option {
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: var(--v10-transition-interactive);
  font-size: var(--v10-text-base);
  font-weight: 500;
  
  /* Hardware acceleration hints for smooth performance */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  box-shadow: var(--v10-shadow-sm);
  user-select: none;
}

/* Glass morphism hover effect for main entrance modal buttons only */
.v10-modal-overlay:not(.v10-colorway-modal) .v10-submission-option:hover {
  background-color: var(--v10-bg-hover);
  border-color: var(--v10-accent-primary);
  color: var(--v10-text-primary);
  transform: translate3d(0, -1px, 0);
  /* Glass morphism effect */
  backdrop-filter: blur(10px);
  background: rgba(75, 85, 99, 0.15);
  box-shadow: var(--v10-shadow-hover);
}

.v10-submission-option--disabled {
  opacity: 0.5;
  cursor: default;
  background: var(--v10-bg-secondary);
  pointer-events: none;
  color: var(--v10-text-muted);
}

.v10-submission-option--disabled:hover {
  background: var(--v10-bg-secondary);
  border-color: var(--v10-border-primary);
  color: var(--v10-text-muted);
  transform: none;
  box-shadow: var(--v10-shadow-sm);
}

.v10-submission-card {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-4);
  padding: var(--v10-space-5);
}

.v10-submission-icon {
  width: 48px;
  height: 56px;
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v10-accent-primary);
  flex-shrink: 0;
}


.v10-submission-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--v10-space-1);
}

.v10-submission-title {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
  line-height: 1.2;
  order: 1;
}

.v10-submission-description {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  line-height: 1.4;
  margin: 0;
  order: 2;
}

.v10-submission-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v10-space-2);
  order: 3;
  margin-top: 0;
}

.v10-submission-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--v10-text-xs);
  font-weight: 500;
  line-height: 1;
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  background: var(--v10-bg-secondary);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--v10-border-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}


.v10-submission-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-2);
  font-size: var(--v10-text-sm);
  color: var(--v10-text-muted);
  margin-top: var(--v10-space-4);
  padding: var(--v10-space-3);
  background: var(--v10-bg-secondary);
  border-radius: var(--v10-radius-md);
  border: 1px solid var(--v10-border-primary);
}

.v10-submission-note svg {
  flex-shrink: 0;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .v10-submission-card {
    flex-direction: row;
    gap: var(--v10-space-3);
    text-align: left;
    align-items: flex-start;
  }
  
  .v10-submission-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  
  .v10-submission-title {
    font-size: var(--v10-text-base);
  }
  
  .v10-submission-description {
    font-size: var(--v10-text-xs);
  }
  
  .v10-submission-badges {
    justify-content: flex-start;
  }
  
  .v10-submission-badge {
    font-size: var(--v10-text-xs);
    padding: var(--v10-space-1);
  }
  
  .v10-submission-note {
    font-size: var(--v10-text-xs);
    padding: var(--v10-space-2);
  }
}

/* ==============================================
   MEASUREMENT SYSTEM
   ============================================== */

.v10-measurement-list {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-4);
}

.v10-measurement-item {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4);
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  cursor: pointer;
  transition: var(--v10-transition);
}

.v10-measurement-item:hover {
  border-color: var(--v10-accent-primary);
  background: var(--v10-bg-hover);
}

.v10-measurement-text {
  flex: 1;
}

.v10-measurement-text strong {
  display: block;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-1);
}

.v10-measurement-text span {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
}

.v10-measurement-status {
  font-size: var(--v10-text-xs);
  font-weight: 600;
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.v10-measurement-status--required {
  background: rgba(220, 38, 38, 0.1);
  color: var(--v10-accent-error);
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.v10-measurement-status--optional {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.v10-measurement-checkbox-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.v10-measurement-checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-sm);
  background: var(--v10-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--v10-transition);
  flex-shrink: 0;
}

.v10-measurement-item:hover .v10-measurement-checkbox-custom {
  border-color: var(--v10-accent-primary);
}

.v10-measurement-checkbox-input:checked + .v10-measurement-checkbox-custom {
  background: var(--v10-accent-primary);
  border-color: var(--v10-accent-primary);
}

.v10-measurement-checkmark {
  opacity: 0;
  color: white;
  transition: var(--v10-transition);
}

.v10-measurement-checkbox-input:checked + .v10-measurement-checkbox-custom .v10-measurement-checkmark {
  opacity: 1;
}

/* ==============================================
   WARNING & VALIDATION SYSTEM
   ============================================== */

.v10-warning-box-enhanced {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4);
  background: var(--v10-bg-warning);
  border: 1px solid var(--v10-border-warning);
  border-radius: var(--v10-radius-md);
  margin-bottom: var(--v10-space-4);
}

.v10-warning-box-enhanced--blue {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
}

.v10-warning-box-enhanced--red {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.v10-warning-icon {
  font-size: var(--v10-text-lg);
  flex-shrink: 0;
}

.v10-warning-content {
  flex: 1;
  font-size: var(--v10-text-sm);
  color: var(--v10-text-primary);
  line-height: 1.5;
}

.v10-warning-content strong {
  font-weight: 600;
  display: block;
  margin-bottom: var(--v10-space-1);
}

/* Warning box styling - Dark theme only */
.v10-warning-box-enhanced {
  background: var(--v10-surface-warning);
  border-color: rgba(245, 158, 11, 0.3);
}

.v10-warning-box-enhanced--blue {
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(59, 130, 246, 0.15);
}

.v10-warning-box-enhanced--red {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.15);
}

.v10-warning-box-enhanced--green {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.15);
}

/* ==============================================
   FORM VALIDATION & ERROR SYSTEM
   ============================================== */

/* Form field error states */
.v10-form-field--error .v10-form-input-enhanced,
.v10-form-field--error .v10-form-select-enhanced,
.v10-form-field--error .v10-form-textarea-enhanced {
  border-color: var(--v10-accent-error) !important;
  background-color: rgba(239, 68, 68, 0.05);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.v10-form-field--error .v10-form-label-enhanced {
  color: var(--v10-accent-error);
}

/* Error message styling */
.v10-form-error-message {
  display: flex;
  align-items: center;
  gap: var(--v10-space-1);
  margin-top: var(--v10-space-1);
  color: var(--v10-accent-error);
  font-size: var(--v10-text-xs);
  font-weight: 500;
}

.v10-form-error-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Radio button error states */
.v10-delivery-option-enhanced--error .v10-delivery-option-content-enhanced,
.v10-shipping-method--error .v10-shipping-method-content,
.v10-insurance-option--error .v10-insurance-option-content {
  border-color: var(--v10-accent-error) !important;
  background-color: rgba(239, 68, 68, 0.05);
}

/* ==============================================
   ENHANCED FORM STYLING SYSTEM
   ============================================== */

/* Form field containers */
.v10-form-field,
.v10-form-field--half,
.v10-form-field--full {
  margin-bottom: var(--v10-space-4);
  display: flex;
  flex-direction: column;
}

.v10-form-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v10-space-4);
}

.v10-form-field--half {
  grid-column: span 1;
}

.v10-form-field--full {
  grid-column: span 2;
}

/* Enhanced form labels */
.v10-form-label-enhanced {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-2);
  font-size: var(--v10-text-sm);
  font-weight: 600;
  color: var(--v10-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.v10-required::after {
  content: "*";
  color: var(--v10-accent-error);
  margin-left: var(--v10-space-1);
}

/* Enhanced form inputs */
.v10-form-input-enhanced,
.v10-form-select-enhanced,
.v10-form-textarea-enhanced {
  padding: var(--v10-space-3) var(--v10-space-4);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  background: var(--v10-bg-input);
  color: var(--v10-text-primary);
  font-size: var(--v10-text-base);
  transition: var(--v10-transition);
  width: 100%;
}

.v10-form-input-enhanced:focus,
.v10-form-select-enhanced:focus,
.v10-form-textarea-enhanced:focus {
  outline: none;
  border-color: var(--v10-accent-primary);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
  background: var(--v10-bg-primary);
}

.v10-form-input-enhanced::placeholder,
.v10-form-textarea-enhanced::placeholder {
  color: var(--v10-text-disabled);
  opacity: 0.8;
}

/* Textarea specific styling */
.v10-form-textarea-enhanced {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
}

/* Character counter */
.v10-char-count {
  display: flex;
  justify-content: flex-end;
  font-size: var(--v10-text-xs);
  color: var(--v10-text-muted);
  margin-top: var(--v10-space-1);
}

@media (max-width: 768px) {
  .v10-form-section {
    grid-template-columns: 1fr;
    gap: var(--v10-space-3);
  }
  
  .v10-form-field--half,
  .v10-form-field--full {
    grid-column: span 1;
  }
  
  .v10-form-field {
    margin-bottom: var(--v10-space-3);
  }
}

/* ==============================================
   RADIO BUTTON SYSTEMS - COMPREHENSIVE
   ============================================== */

/* Delivery Address Options */
.v10-delivery-options-enhanced {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-3);
  margin-top: var(--v10-space-3);
}

.v10-delivery-option-enhanced {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.v10-delivery-option-enhanced input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.v10-delivery-option-content-enhanced {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4);
  background: var(--v10-bg-card);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
  width: 100%;
  min-height: 60px;
}

.v10-delivery-option-enhanced:hover .v10-delivery-option-content-enhanced {
  border-color: var(--v10-accent-primary);
  background: var(--v10-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--v10-shadow-sm);
}

.v10-delivery-option-enhanced input[type="radio"]:checked + .v10-delivery-option-content-enhanced {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.v10-delivery-option-icon {
  font-size: var(--v10-text-xl);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v10-bg-secondary);
  border-radius: var(--v10-radius-sm);
  flex-shrink: 0;
}

.v10-delivery-option-text {
  flex: 1;
}

.v10-delivery-option-text strong {
  display: block;
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-1);
}

.v10-delivery-option-text small {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  line-height: 1.3;
}

/* Shipping Method Options */
.v10-shipping-methods {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-3);
  margin-top: var(--v10-space-3);
}

.v10-shipping-method {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.v10-shipping-method input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.v10-shipping-method-content {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4);
  background: var(--v10-bg-card);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
  width: 100%;
  min-height: 60px;
}

.v10-shipping-method:hover .v10-shipping-method-content {
  border-color: var(--v10-accent-primary);
  background: var(--v10-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--v10-shadow-sm);
}

.v10-shipping-method input[type="radio"]:checked + .v10-shipping-method-content {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.v10-shipping-method-icon {
  font-size: var(--v10-text-xl);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v10-bg-secondary);
  border-radius: var(--v10-radius-sm);
  flex-shrink: 0;
}

.v10-shipping-method-text {
  flex: 1;
}

.v10-shipping-method-text strong {
  display: block;
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-1);
}

.v10-shipping-method-text small {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  line-height: 1.3;
}

/* Insurance Options */
.v10-insurance-options {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-3);
  margin-top: var(--v10-space-3);
}

.v10-insurance-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.v10-insurance-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.v10-insurance-option-content {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4);
  background: var(--v10-bg-card);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
  width: 100%;
  min-height: 60px;
}

.v10-insurance-option:hover .v10-insurance-option-content {
  border-color: var(--v10-accent-primary);
  background: var(--v10-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--v10-shadow-sm);
}

.v10-insurance-option input[type="radio"]:checked + .v10-insurance-option-content {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.v10-insurance-option-icon {
  font-size: var(--v10-text-xl);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v10-bg-secondary);
  border-radius: var(--v10-radius-sm);
  flex-shrink: 0;
}

.v10-insurance-option-text {
  flex: 1;
}

.v10-insurance-option-text strong {
  display: block;
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-1);
}

.v10-insurance-option-text small {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  line-height: 1.3;
}

/* Mobile responsive adjustments for radio buttons */
@media (max-width: 768px) {
  .v10-delivery-option-content-enhanced,
  .v10-shipping-method-content,
  .v10-insurance-option-content {
    padding: var(--v10-space-3);
    gap: var(--v10-space-2);
    min-height: 50px;
  }
  
  .v10-delivery-option-icon,
  .v10-shipping-method-icon,
  .v10-insurance-option-icon {
    width: 28px;
    height: 28px;
    font-size: var(--v10-text-lg);
  }
  
  .v10-delivery-option-text strong,
  .v10-shipping-method-text strong,
  .v10-insurance-option-text strong {
    font-size: var(--v10-text-sm);
  }
  
  .v10-delivery-option-text small,
  .v10-shipping-method-text small,
  .v10-insurance-option-text small {
    font-size: var(--v10-text-xs);
  }
}

/* ==============================================
   STEP 3 CONTROL BAR SYSTEM
   ============================================== */

.step3-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-6);
  gap: var(--v10-space-4);
  padding: var(--v10-space-4) 0;
  background: transparent;
}

.step3-control-left {
  flex: 0 0 auto;
}

.step3-control-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.step3-control-right {
  flex: 0 0 auto;
}

/* Mobile responsive adjustments for Step 3 control bar */
@media (max-width: 768px) {
  .step3-control-bar {
    flex-direction: column;
    gap: var(--v10-space-3);
    align-items: center;
    padding: var(--v10-space-3) 0;
  }
  
  .step3-control-left,
  .step3-control-center,
  .step3-control-right {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .step3-control-center {
    order: 2;
  }
  
  .step3-control-left {
    order: 1;
  }
  
  .step3-control-right {
    order: 3;
  }
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

/* ==============================================
   GARMENT STUDIO SYSTEM
   ============================================== */

.studio-navigator {
  margin-bottom: var(--v10-space-6);
}

.studio-tabs {
  display: flex;
  gap: var(--v10-space-2);
  margin-bottom: var(--v10-space-4);
}

.studio-tab {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4) var(--v10-space-6);
  background: var(--v10-bg-card);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--v10-text-secondary);
  flex: 1;
  min-width: 0;
  opacity: 0.9;
  position: relative;
  /* Subtle grey shadow for depth */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.studio-tab:hover:not(.studio-tab--active) {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

/* Status indicators for inactive tabs */
.studio-tab.studio-tab--incomplete:not(.studio-tab--active) {
  border-left: 3px solid rgba(245, 158, 11, 0.5);
  padding-left: calc(var(--v10-space-6) - 1px);
}

.studio-tab.studio-tab--complete:not(.studio-tab--active) {
  border-left: 3px solid rgba(16, 185, 129, 0.5);
  padding-left: calc(var(--v10-space-6) - 1px);
}

/* Inactive tab styling */
.studio-tab {
  background: var(--v10-bg-secondary);
  border-color: var(--v10-border-secondary);
  opacity: 0.85;
}

/* Removed duplicate hover effect */

/* Premium neutral studio tab active state */
.studio-tab--active {
  background: linear-gradient(135deg, var(--v10-bg-tertiary) 0%, var(--v10-bg-secondary) 100%);
  border: 2px solid var(--v10-border-primary);
  color: var(--v10-text-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px);
  position: relative;
  font-weight: 600;
}

/* Status-based accent indicators for active tabs - Subtle Design */
.studio-tab--active.studio-tab--incomplete {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-left: 3px solid #f59e0b;
  padding-left: calc(var(--v10-space-6) - 1px);
  box-shadow: var(--v10-shadow-sm);
}

.studio-tab--active.studio-tab--complete {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-left: 3px solid #10b981;
  padding-left: calc(var(--v10-space-6) - 1px);
  box-shadow: var(--v10-shadow-sm);
}

/* Default premium adjustments - Dark theme styling */
.studio-tab--active:not(.studio-tab--incomplete):not(.studio-tab--complete) {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  border: 2px solid #4b5563;
  color: var(--v10-text-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.studio-tab__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.studio-tab__content {
  flex: 1;
  min-width: 0;
}

.studio-tab__title {
  display: block;
  font-size: var(--v10-text-base);
  font-weight: 600;
  line-height: 1.2;
}

.studio-tab__subtitle {
  display: block;
  font-size: var(--v10-text-sm);
  opacity: 0.8;
  line-height: 1.3;
  margin-top: var(--v10-space-1);
}

/* Icon and title color rules for status indication - Dark theme only */
.studio-tab--active.studio-tab--incomplete .studio-tab__icon {
  color: #f59e0b !important;
}

.studio-tab--active.studio-tab--complete .studio-tab__icon {
  color: #10b981 !important;
}

.studio-tab--active.studio-tab--incomplete .studio-tab__title {
  color: #f59e0b !important;
}

.studio-tab--active.studio-tab--complete .studio-tab__title {
  color: #10b981 !important;
}

/* Studio Toggle Buttons (Lab Dips/Designs) */
.studio-toggle {
  display: flex;
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: 2px;
  gap: 2px;
}

.studio-toggle__btn {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-2) var(--v10-space-4);
  border: none;
  background: transparent;
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-sm);
  font-weight: 500;
  border-radius: var(--v10-radius-sm);
  cursor: pointer;
  transition: var(--v10-transition);
  /* Subtle grey shadow for depth */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.studio-toggle__btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--v10-text-primary);
}

.studio-toggle__btn--active {
  background: #3a3a3a; /* Slightly lighter than var(--v10-bg-card) for better visibility */
  color: var(--v10-text-primary);
  box-shadow: var(--v10-shadow-sm);
  font-weight: 600;
}

.studio-toggle__btn--active:hover {
  background: #3a3a3a; /* Slightly lighter than var(--v10-bg-card) for better visibility */
}

.studio-toggle__btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.studio-container {
  display: none;
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-6);
}

.studio-container--active {
  display: block;
}

.studio-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--v10-space-6);
  gap: var(--v10-space-4);
}

.studio-header__content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
}

.studio-header__title {
  font-size: var(--v10-text-xl);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
}

.studio-header__badge {
  font-size: var(--v10-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  border: 1px solid;
  white-space: nowrap;
}

.studio-header__badge--incomplete {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
  color: #f59e0b;
  border: 1px solid #f59e0b;
  border-color: #f59e0b;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.studio-header__badge--complete {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
  color: #10b981;
  border: 1px solid #10b981;
  border-color: #10b981;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.studio-header__badge--professional {
  background: rgba(75, 85, 99, 0.1);
  color: var(--v10-accent-primary);
  border-color: rgba(75, 85, 99, 0.2);
}

/* Garments Grid - Single Column Layout */
.garments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v10-space-6);
  margin-bottom: var(--v10-space-8);
}

.garment-card {
  background: #1a1a1a;
  border: 2px solid var(--v10-border-primary);
  border-radius: 0;
  padding: var(--v10-space-5);
  transition: var(--v10-transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Removed hover effect for solid appearance */

.garment-card--configured {
  border-color: #404040;
  background: var(--v10-bg-primary);
}

.garment-card--selected {
  border-color: var(--v10-accent-primary);
  background: rgba(75, 85, 99, 0.08);
  box-shadow: var(--v10-shadow-md);
}

.garment-header {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  margin-bottom: var(--v10-space-4);
}

.garment-icon {
  width: 40px;
  height: 40px;
  background: var(--v10-accent-primary);
  border-radius: var(--v10-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: var(--v10-text-sm);
}

.garment-info {
  flex: 1;
}

.garment-name {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0 0 var(--v10-space-1) 0;
}

.garment-type {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  margin: 0;
}

.garment-number {
  font-size: var(--v10-text-xs);
  color: var(--v10-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.garment-color-circle {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 2px solid var(--v10-border-primary);
  box-shadow: var(--v10-shadow-sm);
}

/* Add Garment Section */
.add-garment-section {
  display: flex;
  justify-content: center;
  margin-bottom: var(--v10-space-8);
}

.add-garment-btn {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4) var(--v10-space-6);
  background: var(--v10-accent-primary);
  border: 2px solid var(--v10-accent-primary);
  border-radius: var(--v10-radius-lg);
  color: white;
  cursor: pointer;
  transition: var(--v10-transition);
  font-size: var(--v10-text-base);
  font-weight: 500;
  min-height: 80px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--v10-shadow-md);
}

.add-garment-btn:hover {
  background: #374151;
  border-color: #374151;
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--v10-shadow-lg);
}

.add-garment-btn__icon {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--v10-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.add-garment-btn__text {
  flex: 1;
  text-align: left;
}

.add-garment-btn__title {
  display: block;
  font-size: var(--v10-text-base);
  font-weight: 600;
  line-height: 1.2;
}

.add-garment-btn__subtitle {
  display: block;
  font-size: var(--v10-text-sm);
  opacity: 0.8;
  margin-top: var(--v10-space-1);
}

/* ==============================================
   CHECKBOXES & FORM ELEMENTS
   ============================================== */

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-3);
  cursor: pointer;
  padding: var(--v10-space-4);
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
}

.terms-checkbox:hover {
  border-color: var(--v10-accent-primary);
  background: var(--v10-bg-hover);
}

.terms-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

.sample-type-card {
  background: var(--v10-bg-card);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  transition: var(--v10-transition);
  cursor: pointer;
}

.sample-type-card:hover {
  border-color: var(--v10-accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--v10-shadow-md);
}

.sample-type-card--selected {
  border-color: var(--v10-accent-primary);
  background: rgba(75, 85, 99, 0.08);
}

.sample-type-card--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: var(--v10-border-secondary);
}

.sample-type-card--warning {
  border-color: var(--v10-accent-warning);
  background: var(--v10-bg-warning);
}

.sample-type-card--required {
  border-color: var(--v10-accent-error);
  background: rgba(220, 38, 38, 0.05);
}

.sample-type-card--restricted {
  border-color: var(--v10-accent-error);
  background: rgba(220, 38, 38, 0.08);
  cursor: not-allowed;
}

/* ==============================================
   QUANTITY SYSTEM
   ============================================== */

.compact-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--v10-space-3);
  margin: var(--v10-space-4) 0;
}

.preset-success-message {
  background: rgba(16, 185, 129, 0.1);
  color: var(--v10-accent-success);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-3) var(--v10-space-4);
  margin: var(--v10-space-4) 0;
  font-size: var(--v10-text-sm);
  font-weight: 500;
}

.compact-selection-section--disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* ==============================================
   MAIN GARMENT CARD SYSTEM (Used Throughout App)
   ============================================== */

/* Main garment card system - used for all garment interactions throughout the app */
.garment-card {
  background: #1a1a1a;
  border: 2px solid var(--v10-border-primary);
  border-radius: 0;
  transition: var(--v10-transition);
  overflow: hidden;
  position: relative;
}

/* Removed hover effect for solid appearance */

.garment-card--configured {
  border-color: #404040;
  background: var(--v10-bg-primary);
}

.garment-card--selected {
  border-color: var(--v10-accent-primary);
  background: rgba(75, 85, 99, 0.08);
  box-shadow: var(--v10-shadow-md);
}

/* Garment Card Header */
.garment-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v10-space-4) var(--v10-space-5);
  background: var(--v10-bg-tertiary);
  border-bottom: 1px solid var(--v10-border-primary);
}

.garment-card__title {
  display: flex;
  align-items: center;
  gap: var(--v10-space-4);
  flex: 1;
}

.garment-card__number {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
}

.garment-card__status {
  display: flex;
  align-items: center;
}

.status-indicator {
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  font-size: var(--v10-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-indicator--incomplete {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-indicator--complete {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Garment Card Actions */
.garment-card__actions {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.garment-card__actions button {
  display: flex;
  align-items: center;
  gap: var(--v10-space-1);
  padding: var(--v10-space-2);
  background: transparent;
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  color: var(--v10-text-secondary);
  cursor: pointer;
  transition: var(--v10-transition);
  font-size: var(--v10-text-sm);
  /* Subtle grey shadow for depth */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.garment-card__actions button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.garment-card__finalize {
  background: var(--v10-accent-success) !important;
  color: white !important;
  border-color: var(--v10-accent-success) !important;
}

.garment-card__finalize:hover {
  background: #059669 !important;
  transform: translateY(-1px);
}

/* Garment Card Content (Form State) */
.garment-card__content {
  padding: var(--v10-space-5);
}

/* Form Layout: Garment Type (left) + Fabric Type (right) + Sample Type (below) */
.garment-fabric-split-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v10-space-4);
  margin-bottom: var(--v10-space-5);
}

/* Sample Type Section (Full Width Below) */
.sample-type-container {
  grid-column: 1 / -1;
  margin-top: var(--v10-space-4);
}

.sample-type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v10-space-3);
  margin-top: var(--v10-space-3);
}

/* Sample Type Selection Container - Side by Side Layout */
.sample-type-selection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v10-space-4);
  margin-top: var(--v10-space-3);
}

/* Compact Selection Sections */
.compact-selection-section {
  position: relative;
}

.selection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--v10-space-2);
}

.selection-header h5 {
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.selection-help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 1px solid var(--v10-border-primary);
  border-radius: 0;
  color: var(--v10-text-secondary);
  cursor: pointer;
  transition: var(--v10-transition);
}

.selection-help:hover {
  background: var(--v10-bg-hover);
  border-color: var(--v10-accent-primary);
  color: var(--v10-accent-primary);
}

/* Compact Selection Widget */
.compact-selection-widget {
  background: var(--v10-bg-card);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--v10-transition);
  position: relative;
}

.compact-selection-widget:hover {
  border-color: var(--v10-accent-primary);
  box-shadow: var(--v10-shadow-sm);
}

/* Selection Placeholder */
.selection-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v10-space-3) var(--v10-space-4);
  min-height: 50px;
}

.placeholder-icon {
  display: flex;
  align-items: center;
  color: var(--v10-text-muted);
}

.placeholder-text {
  flex: 1;
  margin-left: var(--v10-space-3);
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
}

.placeholder-arrow {
  color: var(--v10-text-muted);
  transition: var(--v10-transition);
}

/* Selection Display (when selected) - Centered and Clickable */
.selection-display {
  padding: var(--v10-space-3) var(--v10-space-4);
  border-bottom: 1px solid var(--v10-border-primary);
  cursor: pointer;
  transition: var(--v10-transition);
}

.selection-display:hover {
  background: var(--v10-bg-hover);
}

/* FIXED: Selection border around collapsed selection widgets when they have a selection */
.compact-selection-widget .selection-display[style*="block"] {
  border: 2px solid var(--v10-accent-primary);
  border-radius: var(--v10-radius-md);
}

.selected-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-3);
  margin-bottom: var(--v10-space-3);
}

.selected-icon {
  display: flex;
  align-items: center;
  color: var(--v10-accent-primary);
}

.selected-name {
  font-size: var(--v10-text-sm);
  font-weight: 500;
  color: var(--v10-text-primary);
}

.change-selection-btn {
  display: none;
}

/* Selection Expanded (dropdown) */
.selection-expanded {
  background: var(--v10-bg-card);
  border-top: 1px solid var(--v10-border-primary);
  max-height: 300px;
  overflow-y: auto;
  animation: expandDown 0.2s ease-out;
}

@keyframes expandDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 300px;
    opacity: 1;
  }
}

/* Compact Radio Grid */
.compact-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--v10-space-2);
  padding: var(--v10-space-3);
}

/* Compact Radio Cards */
.compact-radio-card {
  display: block;
  cursor: pointer;
}

.compact-radio-card input[type="radio"] {
  display: none;
}

.compact-radio-card__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-3);
  background: var(--v10-bg-secondary);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
  min-height: 50px;
  justify-content: center;
}

/* Enhanced specificity for garment and fabric type consistency */
#garment-type-grid .compact-radio-card__content,
#fabric-type-grid .compact-radio-card__content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--v10-space-2) !important;
  padding: var(--v10-space-3) !important;
  background: var(--v10-bg-secondary) !important;
  border: 2px solid var(--v10-border-primary) !important;
  border-radius: var(--v10-radius-md) !important;
  transition: var(--v10-transition) !important;
  min-height: 50px !important;
  text-align: center !important;
}

.compact-radio-card:hover .compact-radio-card__content {
  border-color: var(--v10-accent-primary);
  background: var(--v10-bg-hover);
  transform: translateY(-1px);
}

.compact-radio-card input[type="radio"]:checked + .compact-radio-card__content {
  border-color: var(--v10-accent-primary);
  background: rgba(75, 85, 99, 0.08);
  box-shadow: var(--v10-shadow-sm);
}

/* Enhanced specificity for garment and fabric type hover/selected states */
#garment-type-grid .compact-radio-card:hover .compact-radio-card__content,
#fabric-type-grid .compact-radio-card:hover .compact-radio-card__content,
[id*="garment-type"] .compact-radio-card:hover .compact-radio-card__content,
[class*="garment-type"] .compact-radio-card:hover .compact-radio-card__content {
  border-color: var(--v10-accent-primary) !important;
  background: var(--v10-bg-hover) !important;
  transform: translateY(-1px) !important;
  /* Glass morphism effect */
  backdrop-filter: blur(10px) !important;
  background: rgba(75, 85, 99, 0.15) !important;
}

#garment-type-grid .compact-radio-card input[type="radio"]:checked + .compact-radio-card__content,
#fabric-type-grid .compact-radio-card input[type="radio"]:checked + .compact-radio-card__content {
  border-color: var(--v10-accent-primary) !important;
  background: rgba(75, 85, 99, 0.08) !important;
  box-shadow: var(--v10-shadow-sm) !important;
}

/* FIXED: Selection styling for individual radio cards (stock/custom sample colors) */
.compact-radio-card--selected .compact-radio-card__content {
  border-color: var(--v10-accent-primary) !important;
  background: rgba(75, 85, 99, 0.08) !important;
  box-shadow: var(--v10-shadow-sm) !important;
}

.compact-radio-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v10-accent-primary);
}

.compact-radio-card__name {
  font-size: var(--v10-text-sm);
  font-weight: 500;
  color: var(--v10-text-primary);
  text-align: left;
  line-height: 1.3;
  flex: 1;
}

/* Enhanced specificity for garment and fabric type icon/name styling */
#garment-type-grid .compact-radio-card__icon,
#fabric-type-grid .compact-radio-card__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--v10-accent-primary) !important;
  flex-shrink: 0 !important;
}

#garment-type-grid .compact-radio-card__name,
#fabric-type-grid .compact-radio-card__name {
  font-size: var(--v10-text-sm) !important;
  font-weight: 500 !important;
  color: var(--v10-text-primary) !important;
  text-align: center !important;
  line-height: 1.3 !important;
  flex: 1 !important;
}

/* Garment Summary (Resume State) - Horizontal Layout */
.garment-card__summary {
  padding: var(--v10-space-4) var(--v10-space-5);
  background: var(--v10-bg-card);
  border-radius: var(--v10-radius-md);
}

.garment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v10-space-4);
}

.garment-summary__content {
  flex: 1;
}

.garment-summary__title {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  margin-bottom: var(--v10-space-2);
}

.garment-summary__type {
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.garment-summary__separator {
  color: var(--v10-text-muted);
}

.garment-summary__fabric {
  font-size: var(--v10-text-base);
  color: var(--v10-text-secondary);
}

.garment-summary__color-circle {
  width: 20px;
  height: 20px;
  border-radius: 0;
  border: 2px solid var(--v10-border-primary);
  flex-shrink: 0;
}

.garment-summary__color-name {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
}

.garment-summary__status {
  font-size: var(--v10-text-sm);
  color: var(--v10-accent-success);
  font-weight: 500;
}

.garment-summary__status--warning {
  color: var(--v10-accent-warning);
}

.garment-summary__edit-btn {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-2) var(--v10-space-3);
  background: transparent;
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  color: var(--v10-text-secondary);
  cursor: pointer;
  transition: var(--v10-transition);
  font-size: var(--v10-text-sm);
}

.garment-summary__edit-btn:hover {
  background: var(--v10-bg-hover);
  border-color: var(--v10-accent-primary);
  color: var(--v10-accent-primary);
  transform: translateY(-1px);
}

.garment-summary__edit-btn:active {
  transform: translateY(0);
}

/* Ensure edit button is visible when garment summary is visible */
.garment-card__summary[style*="block"] .garment-summary__edit-btn,
.garment-card__summary:not([style*="none"]) .garment-summary__edit-btn {
  display: flex !important;
}

/* Hide edit button when summary is hidden */
.garment-card__summary[style*="none"] .garment-summary__edit-btn {
  display: none !important;
}


/* ==============================================
   ENHANCED COMPACT SELECTION WIDGETS
   ============================================== */

/* Disabled compact selection sections */
.compact-selection-section--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.compact-selection-section--disabled .compact-selection-widget {
  cursor: not-allowed;
}

.compact-selection-section--disabled .placeholder-text::after {
  content: " (disabled)";
  color: var(--v10-text-muted);
  font-size: var(--v10-text-xs);
}

/* Selected state for sections */
.compact-selection-section.selected {
  position: relative;
}

.compact-selection-section.selected::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--v10-accent-primary);
  border-radius: calc(var(--v10-radius-md) + 2px);
  pointer-events: none;
}

/* Enhanced hover states */
.compact-selection-widget:not(.compact-selection-section--disabled):hover .placeholder-arrow {
  transform: rotate(180deg);
}

/* Loading state */
.compact-selection-widget--loading {
  position: relative;
  overflow: hidden;
}

.compact-selection-widget--loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Custom scrollbar for expanded selections */
.selection-expanded::-webkit-scrollbar {
  width: 4px;
}

.selection-expanded::-webkit-scrollbar-track {
  background: var(--v10-bg-secondary);
}

.selection-expanded::-webkit-scrollbar-thumb {
  background: var(--v10-border-primary);
  border-radius: 4px;
}

.selection-expanded::-webkit-scrollbar-thumb:hover {
  background: var(--v10-accent-primary);
}

/* Error state for selections */
.compact-selection-widget--error {
  border-color: var(--v10-accent-error);
  background: rgba(220, 38, 38, 0.05);
}

.compact-selection-widget--error .placeholder-text {
  color: var(--v10-accent-error);
}

/* ==============================================
   CUSTOM COLOR SECTION - SIMPLE BADGES ONLY
   ============================================== */

/* Simple badges for custom color options */
.sample-type-selection .compact-selection-section:last-child .compact-radio-card:first-child {
  position: relative;
}

.sample-type-selection .compact-selection-section:last-child .compact-radio-card:first-child::before {
  content: "COLOR STUDIO";
  position: absolute;
  top: -6px;
  right: -6px;
  background: #4338ca;
  color: white;
  font-size: 8px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  z-index: 10;
}

.sample-type-selection .compact-selection-section:last-child .compact-radio-card:last-child {
  position: relative;
}

.sample-type-selection .compact-selection-section:last-child .compact-radio-card:last-child::before {
  content: "TECHPACK";
  position: absolute;
  top: -6px;
  right: -6px;
  background: #f59e0b;
  color: white;
  font-size: 8px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  z-index: 10;
}

/* Warning text styling for TCX/TPX option */
.compact-radio-card__warning {
  font-size: var(--v10-text-xs);
  color: var(--v10-text-muted);
  font-style: italic;
  margin-top: var(--v10-space-1);
}

/* ==============================================
   CUSTOM COLOR RESTRICTION WARNING BOX
   ============================================== */
   
/* Orange warning box for custom color restrictions */
.v10-custom-color-restriction-warning {
  margin-top: var(--v10-space-4);
}

.v10-custom-color-restriction-warning .warning-box {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-4);
  color: var(--v10-text-primary);
}

.v10-custom-color-restriction-warning .warning-header {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  margin-bottom: var(--v10-space-3);
  color: #f59e0b;
  font-weight: 700;
}

.v10-custom-color-restriction-warning .warning-header svg {
  color: #f59e0b;
  flex-shrink: 0;
}

.v10-custom-color-restriction-warning .warning-content {
  font-size: var(--v10-text-sm);
  line-height: 1.5;
}

.v10-custom-color-restriction-warning .warning-content p {
  margin: 0 0 var(--v10-space-2) 0;
}

.v10-custom-color-restriction-warning .swatch-exception {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--v10-radius-sm);
  padding: var(--v10-space-3);
  font-size: var(--v10-text-xs);
  color: var(--v10-text-secondary);
}

/* Sample type pricing information styling */
.sample-type-pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-1);
  text-align: center;
  margin-top: var(--v10-space-2);
}

.sample-type-price {
  font-weight: 600;
  font-size: var(--v10-text-sm);
  color: var(--v10-accent-primary);
}

.sample-type-description {
  font-size: var(--v10-text-xs);
  color: var(--v10-text-secondary);
  line-height: 1.2;
}

/* Text container for multi-line radio button text */
.compact-radio-card__text-container {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-1);
}

/* ==============================================
   UI HIERARCHY IMPROVEMENTS
   ============================================== */

/* Consistent section backgrounds - both garment and fabric types identical */
.garment-fabric-split-container .compact-selection-section {
  /* Both Garment Type and Fabric Type - Same subtle blue tint */
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), rgba(59, 130, 246, 0.01));
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-4);
}

.sample-type-selection {
  /* Sample Type - Subtle orange tint */
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.02), rgba(245, 158, 11, 0.01));
  border: 1px solid rgba(245, 158, 11, 0.08);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  margin-top: var(--v10-space-6);
}

/* Enhanced section headers */
.selection-header h5 {
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
}

.selection-header h5::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--v10-accent-primary);
  border-radius: 1px;
}

/* Consistent header colors for both garment and fabric types */
.garment-fabric-split-container .compact-selection-section .selection-header h5::after {
  background: #3b82f6;
}

.sample-type-selection .selection-header h5::after {
  background: #f59e0b;
}

/* Card spacing improvements */
.compact-selection-widget {
  background: var(--v10-bg-card);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: var(--v10-transition);
  position: relative;
  margin-top: var(--v10-space-3);
}

/* Visual separation between major sections */
.sample-type-selection .compact-selection-section {
  position: relative;
}

.sample-type-selection .compact-selection-section:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--v10-border-primary), transparent);
}

/* ==============================================
   MOBILE-FIRST RESPONSIVE DESIGN
   ============================================== */

/* Base mobile styles (already applied above) */

/* Tablet styles */
@media (min-width: 768px) {
  .garment-fabric-split-container {
    grid-template-columns: 1fr 1fr;
    gap: var(--v10-space-4);
  }
  
  .sample-type-options,
  .sample-type-selection {
    grid-template-columns: 1fr 1fr;
  }
  
  .compact-radio-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* Mobile specific overrides */
@media (max-width: 767px) {
  /* Force single column for all form elements */
  .garment-fabric-split-container {
    grid-template-columns: 1fr;
    gap: var(--v10-space-3);
  }
  
  /* Keep sample type options side by side on mobile too, but with smaller gap */
  .sample-type-options,
  .sample-type-selection {
    grid-template-columns: 1fr 1fr;
    gap: var(--v10-space-2);
  }
  
  /* Larger touch targets */
  .compact-selection-widget {
    min-height: 60px;
  }
  
  .selection-placeholder {
    padding: var(--v10-space-4);
    min-height: 60px;
  }
  
  .compact-radio-card__content {
    min-height: 70px;
    padding: var(--v10-space-4);
  }
  
  .compact-radio-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--v10-space-2);
  }
  
  /* Garment card adjustments */
  .garment-card__header {
    padding: var(--v10-space-3) var(--v10-space-4);
    flex-direction: column;
    align-items: stretch;
    gap: var(--v10-space-3);
  }
  
  .garment-card__title {
    justify-content: space-between;
  }
  
  .garment-card__actions {
    justify-content: center;
    gap: var(--v10-space-1);
  }
  
  .garment-card__actions button {
    flex: 1;
    justify-content: center;
    padding: var(--v10-space-2) var(--v10-space-3);
  }
  
  .garment-card__content {
    padding: var(--v10-space-4);
  }
  
  /* Summary adjustments */
  .garment-summary {
    flex-direction: column;
    align-items: stretch;
    gap: var(--v10-space-3);
  }
  
  .garment-summary__title {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--v10-space-2);
  }
  
  .garment-summary__edit-btn {
    align-self: center;
    width: 100%;
    justify-content: center;
  }
  
  /* Selection headers */
  .selection-header {
    margin-bottom: var(--v10-space-3);
  }
  
  .selection-header h5 {
    font-size: var(--v10-text-base);
  }
  
  /* Expanded selections full width */
  .selection-expanded {
    max-height: 250px;
  }
  
}

/* Extra small devices */
@media (max-width: 480px) {
  .garment-card {
    margin: 0 calc(-1 * var(--v10-space-2));
  }
  
  .compact-radio-grid {
    grid-template-columns: 1fr;
  }
  
  .sample-type-options,
  .sample-type-selection {
    grid-template-columns: 1fr 1fr;
    gap: var(--v10-space-2);
  }
  
  .garment-card__actions button {
    font-size: var(--v10-text-xs);
    padding: var(--v10-space-2);
  }
  
  .garment-card__actions button span {
    display: none;
  }
  
  .garment-card__actions button svg {
    margin: 0;
  }
}

/* Enhanced accessibility */
@media (prefers-reduced-motion: reduce) {
  .compact-selection-widget,
  .compact-radio-card__content,
  .placeholder-arrow {
    transition: none !important;
  }
  
  .selection-expanded {
    animation: none !important;
  }
  
  .compact-selection-widget--loading::after {
    animation: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .compact-selection-widget {
    border-width: 3px;
  }
  
  .compact-radio-card__content {
    border-width: 3px;
  }
  
  .status-indicator {
    border-width: 2px;
  }
  
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.awaiting-input {
  border-color: var(--v10-accent-warning);
  background: var(--v10-bg-warning);
}

.design-complete {
  border-color: var(--v10-accent-success);
  background: rgba(16, 185, 129, 0.05);
}

.clickable-design {
  cursor: pointer;
}

.clickable-design:hover {
  transform: translateY(-1px);
  box-shadow: var(--v10-shadow-md);
}

/* Help buttons */
.techpack-help-btn {
  padding: var(--v10-space-2) var(--v10-space-3);
  background: #3a3a3a; /* Slightly lighter than var(--v10-bg-secondary) for better visibility */
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  color: var(--v10-text-muted);
  font-size: var(--v10-text-sm);
  cursor: pointer;
  transition: var(--v10-transition);
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.techpack-help-btn:hover {
  color: var(--v10-text-primary);
  border-color: var(--v10-accent-primary);
}

.techpack-help-btn--primary {
  background: var(--v10-accent-primary);
  color: white;
  border-color: var(--v10-accent-primary);
}

.techpack-help-btn--secondary {
  background: #3a3a3a; /* Slightly lighter than var(--v10-bg-card) for better visibility */
  color: var(--v10-text-secondary);
}

/* Landing page specific components */
.v10-app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--v10-space-4); /* Reduced padding to prevent white space */
}

/* Unified entrance container with dark dark grey background */
.v10-entrance-unified {
  background: #1a1a1a; /* Dark dark grey for app container */
  border-radius: 12px;
  padding: 4rem 3rem; /* Back to original spacing */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  position: relative;
  width: 100%; /* Ensure it doesn't exceed container width */
  box-sizing: border-box; /* Include padding in width calculation */
}

.v10-header-section {
  margin-bottom: 5rem; /* Back to original spacing */
}

.v10-unified-header-box {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: var(--v10-space-4);
  padding: var(--v10-space-6);
  background: rgba(255, 255, 255, 0.05); /* Subtle background for header area */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--v10-radius-lg);
  margin-bottom: 3rem; /* Back to original spacing */
  backdrop-filter: blur(10px);
}

.v10-header-content-wrapper {
  text-align: center;
  justify-self: center;
}


.v10-download-new {
  justify-self: start;
  display: flex;
  align-items: center;
}

.v10-theme-toggle-unified {
  justify-self: end;
  display: flex;
  align-items: center;
}


/* New Download Button - Matches ACCESS STUDIO styling with original dimensions */
.v10-download-new .v10-btn-download-new {
  position: relative !important;
  background: #3a3a3a !important; /* Slightly lighter than var(--v10-bg-secondary) for better visibility */
  color: var(--v10-text-primary) !important;
  border: 1px solid var(--v10-border-primary) !important;
  border-radius: var(--v10-radius-md) !important;
  padding: var(--v10-space-3) var(--v10-space-4) !important; /* Original download button size */
  font-size: var(--v10-text-sm) !important; /* Original download button font size */
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--v10-transition) !important;
  overflow: hidden !important;
  box-shadow: var(--v10-shadow-sm) !important;
  text-transform: none !important; /* No uppercase for download button */
  letter-spacing: normal !important;
  text-align: center !important;
}

.v10-download-new .v10-btn-download-new:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--v10-shadow-md) !important;
  background: #333333 !important; /* Slightly darker than base for hover effect but still visible */
  color: var(--v10-text-primary) !important;
  border-color: var(--v10-accent-primary) !important;
}

.v10-download-new .v10-btn-download-new .v10-btn-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--v10-space-2) !important;
  position: relative !important;
  z-index: 2 !important;
}

.v10-download-new .v10-btn-download-new .v10-btn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.v10-download-new .v10-btn-download-new .v10-btn-text {
  white-space: nowrap !important;
  font-weight: 500 !important;
}

/* Button effects - same as ACCESS STUDIO */
.v10-download-new .v10-btn-download-new .v10-btn-particles,
.v10-download-new .v10-btn-download-new .v10-btn-glow {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Title Styles */
.v10-title-spectacular {
  font-size: var(--v10-text-3xl);
  font-weight: 700;
  color: var(--v10-text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.v10-header-description {
  background: transparent; /* Remove background */
  border-radius: 0;
  padding: var(--v10-space-4) 0;
  text-align: center;
  border: none; /* Remove border */
  margin-bottom: 2rem;
}

.v10-header-description p {
  color: #e5e5e5; /* Light text color for contrast */
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 auto 1rem;
  max-width: 800px; /* Limit width for better readability */
  opacity: 0.9;
}

.v10-actions-section {
  margin: 4rem 0; /* Back to original spacing */
  text-align: center;
  padding: 2rem 0; /* Back to original spacing */
}

.v10-btn-access-studio {
  position: relative;
  background: #3a3a3a; /* Slightly lighter than var(--v10-bg-secondary) for better visibility */
  color: var(--v10-text-primary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: calc(var(--v10-space-4) * 2.4) calc(var(--v10-space-8) * 8); /* 40% less height: x2.4 height, x8 width */
  font-size: calc(var(--v10-text-base) * 2); /* Double the font size */
  font-weight: 600;
  cursor: pointer;
  transition: var(--v10-transition);
  overflow: hidden;
  box-shadow: var(--v10-shadow-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center; /* Ensure text centering */
}

.v10-btn-access-studio:hover {
  transform: translateY(-1px);
  box-shadow: var(--v10-shadow-md);
  background: #333333; /* Slightly darker than base for hover effect but still visible */
  color: var(--v10-text-primary);
  border-color: var(--v10-accent-primary);
}

.v10-btn-inner {
  display: flex;
  align-items: center;
  gap: var(--v10-space-4);
}

.v10-btn-icon {
  width: 28px;
  height: 28px;
}

.v10-btn-text {
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Requirements section */
.v10-requirements-section {
  margin: 5rem 0 3rem; /* Back to original spacing */
  padding-top: 2rem; /* Back to original spacing */
}

.v10-requirements-header {
  text-align: center;
  margin-bottom: var(--v10-space-8);
}

.v10-section-title {
  font-size: var(--v10-text-2xl);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0 0 var(--v10-space-2) 0;
}

.v10-section-subtitle {
  font-size: var(--v10-text-base);
  color: var(--v10-text-secondary);
  margin: 0;
}

.v10-requirements-grid-premium {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem; /* Back to original gap */
  margin-top: 3rem; /* Back to original space above the grid */
}

.v10-requirement-card-premium {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-6);
  transition: var(--v10-transition);
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  text-align: center;
  backdrop-filter: blur(5px);
}

.v10-requirement-card-premium:hover {
  transform: translateY(-2px);
  box-shadow: var(--v10-shadow-lg);
  border-color: var(--v10-accent-primary);
}

.v10-requirement-icon-premium {
  width: 48px;
  height: 48px;
  background: var(--v10-bg-secondary);
  border-radius: var(--v10-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v10-accent-primary);
  margin: 0 auto var(--v10-space-4);
}

.v10-requirement-content-premium {
  flex: 1;
  margin-bottom: var(--v10-space-4);
}

.v10-requirement-title-premium {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0 0 var(--v10-space-2) 0;
}

.v10-requirement-description-premium {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--v10-space-3) 0;
}

.v10-requirement-formats-premium {
  font-size: var(--v10-text-xs);
  color: var(--v10-text-muted);
  font-weight: 500;
  background: var(--v10-bg-secondary);
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  display: inline-block;
}

.v10-status-badge-premium {
  align-self: center;
  font-size: var(--v10-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  border: 1px solid;
  margin-top: auto;
}

.v10-status-badge-premium--required {
  background: rgba(220, 38, 38, 0.1);
  color: var(--v10-accent-error);
  border-color: rgba(220, 38, 38, 0.2);
}

.v10-status-badge-premium--optional {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.2);
}

.v10-status-badge-premium--assisted {
  background: rgba(16, 185, 129, 0.1);
  color: var(--v10-accent-success);
  border-color: rgba(16, 185, 129, 0.2);
}

/* ==============================================
   REVIEW SYSTEM
   ============================================== */

.review-garments-grid {
  display: grid;
  gap: var(--v10-space-4);
  margin: var(--v10-space-6) 0;
}

.review-garment-card {
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  transition: var(--v10-transition);
}

.review-garment-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--v10-space-4);
}

.review-garment-card__main {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  flex: 1;
}

.review-garment-card__visual {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.review-garment-card__info {
  flex: 1;
}

.review-garment-card__title {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  margin-bottom: var(--v10-space-1);
}

.review-garment-card__color-name {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
}

.review-garment-card__status {
  align-self: flex-start;
}

.review-garment-card__content {
  margin-top: var(--v10-space-4);
  padding-top: var(--v10-space-4);
  border-top: 1px solid var(--v10-border-primary);
}

.review-garment-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--v10-space-2) 0;
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  border-bottom: 1px solid var(--v10-border-secondary);
}

.review-garment-detail:last-child {
  border-bottom: none;
}

/* ==============================================
   STEP 4 REVIEW - MISSING CLASSES & ENHANCEMENTS
   ============================================== */

/* Top Summary Cards Grid (3-column layout) */
.review-summary-grid--top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--v10-space-6);
  margin-bottom: var(--v10-space-8);
}

/* Review Cards - Clean V10 Style */
.review-card {
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  box-shadow: var(--v10-shadow-sm);
  overflow: hidden;
  transition: all 0.2s ease;
}

.review-card:hover {
  box-shadow: var(--v10-shadow-md);
  border-color: var(--v10-border-focus);
}

.review-card__header {
  padding: var(--v10-space-4) var(--v10-space-5);
  background: var(--v10-bg-secondary);
  border-bottom: 1px solid var(--v10-border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-card__title {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.review-card__title svg {
  color: var(--v10-text-secondary);
}

.review-card__edit {
  background: none;
  border: 1px solid var(--v10-border-primary);
  color: var(--v10-text-secondary);
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  font-size: var(--v10-text-xs);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--v10-space-1);
}

.review-card__edit:hover {
  background: var(--v10-bg-hover);
  border-color: var(--v10-accent-primary);
  color: var(--v10-accent-primary);
}

.review-card__content {
  padding: var(--v10-space-5);
  min-height: 100px;
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-sm);
}

/* Detail Sections */
.review-details {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-6);
}

.review-detail-section {
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  box-shadow: var(--v10-shadow-sm);
  overflow: hidden;
}

.review-detail-section__header {
  padding: var(--v10-space-5) var(--v10-space-6);
  background: var(--v10-bg-secondary);
  border-bottom: 1px solid var(--v10-border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-detail-section__title {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.review-detail-section__title h3 {
  margin: 0;
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.review-detail-section__title svg {
  color: var(--v10-text-secondary);
}

.review-detail-section__edit {
  background: none;
  border: 1px solid var(--v10-border-primary);
  color: var(--v10-text-secondary);
  padding: var(--v10-space-2) var(--v10-space-3);
  border-radius: var(--v10-radius-sm);
  font-size: var(--v10-text-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--v10-space-1);
}

.review-detail-section__edit:hover {
  background: var(--v10-bg-hover);
  border-color: var(--v10-accent-primary);
  color: var(--v10-accent-primary);
}

.review-detail-section__content {
  padding: var(--v10-space-6);
}

/* Cost Summary - Subtle Styling */
.review-detail-section--cost {
  border-color: var(--v10-accent-success);
}

.review-detail-section--cost .review-detail-section__header {
  background: rgba(34, 197, 94, 0.05);
  border-bottom-color: rgba(34, 197, 94, 0.1);
}

.cost-summary-header-actions {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
}

.currency-toggle {
  display: flex;
  background: var(--v10-bg-input);
  border-radius: var(--v10-radius-sm);
  padding: var(--v10-space-1);
  border: 1px solid var(--v10-border-primary);
}

.v10-currency-btn {
  background: transparent;
  border: none;
  color: var(--v10-text-tertiary);
  padding: var(--v10-space-2) var(--v10-space-3);
  border-radius: var(--v10-radius-sm);
  font-size: var(--v10-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 36px;
}

.v10-currency-btn:hover {
  background: var(--v10-bg-hover);
  color: var(--v10-text-secondary);
}

.v10-currency-btn--active {
  background: var(--v10-bg-secondary);
  color: var(--v10-text-primary);
  box-shadow: var(--v10-shadow-sm);
}
}

.currency-btn {
  background: none;
  border: none;
  color: var(--v10-text-secondary);
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-xs);
  font-size: var(--v10-text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.currency-btn--active,
.currency-btn:hover {
  background: var(--v10-accent-primary);
  color: var(--v10-text-primary);
}

.cost-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-2);
}

.cost-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--v10-space-3) var(--v10-space-4);
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: var(--v10-radius-md);
  margin-top: var(--v10-space-4);
}

.cost-total__label {
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.cost-total__value {
  font-size: var(--v10-text-lg);
  font-weight: 700;
  color: var(--v10-accent-success);
}

/* Submit Section */
.review-detail-section--submit {
  border-color: var(--v10-accent-primary);
}

.review-detail-section--submit .review-detail-section__header {
  background: rgba(163, 163, 163, 0.05);
}

/* Three Button Layout */
.v10-step-actions--three-button {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--v10-space-4);
  align-items: center;
  margin-top: var(--v10-space-6);
}

.v10-step-actions--three-button .v10-btn:first-child {
  justify-self: start;
}

.v10-step-actions--three-button .v10-btn:nth-child(2) {
  justify-self: center;
}

.v10-step-actions--three-button .v10-btn:last-child {
  justify-self: end;
}

/* Terms Agreement */
.terms-agreement {
  margin: var(--v10-space-5) 0;
  padding: var(--v10-space-4);
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-2);
  cursor: pointer;
  font-size: var(--v10-text-sm);
  line-height: 1.5;
}

.terms-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--v10-accent-primary);
}

.terms-text a {
  color: var(--v10-accent-primary);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.terms-text a:hover {
  color: var(--v10-accent-secondary);
}

/* Submit Message */
.submit-message {
  padding: var(--v10-space-4);
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  margin-bottom: var(--v10-space-5);
  font-size: var(--v10-text-sm);
  line-height: 1.5;
  color: var(--v10-text-secondary);
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 768px) {
  .v10-studio-card {
    padding: var(--v10-space-4);
    margin-bottom: var(--v10-space-4);
  }
  
  .v10-file-header {
    flex-direction: row;
    align-items: center;
    gap: var(--v10-space-2);
  }
  
  .v10-measurement-item {
    padding: var(--v10-space-3);
    gap: var(--v10-space-2);
  }
  
  .studio-tabs {
    flex-direction: row;
    gap: var(--v10-space-2);
    flex-wrap: wrap;
  }
  
  .studio-tab {
    padding: var(--v10-space-3) var(--v10-space-4);
  }
  
  .garments-grid {
    grid-template-columns: 1fr;
    gap: var(--v10-space-4);
  }
  
  .compact-radio-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--v10-space-2);
  }
  
  .review-garment-card__header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--v10-space-3);
  }

  /* Step 4 Review Mobile Responsive */
  .review-summary-grid--top {
    grid-template-columns: 1fr;
    gap: var(--v10-space-4);
    margin-bottom: var(--v10-space-6);
  }

  .review-card__header,
  .review-detail-section__header {
    padding: var(--v10-space-3) var(--v10-space-4);
  }

  .review-card__content,
  .review-detail-section__content {
    padding: var(--v10-space-4);
  }

  .v10-step-actions--three-button {
    grid-template-columns: 1fr;
    gap: var(--v10-space-3);
  }

  .v10-step-actions--three-button .v10-btn {
    justify-self: stretch;
    width: 100%;
  }

  .cost-summary-header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--v10-space-2);
  }

  .currency-toggle {
    align-self: center;
  }
  
  /* Landing page mobile fixes */
  .v10-entrance-unified {
    padding: 2rem 1.5rem; /* Back to original for mobile */
    border-radius: 8px;
  }
  
  .v10-unified-header-box {
    grid-template-columns: auto 1fr auto;
    gap: var(--v10-space-2);
    padding: var(--v10-space-4);
  }
  
  .v10-title-spectacular {
    font-size: var(--v10-text-xl);
    line-height: 1.2;
    word-break: break-word;
  }
  
  /* Mobile: Download button shows icon only */
  .v10-download-new .v10-btn-download-new .v10-btn-text {
    display: none !important;
  }
  
  .v10-download-new .v10-btn-download-new {
    padding: var(--v10-space-2) !important;
    min-width: 40px !important;
    justify-content: center !important;
  }
  
  .v10-requirements-grid-premium {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v10-space-4);
  }
  
  .v10-requirement-card-premium {
    padding: var(--v10-space-4);
  }
  
  .v10-actions-section {
    margin: var(--v10-space-6) 0;
  }
  
  .v10-requirements-section {
    margin: var(--v10-space-12) 0;
  }
}

/* 
===========================================
DESIGN STUDIO SYSTEM - LAB DIPS
===========================================
*/

/* Design Mode Containers */
.design-mode {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.design-mode--active {
  display: block;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Color Studio Layout */
.color-studio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v10-space-6);
  align-items: start;
}

/* Design Studio Layout */
.design-studio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v10-space-6);
  align-items: start;
}

/* Color Selection Area */
.color-selection-area {
  background: #1a1a1a;
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-6);
}

.color-selection-header h4 {
  margin: 0 0 var(--v10-space-4) 0;
  color: var(--v10-text-primary);
  font-size: 1.125rem;
  font-weight: 600;
}

/* Collection Containers */
.labdips-collection,
.designs-collection {
  background: #1a1a1a;
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-6);
}

/* Desktop Only: Equal Height for Color Selection and Lab Dips Collection */
@media (min-width: 769px) {
  .color-studio {
    align-items: stretch;
  }
}

.collection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-4);
}

.collection-header h4 {
  margin: 0;
  color: var(--v10-text-primary);
  font-size: 1.125rem;
  font-weight: 600;
}

.collection-count {
  color: var(--v10-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Collection Empty State */
.collection-empty,
.garments-colors-empty {
  text-align: center;
  padding: var(--v10-space-8) var(--v10-space-4);
  color: var(--v10-text-muted);
}

.collection-empty .empty-icon,
.garments-colors-empty .empty-icon {
  margin-bottom: var(--v10-space-3);
  opacity: 0.5;
}

.collection-empty h5,
.garments-colors-empty h5 {
  margin: 0 0 var(--v10-space-2) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--v10-text-secondary);
}

.collection-empty p,
.garments-colors-empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* 
===========================================
COLOR PICKER & DESIGN FORM COMPONENTS
===========================================
*/

/* Color Picker Section */
.color-picker-section {
  margin-bottom: var(--v10-space-6);
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: var(--v10-space-4);
  margin-bottom: var(--v10-space-4);
}

.color-picker-left {
  flex: 0 0 auto;
}

.pantone-display-right {
  flex: 1;
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  margin-bottom: var(--v10-space-3);
}

.color-picker-input {
  width: 60px;
  height: 60px;
  border-radius: var(--v10-radius-md);
  border: 2px solid var(--v10-border-primary);
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}

.color-picker-input::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
  border-radius: var(--v10-radius-md);
}

.color-picker-input::-webkit-color-swatch {
  border: none;
  border-radius: var(--v10-radius-md);
}

.color-picker-preview {
  width: 60px;
  height: 60px;
  border-radius: var(--v10-radius-md);
  border: 2px solid var(--v10-border-primary);
  background: var(--v10-bg-secondary);
}

.pantone-code-input {
  margin-bottom: var(--v10-space-4);
}

.pantone-input {
  width: 100%;
  padding: var(--v10-space-3);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  background: var(--v10-bg-primary);
  color: var(--v10-text-primary);
  font-size: 0.875rem;
}

/* Popular Colors Grid */
.popular-colors-section {
  margin-bottom: var(--v10-space-4);
  width: 100%;
}

.popular-colors-section h5 {
  margin: 0 0 var(--v10-space-3) 0;
  color: var(--v10-text-primary);
  font-size: 1rem;
  font-weight: 600;
}

.popular-colors-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: var(--v10-space-2);
  width: 100%;
}

.popular-color-circle {
  display: block;
  width: 45px;
  height: 32px;
  border-radius: var(--v10-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: var(--v10-shadow-sm);
  justify-self: center;
  align-self: center;
  visibility: visible;
  border: 2px solid var(--v10-border-primary);
}

.popular-color-circle:hover {
  transform: translateY(-2px);
  box-shadow: var(--v10-shadow-hover);
  border-color: var(--v10-accent-primary);
}

.popular-color {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v10-space-1);
  padding: var(--v10-space-2);
  border-radius: var(--v10-radius-md);
  cursor: pointer;
  transition: var(--v10-transition);
}

.popular-color__name {
  font-size: 0.75rem;
  color: var(--v10-text-muted);
  text-align: center;
}

/* Auto Pantone Display */
.auto-pantone-display {
  margin-bottom: var(--v10-space-4);
  padding: var(--v10-space-4);
  background: var(--v10-bg-secondary);
  border-radius: var(--v10-radius-md);
  border: 1px solid var(--v10-border-secondary);
}

.pantone-result {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
}

.pantone-circle {
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 2px solid var(--v10-border-primary);
}

.pantone-info {
  flex: 1;
}

.pantone-code {
  font-weight: 600;
  color: var(--v10-text-primary);
  font-size: 0.875rem;
  margin-bottom: var(--v10-space-1);
}

.pantone-note {
  font-size: 0.75rem;
  color: var(--v10-text-muted);
}

/* Mobile pantone display formatting - split name and code into separate lines */
@media (max-width: 768px) {
  .pantone-code {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  
  .pantone-code::before {
    content: attr(data-color-name);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--v10-text-primary);
    margin-bottom: 2px;
  }
  
  .pantone-code::after {
    content: attr(data-pantone-code);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--v10-text-secondary);
  }
  
  /* Hide the original text content on mobile when using data attributes */
  .pantone-code[data-color-name][data-pantone-code] {
    font-size: 0;
  }
  
  /* Hide "automatically" word from tip text on mobile to fix overflow */
  .collection-tip .mobile-hide-auto {
    display: none !important;
  }
}

/* Lab Dip Color Indicators */
.garment-labdip-indicators {
  display: flex;
  align-items: center;
  gap: var(--v10-space-1);
  margin-top: var(--v10-space-2);
}

.labdip-color-circle {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: help;
  transition: transform 0.2s ease;
  position: relative;
}

.labdip-color-circle:hover {
  transform: scale(1.2);
  z-index: 1;
}

/* Tooltip for lab dip colors */
.labdip-color-circle[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 5px;
  padding: 4px 8px;
  background: var(--v10-bg-primary);
  color: var(--v10-text-primary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-sm);
  font-size: var(--v10-text-xs);
  white-space: nowrap;
  box-shadow: var(--v10-shadow-md);
  z-index: 10;
  pointer-events: none;
}

.labdip-more-indicator {
  padding: 2px 6px;
  background: var(--v10-bg-tertiary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-sm);
  font-size: var(--v10-text-xs);
  font-weight: 600;
  color: var(--v10-text-secondary);
}

/* Action Buttons */
.add-labdip-actions,
.add-design-actions {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-2);
}

/* Center single button layout for design actions */
.add-design-actions {
  align-items: center;
  text-align: center;
}

.add-fabric-swatch-btn,
.add-fabric-design-btn,
.add-to-garment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-3) var(--v10-space-4);
  background: var(--v10-accent-primary);
  border: 1px solid var(--v10-accent-primary);
  border-radius: var(--v10-radius-md);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--v10-transition);
  min-width: 280px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.add-fabric-swatch-btn:hover,
.add-fabric-design-btn:hover,
.add-to-garment-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.add-fabric-design-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Design Input Area - Match Lab Dips Styling */
.design-input-area {
  background: #1a1a1a;
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-6);
}

.design-input-header h4 {
  margin: 0 0 var(--v10-space-4) 0;
  color: var(--v10-text-primary);
  font-size: 1.125rem;
  font-weight: 600;
}

/* Design Form Styling */
.design-form-row {
  display: grid;
  grid-template-columns: 1.03fr 0.485fr 0.485fr;
  gap: var(--v10-space-4);
  margin-top: var(--v10-space-5);
  margin-bottom: var(--v10-space-4);
}

.design-form-group {
  flex: 1;
}

.design-form-label {
  display: block;
  margin-bottom: var(--v10-space-2);
  color: var(--v10-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
}

.design-form-input {
  width: 100%;
  padding: var(--v10-space-3);
  background: var(--v10-bg-input);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-sm);
  color: var(--v10-text-primary);
  font-size: 0.875rem;
  transition: var(--v10-transition);
}

.design-form-input:focus {
  outline: none;
  border-color: var(--v10-accent-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.design-form-input::placeholder {
  color: var(--v10-text-secondary);
}

/* Design Type Selection - Match Lab Dips Color Picker */
.design-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--v10-space-3);
}

.design-type-option {
  cursor: pointer;
}

.design-type-option input[type="radio"] {
  display: none;
}

.design-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-4);
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
}

.design-type-option:hover .design-type-card {
  border-color: var(--v10-accent-primary);
  background: var(--v10-bg-hover);
}

.design-type-option input[type="radio"]:checked + .design-type-card {
  border-color: var(--v10-accent-primary);
  background: var(--v10-accent-primary);
  color: white;
}

.design-type-icon {
  font-size: 1.25rem;
}

.design-type-name {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}

/* File Upload Area - Match Lab Dips Theme */
.file-upload-area {
  border: 2px dashed var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-6);
  text-align: center;
  cursor: pointer;
  transition: var(--v10-transition);
  background: var(--v10-bg-card);
}

.file-upload-area:hover {
  border-color: var(--v10-accent-primary);
  background: var(--v10-bg-hover);
}

.file-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v10-space-2);
}

.file-upload-content svg {
  color: var(--v10-text-secondary);
}

.file-upload-content span {
  color: var(--v10-text-primary);
  font-size: 0.875rem;
  font-weight: 500;
}

.file-upload-content small {
  color: var(--v10-text-secondary);
  font-size: 0.75rem;
}

/* Add Design Actions */
.add-design-actions {
  margin-top: var(--v10-space-4);
  display: flex;
  justify-content: center;
}

/* Garments with Colorways Assigned Section */
.garment-assignments-overview {
  margin-top: var(--v10-space-8);
  background: #1a1a1a;
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-6);
}

.assignments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-6);
  padding-bottom: var(--v10-space-4);
  border-bottom: 1px solid var(--v10-border-primary);
}

.assignments-title {
  margin: 0;
  color: var(--v10-text-primary);
  font-size: 1.25rem;
  font-weight: 600;
}

.assignments-count {
  color: var(--v10-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: var(--v10-space-1) var(--v10-space-3);
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-sm);
}

/* Assignments Grid */
.assignments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--v10-space-4);
}

.assignment-item {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4);
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
}

.assignment-item:hover {
  border-color: var(--v10-accent-primary);
  background: var(--v10-bg-hover);
}

.assignment-item__garment {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-1);
}

.assignment-item__garment-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v10-text-primary);
}

.assignment-item__garment-type {
  font-size: 0.75rem;
  color: var(--v10-text-secondary);
}

.assignment-item__colors {
  display: flex;
  gap: var(--v10-space-2);
  margin-left: auto;
}

.assignment-item__color-chip {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 2px solid var(--v10-border-primary);
  position: relative;
}

.assignment-item__color-chip:hover::after {
  content: attr(data-color-name);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--v10-bg-tooltip);
  color: var(--v10-text-primary);
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 10;
}

/* Empty State */
.assignments-empty {
  text-align: center;
  padding: var(--v10-space-8) var(--v10-space-4);
  color: var(--v10-text-secondary);
}

.assignments-empty .empty-icon {
  margin-bottom: var(--v10-space-4);
  opacity: 0.5;
}

.assignments-empty h4 {
  margin: 0 0 var(--v10-space-2) 0;
  color: var(--v10-text-primary);
  font-size: 1.125rem;
  font-weight: 600;
}

.assignments-empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* Responsive design for smaller screens */
@media (max-width: 480px) {
  .add-fabric-swatch-btn,
  .add-fabric-design-btn {
    min-width: 100%;
    font-size: 0.8rem;
    padding: var(--v10-space-2) var(--v10-space-3);
  }
}

/* Collection Grid - Full Width Single Column */
.collection-grid {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-3);
  margin-bottom: var(--v10-space-6);
}

.collection-item {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-4);
  transition: var(--v10-transition);
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--v10-space-4);
}

.collection-item:hover {
  background: var(--v10-bg-hover);
  border-color: var(--v10-accent-primary);
}

.collection-item__visual {
  display: flex;
  align-items: center;
  margin-bottom: var(--v10-space-3);
}

.collection-item__color {
  width: 40px;
  height: 40px;
  border-radius: 0;
  border: 2px solid var(--v10-border-primary);
}

/* Design sample icon styling to match lab dip color circle */
.collection-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--v10-accent-primary);
  color: white;
  border-radius: 0;
  border: 2px solid var(--v10-border-primary);
}

.collection-item__info {
  flex: 1;
}

.collection-item__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.collection-item__name {
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: 2px;
}

.collection-item__type {
  font-size: 0.75rem;
  color: var(--v10-text-muted);
  text-transform: uppercase;
  font-weight: 500;
}

.collection-item__measurements {
  font-size: 0.7rem;
  color: var(--v10-color-accent);
  font-weight: 500;
  margin-top: 2px;
}

.collection-item__code {
  font-size: 0.75rem;
  color: var(--v10-text-muted);
}

.collection-item__actions {
  display: flex;
  gap: var(--v10-space-2);
  margin-left: auto;
}

.collection-item__btn {
  padding: var(--v10-space-1) var(--v10-space-2);
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-sm);
  color: var(--v10-text-secondary);
  cursor: pointer;
  transition: var(--v10-transition);
}

.collection-item__btn:hover {
  background: var(--v10-accent-primary);
  border-color: var(--v10-accent-primary);
  color: white;
}

/* Collection Item Action Buttons (+ and ×) */
.collection-item__assign,
.collection-item__remove {
  border-radius: var(--v10-radius-sm);
  border: 1px solid var(--v10-border-primary);
  background: transparent;
  color: var(--v10-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--v10-transition);
  font-size: 0.75rem;
  font-weight: 500;
}

.collection-item__assign {
  padding: var(--v10-space-1) var(--v10-space-2);
  white-space: nowrap;
}

.collection-item__remove {
  width: 28px;
  height: 28px;
  padding: 0;
}

.collection-item__assign:hover {
  background: #3a3a3a; /* Lighter for better visibility */
  border-color: #4a4a4a;
  color: var(--v10-text-primary);
  transform: translateY(-1px);
}

/* Hide assign button from design sample collection items */
#designs-grid .collection-item__assign {
  display: none;
}

.collection-item__remove:hover {
  background: #3a3a3a; /* Lighter for better visibility */
  border-color: #ef4444;
  color: #ef4444;
  transform: translateY(-1px);
}

/* Sample Type Badges for Modal - Modern Required/Optional Style */
.sample-type-badge {
  padding: 4px 8px;
  border-radius: var(--v10-radius-md);
  align-self: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  align-self: flex-start;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 2px solid;
}

.sample-type-badge--stock {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border-color: #047857;
}

.sample-type-badge--techpack {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: white;
  border-color: #1d4ed8;
}

.sample-type-badge--complete {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border-color: #15803d;
}

.sample-type-badge--custom {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  border-color: #6d28d9;
}

.sample-type-badge--missing {
  background: linear-gradient(135deg, #64748b, #475569);
  color: white;
  border-color: #334155;
}

/* Lab Dip Color Indicators */
.garment-labdip-indicators {
  display: flex;
  align-items: center;
  gap: var(--v10-space-1);
  margin-top: var(--v10-space-2);
}

.labdip-color-circle {
  width: 12px;
  height: 12px;
  border-radius: 0;
  border: 1px solid var(--v10-border-primary);
  display: inline-block;
}

.labdip-more-indicator {
  font-size: 10px;
  color: var(--v10-text-secondary);
  font-weight: 600;
}

/* Garment Selector Modal Layout */
.garment-selector {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-3);
}

.garment-selector__option {
  display: block;
  position: relative;
  cursor: pointer;
}

.garment-selector__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.garment-selector__card {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  padding: var(--v10-space-4);
  background: var(--v10-bg-secondary);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
  width: 100%;
}

/* Removed hover effect for solid appearance */

.garment-selector__option input[type="radio"]:checked + .garment-selector__card {
  border-color: var(--v10-accent-primary);
  background: var(--v10-accent-light);
}

.garment-selector__option--disabled .garment-selector__card {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--v10-bg-disabled);
}

.garment-selector__title {
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: 2px;
}

.garment-selector__details {
  font-size: 0.875rem;
  color: var(--v10-text-secondary);
  flex: 1;
}

.garment-selector-empty {
  text-align: center;
  padding: var(--v10-space-8);
  color: var(--v10-text-secondary);
}

.garment-selector-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--v10-space-4);
}

.garment-selector-empty h4 {
  margin: 0 0 var(--v10-space-2) 0;
  color: var(--v10-text-primary);
}

/* Garments with Applied Colors Section */
.garments-with-colors-section {
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-6);
  margin-bottom: var(--v10-space-6);
}

.garments-colors-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-4);
}

.garments-colors-header h4 {
  margin: 0;
  color: var(--v10-text-primary);
  font-size: 1.125rem;
  font-weight: 600;
}

.garments-colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--v10-space-4);
}

.garment-with-color-item {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-4);
  transition: var(--v10-transition);
}

/* Removed hover effect for solid appearance */

.garment-color-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--v10-space-3);
}

.garment-color-info {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.garment-color-circle {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 2px solid var(--v10-border-primary);
}

.garment-color-name {
  font-weight: 500;
  color: var(--v10-text-primary);
  font-size: 0.875rem;
}

.garment-type-name {
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-1);
}

.garment-fabric-info {
  font-size: 0.75rem;
  color: var(--v10-text-muted);
}

/* Tip Messages */
.collection-tip {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-3);
  margin-bottom: var(--v10-space-4);
  color: var(--v10-text-primary);
  font-size: 0.875rem;
  line-height: 1.4;
}

.collection-tip span {
  display: inline;
  white-space: nowrap;
}

/* Custom Pantone Code Styling */
.custom-pantone-color {
  position: relative;
  overflow: visible !important;
}

.custom-code-indicator {
  font-size: 9px;
  font-weight: 700;
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 3px rgba(139, 92, 246, 0.3);
}

/* Assigned Items and Badges */
.assigned-items {
  margin-top: var(--v10-space-6);
  padding-top: var(--v10-space-4);
  border-top: 1px solid var(--v10-border-primary);
}

.assigned-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v10-space-2);
  min-height: 32px;
  margin-top: var(--v10-space-4);
}

.assigned-badge {
  display: flex;
  align-items: center;
  gap: var(--v10-space-1);
  padding: var(--v10-space-1) var(--v10-space-2);
  background: rgba(163, 163, 163, 0.1);
  border: 1px solid rgba(163, 163, 163, 0.2);
  border-radius: var(--v10-radius-md);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--v10-text-secondary);
}

.assigned-badge__color {
  width: 12px;
  height: 12px;
  border-radius: 0;
  border: 1px solid var(--v10-border-primary);
}

.assigned-badge__remove {
  background: transparent;
  border: none;
  color: var(--v10-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 10px;
  margin-left: 4px;
}

.assigned-badge__remove:hover {
  color: #ef4444;
}

/* Responsive Design for Studio Layouts */
@media (max-width: 768px) {
  .color-studio,
  .design-studio {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--v10-space-4);
  }
  
  .color-selection-area,
  .labdips-collection,
  .designs-collection,
  .design-input-area {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }
  
  .popular-colors-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--v10-space-1);
    width: 100%;
    padding: 0;
  }
  
  .popular-color-circle {
    width: 32px !important;
    height: 24px !important;
    border-radius: 3px !important;
    margin: 0 auto;
    border-width: 1px !important;
  }
  
  /* Fix mobile color picker alignment */
  .color-picker-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--v10-space-2) !important;
    margin-bottom: var(--v10-space-3) !important;
  }
  
  .color-picker-left {
    flex: 0 0 60px !important;
  }
  
  .color-picker-wrapper {
    width: 60px !important;
    height: 60px !important;
  }
  
  .color-picker-input {
    width: 60px !important;
    height: 60px !important;
    border-radius: var(--v10-radius-md) !important;
  }
  
  .pantone-display-right {
    flex: 1 !important;
    margin-left: 0 !important;
  }
  
  .add-labdip-actions,
  .add-design-actions {
    gap: var(--v10-space-3);
  }

  .color-picker-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--v10-space-3);
  }

  /* Collection grid now uses flexbox - no responsive changes needed */

  .garments-colors-grid {
    grid-template-columns: 1fr;
  }
  
  /* Make tip text smaller on mobile to prevent cropping */
  .collection-tip {
    font-size: var(--v10-text-xs) !important;
    line-height: 1.3 !important;
    padding: var(--v10-space-2) !important;
    margin-bottom: var(--v10-space-2) !important;
  }
  
  .popular-colors-section {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .popular-colors-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
  }
  
  .popular-color-circle {
    width: 28px !important;
    height: 20px !important;
    border-radius: 2px !important;
  }
  
  .color-picker-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ===================================
   CRITICAL FIX: POPULAR COLOR CIRCLES
   =================================== */

/* Force popular color circles to be visible */
.popular-color-circle {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force specific background colors to override any conflicts */
.popular-color-circle[data-color="#000000"] {
  background-color: #000000 !important;
}

.popular-color-circle[data-color="#ffffff"] {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

.popular-color-circle[data-color="#dc2626"] {
  background-color: #dc2626 !important;
}

.popular-color-circle[data-color="#2563eb"] {
  background-color: #2563eb !important;
}

.popular-color-circle[data-color="#16a34a"] {
  background-color: #16a34a !important;
}

.popular-color-circle[data-color="#eab308"] {
  background-color: #eab308 !important;
}

.popular-color-circle[data-color="#f97316"] {
  background-color: #f97316 !important;
}

.popular-color-circle[data-color="#8b5cf6"] {
  background-color: #8b5cf6 !important;
}

.popular-color-circle[data-color="#ec4899"] {
  background-color: #ec4899 !important;
}

.popular-color-circle[data-color="#6b7280"] {
  background-color: #6b7280 !important;
}

/* ===================================
   CRITICAL FIX: LAB DIP COLOR CIRCLES
   =================================== */

/* Fix the ACTUAL lab dip color circles in Lab Dip Collection */
.collection-item__color {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===================================
   UNIVERSAL COLOR CIRCLE SAFETY
   =================================== */

/* Ensure all color circles with inline styles are preserved */
div[class*="color-circle"][style*="background-color"],
div[class*="circle"][style*="background-color"],
.color-picker[style*="background-color"],
.v10-color-picker[style*="background-color"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =================================================================
   SUBTEXT BOX GLASS MORPHISM - TARGETED ONLY
   ================================================================= */

/* Glass morphism for subtext box only - will not affect other elements */
.v10-header-description {
  background: var(--v10-bg-primary) !important; /* Dark background to match main container */
  border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Glass morphism border */
  border-radius: var(--v10-radius-lg) !important;
  padding: var(--v10-space-6) !important;
  text-align: center !important;
  margin-bottom: var(--v10-space-8) !important;
  backdrop-filter: blur(12px) !important; /* Glass effect */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important; /* Depth shadow */
}

/* =================================================================
   MOBILE TITLE REDUCTION - TARGETED ONLY
   ================================================================= */

/* Mobile responsive title sizing - restore previous mobile optimization */
@media (max-width: 768px) {
  .v10-title-spectacular {
    font-size: calc(var(--v10-text-3xl) * 0.5) !important; /* 50% smaller for mobile */
    line-height: 1.1 !important;
    word-break: break-word !important;
    letter-spacing: 0.02em !important;
  }
}

/* =================================================================
   MOBILE THEME TOGGLE WIDTH REDUCTION - TARGETED ONLY
   ================================================================= */

/* Reduce theme toggle width on mobile for better text centering */
@media (max-width: 768px) {
  .v10-theme-toggle {
    padding: 2px !important; /* Much smaller container padding */
    gap: 2px !important; /* Reduce gap between buttons */
  }
  
  .v10-theme-btn {
    padding: 6px 8px !important; /* Much smaller button padding */
    font-size: 10px !important; /* Even smaller font size */
    min-width: auto !important; /* Remove any minimum width */
  }
}

/* =================================================================
   V10 UTILITY CLASSES - JAVASCRIPT REFACTORING SUPPORT
   ================================================================= */

/* Display utilities */
.v10-hidden {
  display: none !important;
}

.v10-flex {
  display: flex !important;
}

.v10-block {
  display: block !important;
}

/* Badge gradient classes */
.v10-badge--new-client {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}

.v10-badge--registered {
  background: linear-gradient(135deg, #10b981, #059669) !important;
}

/* =================================================================
   V10 COLORWAY SYSTEM - QUANTITY STUDIO INTEGRATION
   ================================================================= */

/* Colorways Container */
.v10-colorways-container {
  margin-top: var(--v10-space-4);
  border-top: 1px solid var(--v10-border-secondary);
  padding-top: var(--v10-space-4);
}

/* Individual Colorway Card */
.v10-colorway {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-4);
  margin-bottom: var(--v10-space-3);
  transition: var(--v10-transition-base);
}

.v10-colorway:hover {
  border-color: var(--v10-border-focus);
  background: var(--v10-bg-card);
}

/* Colorway Header */
.v10-colorway-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-4);
}

.v10-colorway-title {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.v10-colorway-icon {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--v10-accent-primary);
  flex-shrink: 0;
}

.v10-colorway-label {
  font-size: var(--v10-text-sm);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.v10-colorway-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--v10-text-tertiary);
  border-radius: var(--v10-radius-sm);
  cursor: pointer;
  transition: var(--v10-transition-base);
}

.v10-colorway-remove:hover {
  background: var(--v10-bg-tertiary);
  color: var(--v10-error);
}

/* Colorway Content */
.v10-colorway-content {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-4);
}

/* Color Selection Section */
.v10-color-selection {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
}

.v10-color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.v10-color-picker {
  width: 40px;
  height: 40px;
  border: 2px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  cursor: pointer;
  background: transparent;
  padding: 0;
  overflow: hidden;
}

.v10-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.v10-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: calc(var(--v10-radius-md) - 2px);
}

.v10-color-preview {
  width: 40px;
  height: 40px;
  border: 2px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  background: #3b82f6;
  flex-shrink: 0;
}

/* Color Name Input */
.v10-color-name {
  flex: 1;
  padding: var(--v10-space-2) var(--v10-space-3);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  background: var(--v10-bg-primary);
  color: var(--v10-text-primary);
  font-size: var(--v10-text-sm);
  transition: var(--v10-transition-base);
}

.v10-color-name:focus {
  outline: none;
  border-color: var(--v10-accent-primary);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.v10-color-name::placeholder {
  color: var(--v10-text-tertiary);
}

/* Pantone Section */
.v10-pantone-section {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-2);
}

.v10-pantone-toggle {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.v10-pantone-required {
  width: 16px;
  height: 16px;
  accent-color: var(--v10-accent-primary);
}

.v10-pantone-label {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  cursor: pointer;
}

.v10-pantone-details {
  display: none;
  gap: var(--v10-space-3);
  padding-top: var(--v10-space-2);
}

.v10-pantone-details.active {
  display: flex;
}

.v10-pantone-input {
  flex: 1;
  padding: var(--v10-space-2) var(--v10-space-3);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  background: var(--v10-bg-primary);
  color: var(--v10-text-primary);
  font-size: var(--v10-text-sm);
  transition: var(--v10-transition-base);
}

.v10-pantone-input:focus {
  outline: none;
  border-color: var(--v10-accent-primary);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Notes Section */
.v10-colorway-notes {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-2);
}

.v10-notes-label {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  font-weight: 500;
}

.v10-notes-input {
  width: 100%;
  min-height: 60px;
  padding: var(--v10-space-2) var(--v10-space-3);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  background: var(--v10-bg-primary);
  color: var(--v10-text-primary);
  font-size: var(--v10-text-sm);
  font-family: inherit;
  resize: vertical;
  transition: var(--v10-transition-base);
}

.v10-notes-input:focus {
  outline: none;
  border-color: var(--v10-accent-primary);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

/* =================================================================
   QUANTITY STUDIO CONTAINER & GRID SYSTEM
   ================================================================= */

/* Main Quantity Studio Container */
#garment-quantities-container {
  display: grid;
  gap: var(--v10-space-4);
  margin-top: var(--v10-space-6);
  width: 100%;
}

/* Garment Quantity Cards */
/* Removed unused .garment-quantity-card styles - using v10-quantity-garment-full instead */

/* Size Grid for Bulk Orders */
.v10-size-grid {
  display: grid;
  grid-template-columns: auto repeat(7, 1fr);
  gap: var(--v10-space-2);
  margin-top: var(--v10-space-4);
  padding: var(--v10-space-3);
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
}

.v10-size-grid__label {
  font-size: var(--v10-text-sm);
  font-weight: 600;
  color: var(--v10-text-secondary);
  text-align: center;
  padding: var(--v10-space-2);
  background: var(--v10-bg-tertiary);
  border-radius: var(--v10-radius-sm);
}

.v10-size-grid__input {
  width: 100%;
  padding: var(--v10-space-2);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-sm);
  background: var(--v10-bg-secondary);
  color: var(--v10-text-primary);
  text-align: center;
  font-size: var(--v10-text-sm);
  transition: var(--v10-transition-base);
}

.v10-size-grid__input:focus {
  outline: none;
  border-color: var(--v10-accent-primary);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.v10-size-grid__input:invalid {
  border-color: var(--v10-error);
}

/* Garment Actions Integration */
.garment-actions-integrated {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--v10-space-4);
  padding-top: var(--v10-space-4);
  border-top: 1px solid var(--v10-border-secondary);
}

.add-colorway {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-2) var(--v10-space-3);
  border: 1px dashed var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  background: transparent;
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-sm);
  cursor: pointer;
  transition: var(--v10-transition-base);
  /* Subtle grey shadow for depth */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.add-colorway:hover {
  border-color: var(--v10-accent-primary);
  color: var(--v10-accent-primary);
  background: rgba(59, 130, 246, 0.05);
}

.add-colorway svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* =================================================================
   MOBILE RESPONSIVE COLORWAY SYSTEM
   ================================================================= */

@media (max-width: 768px) {
  .v10-colorway-content {
    gap: var(--v10-space-3);
  }
  
  .v10-color-selection {
    flex-direction: column;
    align-items: stretch;
    gap: var(--v10-space-2);
  }
  
  .v10-color-picker-wrapper {
    justify-content: center;
  }
  
  .v10-pantone-details {
    flex-direction: column;
  }
  
  .v10-size-grid {
    display: flex;
    flex-direction: column;
    gap: var(--v10-space-2);
  }
  
  .v10-size-grid .size-row {
    display: flex;
    align-items: center;
    gap: var(--v10-space-2);
    padding: var(--v10-space-2);
    background: var(--v10-bg-secondary);
    border-radius: var(--v10-radius-sm);
  }
  
  .v10-size-grid .size-row .size-label {
    min-width: 50px;
    font-weight: 600;
    font-size: var(--v10-text-sm);
  }
  
  .v10-size-grid .size-row .size-input {
    flex: 1;
    max-width: 80px;
    text-align: center;
    padding: var(--v10-space-2);
    border: 1px solid var(--v10-border-secondary);
    border-radius: var(--v10-radius-sm);
    background: var(--v10-bg-primary);
  }
  
  .garment-actions-integrated {
    flex-direction: column;
    gap: var(--v10-space-2);
  }
}

/* =================================================================
   ENHANCED QUANTITY STUDIO - PROFESSIONAL DESIGN SYSTEM
   ================================================================= */

/* Enhanced Statistics Dashboard - Top 4-Card Grid */
.quantity-tracker-enhanced {
  margin-bottom: var(--v10-space-6);
  padding: var(--v10-space-5);
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
}

.quantity-tracker-enhanced__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--v10-space-4);
  margin-bottom: var(--v10-space-5);
}

.quantity-stat {
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-4);
  text-align: center;
  transition: var(--v10-transition-base);
  position: relative;
  overflow: hidden;
}

.quantity-stat:hover {
  border-color: var(--v10-border-focus);
  background: var(--v10-bg-card);
}

.quantity-stat__value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--v10-text-primary);
  line-height: 1;
  margin-bottom: var(--v10-space-1);
}

.quantity-stat__label {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Special styling for minimum required card */
.quantity-stat--minimum {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
  border-color: rgba(245, 158, 11, 0.3);
}

.quantity-stat--minimum .quantity-stat__value {
  color: #f59e0b;
}

.quantity-stat--minimum .quantity-stat__label {
  color: #d97706;
}

/* Enhanced Progress Bar */
.quantity-progress-bar {
  position: relative;
  background: var(--v10-bg-tertiary);
  border-radius: var(--v10-radius-full);
  height: 12px;
  overflow: hidden;
  margin-bottom: var(--v10-space-3);
}

.quantity-progress-bar__track {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--v10-bg-tertiary);
  border-radius: var(--v10-radius-full);
}

.quantity-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  border-radius: var(--v10-radius-full);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.quantity-progress-bar__fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-20px); }
  100% { transform: translateX(20px); }
}

.quantity-progress-bar__minimum-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #f59e0b;
  z-index: 2;
}

.quantity-progress-bar__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-status-text {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
}

.progress-percentage {
  font-size: var(--v10-text-sm);
  font-weight: 600;
  color: var(--v10-text-primary);
}

/* Professional Bulk Input Tools */
.bulk-input-tools {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  margin-bottom: var(--v10-space-6);
}

.bulk-tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-4);
}

.bulk-tools-header h4 {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin: 0;
}

.bulk-tools-actions {
  display: flex;
  gap: var(--v10-space-3);
}

.bulk-tool-btn {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-2) var(--v10-space-4);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  background: var(--v10-bg-primary);
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--v10-transition-base);
}

.bulk-tool-btn:hover {
  border-color: var(--v10-border-focus);
  background: #3a3a3a; /* Slightly lighter than var(--v10-bg-card) for better visibility */
  color: var(--v10-text-primary);
}

.bulk-tool-btn--primary {
  background: var(--v10-accent-primary);
  border-color: var(--v10-accent-primary);
  color: white;
}

.bulk-tool-btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.bulk-tool-btn svg {
  width: 14px;
  height: 14px;
}

/* Preset Dropdown Menu */
.bulk-preset-dropdown {
  position: relative;
}

.preset-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--v10-space-1);
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-2);
  min-width: 280px;
  z-index: 100;
  display: none;
  box-shadow: var(--v10-shadow-lg);
}

.preset-dropdown-menu.active {
  display: block;
}

.preset-option {
  display: flex;
  flex-direction: column;
  gap: var(--v10-space-1);
  padding: var(--v10-space-3);
  border: none;
  background: transparent;
  border-radius: var(--v10-radius-sm);
  cursor: pointer;
  transition: var(--v10-transition-base);
  text-align: left;
  width: 100%;
}

.preset-option:hover {
  background: var(--v10-bg-card);
}

.preset-name {
  font-size: var(--v10-text-sm);
  font-weight: 500;
  color: var(--v10-text-primary);
}

.preset-description {
  font-size: var(--v10-text-xs);
  color: var(--v10-text-tertiary);
}

/* Removed duplicate .garment-quantity-card - no longer used */

@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.status-badge--sufficient {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  animation: pulse-green 2s infinite;
}

.status-badge--insufficient {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

@keyframes pulse-green {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.9; }
}

/* Quantity Status Indicator */
.quantity-status {
  font-weight: 700;
  font-size: var(--v10-text-xl);
  transition: color 0.3s ease;
}

.quantity-status.sufficient {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.quantity-status.insufficient {
  color: var(--v10-text-secondary);
}

/* Removed duplicate .garment-quantity-card__* classes - no longer used */

.garment-stat {
  text-align: center;
}

.garment-stat__value {
  font-size: var(--v10-text-xl);
  font-weight: 700;
  color: var(--v10-text-primary);
  line-height: 1;
  transition: all 0.3s ease;
}

.garment-total-units {
  font-weight: 700;
  font-size: var(--v10-text-xl);
  transition: all 0.3s ease;
}

.garment-total-units.sufficient {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.garment-total-units.insufficient {
  color: var(--v10-text-secondary);
}

.garment-stat__label {
  font-size: var(--v10-text-xs);
  color: var(--v10-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-top: var(--v10-space-1);
}

/* Minimum Required Text */
.minimum-required-text {
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-sm);
}

.minimum-required-text strong {
  color: var(--v10-accent-primary);
  font-weight: 700;
}

/* Professional Size Grid */
.garment-size-grid {
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-3);
  margin: var(--v10-space-4) 0;
}

.size-grid-header {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: var(--v10-space-2);
  margin-bottom: var(--v10-space-2);
}

.size-grid-row {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: var(--v10-space-2);
}

.size-label {
  font-size: var(--v10-text-sm);
  font-weight: 600;
  color: var(--v10-text-secondary);
  text-align: center;
  padding: var(--v10-space-2);
  background: var(--v10-bg-tertiary);
  border-radius: var(--v10-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.size-input {
  width: 100%;
  padding: var(--v10-space-2);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-sm);
  background: var(--v10-bg-secondary);
  color: var(--v10-text-primary);
  text-align: center;
  font-size: var(--v10-text-sm);
  font-weight: 500;
  transition: var(--v10-transition-base);
}

.size-input:focus {
  outline: none;
  border-color: var(--v10-accent-primary);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
  background: var(--v10-bg-primary);
}

.size-input:invalid {
  border-color: var(--v10-error);
}

.size-input.has-value {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: #10b981;
  font-weight: 600;
}

/* Professional Add Colorway Button */
.add-colorway {
  display: inline-flex;
  align-items: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-3) var(--v10-space-4);
  border: 2px dashed var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  background: transparent;
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: var(--v10-transition-base);
  text-decoration: none;
}

.add-colorway:hover {
  border-color: var(--v10-accent-primary);
  border-style: solid;
  color: var(--v10-accent-primary);
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-1px);
}

.add-colorway:active {
  transform: translateY(0);
}

.add-colorway svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

/* Colorway Management Section */
.colorway-management {
  margin-top: var(--v10-space-4);
  padding-top: var(--v10-space-4);
  border-top: 1px solid var(--v10-border-secondary);
}

/* Colorway Management Actions */
.colorway-management__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v10-space-3);
  margin-top: var(--v10-space-3);
}

.colorway-bulk-tools {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.colorway-bulk-tools .v10-btn {
  font-size: var(--v10-text-sm);
  padding: var(--v10-space-1-5) var(--v10-space-3);
  min-height: 32px;
}

.colorway-management__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-3);
}

.colorway-management__title {
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.colorway-management__count {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-tertiary);
  background: var(--v10-bg-tertiary);
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
}

/* Individual Colorway Cards within Quantity Cards */
.quantity-colorway-card {
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-3);
  margin-bottom: var(--v10-space-2);
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  transition: var(--v10-transition-base);
}

.quantity-colorway-card:hover {
  border-color: var(--v10-border-focus);
  background: var(--v10-bg-card);
}

.colorway-color-preview {
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 2px solid var(--v10-border-secondary);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.colorway-color-preview::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 0;
  background: var(--color, #3b82f6);
}

.colorway-info {
  flex: 1;
}

.colorway-name {
  font-size: var(--v10-text-sm);
  font-weight: 500;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-1);
}

.colorway-details {
  font-size: var(--v10-text-xs);
  color: var(--v10-text-tertiary);
}

.colorway-stats {
  display: flex;
  gap: var(--v10-space-3);
  font-size: var(--v10-text-sm);
}

.colorway-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.colorway-stat-value {
  font-weight: 600;
  color: var(--v10-text-primary);
}

.colorway-stat-label {
  font-size: var(--v10-text-xs);
  color: var(--v10-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Instructions Panel */
.quantities-instructions {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  margin-top: var(--v10-space-6);
  display: flex;
  gap: var(--v10-space-4);
}

.instructions-icon {
  width: 40px;
  height: 40px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--v10-accent-primary);
}

.instructions-content h5 {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-2);
}

.instructions-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.instructions-content li {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  margin-bottom: var(--v10-space-2);
  padding-left: var(--v10-space-4);
  position: relative;
}

.instructions-content li:before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--v10-accent-primary);
  font-weight: bold;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .quantity-tracker-enhanced__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v10-space-3);
  }
  
  .quantity-stat__value {
    font-size: 2rem;
  }
  
  .bulk-tools-header {
    flex-direction: column;
    gap: var(--v10-space-3);
    align-items: stretch;
  }
  
  .bulk-tools-actions {
    justify-content: center;
  }
  
  .size-grid-header {
    display: none;
  }
  
  .size-grid-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--v10-space-3);
    background: var(--v10-bg-secondary);
    border-radius: var(--v10-radius-sm);
    margin-bottom: var(--v10-space-2);
    gap: var(--v10-space-2);
  }
  
  .size-grid-row .size-label {
    min-width: 60px;
    font-weight: 600;
    font-size: var(--v10-text-sm);
  }
  
  .size-grid-row .size-input {
    flex: 1;
    max-width: 60px;
    text-align: center;
  }
  
  .size-label {
    padding: var(--v10-space-1);
    font-size: var(--v10-text-xs);
  }
  
  .size-input {
    padding: var(--v10-space-1);
    font-size: var(--v10-text-xs);
  }
  
  .garment-quantity-card__header {
    flex-direction: column;
    gap: var(--v10-space-3);
  }
  
  .garment-quantity-card__stats {
    justify-content: space-around;
  }
  
  .instructions-icon {
    width: 32px;
    height: 32px;
  }
  
  .quantities-instructions {
    gap: var(--v10-space-3);
    padding: var(--v10-space-4);
  }
}

/* =================================================================
   DISTRIBUTION ANALYSIS MODE - PROFESSIONAL ANALYTICS
   ================================================================= */

/* Distribution Overview Dashboard */
.distribution-overview {
  display: grid;
  gap: var(--v10-space-6);
  margin-bottom: var(--v10-space-6);
}

.distribution-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--v10-space-4);
  margin-bottom: var(--v10-space-6);
}

.distribution-summary-card {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--v10-transition-base);
}

.distribution-summary-card:hover {
  border-color: var(--v10-border-focus);
  background: var(--v10-bg-card);
}

.distribution-summary-card__value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--v10-text-primary);
  line-height: 1;
  margin-bottom: var(--v10-space-2);
  display: block;
}

.distribution-summary-card__label {
  font-size: var(--v10-text-base);
  color: var(--v10-text-secondary);
  font-weight: 500;
  margin-bottom: var(--v10-space-1);
}

.distribution-summary-card__sublabel {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Special styling for overall health card */
.distribution-summary-card--health {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

.distribution-summary-card--health .distribution-summary-card__value {
  color: #10b981;
}

.distribution-summary-card--health .distribution-summary-card__label {
  color: #059669;
}

/* Overall Health Indicator */
.overall-health-indicator {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-6);
  text-align: center;
  position: relative;
}

.health-circle {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--v10-space-4);
  position: relative;
}

.health-circle-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.health-circle-bg {
  fill: none;
  stroke: var(--v10-bg-tertiary);
  stroke-width: 8;
}

.health-circle-progress {
  fill: none;
  stroke: #10b981;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.health-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: 800;
  color: var(--v10-text-primary);
}

.health-label {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-1);
}

.health-sublabel {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
}

/* Distribution Pattern Cards */
.distribution-patterns {
  margin-bottom: var(--v10-space-6);
}

.distribution-patterns__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-4);
}

.distribution-patterns__title {
  font-size: var(--v10-text-xl);
  font-weight: 700;
  color: var(--v10-text-primary);
}

.distribution-patterns__confidence {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-tertiary);
  background: var(--v10-bg-tertiary);
  padding: var(--v10-space-1) var(--v10-space-3);
  border-radius: var(--v10-radius-full);
}

.pattern-card {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  margin-bottom: var(--v10-space-4);
  position: relative;
  overflow: hidden;
}

.pattern-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-4);
}

.pattern-card__title {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.pattern-card__confidence {
  font-size: var(--v10-text-sm);
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
}

.pattern-card__description {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  margin-bottom: var(--v10-space-4);
}

/* Individual Garment Analytics */
.garment-analytics-grid {
  display: grid;
  gap: var(--v10-space-4);
}

.garment-analytics-card {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  transition: var(--v10-transition-base);
}

/* Removed hover effect for solid appearance */

.garment-analytics-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-4);
  padding-bottom: var(--v10-space-3);
  border-bottom: 1px solid var(--v10-border-secondary);
}

.garment-analytics-card__title {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.garment-analytics-card__stats {
  display: flex;
  gap: var(--v10-space-4);
  font-size: var(--v10-text-sm);
}

.analytics-stat {
  display: flex;
  align-items: center;
  gap: var(--v10-space-1);
  color: var(--v10-text-secondary);
}

.analytics-stat__value {
  font-weight: 600;
  color: var(--v10-text-primary);
}

/* Distribution Bar Chart */
.distribution-chart {
  margin-bottom: var(--v10-space-4);
}

.distribution-chart__sizes {
  display: flex;
  justify-content: space-between;
  align-items: end;
  height: 120px;
  padding: var(--v10-space-3);
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  margin-bottom: var(--v10-space-2);
}

.size-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v10-space-1);
  flex: 1;
  position: relative;
}

.size-bar__column {
  width: 100%;
  max-width: 40px;
  background: var(--v10-accent-primary);
  border-radius: var(--v10-radius-sm) var(--v10-radius-sm) 0 0;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 4px;
}

.size-bar__column:hover {
  background: #2563eb;
  transform: scale(1.05);
}

.size-bar__value {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--v10-text-xs);
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: var(--v10-space-1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.size-bar:hover .size-bar__value {
  opacity: 1;
}

.size-bar__label {
  font-size: var(--v10-text-xs);
  font-weight: 600;
  color: var(--v10-text-secondary);
  text-align: center;
}

/* Distribution Chart Legend */
.distribution-chart__legend {
  display: flex;
  justify-content: center;
  gap: var(--v10-space-4);
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
}

.chart-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--v10-accent-primary);
}

/* Pattern Analysis */
.pattern-analysis {
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-4);
  margin-top: var(--v10-space-4);
}

.pattern-analysis__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-3);
}

.pattern-analysis__title {
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.pattern-analysis__confidence {
  font-size: var(--v10-text-sm);
  font-weight: 500;
  color: #10b981;
}

.pattern-analysis__description {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  line-height: 1.5;
}

/* Recommendations Panel */
.recommendations-panel {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-5);
  margin-top: var(--v10-space-6);
}

.recommendations-panel__header {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  margin-bottom: var(--v10-space-4);
}

.recommendations-panel__icon {
  width: 32px;
  height: 32px;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  flex-shrink: 0;
}

.recommendations-panel__title {
  font-size: var(--v10-text-lg);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.recommendation-item {
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-4);
  margin-bottom: var(--v10-space-3);
  position: relative;
}

.recommendation-item:last-child {
  margin-bottom: 0;
}

.recommendation-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-2);
}

.recommendation-item__title {
  font-size: var(--v10-text-base);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.recommendation-item__priority {
  font-size: var(--v10-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding: var(--v10-space-1) var(--v10-space-2);
  border-radius: var(--v10-radius-sm);
}

.recommendation-item__priority--high {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.recommendation-item__priority--medium {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.recommendation-item__priority--low {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.recommendation-item__description {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--v10-space-3);
}

.recommendation-item__action {
  font-size: var(--v10-text-sm);
  color: var(--v10-accent-primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--v10-space-1);
  transition: var(--v10-transition-base);
}

.recommendation-item__action:hover {
  color: #2563eb;
}

/* Mobile Responsive Distribution Analysis */
@media (max-width: 768px) {
  .distribution-summary-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--v10-space-3);
  }
  
  .distribution-summary-card__value {
    font-size: 2rem;
  }
  
  .health-circle {
    width: 80px;
    height: 80px;
  }
  
  .health-score {
    font-size: 1.5rem;
  }
  
  .distribution-chart__sizes {
    height: 80px;
    padding: var(--v10-space-2);
  }
  
  .size-bar__column {
    max-width: 24px;
  }
  
  .distribution-chart__legend {
    flex-wrap: wrap;
    gap: var(--v10-space-2);
  }
  
  .garment-analytics-card__header {
    flex-direction: column;
    gap: var(--v10-space-2);
    align-items: stretch;
  }
  
  .garment-analytics-card__stats {
    justify-content: space-around;
  }
  
  .recommendations-panel__header {
    flex-direction: column;
    text-align: center;
    gap: var(--v10-space-2);
  }
  
  .recommendation-item__header {
    flex-direction: column;
    gap: var(--v10-space-2);
    align-items: stretch;
  }
}

/* ===== Garment Specifications Grid Layout ===== */
#review-garments {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--v10-space-4);
}

@media (max-width: 768px) {
  #review-garments {
    grid-template-columns: 1fr;
    gap: var(--v10-space-3);
  }
}

/* ===== Simple Garment Item Display (Step 4) ===== */
.v10-garment-item {
  display: flex;
  align-items: center;
  gap: var(--v10-space-4);
  padding: var(--v10-space-4);
  background: var(--v10-bg-tertiary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  transition: all 0.2s ease;
  position: relative;
}

.v10-garment-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--v10-border-light);
  border-radius: var(--v10-radius-lg) var(--v10-radius-lg) 0 0;
}

.v10-garment-item:hover {
  background: var(--v10-bg-hover);
  border-color: var(--v10-border-light);
  transform: translateX(2px);
}

.v10-garment-color {
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 2px solid var(--v10-border-light);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

.v10-garment-color::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.v10-garment-text {
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-base);
  line-height: 1.5;
  font-weight: 500;
}

.v10-empty-state {
  text-align: center;
  padding: var(--v10-space-8);
  color: var(--v10-text-muted);
  background: var(--v10-bg-tertiary);
  border: 1px dashed var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
}

/* ===== Fabric Swatches & Design Applications Grid ===== */
.v10-samples-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v10-space-6);
  margin-top: var(--v10-space-4);
}

@media (min-width: 768px) {
  .v10-samples-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.v10-swatch-item {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  padding: var(--v10-space-3);
  background: var(--v10-bg-tertiary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  margin-bottom: var(--v10-space-2);
  transition: all 0.2s ease;
}

.v10-swatch-item:hover {
  background: var(--v10-bg-hover);
  border-color: var(--v10-border-light);
}

.v10-swatch-color {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 2px solid var(--v10-border-light);
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.v10-swatch-info {
  flex: 1;
}

.v10-swatch-title {
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-sm);
  font-weight: 500;
  margin: 0 0 var(--v10-space-1) 0;
}

.v10-swatch-details {
  color: var(--v10-text-tertiary);
  font-size: var(--v10-text-xs);
  margin: 0;
}

.v10-swatch-price {
  color: var(--v10-text-primary);
  font-weight: 600;
  font-size: var(--v10-text-sm);
}

/* Design Applications */
.v10-design-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--v10-space-6);
  background: var(--v10-bg-tertiary);
  border: 1px dashed var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  text-align: center;
  color: var(--v10-text-muted);
}

.v10-design-icon {
  margin-bottom: var(--v10-space-2);
  opacity: 0.6;
}

/* ===== Cost Summary Redesign ===== */
#cost-breakdown {
  margin-bottom: var(--v10-space-6);
}

.v10-cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--v10-space-4);
  background: var(--v10-bg-tertiary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  margin-bottom: var(--v10-space-3);
  transition: all 0.2s ease;
}

.v10-cost-item:hover {
  background: var(--v10-bg-hover);
  border-color: var(--v10-border-light);
}

.v10-cost-info {
  flex: 1;
}

.v10-cost-label {
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-base);
  font-weight: 500;
  margin: 0 0 var(--v10-space-1) 0;
}

.v10-cost-description {
  color: var(--v10-text-tertiary);
  font-size: var(--v10-text-sm);
  margin: 0;
}

.v10-cost-amount {
  color: var(--v10-text-primary);
  font-size: var(--v10-text-base);
  font-weight: 600;
  text-align: right;
}

.v10-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--v10-space-4);
  background: var(--v10-bg-tertiary);
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  margin-top: var(--v10-space-4);
}

.v10-total-label {
  color: var(--v10-text-primary);
  font-size: var(--v10-text-lg);
  font-weight: 600;
}

.v10-total-amount {
  color: var(--v10-text-primary);
  font-size: var(--v10-text-xl);
  font-weight: 700;
  text-align: right;
}

/* ===== Submit Section Redesign ===== */
.v10-submit-section {
  background: var(--v10-bg-tertiary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-6);
  margin-top: var(--v10-space-6);
  position: relative;
}

.v10-submit-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--v10-border-light);
  border-radius: var(--v10-radius-lg) var(--v10-radius-lg) 0 0;
}

.v10-submit-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v10-space-3);
  margin-bottom: var(--v10-space-4);
  text-align: center;
}

.v10-submit-icon {
  color: var(--v10-text-success);
  flex-shrink: 0;
}

.v10-submit-title {
  color: var(--v10-text-primary);
  font-size: var(--v10-text-lg);
  font-weight: 600;
  margin: 0;
}

.v10-submit-subtitle {
  color: var(--v10-text-tertiary);
  font-size: var(--v10-text-base);
  margin: 0 0 var(--v10-space-4) 0;
  line-height: 1.5;
}

.v10-timeline {
  display: flex;
  align-items: center;
  gap: var(--v10-space-4);
  flex-wrap: wrap;
  margin-top: var(--v10-space-4);
}

.v10-timeline-item {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  color: var(--v10-text-tertiary);
  font-size: var(--v10-text-sm);
}

.v10-timeline-icon {
  width: 16px;
  height: 16px;
  color: var(--v10-text-warning);
}

.v10-timeline-separator {
  width: 1px;
  height: 16px;
  background: var(--v10-border-secondary);
}

@media (max-width: 768px) {
  .v10-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--v10-space-2);
  }
  
  .v10-timeline-separator {
    display: none;
  }
}

/* Submit Card (existing structure) */
.v10-submit-card {
  background: var(--v10-bg-tertiary);
  border: 1px solid var(--v10-border-success);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-6);
  margin-bottom: var(--v10-space-6);
  position: relative;
}

.v10-submit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--v10-text-success), transparent);
  border-radius: var(--v10-radius-lg) var(--v10-radius-lg) 0 0;
}

.v10-submit-header {
  display: flex;
  align-items: center;
  gap: var(--v10-space-4);
}

.v10-submit-icon {
  color: var(--v10-text-success);
  flex-shrink: 0;
}

.v10-submit-info {
  flex: 1;
  text-align: center;
}

.v10-submit-title {
  color: var(--v10-text-primary);
  font-size: var(--v10-text-xl);
  font-weight: 600;
  margin: 0 0 var(--v10-space-2) 0;
}

.v10-submit-message {
  color: var(--v10-text-tertiary);
  font-size: var(--v10-text-base);
  line-height: 1.5;
}

/* Timeline Badges */
.v10-submit-timeline {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--v10-space-3);
  margin-top: var(--v10-space-4);
}

.v10-timeline-item {
  display: inline-flex;
  align-items: center;
  gap: var(--v10-space-2);
  padding: var(--v10-space-2) var(--v10-space-3);
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-full);
  color: var(--v10-text-secondary);
  font-size: var(--v10-text-sm);
  font-weight: 500;
  white-space: nowrap;
}

/* File Item Layout - Horizontal */
.file-item {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
  padding: var(--v10-space-3);
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-md);
  margin-bottom: var(--v10-space-2);
}

.file-icon {
  width: 32px;
  height: 32px;
  background: var(--v10-bg-tertiary);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v10-text-secondary);
  flex-shrink: 0;
}

.file-details {
  flex: 1;
}

.file-name {
  color: var(--v10-text-primary);
  font-size: var(--v10-text-sm);
  font-weight: 500;
}

.file-size {
  color: var(--v10-text-tertiary);
  font-size: var(--v10-text-xs);
  margin-left: var(--v10-space-2);
}

/* Cost Item Layout with Color Circles */
.v10-cost-item .v10-cost-info {
  display: flex;
  align-items: center;
  gap: var(--v10-space-3);
}

.v10-cost-details {
  flex: 1;
}

.v10-cost-item .v10-garment-color {
  width: 24px;
  height: 24px;
  border-radius: 0;
  flex-shrink: 0;
  border: 1px solid var(--v10-border-primary);
}

/* ===== Step 4 Typography Only - Background handled by unified .techpack-content ===== */
#techpack-v10-step-4 .techpack-content {
  color: var(--v10-text-primary);
}

/* Review Grid - Side by Side Layout */
.v10-review-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--v10-space-6, 1.5rem);
  margin-bottom: var(--v10-space-6, 1.5rem);
}

/* Ensure grid children take proper width */
.v10-review-grid > .v10-studio-card {
  width: 100%;
  min-width: 0; /* Allow flex shrinking */
}

@media (max-width: 768px) {
  .v10-review-grid {
    grid-template-columns: 1fr;
    gap: var(--v10-space-4);
  }
}

/* Terms and Submit Actions Centering */
.v10-terms-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--v10-space-6) 0;
  margin: var(--v10-space-6) 0;
}

/* Terms Box Styling */
.v10-terms-box {
  background: var(--v10-bg-card);
  border: 1px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-6);
  max-width: 600px;
  width: 100%;
  box-shadow: var(--v10-shadow-sm);
}


.v10-terms-content {
  display: flex;
  justify-content: center;
}

/* Measurement Checkbox Styling (matching Step 2) */
.v10-measurement-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-3);
  cursor: pointer;
  padding: var(--v10-space-3);
  border-radius: var(--v10-radius-md);
  transition: var(--v10-transition);
}

.v10-measurement-checkbox:hover {
  background: var(--v10-bg-hover);
}

.v10-measurement-checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.v10-measurement-checkbox__custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--v10-border-primary);
  border-radius: var(--v10-radius-sm);
  background: var(--v10-bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--v10-transition);
  flex-shrink: 0;
  position: relative;
}

.v10-measurement-checkbox:hover .v10-measurement-checkbox__custom {
  border-color: var(--v10-accent-primary);
}

.v10-measurement-checkbox__input:checked + .v10-measurement-checkbox__custom {
  background: var(--v10-accent-primary);
  border-color: var(--v10-accent-primary);
}

.v10-measurement-checkbox__check {
  opacity: 0;
  color: white;
  transition: var(--v10-transition);
}

.v10-measurement-checkbox__input:checked + .v10-measurement-checkbox__custom .v10-measurement-checkbox__check {
  opacity: 1;
}

.v10-measurement-checkbox__content {
  flex: 1;
}

.v10-measurement-checkbox__title {
  color: var(--v10-text-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.v10-measurement-checkbox__title a {
  color: var(--v10-accent-primary);
  text-decoration: none;
  font-weight: 600;
}

.v10-measurement-checkbox__title a:hover {
  text-decoration: underline;
}

/* Large variant for terms checkbox */
.v10-measurement-checkbox--large .v10-measurement-checkbox__title {
  font-size: 1rem;
  font-weight: 500;
}

.v10-submit-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--v10-space-4);
  padding: var(--v10-space-6) 0;
  margin: var(--v10-space-4) 0;
}

@media (max-width: 768px) {
  .v10-submit-actions {
    flex-direction: column;
    gap: var(--v10-space-3);
  }
}

.techpack-header-with-help {
  margin-bottom: var(--v10-space-8);
}

/* Uploaded Files Grid Layout - 2 per row */
#review-uploaded-files {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--v10-space-3) !important;
}

.techpack-title {
  color: var(--v10-text-primary);
  font-size: var(--v10-text-3xl);
  font-weight: 700;
  margin: 0 0 var(--v10-space-2) 0;
  letter-spacing: -0.025em;
}

.techpack-subtitle {
  color: var(--v10-text-tertiary);
  font-size: var(--v10-text-lg);
  margin: 0;
  line-height: 1.5;
}

/* Improve review content spacing */
.v10-review-content {
  color: var(--v10-text-secondary);
}

.v10-review-content p {
  margin: 0 0 var(--v10-space-3) 0;
  line-height: 1.6;
}

/* Better checkbox styling */
.v10-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--v10-space-3);
  cursor: pointer;
  font-size: var(--v10-text-base);
  line-height: 1.5;
  color: var(--v10-text-secondary);
}

.v10-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.v10-checkbox-text a {
  color: var(--v10-text-success);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}

.v10-checkbox-text a:hover {
  text-decoration-color: var(--v10-text-success);
}

/* ===== Mobile Responsive Improvements - Step 4 uses unified .techpack-content ===== */
@media (max-width: 768px) {
  .v10-studio-card {
    padding: var(--v10-space-4);
    margin-bottom: var(--v10-space-4);
  }

  .v10-studio-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--v10-space-2);
  }

  /* Mobile Currency Toggle - Show only symbols */
  .v10-currency-btn {
    font-size: var(--v10-text-sm);
    padding: var(--v10-space-1) var(--v10-space-2);
    min-width: 28px;
  }
  
  .v10-currency-btn[data-currency="EUR"] {
    font-size: 0; /* Hide original text */
  }
  .v10-currency-btn[data-currency="EUR"]::after {
    content: "€";
    font-size: var(--v10-text-sm);
  }
  
  .v10-currency-btn[data-currency="USD"] {
    font-size: 0; /* Hide original text */
  }
  .v10-currency-btn[data-currency="USD"]::after {
    content: "$";
    font-size: var(--v10-text-sm);
  }

  /* Mobile Optional Badge Adjustment */
  .v10-optional-badge {
    font-size: var(--v10-text-xs);
    padding: var(--v10-space-1) var(--v10-space-2);
    margin: 0 var(--v10-space-1);
  }

  /* Mobile Uploaded Files - 2 per row */
  #review-uploaded-files {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--v10-space-3) !important;
  }

  .v10-garment-item {
    padding: var(--v10-space-3);
    gap: var(--v10-space-3);
  }

  .v10-garment-color {
    width: 28px;
    height: 28px;
  }

  .v10-garment-text {
    font-size: var(--v10-text-sm);
  }

  .v10-cost-item {
    padding: var(--v10-space-3);
  }

  .v10-cost-label {
    font-size: var(--v10-text-sm);
  }

  .v10-total-row {
    padding: var(--v10-space-3);
  }

  .v10-submit-card {
    padding: var(--v10-space-4);
  }

  .v10-submit-header {
    gap: var(--v10-space-3);
  }

  .techpack-title {
    font-size: var(--v10-text-2xl);
  }

  .techpack-subtitle {
    font-size: var(--v10-text-base);
  }
}

/* ============================================== */
/* V10 QUANTITY STUDIO REBUILD - NEW STYLES */
/* ============================================== */

/* Simplified Quantity Studio Stats Bar */
.v10-quantity-stats-bar {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-lg);
  padding: var(--v10-space-3);
  margin-bottom: var(--v10-space-4);
}

.v10-quantity-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--v10-space-4);
}

.v10-stat-item {
  text-align: center;
}

.v10-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--v10-text-secondary);
  transition: all 0.3s ease;
  line-height: 1;
  margin-bottom: 4px;
}

.v10-stat-value.sufficient {
  color: #10b981;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.v10-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--v10-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.v10-stat-item--highlight .v10-stat-value {
  color: #f59e0b;
}


/* Badge Styles - Linear Design */
.v10-garment-min {
  background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%);
  padding: 8px 16px;
  border: 1px solid #10b981;
  border-radius: 0; /* Linear design */
  font-size: 0.9rem;
  font-weight: 700;
  color: #10b981;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

/* Colorway Management - keeping relevant parts */
.v10-colorway-section {
  margin-top: var(--v10-space-4);
}

.v10-add-colorway-btn {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 2px dashed #10b981;
  border-radius: 0; /* Linear design */
  color: #10b981;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  min-height: 60px;
}

.v10-add-colorway-btn:hover {
  border-color: #0fa968;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
  transform: translateY(-2px);
}

.v10-colorway-item {
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: var(--v10-radius-md);
  padding: var(--v10-space-4);
  margin-bottom: var(--v10-space-3);
}

.v10-colorway-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--v10-space-3);
}

.v10-colorway-name {
  display: flex;
  align-items: center;
  gap: var(--v10-space-2);
  font-weight: 600;
  color: var(--v10-text-primary);
}

.v10-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--v10-border-secondary);
}

.v10-colorway-sizes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--v10-space-2);
}

.v10-size-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v10-size-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--v10-text-tertiary);
  text-align: center;
  text-transform: uppercase;
}

.v10-size-input {
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-secondary);
  border-radius: 0;
  padding: 8px;
  text-align: center;
  color: var(--v10-text-primary);
  font-weight: 600;
  font-size: 14px;
  width: 100%;
  transition: all 0.2s ease;
}

.v10-size-input:focus {
  outline: none;
  border-color: var(--v10-accent-primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.v10-colorway-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--v10-space-3);
  padding-top: var(--v10-space-3);
  border-top: 1px solid var(--v10-border-secondary);
}

.v10-colorway-subtotal {
  font-size: var(--v10-text-sm);
  color: var(--v10-text-secondary);
}

.v10-colorway-subtotal strong {
  color: var(--v10-text-primary);
  font-size: var(--v10-text-base);
}

.v10-garment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--v10-space-4);
  padding-top: var(--v10-space-4);
  border-top: 2px solid var(--v10-border-secondary);
}

.v10-garment-total {
  font-size: var(--v10-text-lg);
  font-weight: 700;
  color: var(--v10-text-primary);
}

.v10-garment-status {
  padding: 8px 16px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.v10-garment-status--sufficient {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.v10-garment-status--insufficient {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}


/* ==============================================
   V10 QUANTITY STUDIO ENHANCED STYLES
   ============================================== */

/* Color Picker Modal */
.v10-color-picker-content {
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.v10-color-disclaimer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(var(--v10-accent-rgb), 0.1);
  border: 1px solid rgba(var(--v10-accent-rgb), 0.3);
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--v10-text-secondary);
}

.v10-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}

.v10-color-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--v10-bg-secondary);
  border: 2px solid var(--v10-border-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.v10-color-preset:hover {
  border-color: var(--v10-accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.v10-color-preset-swatch {
  width: 50px;
  height: 50px;
  border-radius: 0;
  border: 2px solid var(--v10-border-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.v10-color-preset-name {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  color: var(--v10-text-primary);
}

.v10-color-preset-code {
  font-size: 0.75rem;
  color: var(--v10-text-tertiary);
  text-align: center;
}

.v10-custom-color-section {
  padding-top: 20px;
  border-top: 1px solid var(--v10-border-primary);
}

.v10-custom-color-section h3 {
  margin-bottom: 15px;
  color: var(--v10-text-primary);
}

.v10-custom-color-inputs {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.v10-color-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v10-color-input-group label {
  font-size: 0.85rem;
  color: var(--v10-text-secondary);
  font-weight: 500;
}

.v10-color-input-group input[type="text"] {
  padding: 10px;
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-primary);
  border-radius: 0;
  color: var(--v10-text-primary);
  font-size: 0.95rem;
}

.v10-hex-input-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.v10-hex-input-wrapper input[type="text"] {
  flex: 1;
}

.v10-hex-input-wrapper input[type="color"] {
  width: 50px;
  height: 40px;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

/* Duplicate styles removed - see enhanced version above */

/* Enhanced Colorway Tabs */
.v10-colorway-tabs-container {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0;
  border: 1px solid #3a3a3a;
  flex-wrap: wrap;
}

.v10-colorway-tabs {
  display: flex;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}

.v10-colorway-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(26, 26, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-width: 200px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Visual distinction for inactive tabs */
.v10-colorway-tab:not(.active) {
  opacity: 0.6;
  filter: grayscale(30%);
  background: rgba(255,255,255,0.02);
}

.v10-colorway-tab.active {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2), 0 4px 6px -1px rgba(16, 185, 129, 0.1);
  opacity: 1;
  filter: none;
  transform: scale(1.02);
  z-index: 10;
}

.v10-colorway-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(26, 26, 30, 1);
}

.v10-colorway-tab-color {
  width: 24px;
  height: 24px;
  border-radius: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.v10-colorway-tab-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v10-colorway-tab-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.v10-colorway-tab-count {
  font-size: 0.8rem;
  color: #10b981;
  font-weight: 600;
}

.v10-colorway-tab-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--v10-danger-color, #ef4444);
  border: 2px solid var(--v10-bg-secondary);
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.v10-colorway-tab:hover .v10-colorway-tab-remove {
  display: flex;
}

.v10-colorway-tab-remove:hover {
  transform: scale(1.1);
}

.v10-add-colorway-tab {
  min-width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--v10-bg-primary);
  border: 2px dashed var(--v10-border-primary);
  color: var(--v10-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 12px;
  white-space: nowrap;
}

.v10-add-colorway-tab:hover {
  border-color: var(--v10-accent-primary);
  color: var(--v10-accent-primary);
  background: rgba(var(--v10-accent-rgb), 0.05);
}

/* Size Inputs with Color Indicators */
.v10-colorway-content-wrapper {
  padding: 20px 0;
}

.v10-design-reference-section {
  margin-bottom: 20px;
  padding: 15px;
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-primary);
  border-radius: 8px;
}

.v10-design-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--v10-text-primary);
  margin-bottom: 10px;
}

.v10-design-reference-input {
  width: 100%;
  padding: 10px;
  background: var(--v10-bg-secondary);
  border: 1px solid var(--v10-border-primary);
  border-radius: 0;
  color: var(--v10-text-primary);
  font-size: 0.95rem;
}

.v10-size-inputs-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.v10-size-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.v10-size-color-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.v10-size-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--v10-text-secondary);
  text-align: center;
  padding-top: 6px;
}

.v10-size-input {
  padding: 8px;
  background: var(--v10-bg-primary);
  border: 1px solid var(--v10-border-primary);
  border-radius: 0;
  color: var(--v10-text-primary);
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.v10-size-input:focus {
  border-color: var(--v10-accent-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--v10-accent-rgb), 0.1);
}

.v10-size-input:hover {
  background: var(--v10-bg-secondary);
}

/* Colorway Actions */
.v10-colorway-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--v10-border-primary);
}

.v10-colorway-subtotal {
  margin-left: auto;
  font-size: 0.95rem;
  color: var(--v10-text-secondary);
}

.v10-colorway-subtotal strong {
  color: var(--v10-accent-primary);
  font-size: 1.1rem;
}

/* Garment Footer */
.v10-garment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--v10-border-primary);
}

.v10-garment-total {
  font-size: 0.95rem;
  color: var(--v10-text-secondary);
}

.v10-garment-total strong {
  font-size: 1.2rem;
  color: var(--v10-text-primary);
  font-weight: 700;
}

.v10-garment-status {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.v10-garment-status--insufficient {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.v10-garment-status--sufficient {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .v10-size-inputs-row {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .v10-colorway-tabs-container {
    flex-direction: column;
  }
  
  .v10-colorway-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .v10-colorway-subtotal {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .v10-size-inputs-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .v10-garment-header {
    flex-direction: column;
    gap: 10px;
  }
  
  .v10-garment-footer {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}


/* ==============================================
   V10 QUANTITY STUDIO ENHANCED MODAL STYLES
   ============================================== */

/* Color Picker Modal - Fixed Styling */
.v10-color-picker-content {
  max-width: 650px !important;
  width: 90% !important;
  max-height: 85vh !important;
  overflow-y: auto !important;
  background: #1a1a1a !important;
  border: 2px solid #404040 !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9) !important;
}

.v10-modal-overlay .v10-modal-header {
  background: #252525 !important;
  padding: 20px !important;
  border-bottom: 1px solid #404040 !important;
}

.v10-modal-overlay .v10-modal-header h2 {
  color: #ffffff !important;
}

.v10-modal-overlay .v10-modal-body {
  background: #1a1a1a !important;
  padding: 24px !important;
}

/* Button Ghost Style Fix */
.v10-btn--ghost {
  background: linear-gradient(135deg, #2a2a2a 0%, #252525 100%);
  color: #9ca3af;
  border: 1px solid #404040;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.v10-btn--ghost:hover {
  background: linear-gradient(135deg, #333333 0%, #2d2d2d 100%);
  color: #ffffff;
  border-color: #505050;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Size Input Fields Enhanced */
.v10-size-input {
  background: #1a1a1a !important;
  border: 1px solid #404040 !important;
  color: #ffffff !important;
  text-align: center;
  font-weight: 600;
}

.v10-size-input:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Garment Footer Enhanced */
.v10-garment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #404040;
}

.v10-garment-total {
  font-size: 0.95rem;
  color: #9ca3af;
}

.v10-garment-total strong {
  font-size: 1.2rem;
  color: #ffffff;
  font-weight: 700;
}

.v10-garment-status {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.v10-garment-status--insufficient {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.v10-garment-status--sufficient {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ==============================================
   V10 QUANTITY STUDIO - COMPLETE REDESIGN
   Matching Color Studio Professional Design
   ============================================== */

/* Quantity Studio Header Stats */
.quantity-studio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 24px;
  background: rgba(26, 26, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.quantity-stat-item {
  text-align: center;
}

.quantity-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 8px;
}

.quantity-stat-value.sufficient {
  color: #10b981;
}

.quantity-stat-value.insufficient {
  color: #ef4444;
}

.quantity-stat-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Removed duplicate .v10-add-colorway-btn styles - already defined above */

/* V10 Quantity Garment Full - Professional Dark Layout */
/* Unified Garment Card Design */
.v10-quantity-garment-full {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  margin: 0 0 32px 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  position: relative !important;
  transition: border-color 0.3s ease !important;
}

/* Green left border indicator for completed garments */
.v10-quantity-garment-full.garment-quantity-card--complete {
  border-left: 4px solid #10b981 !important;
  padding-left: 0 !important;
}

/* Alternative with pseudo-element if border doesn't work well
.v10-quantity-garment-full.garment-quantity-card--complete::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #10b981;
  z-index: 1;
} */

.v10-quantity-garment-full .v10-colorway-section {
  margin-top: 20px;
  width: 100%;
}

.v10-quantity-garment-full .v10-colorway-tabs-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.v10-quantity-garment-full .v10-colorway-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.v10-quantity-garment-full .v10-add-colorway-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: 0;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  line-height: 1;
  min-width: auto;
  width: auto;
  height: auto;
  min-height: 36px;
}

.v10-quantity-garment-full .v10-add-colorway-tab:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

.v10-quantity-garment-full .v10-colorways-content {
  padding: 20px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0;
}

.v10-quantity-garment-full .v10-colorways-content:not(:empty) {
  min-height: 100px;
}

/* Removed duplicate .v10-quantity-garment-full--complete style - now defined above with main card styles */

/* Size Input Refinements */
.v10-size-input-wrapper {
  position: relative;
}

.v10-size-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.v10-size-input {
  width: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
}

.v10-size-input:focus {
  background: rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.v10-size-input:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Action Buttons Refinement */
.v10-colorway-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.v10-colorway-actions .v10-btn {
  flex: 1;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.v10-colorway-actions .v10-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Colorway Subtotal */
.v10-colorway-subtotal {
  margin-left: auto;
  padding: 10px 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #10b981;
}

/* Footer Stats Enhancement */
.v10-garment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.v10-garment-total {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.v10-garment-total strong {
  font-size: 18px;
  color: #ffffff;
  font-weight: 700;
  margin: 0 4px;
}

/* Remove Button Icon Fix - Removed duplicate, using inline styles in JS instead */

/* Design Reference Input */
.v10-design-reference-input {
  width: 100%;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.2s ease;
}

.v10-design-reference-input:focus {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(16, 185, 129, 0.5);
  outline: none;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Minimum Badge Enhancement */
.v10-garment-min {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #f59e0b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Colorway Tabs Container */
.v10-colorway-tabs-container {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* REMOVED: Duplicate .v10-colorway-tabs definition (already exists at line 9815) */

/* Responsive Grid for Size Inputs */
.v10-size-inputs-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-top: 20px;
}

/* Color Indicator Circle */
.v10-size-color-indicator {
  width: 8px;
  height: 8px;
  border-radius: 0;
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Quantities Container Background */
#quantities-studio {
  background: transparent;
  padding: 0;
}

.responsive-garment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
}

@media (min-width: 1024px) {
  .responsive-garment-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* ==============================================
   BULK QUANTITY REVIEW STYLES
   ============================================== */

.v10-bulk-garment-review {
  background: rgba(26, 26, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.v10-bulk-garment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.v10-bulk-garment-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.v10-bulk-garment-total {
  font-size: 0.95rem;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 12px;
  border-radius: 6px;
}

.v10-bulk-colorways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.v10-bulk-colorway-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.v10-bulk-colorway-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

.v10-bulk-colorway-visual {
  flex-shrink: 0;
}

.v10-bulk-color-square {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.v10-bulk-colorway-details {
  flex: 1;
  min-width: 0;
}

.v10-bulk-colorway-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.v10-bulk-colorway-quantity {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #10b981;
  margin-bottom: 8px;
}

.v10-bulk-sizes-summary {
  font-size: 0.85rem;
  color: #a3a3a3;
  line-height: 1.4;
}

.v10-sizes-list {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 0.8rem;
}

.v10-no-sizes, .v10-no-data {
  color: #6b7280;
  font-style: italic;
  font-size: 0.85rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .v10-bulk-colorways-grid {
    grid-template-columns: 1fr;
  }
  
  .v10-bulk-colorway-item {
    padding: 12px;
  }
  
  .v10-bulk-color-square {
    width: 28px;
    height: 28px;
  }
}