@media (max-width: 1024px) {
  .sidebar { 
    width: 380px; 
    min-width: 320px; 
  }
  
  .locator-wrapper { 
    height: calc(100vh - 160px); 
  }
  
  .title-lg { 
    font-size: 24px; 
  }
}

@media (max-width: 768px) {
  .header-inner { 
    flex-direction: column; 
    gap: 10px; 
    align-items: flex-start; 
  }
  
  .nav a { 
    margin-left: 0; 
    margin-right: 20px; 
  }
  
  .locator-wrapper { 
    flex-direction: column; 
    height: auto; 
    min-height: 100vh; 
  }
  
  .sidebar { 
    order: 2; 
    width: 100%; 
    height: auto; 
    max-height: 600px; 
    border-radius: 10px; 
    padding-bottom: 24px; 
  }
  
  .map-wrap { 
    order: 1; 
    height: 50vh; 
    min-height: 280px; 
    border-radius: 10px; 
  }
  
  .btn-desk {
    display: none;
  }
  
  .btn-mob {
    display: flex;
  }
  
  .title-lg { 
    font-size: 22px; 
  }
}

@media (max-width: 480px) {
  .app { 
    padding: 0 12px; 
  }
  
  .map-wrap { 
    height: 45vh; 
    min-height: 240px; 
  }
  
  .sidebar { 
    padding: 16px; 
  }
  
  .title-lg { 
    font-size: 20px; 
  }
  
  .search-row { 
    flex-direction: column; 
  }
  
  .title-row { 
    padding: 12px; 
  }
  
  .footer { 
    padding: 16px; 
    font-size: 12px; 
  }
}

/* Ensure map controls are visible on small screens */
@media (max-width: 600px) {
  .gm-style-mtc {
    display: block !important;
  }
  
  .gm-style-mtc div {
    background-color: white !important;
  }
}
/* =====================================================
   HARD MOBILE FIX — HORIZONTAL OVERFLOW (CRITICAL)
   DOES NOT AFFECT DESKTOP
   ===================================================== */
@media (max-width: 768px) {

  /* STOP header from forcing page wider than viewport */
  .logo {
    margin-left: 0 !important;
  }

  .nav {
    margin-right: 0 !important;
  }

  /* Prevent body-level horizontal clipping */
  html, body {
    overflow-x: hidden;
  }

  /* Ensure map container never exceeds viewport width */
  .map-wrap,
  #map {
    max-width: 100vw;
  }
}
/* =====================================================
   MOBILE SIDEBAR WIDTH + OVERFLOW FIX
   DOES NOT AFFECT DESKTOP
   ===================================================== */
@media (max-width: 768px) {

  /* Sidebar must fully fit viewport */
  .sidebar {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Reduce padding safely for very small screens */
  .sidebar,
  .sidebar-fixed-top {
    padding-left: 16px;
    padding-right: 16px;
  }

  #listings {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Inputs & buttons must not overflow */
  .search-row,
  .search-row input,
  .search-row button,
  .btn,
  .btn-desk,
  .btn-mob {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Safety: prevent any horizontal clipping */
  .sidebar * {
    max-width: 100%;
  }
}
/* =====================================================
   FINAL MOBILE NORMALIZATION FIX
   STABLE + SAFE
   ===================================================== */
@media (max-width: 768px) {

  /* --------- RESET DESKTOP HACKS --------- */
  .sidebar {
    margin-left: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .map-wrap {
    margin-right: 0 !important;
    height: auto !important;
  }

  /* --------- FIX INVALID FLEX CONSTRAINTS --------- */
  .map-body,
  .container-fluidx,
  .locator-wrapper {
    min-height: 100% !important; /* VALID UNIT */
  }

  /* --------- STACK LAYOUT PROPERLY --------- */
  .locator-wrapper {
    flex-direction: column;
    height: auto !important;
    min-height: 100vh;
  }

  /* --------- MAP SIZE (PRIMARY) --------- */
  .map-wrap {
    order: 1;
    width: 100%;
    min-height: 45vh;
    max-height: 55vh;
    box-sizing: border-box;
  }

  #map {
    width: 100%;
    height: 100%;
    min-height: 240px;
  }

  /* --------- SIDEBAR SIZE (SECONDARY) --------- */
  .sidebar {
    order: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* --------- SCROLL BEHAVIOR --------- */
  #listings {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* --------- PADDING SAFETY --------- */
  .sidebar,
  .sidebar-fixed-top,
  #listings {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* --------- INPUT / BUTTON OVERFLOW --------- */
  .search-row,
  .search-row input,
  .search-row button,
  .btn,
  .btn-desk,
  .btn-mob {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* --------- LAST LINE OF DEFENSE --------- */
  html, body {
    overflow-x: hidden;
  }
}