/* Wizard Modal Fixes - CSS */

/* Fix 1: Ensure proper positioning context for all card types */
.wizard-muscle-option,
.wizard-equipment-option,
.experience-card,
.training-card,
.time-card {
  position: relative !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* Fix 2: Prevent pseudo-elements from intercepting clicks */
.wizard-muscle-option::before,
.wizard-equipment-option::before,
.experience-card::before,
.training-card::before,
.time-card::before {
  pointer-events: none !important;
}

.wizard-muscle-option::after,
.wizard-equipment-option::after,
.experience-card::after,
.training-card::after,
.time-card::after {
  pointer-events: none !important;
}

/* Fix 3: Ensure consistent border behavior with box-sizing */
.wizard-muscle-option.selected,
.wizard-equipment-option.selected {
  border: 2px solid #FF6B00 !important;
  box-sizing: border-box !important;
}

/* Fix 4: Override and position checkmarks correctly relative to their parent */
.wizard-muscle-option.selected::after,
.wizard-equipment-option.selected::after {
  content: '✓' !important;
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: #FF6B00 !important;
  border: 1px solid rgba(255, 107, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: bold !important;
  pointer-events: none !important;
  z-index: 10 !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Fix 5: Ensure inner elements don't interfere with clicks */
.wizard-muscle-option *,
.wizard-equipment-option *,
.experience-card *,
.training-card *,
.time-card * {
  pointer-events: none !important;
}

/* Fix 6: Remove any absolute positioning from inner elements that might cause misalignment */
.wizard-muscle-option img,
.wizard-equipment-option img {
  position: static !important;
  margin: 0 auto !important;
}

/* Fix 7: Ensure grids don't have padding that could offset click targets */
#wizardMuscleGrid,
.wizard-equipment-grid {
  padding: 0 !important;
  margin: 0 !important;
}

/* Fix 8: Ensure buttons fill their grid cells completely */
.wizard-muscle-option,
.wizard-equipment-option {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Fix 9: Override any transform on hover that might affect click targets */
.wizard-muscle-option:hover,
.wizard-equipment-option:hover {
  transform: translateY(-2px) !important; /* Reduced movement */
}

/* Fix 10: Ensure selected state is visually clear */
.wizard-muscle-option.selected,
.wizard-equipment-option.selected {
  background: linear-gradient(to bottom, rgba(255, 107, 0, 0.1), rgba(255, 255, 255, 0.9)) !important;
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3) !important;
}

/* Fix 11: Mobile-specific fixes */
@media (max-width: 768px) {
  /* Ensure touch targets are large enough */
  .wizard-muscle-option,
  .wizard-equipment-option {
    min-height: 120px !important;
    padding: 12px !important;
  }
  
  /* Adjust checkmark position for mobile */
  .wizard-muscle-option.selected::after,
  .wizard-equipment-option.selected::after {
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
}

/* Fix 12: Ensure step visibility is properly controlled */
.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block !important;
}

/* Fix 13: Progress indicator fixes */
.progress-step {
  transition: all 0.3s ease;
}

.progress-step.active .step-circle {
  background: #FF6B00 !important;
  color: white !important;
  border-color: #FF6B00 !important;
}

.progress-step.completed .step-circle {
  background: #10B981 !important;
  color: white !important;
  border-color: #10B981 !important;
}

.progress-step.completed .step-circle::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}

/* Fix 14: Ensure modal has proper z-index hierarchy */
#workout-wizard-modal {
  z-index: 99999 !important; /* Higher than workout timer */
}

.wizard-modal {
  z-index: 100000 !important; /* Even higher to ensure it's on top */
}

/* Fix 14b: Ensure wizard modal backdrop covers everything */
#workout-wizard-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 99999 !important;
}

/* Fix 14c: Ensure wizard modal content is above everything on mobile */
@media (max-width: 768px) {
  #workout-wizard-modal {
    z-index: 99999 !important;
  }
  
  .wizard-modal {
    z-index: 100000 !important;
  }
  
  /* Ensure the modal content and buttons are accessible */
  .wizard-content,
  .wizard-footer,
  .wizard-nav-buttons {
    z-index: 100001 !important;
    position: relative !important;
  }
  
  /* Specifically elevate the Next button area */
  .wizard-next-btn,
  .wizard-back-btn,
  .wizard-generate-btn {
    z-index: 100002 !important;
    position: relative !important;
  }
}

/* Fix 15: Debug helpers - Remove after testing */
.debug-border {
  border: 2px dashed red !important;
}

/* Debug: Visualize button boundaries */
.debug-mode .wizard-muscle-option,
.debug-mode .wizard-equipment-option {
  border: 2px solid red !important;
  background: rgba(255, 0, 0, 0.1) !important;
}

.debug-mode .wizard-muscle-option.selected,
.debug-mode .wizard-equipment-option.selected {
  border: 2px solid green !important;
  background: rgba(0, 255, 0, 0.1) !important;
}

/* Fix 21: Force checkmark to use button as reference point */
.wizard-muscle-option.selected,
.wizard-equipment-option.selected {
  position: relative !important;
  contain: layout !important; /* Ensure positioning is contained within button */
}

/* Fix 16: Ensure grid cells don't interfere with positioning */
#wizardMuscleGrid > *,
.wizard-equipment-grid > * {
  position: relative !important;
  transform: none !important;
}

/* Fix 17: Force checkmark positioning context */
.wizard-muscle-option,
.wizard-equipment-option {
  position: relative !important;
  isolation: isolate !important; /* Create new stacking context */
}

/* Fix 18: Ensure buttons are properly positioned in grid */
.wizard-muscle-grid,
.wizard-equipment-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Fix 19: Reset any grid item styles that might cause offset */
.wizard-muscle-grid > button,
.wizard-equipment-grid > button {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

/* Fix 20: Mobile grid adjustments */
@media (max-width: 768px) {
  .wizard-muscle-grid,
  .wizard-equipment-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .wizard-muscle-grid,
  .wizard-equipment-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}