/**
 * SIMPLIFIED Wizard Components
 * Clean 3-step form navigation without specificity wars
 */

/* ============================================================================
   STEP VISIBILITY SYSTEM - SIMPLIFIED
   ============================================================================ */

/* Step container base styles */
#step-content-container {
  min-height: 400px;
  width: 100%;
  display: block;
  position: relative;
}

/* FIX: Remove extra space at top of steps */
#step-content-container > div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#step-1-content,
#step-2-content,
#step-3-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* FIX: Remove invisible spacer space */
.invisible-spacer {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Hide all steps by default */
.wizard-step,
.step-content {
  display: none;
  min-height: 400px;
  width: 100%;
  position: relative;
}

/* Show only the active step based on body data-step attribute */
body[data-step="1"] .wizard-step[data-step="1"],
body[data-step="1"] .step-content[data-step="1"],
body[data-step="1"] #step-1-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 400px !important;
}

body[data-step="2"] .wizard-step[data-step="2"],
body[data-step="2"] .step-content[data-step="2"],
body[data-step="2"] #step-2-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 400px !important;
  height: auto !important;
}

body[data-step="3"] .wizard-step[data-step="3"],
body[data-step="3"] .step-content[data-step="3"],
body[data-step="3"] #step-3-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 400px !important;
}

/* ============================================================================
   GOOGLE MAPS SUPPORT - SIMPLIFIED
   ============================================================================ */

/* Simple map container styles for step 2 */
body[data-step="2"] #map {
  display: block;
  width: 100%;
  height: 400px;
  min-height: 400px;
  position: relative;
  background: #f9fafb;
  border-radius: 0.75rem;
  overflow: hidden;
}

/* Loading overlay styles */
body[data-step="2"] .map-loading-overlay {
  z-index: 10;
  transition: opacity 0.3s ease;
}

body[data-step="2"] .map-loading-overlay.hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* Hide Google Maps logo and attribution - simple and safe */
body[data-step="2"] #map .gm-style-cc {
  display: none;
}

body[data-step="2"] #map .gm-style a[href*="google.com/maps"] {
  display: none;
}

body[data-step="2"] #map .gm-style img[src*="google.com"] {
  display: none;
}

/* ============================================================================
   NAVIGATION BUTTON VISIBILITY
   ============================================================================ */
/* All navigation button visibility rules are now consolidated in navigation.css */

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

@media (max-width: 768px) {
  .wizard-step,
  .step-content {
    min-height: 300px;
  }

  body[data-step="2"] #map {
    height: 350px !important;
    min-height: 350px !important;
  }
}

/* ============================================================================
   STEP TRANSITIONS (OPTIONAL)
   ============================================================================ */

/* PERFORMANCE FIX: Removed transitions that conflict with display changes
.wizard-step,
.step-content {
  transition: opacity 0.2s ease-in-out;
}
*/

body[data-step="1"] .wizard-step[data-step="1"],
body[data-step="2"] .wizard-step[data-step="2"],
body[data-step="3"] .wizard-step[data-step="3"] {
  opacity: 1;
}