/* Tablet & Mobile Adjustments */
@media screen and (max-width: 992px) {

  .container {
      width: 95%;
  }

  main.container {
    width: 100%;
  }

  /* Stack the search filters vertically */
  .filter-row {
      flex-direction: column !important;
  }

  .filter-row input,
  .filter-row select {
      width: 100% !important; /* Full width inputs on mobile */
  }
}

@media screen and (max-width: 768px) {

  .header-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    /* 3. Show the hamburger icon on mobile */
    #hamburger {
        display: block;
        width: 3rem;
        margin: auto;
    }

    /* 4. Hide the menu links by default on mobile */
    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 5px;
        padding-top: 10px;
    }

    /* 5. Show the menu when the "responsive" class is added via JS */
    .nav-links.responsive {
        display: flex;
    }

    /* 6. Make buttons full width in the mobile menu */
    .nav-links .button {
        width: 12rem;
        margin: 0;
        border-radius: 0;
    }

    .headerimg {
        max-width: 200px; /* Resize logo for mobile */
    }

  .form-actions {
    display: flex;
    gap: 1rem;
    justify-content: space-around;
    width: 100%;
  }

  .form-actions .button {
    width: 8rem;
  }

  .button {
    font-size: 1rem;
  }



  /* Change from 3 or 2 columns to 1 */
  .property-grid {
      flex-direction: column;
      width: 100%;
  }

  .property-card {
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
  }

  /* Adjust the Town/Suburb header in property_detail.php */
  div[style*="display: flex; gap: 5rem;"] {
      flex-direction: column !important;
      gap: 1rem !important;
      text-align: center;
  }
}

@media screen and (max-width: 480px) {

  header .container {
    flex-direction: column;
  }

  .headerimg {
    width: 100%;
  }

  .nav-links {
    width: 80%;
    margin: auto;
    display: none;
  }

  @media screen and (max-width: 480px) {
    admin-nav .button {
      width: 12rem !important; /* Maak die knoppie amper volskerm op fone */
      margin: auto;
      }

      header .container {
        display: flex !important;
        flex-direction: column !important;
      }
    .bond-calc {
        width: 100% !important;
        padding: 1rem !important;
    }

    /* Make buttons bigger for touch */
    .button {
      display: inline-block;
      width: 12rem;;
      padding: 15px;
      font-size: 1.1rem;
      text-align: center;
    }

    /* Adjust the heart button container */
    .heart-btn-container h2 {
        font-size: 1.2rem;
    }

    .admin-table tr, .admin-table td  {
      border: solid 1px #002D62 !important;
    }

    .blank-td {
      background-color: #002D62  !important;
    }

    .form-row-1 {
      flex-direction: column;
    }

    .form-row {
      flex-direction: row;
    }

    .form-group {
      flex-direction: column;
    }

    .admin-edit {
      width: 100%;
    }

    .location {
      flex-direction: column;
    }

    .protected-container {
      width: 100%;
    }

    img.protected-img {
      display: block;
      width: 100%;
    }
}