/* =========================
   DESKTOP HEADER
   ========================= */
@media (min-width: 781px) {

  .main-header {
    width: 100%;
  }

  .main-header a {
    text-decoration: none;
    color: inherit;
  }

  .headerLogo {
    width: 65px;
    margin-right: 15px;
    border-radius: 14px;
  }

  .nav-links {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
  }

  .titleArea {
    display: flex;
    align-items: center;
    font-family: "Audiowide";
    font-size: 20px;
  }

  .titleArea,
  .contactHeader,
  .loginHeader,
  .addListingHeader {
    cursor: pointer;
    padding-top: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    border-radius: 5px;
  }

  .contactHeader:hover,
  .loginHeader:hover,
  .addListingHeader:hover {
    background-color: rgb(177, 181, 75);
  }

  .searchArea {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .searchInput {
    width: 250px;
    height: 35px;
    padding-top: 5px;
    padding-right: 8px;
    padding-bottom: 5px;
    padding-left: 8px;
    border-radius: 7px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    outline: none;
    font-family: "Monda", "Trebuchet MS", sans-serif;
  }

  .searchInput:hover {
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.25);
    transition-property: box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease;
  }

  .searchIcon {
    width: 35px;
    margin-left: -40px;
    cursor: pointer;
  }

  .searchIcon:hover {
    transform: scale(1.1);
    transition-property: transform, filter;
    transition-duration: 0.2s;
    transition-timing-function: ease;
  }
}

/* =========================
   MOBILE HEADER
   ========================= */
@media (max-width: 780px) {

  .mobile-header {
    width: 100%;
    box-sizing: border-box; /* Ensure padding doesn't cause overflow */
  }

  .mobile-header a {
    text-decoration: none;
    color: inherit;
  }

  /* ROW 1 */
  .mobile-top {
    width: 100%; /* Changed from 98% to 100% for better alignment */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
  }

  .mobile-logo {
    display: flex;
    align-items: center;
    font-family: "Audiowide";
    font-size: 18px;
  }

  .mobile-logo img {
    width: 46px;
    margin-right: 8px;
    border-radius: 10px;
  }

  .mobile-add,
  .mobile-contact {
    font-size: 14px;
    padding: 6px;
    border-radius: 5px;
  }

  .mobile-login {
    font-size: 22px;
    padding: 6px;
    border-radius: 5px;
  }

  /* ROW 2 */
  .mobile-search {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Added as anchor for absolute icon */
    width: 100%;
  }

  .searchInputMobile {
    width: 85%; /* Increased from 60% for better usability on small screens */
    height: 38px; /* Increased from 28px to accommodate icon and padding safely */
    padding: 5px 40px 5px 12px; /* Increased right padding for icon space */
    border-radius: 7px;
    border: 1px solid black;
    font-family: "Monda", "Trebuchet MS", sans-serif;
    font-size: 16px; /* Prevents iOS from auto-zooming on focus */
    box-sizing: border-box;
  }

  /* icon INSIDE input (right side) */
  .searchIconMobile {
    position: absolute;
    right: calc(7.5% + 10px); /* Positioned relative to the 85% width input */
    width: 24px; /* Scaled down slightly to fit inside the height */
    height: auto;
    cursor: pointer;
    margin: 0; /* Removed negative margins */
  }
}