/* ========================================
   Class List Scroller CSS
   Premium Futuristic Design System - Unified Version
   Mobile-Optimized with Exact Specifications
   High Specificity for WordPress Theme Conflict Resolution
   ======================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/* CSS Variables - EXACT VALUES ONLY */
:root {
  /* Colors - EXACT PALETTE ONLY */
  --primary-accent: #076642;
  --primary-hover: #0A8A5A;
  --background-main: #000000;
  --background-surface: #111111;
  --background-secondary: #1A1A1A;
  
  /* Text Colors - EXACT VALUES ONLY */
  --text-heading: #FFFFFF;
  --text-body: #CFCFCF;
  --text-muted: #8A8A8A;
  
  /* Feedback Colors - EXACT VALUES ONLY */
  --success: #0DBD5C;
  --warning: #FFB347;
  --error: #E54848;
  
  /* Border Colors - EXACT VALUES ONLY */
  --border-primary: #333333;
  --border-secondary: #222222;
  
  /* Spacing - EXACT VALUES ONLY */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px; /* Added for new spacing */
  
  /* Transitions - EXACT TIMING ONLY */
  --transition-standard: 0.2s ease;
  
  /* Shadows - EXACT VALUES ONLY */
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  --glow-primary: 0 0 20px rgba(7, 102, 66, 0.4);
  
  /* Mobile-specific - EXACT VALUES ONLY */
  --mobile-padding: 16px;
  --mobile-gap: 12px;
  --mobile-border-radius: 12px;
  --touch-target-size: 44px;
  
  /* Font Sizes - Minimum 14px for accessibility */
  --font-size-xs: 14px;    /* Was 0.75rem (12px) - now 14px */
  --font-size-sm: 14px;    /* Was 0.875rem (14px) - now 14px */
  --font-size-base: 16px;  /* Base size for body text */
  --font-size-lg: 18px;    /* Was 1.25rem (20px) - now 18px */
  --font-size-xl: 24px;    /* Was 1.5rem (24px) - now 24px */
  --font-size-2xl: 32px;   /* Was 2rem (32px) - now 32px */
  --font-size-3xl: 40px;   /* Was 2.5rem (40px) - now 40px */
}

/* ========================================
   HIGH SPECIFICITY SELECTORS
   WordPress Theme Conflict Resolution
   ======================================== */

/* Container & Layout - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-class-scroller-container,
html body .cm-class-scroller-container,
body .cm-class-scroller-container.cm-class-scroller-container {
  background: var(--background-main) !important;
  color: var(--text-body) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Month Header - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-class-scroller-container .cm-month-header,
html body .cm-class-scroller-container .cm-month-header {
  margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
  text-align: center !important;
}

body .cm-class-scroller-container .cm-month-title,
html body .cm-class-scroller-container .cm-month-title {
  font-size: var(--font-size-3xl) !important; /* 40px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  line-height: 1.2 !important; /* EXACT VALUE */
  color: var(--text-heading) !important;
  margin: 0 0 var(--spacing-xl) 0 !important; /* EXACT: 0 0 24px 0 */
  background: linear-gradient(135deg, var(--text-heading), var(--primary-accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Navigation Controls - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-class-scroller-container .cm-navigation-controls,
html body .cm-class-scroller-container .cm-navigation-controls {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
  gap: var(--spacing-md) !important; /* EXACT: 16px */
}

body .cm-class-scroller-container .cm-nav-btn,
html body .cm-class-scroller-container .cm-nav-btn {
  background: var(--primary-accent) !important;
  color: var(--text-heading) !important;
  border: none !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important; /* EXACT: 12px 20px */
  border-radius: 8px !important; /* EXACT VALUE */
  font-weight: 500 !important; /* EXACT WEIGHT */
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body .cm-class-scroller-container .cm-nav-btn:hover,
html body .cm-class-scroller-container .cm-nav-btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-md) !important; /* EXACT: 0 8px 24px rgba(7, 102, 66, 0.4) */
}

body .cm-class-scroller-container .cm-nav-btn-disabled,
html body .cm-class-scroller-container .cm-nav-btn-disabled {
  background: var(--border-primary) !important;
  color: #666666 !important;
  cursor: not-allowed !important;
}

/* Date Scroller - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-class-scroller-container .cm-date-scroller,
html body .cm-class-scroller-container .cm-date-scroller {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important; /* EXACT VALUE */
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
  margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
  flex-wrap: wrap !important;
}

