/* =========================================
   MOBILE-FIRST OVERRIDES (<= 768px)
   Clean, touch-friendly, professional UI
========================================= */
@media (max-width: 768px) {

  /* =========================
     GLOBAL
  ========================= */
  button, input, textarea {
    font-size: 16px; /* prevent zoom on iOS */
  }

  /* =========================
     MAP FULLSCREEN CLEAN
  ========================= */
  #map_new {
    height: 100vh;
  }

  #top-center-div{
    display: none !important;
    scale: 0.8;
    z-index: 10 !important;
  }

  #layers-section{
    width: 70% !important;
    display: none !important;
  }


  .layer-upload-btn{
    scale: 0.8 !important;
  }

  #search-section{
    display: none !important;
  }

  #chatbot-section{
    display: none !important;
  }

  .chatbot-toggle{
    position: fixed !important;
    top: 680px !important;
    left: 20px !important;
  }

  .chatbot-container{
    position: fixed !important;
    top: 320px !important;
    left: 40px !important;
    scale: 0.9 !important;
  }

  #profileModal{
    scale: 0.9 !important;
    left: 40px !important;
    bottom: 250px !important;  
  }
  .intro-content h1{
    font-size: 1.4rem !important;
  }

  .intro-content p{
    font-size: 1rem !important;
  }
  .intro-content{
    scale: 0.9 !important;
  }

  .title_style{
    font-size: 1.8rem !important;
  }

  .ol-control{
    scale: 0.9;
  }

  .layer-switcher{
    display: none !important;
    top: 15.5rem;
  }

  #profile-logo{
    scale: 0.9;
  }

  #profile-info-payment{
    width: 80% !important;
    left: 6% !important;
  }
}