/**
 * Property Detail Page - Map Section Fix
 * 
 * Ensures map-info bar is fully visible and not cut by similar properties
 * Fixes overlap issues between map section and similar properties section
 * 
 * Version: 1.0
 * Created: 2025-01-27
 */

/* ========================================================================
   MAP SECTION - ENSURE FULL VISIBILITY
   ======================================================================== */

.property-map-section {
  /* Ensure map section contains all its content including map-info */
  display: flex !important;
  flex-direction: column !important;
  min-height: auto !important;
  
  /* Critical: Add bottom margin to ensure map-info is not cut */
  margin-bottom: var(--section-spacing-lg) !important;
  padding-bottom: 0 !important;
  
  /* Ensure nothing overlaps this section */
  position: relative !important;
  z-index: 1 !important;
}

/* Map container - takes flex space */
.property-map-section .map-container {
  flex: 1 1 auto;
  min-height: var(--map-height-mobile);
}

/* Map info - must be fully visible */
.property-map-section .map-info {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10 !important;
  /* Ensure it's not clipped */
  overflow: visible !important;
  /* Add extra bottom spacing for safety */
  margin-bottom: 0 !important;
}

/* ========================================================================
   SIMILAR PROPERTIES SECTION - ENSURE NO OVERLAP
   ======================================================================== */

.similar-properties-section {
  /* CRITICAL: Ensure it starts AFTER the map section */
  margin-top: 0 !important;
  padding-top: var(--section-spacing-lg) !important;
  /* Ensure it's below map section */
  position: relative !important;
  z-index: 0 !important;
  /* Clear any floats or positioning that might cause overlap */
  clear: both !important;
}

/* Container inside similar properties - ensure proper spacing */
.similar-properties-section .container,
.similar-properties-section .property-container--detail {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ========================================================================
   RESPONSIVE FIXES
   ======================================================================== */

@media (max-width: 991px) {
  .property-map-section {
    margin-bottom: var(--section-spacing-md) !important;
  }
  
  .similar-properties-section {
    padding-top: var(--section-spacing-md) !important;
  }
}

@media (max-width: 767px) {
  .property-map-section {
    margin-bottom: var(--section-spacing-sm) !important;
  }
  
  .similar-properties-section {
    padding-top: var(--section-spacing-sm) !important;
  }
}