body .cm-class-scroller-container .cm-date-btn,
html body .cm-class-scroller-container .cm-date-btn {
  background: var(--background-secondary) !important;
  color: var(--text-body) !important;
  border: 2px solid var(--border-primary) !important;
  padding: var(--spacing-md) var(--spacing-lg) !important; /* EXACT: 16px 20px */
  border-radius: 12px !important; /* EXACT VALUE */
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important; /* EXACT VALUE */
  min-width: 80px !important; /* EXACT VALUE */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  justify-content: center !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body .cm-class-scroller-container .cm-date-btn:hover,
html body .cm-class-scroller-container .cm-date-btn:hover {
  border-color: var(--primary-accent) !important;
  background: var(--background-surface) !important;
}

body .cm-class-scroller-container .cm-date-btn-active,
html body .cm-class-scroller-container .cm-date-btn-active {
  border-color: var(--primary-accent) !important;
  background: var(--primary-accent) !important;
  color: var(--text-heading) !important;
  box-shadow: var(--glow-primary) !important; /* EXACT: 0 0 20px rgba(7, 102, 66, 0.4) */
}

body .cm-class-scroller-container .cm-date-day,
html body .cm-class-scroller-container .cm-date-day {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: inherit !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-date-number,
html body .cm-class-scroller-container .cm-date-number {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: inherit !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Filters Section - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-class-scroller-container .cm-filters-section,
html body .cm-class-scroller-container .cm-filters-section {
  margin-bottom: var(--spacing-2xl) !important; /* EXACT: 32px */
}

body .cm-class-scroller-container .cm-filters-form,
html body .cm-class-scroller-container .cm-filters-form {
  background: var(--background-surface) !important;
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
  border-radius: 16px !important;
  border: 1px solid var(--border-primary) !important;
}

body .cm-class-scroller-container .cm-filters-row,
html body .cm-class-scroller-container .cm-filters-row {
  display: flex !important;
  gap: var(--spacing-lg) !important; /* EXACT: 20px */
  align-items: end !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-filter-group,
html body .cm-class-scroller-container .cm-filter-group {
  flex: 1 !important; /* EXACT VALUE */
  min-width: 200px !important;
}

body .cm-class-scroller-container .cm-filter-label,
html body .cm-class-scroller-container .cm-filter-label {
  display: block !important;
  margin-bottom: var(--spacing-xs) !important; /* EXACT: 8px */
  color: var(--text-heading) !important;
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-filter-select,
html body .cm-class-scroller-container .cm-filter-select {
  width: 100% !important;
  background: var(--background-secondary) !important;
  color: var(--text-body) !important;
  border: 1px solid var(--border-primary) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important; /* EXACT: 12px 16px */
  border-radius: 8px !important; /* EXACT VALUE */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w0/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  padding-right: 40px !important;
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  flex-shrink: 0 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  box-shadow: none !important;
}

body .cm-class-scroller-container .cm-filter-select:focus,
html body .cm-class-scroller-container .cm-filter-select:focus {
  outline: none !important;
  border-color: var(--primary-accent) !important;
  box-shadow: 0 0 0 3px rgba(7, 102, 66, 0.2) !important;
}

body .cm-class-scroller-container .cm-filter-apply-btn,
html body .cm-class-scroller-container .cm-filter-apply-btn {
  background: var(--primary-accent) !important;
  color: var(--text-heading) !important;
  border: none !important;
  padding: var(--spacing-sm) var(--spacing-xl) !important; /* EXACT: 12px 24px */
  border-radius: 8px !important; /* EXACT VALUE */
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  white-space: nowrap !important;
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  flex-shrink: 0 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body .cm-class-scroller-container .cm-filter-apply-btn:hover,
html body .cm-class-scroller-container .cm-filter-apply-btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-md) !important; /* EXACT: 0 8px 24px rgba(7, 102, 66, 0.4) */
}

/* Classes Results - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-class-scroller-container .cm-classes-grid,
html body .cm-class-scroller-container .cm-classes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
  gap: var(--spacing-xl) !important; /* EXACT: 24px */
}

body .cm-class-scroller-container .cm-class-card,
html body .cm-class-scroller-container .cm-class-card {
  background: var(--background-surface) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 16px !important;
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
  cursor: pointer !important;
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  box-shadow: var(--shadow-sm) !important; /* EXACT: 0 4px 12px rgba(0,0,0,0.3) */
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-card:hover,
html body .cm-class-scroller-container .cm-class-card:hover {
  border-color: var(--primary-accent) !important;
  transform: translateY(-4px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-lg) !important; /* EXACT: 0 16px 48px rgba(0,0,0,0.5) */
}

body .cm-class-scroller-container .cm-class-header,
html body .cm-class-scroller-container .cm-class-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-class-scroller-container .cm-trainer-section,
html body .cm-class-scroller-container .cm-trainer-section {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
  flex: 1 !important;
}

body .cm-class-scroller-container .cm-trainer-photo-wrap,
html body .cm-class-scroller-container .cm-trainer-photo-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-trainer-photo,
html body .cm-class-scroller-container .cm-trainer-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body .cm-class-scroller-container .cm-trainer-photo-placeholder,
html body .cm-class-scroller-container .cm-trainer-photo-placeholder {
  width: 48px !important;
  height: 48px !important;
  background: var(--background-secondary) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666666 !important;
  flex-shrink: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-trainer-info,
html body .cm-class-scroller-container .cm-trainer-info {
  min-width: 0 !important; /* EXACT VALUE */
  flex: 1 !important;
}

body .cm-class-scroller-container .cm-trainer-label,
html body .cm-class-scroller-container .cm-trainer-label {
  color: var(--text-heading) !important;
  font-weight: 500 !important; /* EXACT WEIGHT */
  margin: 0 0 4px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-difficulty-badge,
html body .cm-class-scroller-container .cm-difficulty-badge {
  display: inline-block !important;
  padding: 4px 8px !important; /* EXACT VALUES */
  border-radius: 6px !important; /* EXACT VALUE */
  font-size: var(--font-size-xs) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-difficulty-beginner,
html body .cm-class-scroller-container .cm-difficulty-beginner { 
  background: var(--success) !important; 
  color: var(--text-heading) !important; 
}

body .cm-class-scroller-container .cm-difficulty-intermediate,
html body .cm-class-scroller-container .cm-difficulty-intermediate { 
  background: var(--error) !important; 
  color: var(--text-heading) !important; 
}

body .cm-class-scroller-container .cm-difficulty-normal,
html body .cm-class-scroller-container .cm-difficulty-normal { 
  background: var(--warning) !important; 
  color: #000000 !important; 
}

body .cm-class-scroller-container .cm-difficulty-advanced,
html body .cm-class-scroller-container .cm-difficulty-advanced { 
  background: #8B5CF6 !important; 
  color: var(--text-heading) !important; 
}

body .cm-class-scroller-container .cm-class-time,
html body .cm-class-scroller-container .cm-class-time {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  color: var(--text-body) !important;
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  flex-shrink: 0 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-time-icon,
html body .cm-class-scroller-container .cm-time-icon {
  color: var(--primary-accent) !important;
}

body .cm-class-scroller-container .cm-class-content,
html body .cm-class-scroller-container .cm-class-content {
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-class-scroller-container .cm-class-title,
html body .cm-class-scroller-container .cm-class-title {
  color: var(--text-heading) !important;
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  margin: 0 0 var(--spacing-sm) 0 !important; /* EXACT: 0 0 12px 0 */
  line-height: 1.3 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-description,
html body .cm-class-scroller-container .cm-class-description {
  color: var(--text-body) !important;
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  line-height: 1.5 !important; /* EXACT VALUE */
  margin: 0 !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-footer,
html body .cm-class-scroller-container .cm-class-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--spacing-md) !important; /* EXACT: 16px */
}

body .cm-class-scroller-container .cm-class-meta,
html body .cm-class-scroller-container .cm-class-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  min-width: 0 !important; /* EXACT VALUE */
  flex: 1 !important;
}

body .cm-class-scroller-container .cm-meta-item,
html body .cm-class-scroller-container .cm-meta-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  color: var(--text-muted) !important;
  font-size: var(--font-size-xs) !important; /* 14px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-meta-icon,
html body .cm-class-scroller-container .cm-meta-icon {
  color: var(--primary-accent) !important;
  flex-shrink: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-meta-text,
html body .cm-class-scroller-container .cm-meta-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-action,
html body .cm-class-scroller-container .cm-class-action {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  color: var(--primary-accent) !important;
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  flex-shrink: 0 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-decoration: none !important;
}

body .cm-class-scroller-container .cm-class-action:hover,
html body .cm-class-scroller-container .cm-class-action:hover {
  color: var(--primary-hover) !important;
}

/* No Classes State - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-class-scroller-container .cm-no-classes,
html body .cm-class-scroller-container .cm-no-classes {
  text-align: center !important;
  padding: 60px 20px !important; /* EXACT VALUES */
  color: var(--text-muted) !important;
}

body .cm-class-scroller-container .cm-no-classes-icon,
html body .cm-class-scroller-container .cm-no-classes-icon {
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
  color: #666666 !important;
}

body .cm-class-scroller-container .cm-no-classes h3,
html body .cm-class-scroller-container .cm-no-classes h3 {
  color: var(--text-heading) !important;
  margin: 0 0 var(--spacing-sm) 0 !important; /* EXACT: 0 0 12px 0 */
  font-size: var(--font-size-xl) !important; /* 24px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-no-classes p,
html body .cm-class-scroller-container .cm-no-classes p {
  margin: 0 !important;
  font-size: var(--font-size-base) !important; /* 16px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ========================================
   Date Scroller - Horizontal Scrollable with HIGH SPECIFICITY
   ======================================== */

body .cm-class-scroller-container .cm-date-scroller-container,
html body .cm-class-scroller-container .cm-date-scroller-container {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  margin-bottom: var(--spacing-2xl) !important; /* EXACT: 32px */
}

body .cm-class-scroller-container .cm-date-scroller,
html body .cm-class-scroller-container .cm-date-scroller {
  display: flex !important;
  gap: var(--spacing-md) !important; /* EXACT: 16px */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth !important;
  padding: var(--spacing-sm) 0 !important; /* EXACT: 8px 0 */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
  scroll-snap-type: x mandatory !important;
  scroll-padding: var(--spacing-lg) !important; /* EXACT: 20px */
}

/* Hide scrollbar for webkit browsers */
body .cm-class-scroller-container .cm-date-scroller::-webkit-scrollbar,
html body .cm-class-scroller-container .cm-date-scroller::-webkit-scrollbar {
  display: none !important;
}

body .cm-class-scroller-container .cm-date-scroller .cm-date-btn,
html body .cm-class-scroller-container .cm-date-scroller .cm-date-btn {
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
  min-width: 80px !important; /* EXACT VALUE */
  height: 80px !important; /* EXACT VALUE */
  background: var(--background-surface) !important;
  border: 2px solid var(--border-primary) !important;
  border-radius: 16px !important; /* EXACT VALUE */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  cursor: pointer !important;
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  text-decoration: none !important;
  color: var(--text-body) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

body .cm-class-scroller-container .cm-date-scroller .cm-date-btn:hover,
html body .cm-class-scroller-container .cm-date-scroller .cm-date-btn:hover {
  border-color: var(--primary-accent) !important;
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-md) !important; /* EXACT: 0 8px 24px rgba(7, 102, 66, 0.4) */
}

body .cm-class-scroller-container .cm-date-scroller .cm-date-btn.cm-date-btn-active,
html body .cm-class-scroller-container .cm-date-scroller .cm-date-btn.cm-date-btn-active {
  background: var(--primary-accent) !important;
  border-color: var(--primary-accent) !important;
  color: var(--text-heading) !important;
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-lg) !important; /* EXACT: 0 12px 32px rgba(7, 102, 66, 0.5) */
}

body .cm-class-scroller-container .cm-date-scroller .cm-date-btn.cm-date-btn-active::before,
html body .cm-class-scroller-container .cm-date-scroller .cm-date-btn.cm-date-btn-active::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
  pointer-events: none !important;
}

body .cm-class-scroller-container .cm-date-scroller .cm-date-btn:focus,
html body .cm-class-scroller-container .cm-date-scroller .cm-date-btn:focus {
  outline: none !important;
  border-color: var(--primary-accent) !important;
  box-shadow: 0 0 0 3px rgba(7, 102, 66, 0.2) !important;
}

body .cm-class-scroller-container .cm-date-scroller .cm-date-btn:active,
html body .cm-class-scroller-container .cm-date-scroller .cm-date-btn:active {
  transform: translateY(0) !important;
  box-shadow: var(--shadow-sm) !important; /* EXACT: 0 2px 8px rgba(7, 102, 66, 0.3) */
}

body .cm-class-scroller-container .cm-date-scroller .cm-date-day,
html body .cm-class-scroller-container .cm-date-scroller .cm-date-day {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: inherit !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-date-scroller .cm-date-number,
html body .cm-class-scroller-container .cm-date-scroller .cm-date-number {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: inherit !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ========================================
   Month Header - EXACT SPECIFICATIONS with HIGH SPECIFICITY
   ======================================== */

body .cm-class-scroller-container .cm-month-header,
html body .cm-class-scroller-container .cm-month-header {
  text-align: center !important;
  margin-bottom: var(--spacing-2xl) !important; /* EXACT: 32px */
}

body .cm-class-scroller-container .cm-month-title,
html body .cm-class-scroller-container .cm-month-title {
  font-size: var(--font-size-3xl) !important; /* 48px - minimum 14px */
  font-weight: 700 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  margin: 0 !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.2 !important;
  background: linear-gradient(135deg, var(--primary-accent) 0%, var(--primary-hover) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;
}

/* ========================================
   Filters Section - EXACT SPECIFICATIONS with HIGH SPECIFICITY
   ======================================== */

body .cm-class-scroller-container .cm-filters-section,
html body .cm-class-scroller-container .cm-filters-section {
  margin-bottom: var(--spacing-2xl) !important; /* EXACT: 32px */
}

body .cm-class-scroller-container .cm-filters-form,
html body .cm-class-scroller-container .cm-filters-form {
  background: var(--background-surface) !important;
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
  border-radius: 16px !important;
  border: 1px solid var(--border-primary) !important;
}

body .cm-class-scroller-container .cm-filters-row,
html body .cm-class-scroller-container .cm-filters-row {
  display: flex !important;
  gap: var(--spacing-lg) !important; /* EXACT: 20px */
  align-items: end !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-filter-group,
html body .cm-class-scroller-container .cm-filter-group {
  flex: 1 !important; /* EXACT VALUE */
  min-width: 200px !important;
}

body .cm-class-scroller-container .cm-filter-label,
html body .cm-class-scroller-container .cm-filter-label {
  display: block !important;
  margin-bottom: var(--spacing-xs) !important; /* EXACT: 8px */
  color: var(--text-heading) !important;
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-filter-select,
html body .cm-class-scroller-container .cm-filter-select {
  width: 100% !important;
  background: var(--background-secondary) !important;
  color: var(--text-body) !important;
  border: 1px solid var(--border-primary) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important; /* EXACT: 12px 16px */
  border-radius: 8px !important; /* EXACT VALUE */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w0/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  padding-right: 40px !important;
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  flex-shrink: 0 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  box-shadow: none !important;
}

body .cm-class-scroller-container .cm-filter-select:focus,
html body .cm-class-scroller-container .cm-filter-select:focus {
  outline: none !important;
  border-color: var(--primary-accent) !important;
  box-shadow: 0 0 0 3px rgba(7, 102, 66, 0.2) !important;
}

body .cm-class-scroller-container .cm-filter-apply-btn,
html body .cm-class-scroller-container .cm-filter-apply-btn {
  background: var(--primary-accent) !important;
  color: var(--text-heading) !important;
  border: none !important;
  padding: var(--spacing-sm) var(--spacing-xl) !important; /* EXACT: 12px 24px */
  border-radius: 8px !important; /* EXACT VALUE */
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  white-space: nowrap !important;
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  flex-shrink: 0 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body .cm-class-scroller-container .cm-filter-apply-btn:hover,
html body .cm-class-scroller-container .cm-filter-apply-btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-md) !important; /* EXACT: 0 8px 24px rgba(7, 102, 66, 0.4) */
}

/* ========================================
   Classes Results - EXACT SPECIFICATIONS with HIGH SPECIFICITY
   ======================================== */

body .cm-class-scroller-container .cm-classes-grid,
html body .cm-class-scroller-container .cm-classes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
  gap: var(--spacing-xl) !important; /* EXACT: 24px */
}

body .cm-class-scroller-container .cm-class-card,
html body .cm-class-scroller-container .cm-class-card {
  background: var(--background-surface) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 16px !important;
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
  cursor: pointer !important;
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  box-shadow: var(--shadow-sm) !important; /* EXACT: 0 4px 12px rgba(0,0,0,0.3) */
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-card:hover,
html body .cm-class-scroller-container .cm-class-card:hover {
  border-color: var(--primary-accent) !important;
  transform: translateY(-4px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-lg) !important; /* EXACT: 0 16px 48px rgba(0,0,0,0.5) */
}

body .cm-class-scroller-container .cm-class-header,
html body .cm-class-scroller-container .cm-class-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-class-scroller-container .cm-trainer-section,
html body .cm-class-scroller-container .cm-trainer-section {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
  flex: 1 !important;
}

body .cm-class-scroller-container .cm-trainer-photo-wrap,
html body .cm-class-scroller-container .cm-trainer-photo-wrap {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-trainer-photo,
html body .cm-class-scroller-container .cm-trainer-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body .cm-class-scroller-container .cm-trainer-photo-placeholder,
html body .cm-class-scroller-container .cm-trainer-photo-placeholder {
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, var(--primary-accent) 0%, var(--primary-hover) 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-heading) !important;
  font-weight: 600 !important;
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  flex-shrink: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-trainer-info,
html body .cm-class-scroller-container .cm-trainer-info {
  min-width: 0 !important; /* EXACT VALUE */
  flex: 1 !important;
}

body .cm-class-scroller-container .cm-trainer-label,
html body .cm-class-scroller-container .cm-trainer-label {
  color: var(--text-heading) !important;
  font-weight: 500 !important; /* EXACT WEIGHT */
  margin: 0 0 4px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-difficulty-badge,
html body .cm-class-scroller-container .cm-difficulty-badge {
  display: inline-block !important;
  padding: 4px 8px !important; /* EXACT VALUES */
  border-radius: 6px !important; /* EXACT VALUE */
  font-size: var(--font-size-xs) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-difficulty-beginner,
html body .cm-class-scroller-container .cm-difficulty-beginner { 
  background: var(--success) !important; 
  color: var(--text-heading) !important; 
}

body .cm-class-scroller-container .cm-difficulty-intermediate,
html body .cm-class-scroller-container .cm-difficulty-intermediate { 
  background: var(--error) !important; 
  color: var(--text-heading) !important; 
}

body .cm-class-scroller-container .cm-difficulty-normal,
html body .cm-class-scroller-container .cm-difficulty-normal { 
  background: var(--warning) !important; 
  color: #000000 !important; 
}

body .cm-class-scroller-container .cm-difficulty-advanced,
html body .cm-class-scroller-container .cm-difficulty-advanced { 
  background: #8B5CF6 !important; 
  color: var(--text-heading) !important; 
}

body .cm-class-scroller-container .cm-class-time,
html body .cm-class-scroller-container .cm-class-time {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  color: var(--text-body) !important;
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  flex-shrink: 0 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-time-icon,
html body .cm-class-scroller-container .cm-time-icon {
  color: var(--primary-accent) !important;
}

body .cm-class-scroller-container .cm-class-content,
html body .cm-class-scroller-container .cm-class-content {
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-class-scroller-container .cm-class-title,
html body .cm-class-scroller-container .cm-class-title {
  font-size: var(--font-size-xl) !important; /* 20px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  margin: 0 0 var(--spacing-sm) 0 !important; /* EXACT: 0 0 8px 0 */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.4 !important;
}

body .cm-class-scroller-container .cm-class-description,
html body .cm-class-scroller-container .cm-class-description {
  color: var(--text-body) !important;
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  line-height: 1.6 !important;
  margin: 0 0 var(--spacing-lg) 0 !important; /* EXACT: 0 0 20px 0 */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-footer,
html body .cm-class-scroller-container .cm-class-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: var(--spacing-md) !important; /* EXACT: 16px */
}

body .cm-class-scroller-container .cm-class-meta,
html body .cm-class-scroller-container .cm-class-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-class-scroller-container .cm-meta-item,
html body .cm-class-scroller-container .cm-meta-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
  color: var(--text-body) !important;
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-meta-item svg,
html body .cm-class-scroller-container .cm-meta-item svg {
  color: var(--text-muted) !important;
  flex-shrink: 0 !important;
}

body .cm-class-scroller-container .cm-seats-info,
html body .cm-class-scroller-container .cm-seats-info {
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-class-scroller-container .cm-seats-bar,
html body .cm-class-scroller-container .cm-seats-bar {
  width: 100% !important;
  height: 8px !important; /* EXACT VALUE */
  background: var(--border-primary) !important;
  border-radius: 4px !important; /* EXACT VALUE */
  overflow: hidden !important;
  margin-bottom: var(--spacing-xs) !important; /* EXACT: 8px */
}

body .cm-class-scroller-container .cm-seats-fill,
html body .cm-class-scroller-container .cm-seats-fill {
  height: 100% !important;
  background: var(--primary-accent) !important;
  border-radius: 4px !important; /* EXACT VALUE */
  transition: width 0.3s ease !important;
}

body .cm-class-scroller-container .cm-seats-text,
html body .cm-class-scroller-container .cm-seats-text {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  color: var(--text-muted) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-action,
html body .cm-class-scroller-container .cm-class-action {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--spacing-md) !important; /* EXACT: 16px */
  background: var(--background-secondary) !important;
  border-radius: 8px !important; /* EXACT VALUE */
  color: var(--primary-accent) !important;
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
}

body .cm-class-scroller-container .cm-class-action:hover,
html body .cm-class-scroller-container .cm-class-action:hover {
  background: var(--primary-accent) !important;
  color: var(--text-heading) !important;
}

body .cm-class-scroller-container .cm-action-text,
html body .cm-class-scroller-container .cm-action-text {
  font-weight: 500 !important; /* EXACT WEIGHT */
}

body .cm-class-scroller-container .cm-no-classes,
html body .cm-class-scroller-container .cm-no-classes {
  text-align: center !important;
  padding: var(--spacing-3xl) !important; /* EXACT: 48px */
  color: var(--text-muted) !important;
}

body .cm-class-scroller-container .cm-no-classes p,
html body .cm-class-scroller-container .cm-no-classes p {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  margin: 0 !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ========================================
   Loading and Error States - EXACT SPECIFICATIONS with HIGH SPECIFICITY
   ======================================== */

body .cm-class-scroller-container .cm-loading,
html body .cm-class-scroller-container .cm-loading {
  text-align: center !important;
  padding: var(--spacing-3xl) !important; /* EXACT: 48px */
  color: var(--text-muted) !important;
}

body .cm-class-scroller-container .cm-loading p,
html body .cm-class-scroller-container .cm-loading p {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  margin: 0 !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
}

body .cm-class-scroller-container .cm-loading p::before,
html body .cm-class-scroller-container .cm-loading p::before {
  content: '' !important;
  width: 20px !important; /* EXACT VALUE */
  height: 20px !important; /* EXACT VALUE */
  border: 2px solid var(--border-primary) !important;
  border-top: 2px solid var(--primary-accent) !important;
  border-radius: 50% !important;
  animation: cm-spin 1s linear infinite !important;
}

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

body .cm-class-scroller-container .cm-error,
html body .cm-class-scroller-container .cm-error {
  text-align: center !important;
  padding: var(--spacing-3xl) !important; /* EXACT: 48px */
  color: var(--error) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border-radius: 16px !important; /* EXACT VALUE */
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

body .cm-class-scroller-container .cm-error p,
html body .cm-class-scroller-container .cm-error p {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  margin: 0 !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important; /* EXACT WEIGHT */
}

/* ========================================
   Responsive Design - EXACT BREAKPOINTS with HIGH SPECIFICITY
   ======================================== */

/* Mobile - EXACT VALUES */
@media (max-width: 767px) {
  body .cm-class-scroller-container,
  html body .cm-class-scroller-container {
    padding: var(--mobile-padding) !important; /* EXACT: 16px */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  body .cm-class-scroller-container .cm-month-title,
  html body .cm-class-scroller-container .cm-month-title {
    font-size: var(--font-size-2xl) !important; /* 32px - minimum 14px */
  }
  
  body .cm-class-scroller-container .cm-date-scroller-container,
  html body .cm-class-scroller-container .cm-date-scroller-container {
    margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
  }
  
  body .cm-class-scroller-container .cm-date-scroller .cm-date-btn,
  html body .cm-class-scroller-container .cm-date-scroller .cm-date-btn {
    min-width: 70px !important; /* EXACT VALUE */
    height: 70px !important; /* EXACT VALUE */
  }
  
  body .cm-class-scroller-container .cm-filters-row,
  html body .cm-class-scroller-container .cm-filters-row {
    flex-direction: column !important;
    gap: var(--mobile-gap) !important; /* EXACT: 12px */
  }
  
  body .cm-class-scroller-container .cm-filter-group,
  html body .cm-class-scroller-container .cm-filter-group {
    min-width: 100% !important;
  }
  
  body .cm-class-scroller-container .cm-classes-grid,
  html body .cm-class-scroller-container .cm-classes-grid {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-gap) !important; /* EXACT: 12px */
  }
  
  body .cm-class-scroller-container .cm-class-card,
  html body .cm-class-scroller-container .cm-class-card {
    padding: var(--spacing-lg) !important; /* EXACT: 20px */
  }
  
  body .cm-class-scroller-container .cm-class-info-card,
  html body .cm-class-scroller-container .cm-class-info-card {
    padding: var(--spacing-lg) !important; /* EXACT: 20px */
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* Small Mobile - EXACT VALUES */
@media (max-width: 479px) {
  body .cm-class-scroller-container,
  html body .cm-class-scroller-container {
    padding: 12px !important; /* EXACT VALUE */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  body .cm-class-scroller-container .cm-month-title,
  html body .cm-class-scroller-container .cm-month-title {
    font-size: 1.75rem !important; /* EXACT SIZE */
  }
  
  body .cm-class-scroller-container .cm-date-scroller .cm-date-btn,
  html body .cm-class-scroller-container .cm-date-scroller .cm-date-btn {
    min-width: 60px !important; /* EXACT VALUE */
    height: 60px !important; /* EXACT VALUE */
  }
  
  body .cm-class-scroller-container .cm-class-info-card,
  html body .cm-class-scroller-container .cm-class-info-card {
    padding: var(--spacing-md) !important; /* EXACT: 16px */
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* Large Desktop - EXACT VALUES */
@media (min-width: 1440px) {
  body .cm-class-scroller-container .cm-classes-grid,
  html body .cm-class-scroller-container .cm-classes-grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)) !important;
  }
  
  body .cm-class-scroller-container .cm-membership-cards-grid,
  html body .cm-class-scroller-container .cm-membership-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  }
}

/* ========================================
   Touch Device Optimizations with HIGH SPECIFICITY
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  body .cm-class-scroller-container .cm-nav-btn:hover,
  body .cm-class-scroller-container .cm-date-btn:hover,
  body .cm-class-scroller-container .cm-filter-apply-btn:hover,
  body .cm-class-scroller-container .cm-class-card:hover,
  html body .cm-class-scroller-container .cm-nav-btn:hover,
  html body .cm-class-scroller-container .cm-date-btn:hover,
  html body .cm-class-scroller-container .cm-filter-apply-btn:hover,
  html body .cm-class-scroller-container .cm-class-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  body .cm-class-scroller-container .cm-nav-btn:active,
  body .cm-class-scroller-container .cm-date-btn:active,
  body .cm-class-scroller-container .cm-filter-apply-btn:active,
  body .cm-class-scroller-container .cm-class-card:active,
  html body .cm-class-scroller-container .cm-nav-btn:active,
  html body .cm-class-scroller-container .cm-date-btn:active,
  html body .cm-class-scroller-container .cm-filter-apply-btn:active,
  html body .cm-class-scroller-container .cm-class-card:active {
    transform: scale(0.98) !important;
  }
}

/* ========================================
   High DPI Display Support with HIGH SPECIFICITY
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body .cm-class-scroller-container .cm-filter-select,
  html body .cm-class-scroller-container .cm-filter-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
    background-size: 20px !important;
  }
}

/* ========================================
   Reduced Motion Support with HIGH SPECIFICITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  body .cm-class-scroller-container .cm-nav-btn,
  body .cm-class-scroller-container .cm-date-btn,
  body .cm-class-scroller-container .cm-filter-apply-btn,
  body .cm-class-scroller-container .cm-class-card,
  html body .cm-class-scroller-container .cm-nav-btn,
  html body .cm-class-scroller-container .cm-date-btn,
  html body .cm-class-scroller-container .cm-filter-apply-btn,
  html body .cm-class-scroller-container .cm-class-card {
    transition: none !important;
  }
  
  body .cm-class-scroller-container .cm-nav-btn:hover,
  body .cm-class-scroller-container .cm-date-btn:hover,
  body .cm-class-scroller-container .cm-filter-apply-btn:hover,
  body .cm-class-scroller-container .cm-class-card:hover,
  html body .cm-class-scroller-container .cm-nav-btn:hover,
  html body .cm-class-scroller-container .cm-date-btn:hover,
  html body .cm-class-scroller-container .cm-filter-apply-btn:hover,
  html body .cm-class-scroller-container .cm-class-card:hover {
    transform: none !important;
  }
}

/* ========================================
   User Selection & Touch Optimization with HIGH SPECIFICITY
   ======================================== */

body .cm-class-scroller-container .cm-nav-btn,
body .cm-class-scroller-container .cm-date-btn,
body .cm-class-scroller-container .cm-filter-apply-btn,
body .cm-class-scroller-container .cm-class-card,
html body .cm-class-scroller-container .cm-nav-btn,
html body .cm-class-scroller-container .cm-date-btn,
html body .cm-class-scroller-container .cm-filter-apply-btn,
html body .cm-class-scroller-container .cm-class-card {
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ========================================
   Focus States for Accessibility with HIGH SPECIFICITY
   ======================================== */

body .cm-class-scroller-container .cm-nav-btn:focus,
body .cm-class-scroller-container .cm-date-btn:focus,
body .cm-class-scroller-container .cm-filter-apply-btn:focus,
body .cm-class-scroller-container .cm-filter-select:focus,
html body .cm-class-scroller-container .cm-nav-btn:focus,
html body .cm-class-scroller-container .cm-date-btn:focus,
html body .cm-class-scroller-container .cm-filter-apply-btn:focus,
html body .cm-class-scroller-container .cm-filter-select:focus {
  outline: 2px solid var(--primary-accent) !important;
  outline-offset: 2px !important;
}

body .cm-class-scroller-container .cm-class-card:focus,
html body .cm-class-scroller-container .cm-class-card:focus {
  outline: 2px solid var(--primary-accent) !important;
  outline-offset: 2px !important;
  border-color: var(--primary-accent) !important;
}

/* ========================================
   Class Info Card - EXACT SPECIFICATIONS with HIGH SPECIFICITY
   For [class_info_by_url] shortcode
   ======================================== */

body .cm-class-scroller-container .cm-class-info-card,
html body .cm-class-scroller-container .cm-class-info-card {
  background: var(--background-surface) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 16px !important; /* EXACT VALUE */
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  box-shadow: var(--shadow-sm) !important; /* EXACT: 0 4px 12px rgba(0,0,0,0.3) */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  overflow: hidden !important;
}

body .cm-class-scroller-container .cm-class-info-card:hover,
html body .cm-class-scroller-container .cm-class-info-card:hover {
  border-color: var(--primary-accent) !important;
  transform: translateY(-4px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-lg) !important; /* EXACT: 0 16px 48px rgba(0,0,0,0.5) */
}

/* Class Header - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-class-info-card .cm-class-header,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
  gap: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-class-scroller-container .cm-class-info-card .cm-class-title-section,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-title-section {
  flex: 1 !important;
  min-width: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-class-info-card .cm-class-title,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-title {
  font-size: var(--font-size-2xl) !important; /* 32px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  margin: 0 0 var(--spacing-sm) 0 !important; /* EXACT: 0 0 12px 0 */
  line-height: 1.2 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-difficulty-badge,
html body .cm-class-scroller-container .cm-class-info-card .cm-difficulty-badge {
  display: inline-block !important;
  padding: 6px 12px !important; /* EXACT VALUES */
  border-radius: 8px !important; /* EXACT VALUE */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-time-display,
html body .cm-class-scroller-container .cm-class-info-card .cm-time-display {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  color: var(--text-body) !important;
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  flex-shrink: 0 !important; /* EXACT VALUE */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-time-icon,
html body .cm-class-scroller-container .cm-class-info-card .cm-time-icon {
  color: var(--primary-accent) !important;
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
}

/* Trainer Section - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-class-info-card .cm-trainer-section,
html body .cm-class-scroller-container .cm-class-info-card .cm-trainer-section {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-md) !important; /* EXACT: 16px */
  margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
  padding: var(--spacing-lg) !important; /* EXACT: 20px */
  background: var(--background-secondary) !important;
  border-radius: 12px !important; /* EXACT VALUE */
  border: 1px solid var(--border-primary) !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-trainer-photo-wrap,
html body .cm-class-scroller-container .cm-class-info-card .cm-trainer-photo-wrap {
  width: 56px !important; /* EXACT VALUE */
  height: 56px !important; /* EXACT VALUE */
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important; /* EXACT VALUE */
  border: 2px solid var(--primary-accent) !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-trainer-photo,
html body .cm-class-scroller-container .cm-class-info-card .cm-trainer-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-trainer-photo-placeholder,
html body .cm-class-scroller-container .cm-class-info-card .cm-trainer-photo-placeholder {
  width: 56px !important; /* EXACT VALUE */
  height: 56px !important; /* EXACT VALUE */
  background: linear-gradient(135deg, var(--primary-accent) 0%, var(--primary-hover) 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-heading) !important;
  font-weight: 600 !important;
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  flex-shrink: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-class-info-card .cm-trainer-info,
html body .cm-class-scroller-container .cm-class-info-card .cm-trainer-info {
  min-width: 0 !important; /* EXACT VALUE */
  flex: 1 !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-trainer-label,
html body .cm-class-scroller-container .cm-class-info-card .cm-trainer-label {
  color: var(--text-muted) !important;
  font-weight: 400 !important; /* EXACT WEIGHT */
  margin: 0 0 4px 0 !important;
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-trainer-name,
html body .cm-class-scroller-container .cm-class-info-card .cm-trainer-name {
  color: var(--text-heading) !important;
  font-weight: 600 !important; /* EXACT WEIGHT */
  margin: 0 !important;
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.3 !important; /* EXACT VALUE */
}

/* Class Content - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-class-info-card .cm-class-content,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-content {
  margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
}

body .cm-class-scroller-container .cm-class-info-card .cm-class-description,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-description {
  color: var(--text-body) !important;
  font-size: var(--font-size-base) !important; /* 16px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  line-height: 1.6 !important;
  margin: 0 0 var(--spacing-lg) 0 !important; /* EXACT: 0 0 20px 0 */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-class-meta,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-md) !important; /* EXACT: 16px */
}

body .cm-class-scroller-container .cm-class-info-card .cm-meta-item,
html body .cm-class-scroller-container .cm-class-info-card .cm-meta-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
  color: var(--text-body) !important;
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  padding: var(--spacing-sm) var(--spacing-md) !important; /* EXACT: 12px 16px */
  background: var(--background-secondary) !important;
  border-radius: 8px !important; /* EXACT VALUE */
  border: 1px solid var(--border-primary) !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-meta-icon,
html body .cm-class-scroller-container .cm-class-info-card .cm-meta-icon {
  color: var(--primary-accent) !important;
  flex-shrink: 0 !important; /* EXACT VALUE */
  font-size: var(--font-size-base) !important; /* 16px - minimum 14px */
}

body .cm-class-scroller-container .cm-class-info-card .cm-meta-text,
html body .cm-class-scroller-container .cm-class-info-card .cm-meta-text {
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Class Footer - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-class-info-card .cm-class-footer,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: var(--spacing-lg) !important; /* EXACT: 20px */
  border-top: 1px solid var(--border-primary) !important;
}

body .cm-class-scroller-container .cm-class-info-card .cm-class-action,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-action {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
  padding: var(--spacing-md) var(--spacing-xl) !important; /* EXACT: 16px 24px */
  background: var(--primary-accent) !important;
  color: var(--text-heading) !important;
  border-radius: 8px !important; /* EXACT VALUE */
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-decoration: none !important;
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  cursor: pointer !important;
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
}

body .cm-class-scroller-container .cm-class-info-card .cm-class-action:hover,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-action:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-md) !important; /* EXACT: 0 8px 24px rgba(7, 102, 66, 0.4) */
}

body .cm-class-scroller-container .cm-class-info-card .cm-action-text,
html body .cm-class-scroller-container .cm-class-info-card .cm-action-text {
  font-weight: 500 !important; /* EXACT WEIGHT */
}

body .cm-class-scroller-container .cm-class-info-card .cm-action-arrow,
html body .cm-class-scroller-container .cm-class-info-card .cm-action-arrow {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
}

body .cm-class-scroller-container .cm-class-info-card .cm-class-action:hover .cm-action-arrow,
html body .cm-class-scroller-container .cm-class-info-card .cm-class-action:hover .cm-action-arrow {
  transform: translateX(4px) !important; /* EXACT VALUE */
}

/* Responsive Design for Class Info Card */
@media (max-width: 767px) {
  body .cm-class-scroller-container .cm-class-info-card,
  html body .cm-class-scroller-container .cm-class-info-card {
    padding: var(--spacing-lg) !important; /* EXACT: 20px */
    margin: 0 var(--spacing-sm) !important; /* EXACT: 0 12px */
  }
  
  body .cm-class-scroller-container .cm-class-info-card .cm-class-header,
  html body .cm-class-scroller-container .cm-class-info-card .cm-class-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--spacing-md) !important; /* EXACT: 16px */
  }
  
  body .cm-class-scroller-container .cm-class-info-card .cm-class-title,
  html body .cm-class-scroller-container .cm-class-info-card .cm-class-title {
    font-size: var(--font-size-xl) !important; /* 24px - minimum 14px */
  }
  
  body .cm-class-scroller-container .cm-class-info-card .cm-trainer-section,
  html body .cm-class-scroller-container .cm-class-info-card .cm-trainer-section {
    padding: var(--spacing-md) !important; /* EXACT: 16px */
  }
}

@media (max-width: 479px) {
  body .cm-class-scroller-container .cm-class-info-card,
  html body .cm-class-scroller-container .cm-class-info-card {
    padding: var(--spacing-md) !important; /* EXACT: 16px */
  }
  
  body .cm-class-scroller-container .cm-class-info-card .cm-class-title,
  html body .cm-class-scroller-container .cm-class-info-card .cm-class-title {
    font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  }
}

/* ========================================
   Class User Info Section - EXACT SPECIFICATIONS with HIGH SPECIFICITY
   For [class_seat_booking] shortcode - User Info Only
   ======================================== */

body .cm-class-scroller-container .cm-user-info-section,
html body .cm-class-scroller-container .cm-user-info-section {
  margin-bottom: var(--spacing-2xl) !important; /* EXACT: 32px */
}

/* Membership Overview - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-membership-overview,
html body .cm-class-scroller-container .cm-membership-overview {
  margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
}

body .cm-class-scroller-container .cm-section-title,
html body .cm-class-scroller-container .cm-section-title {
  font-size: var(--font-size-xl) !important; /* 24px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  margin: 0 0 var(--spacing-lg) 0 !important; /* EXACT: 0 0 20px 0 */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-align: center !important;
}

/* Membership Cards Grid - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-membership-cards-grid,
html body .cm-class-scroller-container .cm-membership-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: var(--spacing-lg) !important; /* EXACT: 20px */
  margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
}

/* Individual Membership Card - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-membership-card,
html body .cm-class-scroller-container .cm-membership-card {
  background: var(--background-surface) !important;
  border: 1px solid var(--border-primary) !important;
  border-radius: 16px !important; /* EXACT VALUE */
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  box-shadow: var(--shadow-sm) !important; /* EXACT: 0 4px 12px rgba(0,0,0,0.3) */
  position: relative !important;
  overflow: hidden !important;
}

body .cm-class-scroller-container .cm-membership-card:hover,
html body .cm-class-scroller-container .cm-membership-card:hover {
  border-color: var(--primary-accent) !important;
  transform: translateY(-4px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-lg) !important; /* EXACT: 0 16px 48px rgba(0,0,0,0.5) */
}

/* Card Header - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-membership-card .cm-card-header,
html body .cm-class-scroller-container .cm-membership-card .cm-card-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--spacing-md) !important; /* EXACT: 16px */
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-class-scroller-container .cm-membership-card .cm-card-icon,
html body .cm-class-scroller-container .cm-membership-card .cm-card-icon {
  font-size: var(--font-size-2xl) !important; /* 32px - minimum 14px */
  flex-shrink: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-membership-card .cm-card-title-section,
html body .cm-class-scroller-container .cm-membership-card .cm-card-title-section {
  flex: 1 !important;
  min-width: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-membership-card .cm-card-title,
html body .cm-class-scroller-container .cm-membership-card .cm-card-title {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  margin: 0 0 var(--spacing-xs) 0 !important; /* EXACT: 0 0 8px 0 */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-membership-card .cm-membership-type,
html body .cm-class-scroller-container .cm-membership-card .cm-membership-type {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: var(--primary-accent) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body .cm-class-scroller-container .cm-membership-card .cm-booking-status,
html body .cm-class-scroller-container .cm-membership-card .cm-booking-status {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: var(--success) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

body .cm-class-scroller-container .cm-membership-card .cm-selection-status,
html body .cm-class-scroller-container .cm-membership-card .cm-selection-status {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: var(--warning) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Card Content - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-membership-card .cm-card-content,
html body .cm-class-scroller-container .cm-membership-card .cm-card-content {
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-class-scroller-container .cm-membership-card .cm-usage-info,
html body .cm-class-scroller-container .cm-membership-card .cm-usage-info,
body .cm-class-scroller-container .cm-membership-card .cm-booking-info,
html body .cm-class-scroller-container .cm-membership-card .cm-booking-info {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
}

body .cm-class-scroller-container .cm-membership-card .cm-usage-item,
html body .cm-class-scroller-container .cm-membership-card .cm-usage-item,
body .cm-class-scroller-container .cm-membership-card .cm-booking-item,
html body .cm-class-scroller-container .cm-membership-card .cm-booking-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--spacing-sm) var(--spacing-md) !important; /* EXACT: 12px 16px */
  background: var(--background-secondary) !important;
  border-radius: 8px !important; /* EXACT VALUE */
  border: 1px solid var(--border-primary) !important;
}

body .cm-class-scroller-container .cm-membership-card .cm-usage-label,
html body .cm-class-scroller-container .cm-membership-card .cm-usage-label,
body .cm-class-scroller-container .cm-membership-card .cm-booking-label,
html body .cm-class-scroller-container .cm-membership-card .cm-booking-label {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: var(--text-muted) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-membership-card .cm-usage-value,
html body .cm-class-scroller-container .cm-membership-card .cm-usage-value,
body .cm-class-scroller-container .cm-membership-card .cm-booking-value,
html body .cm-class-scroller-container .cm-membership-card .cm-booking-value {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Selection Text - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-membership-card .cm-selection-text,
html body .cm-class-scroller-container .cm-membership-card .cm-selection-text {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: var(--text-body) !important;
  margin: 0 0 var(--spacing-md) 0 !important; /* EXACT: 0 0 16px 0 */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-align: center !important;
}

/* Change Membership Button - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn,
html body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn {
  background: var(--primary-accent) !important;
  color: var(--text-heading) !important;
  border: none !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important; /* EXACT: 12px 20px */
  border-radius: 8px !important; /* EXACT VALUE */
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  width: 100% !important;
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-decoration: none !important;
}

body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn:hover,
html body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-md) !important; /* EXACT: 0 8px 24px rgba(7, 102, 66, 0.4) */
}

body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn .cm-btn-text,
html body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn .cm-btn-text {
  font-weight: 500 !important; /* EXACT WEIGHT */
}

body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn .cm-btn-arrow,
html body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn .cm-btn-arrow {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
}

body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn:hover .cm-btn-arrow,
html body .cm-class-scroller-container .cm-membership-card .cm-change-membership-btn:hover .cm-btn-arrow {
  transform: translateX(4px) !important; /* EXACT VALUE */
}

/* Notices - EXACT SPECIFICATIONS */
body .cm-class-scroller-container .cm-notice,
html body .cm-class-scroller-container .cm-notice {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--spacing-md) !important; /* EXACT: 16px */
  padding: var(--spacing-lg) !important; /* EXACT: 20px */
  border-radius: 12px !important; /* EXACT VALUE */
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
  border: 1px solid !important;
}

body .cm-class-scroller-container .cm-notice-info,
html body .cm-class-scroller-container .cm-notice-info {
  background: rgba(7, 102, 66, 0.1) !important;
  border-color: rgba(7, 102, 66, 0.2) !important;
}

body .cm-class-scroller-container .cm-notice-warning,
html body .cm-class-scroller-container .cm-notice-warning {
  background: rgba(255, 179, 71, 0.1) !important;
  border-color: rgba(255, 179, 71, 0.2) !important;
}

body .cm-class-scroller-container .cm-notice-icon,
html body .cm-class-scroller-container .cm-notice-icon {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  flex-shrink: 0 !important; /* EXACT VALUE */
  margin-top: 2px !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-notice-content,
html body .cm-class-scroller-container .cm-notice-content {
  flex: 1 !important;
  min-width: 0 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-notice-title,
html body .cm-class-scroller-container .cm-notice-title {
  font-size: var(--font-size-base) !important; /* 16px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  margin: 0 0 var(--spacing-xs) 0 !important; /* EXACT: 0 0 8px 0 */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-class-scroller-container .cm-notice-text,
html body .cm-class-scroller-container .cm-notice-text {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: var(--text-body) !important;
  margin: 0 !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.5 !important; /* EXACT VALUE */
}

body .cm-class-scroller-container .cm-notice-text code,
html body .cm-class-scroller-container .cm-notice-text code {
  background: var(--background-secondary) !important;
  color: var(--primary-accent) !important;
  padding: 2px 6px !important; /* EXACT VALUES */
  border-radius: 4px !important; /* EXACT VALUE */
  font-family: monospace !important;
  font-size: var(--font-size-xs) !important; /* 14px - minimum 14px */
}

/* Modal Styles - EXACT SPECIFICATIONS */
body .cm-modal,
html body .cm-modal {
  position: fixed !important;
  z-index: 1000 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px) !important;
}

body .cm-modal-content,
html body .cm-modal-content {
  background: var(--background-surface) !important;
  margin: 5% auto !important; /* EXACT VALUE */
  padding: 0 !important;
  border-radius: 16px !important; /* EXACT VALUE */
  width: 90% !important;
  max-width: 800px !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-lg) !important; /* EXACT: 0 16px 48px rgba(0,0,0,0.5) */
}

body .cm-modal-header,
html body .cm-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
  border-bottom: 1px solid var(--border-primary) !important;
}

body .cm-modal-title,
html body .cm-modal-title {
  font-size: var(--font-size-xl) !important; /* 24px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  margin: 0 !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-modal-close,
html body .cm-modal-close {
  background: none !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: var(--font-size-2xl) !important; /* 32px - minimum 14px */
  cursor: pointer !important;
  padding: var(--spacing-xs) !important; /* EXACT: 8px */
  border-radius: 4px !important; /* EXACT VALUE */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  min-width: var(--touch-target-size) !important; /* EXACT: 44px */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body .cm-modal-close:hover,
html body .cm-modal-close:hover {
  background: var(--background-secondary) !important;
  color: var(--text-heading) !important;
}

body .cm-modal-body,
html body .cm-modal-body {
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
}

/* Membership Selection Grid - EXACT SPECIFICATIONS */
body .cm-membership-selection-grid,
html body .cm-membership-selection-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: var(--spacing-lg) !important; /* EXACT: 20px */
}

/* Membership Selection Card - EXACT SPECIFICATIONS */
body .cm-membership-selection-card,
html body .cm-membership-selection-card {
  background: var(--background-surface) !important;
  border: 2px solid var(--border-primary) !important;
  border-radius: 12px !important; /* EXACT VALUE */
  padding: var(--spacing-lg) !important; /* EXACT: 20px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  cursor: pointer !important;
}

body .cm-membership-selection-card:hover,
html body .cm-membership-selection-card:hover {
  border-color: var(--primary-accent) !important;
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-md) !important; /* EXACT: 0 8px 24px rgba(7, 102, 66, 0.4) */
}

body .cm-membership-selection-card.cm-selected,
html body .cm-membership-selection-card.cm-selected {
  border-color: var(--primary-accent) !important;
  background: rgba(7, 102, 66, 0.05) !important;
}

/* Selection Card Header - EXACT SPECIFICATIONS */
body .cm-membership-selection-card .cm-selection-card-header,
html body .cm-membership-selection-card .cm-selection-card-header {
  margin-bottom: var(--spacing-md) !important; /* EXACT: 16px */
  position: relative !important;
}

body .cm-membership-selection-card .cm-selection-type,
html body .cm-membership-selection-card .cm-selection-type {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  margin: 0 0 var(--spacing-sm) 0 !important; /* EXACT: 0 0 12px 0 */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-membership-selection-card .cm-selection-badge,
html body .cm-membership-selection-card .cm-selection-badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
}

body .cm-membership-selection-card .cm-badge-text,
html body .cm-membership-selection-card .cm-badge-text {
  background: var(--primary-accent) !important;
  color: var(--text-heading) !important;
  padding: 4px 8px !important; /* EXACT VALUES */
  border-radius: 6px !important; /* EXACT VALUE */
  font-size: var(--font-size-xs) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Selection Card Content - EXACT SPECIFICATIONS */
body .cm-membership-selection-card .cm-selection-card-content,
html body .cm-membership-selection-card .cm-selection-card-content {
  margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
}

body .cm-membership-selection-card .cm-selection-info,
html body .cm-membership-selection-card .cm-selection-info {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm) !important; /* EXACT: 12px */
}

body .cm-membership-selection-card .cm-selection-item,
html body .cm-membership-selection-card .cm-selection-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--spacing-sm) var(--spacing-md) !important; /* EXACT: 12px 16px */
  background: var(--background-secondary) !important;
  border-radius: 8px !important; /* EXACT VALUE */
  border: 1px solid var(--border-primary) !important;
}

body .cm-membership-selection-card .cm-selection-label,
html body .cm-membership-selection-card .cm-selection-label {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: var(--text-muted) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-membership-selection-card .cm-selection-value,
html body .cm-membership-selection-card .cm-selection-value {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Selection Card Footer - EXACT SPECIFICATIONS */
body .cm-membership-selection-card .cm-selection-card-footer,
html body .cm-membership-selection-card .cm-selection-card-footer {
  text-align: center !important;
}

body .cm-membership-selection-card .cm-select-plan-btn,
html body .cm-membership-selection-card .cm-select-plan-btn {
  background: var(--primary-accent) !important;
  color: var(--text-heading) !important;
  border: none !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important; /* EXACT: 12px 20px */
  border-radius: 8px !important; /* EXACT VALUE */
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--spacing-xs) !important; /* EXACT: 8px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  width: 100% !important;
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-membership-selection-card .cm-select-plan-btn:hover,
html body .cm-membership-selection-card .cm-select-plan-btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-md) !important; /* EXACT: 0 8px 24px rgba(7, 102, 66, 0.4) */
}

body .cm-membership-selection-card .cm-select-plan-btn .cm-btn-text,
html body .cm-membership-selection-card .cm-select-plan-btn .cm-btn-text {
  font-weight: 500 !important; /* EXACT WEIGHT */
}

body .cm-membership-selection-card .cm-select-plan-btn .cm-btn-arrow,
html body .cm-membership-selection-card .cm-select-plan-btn .cm-btn-arrow {
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
}

body .cm-membership-selection-card .cm-select-plan-btn:hover .cm-btn-arrow,
html body .cm-membership-selection-card .cm-select-plan-btn:hover .cm-btn-arrow {
  transform: translateX(4px) !important; /* EXACT VALUE */
}

body .cm-membership-selection-card .cm-current-plan-btn,
html body .cm-membership-selection-card .cm-current-plan-btn {
  background: var(--border-primary) !important;
  color: var(--text-muted) !important;
  border: none !important;
  padding: var(--spacing-sm) var(--spacing-lg) !important; /* EXACT: 12px 20px */
  border-radius: 8px !important; /* EXACT VALUE */
  font-weight: 500 !important; /* EXACT WEIGHT */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  cursor: not-allowed !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: var(--touch-target-size) !important; /* EXACT: 44px */
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body .cm-membership-selection-card .cm-current-plan-btn .cm-btn-text,
html body .cm-membership-selection-card .cm-current-plan-btn .cm-btn-text {
  font-weight: 500 !important; /* EXACT WEIGHT */
}

/* Responsive Design for User Info Section */
@media (max-width: 767px) {
  body .cm-class-scroller-container .cm-membership-cards-grid,
  html body .cm-class-scroller-container .cm-membership-cards-grid {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-md) !important; /* EXACT: 16px */
  }
  
  body .cm-class-scroller-container .cm-membership-card,
  html body .cm-class-scroller-container .cm-membership-card {
    padding: var(--spacing-lg) !important; /* EXACT: 20px */
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body .cm-modal-content,
  html body .cm-modal-content {
    width: 95% !important;
    margin: 10% auto !important; /* EXACT VALUE */
  }
  
  body .cm-membership-selection-grid,
  html body .cm-membership-selection-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 479px) {
  body .cm-class-scroller-container .cm-membership-card,
  html body .cm-class-scroller-container .cm-membership-card {
    padding: var(--spacing-md) !important; /* EXACT: 16px */
    width: 100% !important;
    max-width: 100% !important;
  }
  
  body .cm-modal-content,
  html body .cm-modal-content {
    width: 98% !important;
    margin: 5% auto !important; /* EXACT VALUE */
  }
}

/* ========================================
   NOTIFICATIONS COMPONENT
   Premium Futuristic Design System - Unified Version
   Following Exact Style Guidelines
   ======================================== */

/* Notifications Container - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-notifications-container,
html body .cm-notifications-container,
body .cm-notifications-container.cm-notifications-container {
  max-width: 800px !important;
  margin: 0 auto !important;
  background: var(--background-main) !important;
  color: var(--text-body) !important;
  font-family: 'Inter', 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  padding: 0 0 var(--spacing-3xl) 0 !important; /* EXACT: 0 0 48px 0 */
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Notification Item - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-notifications-container .cm-notification-item,
html body .cm-notifications-container .cm-notification-item,
body .cm-notifications-container .cm-notification-item.cm-notification-item {
  background: var(--background-surface) !important; /* EXACT: #111111 */
  border: 1px solid var(--border-primary) !important; /* EXACT: #333333 */
  border-radius: 16px !important; /* EXACT VALUE */
  padding: var(--spacing-xl) !important; /* EXACT: 24px */
  margin-bottom: var(--spacing-xl) !important; /* EXACT: 24px */
  color: var(--text-body) !important; /* EXACT: #CFCFCF */
  transition: var(--transition-standard) !important; /* EXACT: 0.2s ease */
  position: relative !important;
  box-shadow: var(--shadow-sm) !important; /* EXACT: 0 4px 12px rgba(0,0,0,0.3) */
  box-sizing: border-box !important;
}

body .cm-notifications-container .cm-notification-item:hover,
html body .cm-notifications-container .cm-notification-item:hover,
body .cm-notifications-container .cm-notification-item.cm-notification-item:hover {
  border-color: var(--primary-accent) !important; /* EXACT: #076642 */
  transform: translateY(-2px) !important; /* EXACT VALUE */
  box-shadow: var(--shadow-lg) !important; /* EXACT: 0 16px 48px rgba(0,0,0,0.5) */
}

/* Notification Link - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-notifications-container .cm-notification-link,
html body .cm-notifications-container .cm-notification-link,
body .cm-notifications-container .cm-notification-link.cm-notification-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
  cursor: pointer !important;
}

/* Notification Header - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-notifications-container .cm-notification-header,
html body .cm-notifications-container .cm-notification-header,
body .cm-notifications-container .cm-notification-header.cm-notification-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: var(--spacing-xs) !important; /* EXACT: 8px */
  gap: var(--spacing-md) !important; /* EXACT: 16px */
}

/* Notification Title - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-notifications-container .cm-notification-title,
html body .cm-notifications-container .cm-notification-title,
body .cm-notifications-container .cm-notification-title.cm-notification-title {
  font-weight: 600 !important; /* EXACT WEIGHT */
  color: var(--text-heading) !important; /* EXACT: #FFFFFF */
  font-size: var(--font-size-lg) !important; /* 18px - minimum 14px */
  line-height: 1.3 !important; /* EXACT VALUE */
  margin: 0 !important;
  flex: 1 !important;
}

/* Notification Time - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-notifications-container .cm-notification-time,
html body .cm-notifications-container .cm-notification-time,
body .cm-notifications-container .cm-notification-time.cm-notification-time {
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  color: var(--text-muted) !important; /* EXACT: #8A8A8A */
  font-weight: 400 !important; /* EXACT WEIGHT */
  line-height: 1.4 !important; /* EXACT VALUE */
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Notification Message - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-notifications-container .cm-notification-message,
html body .cm-notifications-container .cm-notification-message,
body .cm-notifications-container .cm-notification-message.cm-notification-message {
  color: var(--text-body) !important; /* EXACT: #CFCFCF */
  line-height: 1.5 !important; /* EXACT VALUE */
  font-size: var(--font-size-sm) !important; /* 14px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  margin: 0 !important;
}

/* Notification Empty State - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-notifications-container .cm-notification-empty,
html body .cm-notifications-container .cm-notification-empty,
body .cm-notifications-container .cm-notification-empty.cm-notification-empty {
  text-align: center !important;
  padding: var(--spacing-3xl) !important; /* EXACT: 48px */
  color: var(--text-muted) !important; /* EXACT: #8A8A8A */
  background: var(--background-surface) !important; /* EXACT: #111111 */
  border-radius: 16px !important; /* EXACT VALUE */
  border: 1px solid var(--border-primary) !important; /* EXACT: #333333 */
  box-shadow: var(--shadow-sm) !important; /* EXACT: 0 4px 12px rgba(0,0,0,0.3) */
  box-sizing: border-box !important;
}

body .cm-notifications-container .cm-notification-empty p,
html body .cm-notifications-container .cm-notification-empty p,
body .cm-notifications-container .cm-notification-empty p.cm-notification-empty p {
  font-size: var(--font-size-base) !important; /* 16px - minimum 14px */
  font-weight: 500 !important; /* EXACT WEIGHT */
  color: var(--text-muted) !important; /* EXACT: #8A8A8A */
  margin: 0 !important;
  line-height: 1.5 !important; /* EXACT VALUE */
}

/* Notification Type Variations - EXACT SPECIFICATIONS with HIGH SPECIFICITY */
body .cm-notifications-container .cm-notification-item.reminder,
html body .cm-notifications-container .cm-notification-item.reminder,
body .cm-notifications-container .cm-notification-item.reminder.cm-notification-item.reminder {
  border-left: 4px solid var(--success) !important; /* EXACT: #0DBD5C */
}

body .cm-notifications-container .cm-notification-item.membership,
html body .cm-notifications-container .cm-notification-item.membership,
body .cm-notifications-container .cm-notification-item.membership.cm-notification-item.membership {
  border-left: 4px solid var(--warning) !important; /* EXACT: #FFB347 */
}

body .cm-notifications-container .cm-notification-item.post,
html body .cm-notifications-container .cm-notification-item.post,
body .cm-notifications-container .cm-notification-item.post.cm-notification-item.post {
  border-left: 4px solid var(--primary-accent) !important; /* EXACT: #076642 */
}

/* Responsive Design for Notifications - EXACT BREAKPOINTS */
@media (max-width: 767px) {
  body .cm-notifications-container,
  html body .cm-notifications-container,
  body .cm-notifications-container.cm-notifications-container {
    padding: 0 0 var(--spacing-xl) 0 !important; /* EXACT: 0 0 24px 0 */
  }
  
  body .cm-notifications-container .cm-notification-item,
  html body .cm-notifications-container .cm-notification-item,
  body .cm-notifications-container .cm-notification-item.cm-notification-item {
    padding: var(--spacing-lg) !important; /* EXACT: 20px */
    margin-bottom: var(--spacing-lg) !important; /* EXACT: 20px */
  }
  
  body .cm-notifications-container .cm-notification-header,
  html body .cm-notifications-container .cm-notification-header,
  body .cm-notifications-container .cm-notification-header.cm-notification-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--spacing-xs) !important; /* EXACT: 8px */
  }
  
  body .cm-notifications-container .cm-notification-time,
  html body .cm-notifications-container .cm-notification-time,
  body .cm-notifications-container .cm-notification-time.cm-notification-time {
    align-self: flex-end !important;
  }
}

@media (max-width: 479px) {
  body .cm-notifications-container,
  html body .cm-notifications-container,
  body .cm-notifications-container.cm-notifications-container {
    padding: 0 0 var(--spacing-lg) 0 !important; /* EXACT: 0 0 20px 0 */
  }
  
  body .cm-notifications-container .cm-notification-item,
  html body .cm-notifications-container .cm-notification-item,
  body .cm-notifications-container .cm-notification-item.cm-notification-item {
    padding: var(--spacing-md) !important; /* EXACT: 16px */
    margin-bottom: var(--spacing-md) !important; /* EXACT: 16px */
  }
  
  body .cm-notifications-container .cm-notification-empty,
  html body .cm-notifications-container .cm-notification-empty,
  body .cm-notifications-container .cm-notification-empty.cm-notification-empty {
    padding: var(--spacing-xl) !important; /* EXACT: 24px */
  }
}