@media (min-width: 781px) {
  /* 1. CONTAINER */
  .filterBar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 12px 20px;
    margin: 20px 0;
    align-items: center;
    justify-content: center;
    font-family: "Maven Pro", sans-serif;
  }

  /* 2. DROPDOWN WRAPPERS */
  .dropdown-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* 3. INPUT STYLES (With Arrow) */
  .filterBar input[type="text"] {
    padding: 8px 35px 8px 12px; /* Extra right padding (35px) for the arrow */
    font-size: 14px;
    border: 2px solid #6d6c66;
    border-radius: 6px;
    background-color: #f3f1de;
    color: #02343F;
    font-family: "Maven Pro", sans-serif;
    min-width: 160px;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;

    /* DROPDOWN ARROW LOGIC */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2302343F%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    background-size: 10px auto;
  }

  /* 4. CUSTOM DROPDOWN LISTS */
  .custom-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    background-color: #f3f1de;
    border: 2px solid #6d6c66;
    border-radius: 6px;
    z-index: 9999;
    box-shadow: 4px 4px 0 rgba(2, 52, 63, 0.15);
  }

  .custom-dropdown.hidden {
    display: none;
  }

  /* 5. DROPDOWN CONTENT */
  .dropdown-header {
    background-color: #e6e4cf;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: bold;
    color: #6d6c66;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(109, 108, 102, 0.3);
    pointer-events: none;
  }

  .dropdown-item {
    padding: 10px 12px;
    font-size: 14px;
    color: #02343F;
    cursor: pointer;
    transition: background 0.1s ease;
  }

  .dropdown-item:hover {
    background-color: #02343F;
    color: #F5D042;
  }

  /* 6. FILTER BUTTON */
  #filterBtn {
    background-color: #F5D042;
    color: #02343F;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    font-family: "Manrope", sans-serif;
    box-shadow: 3px 3px 0 #02343F;
    transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.12s ease;
  }

  #filterBtn:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #02343F;
  }

  #filterBtn:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 #02343F;
  }

  .filter-toggle-area {
    display: flex;
    width: fit-content;
    margin-top: 10px;
    margin-bottom: 10px;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  .filter-toggle-icon {
    width: 25px;
  }

}
@media (max-width: 780px) {
  .filterBar {
    display: grid;
    /* Create two equal columns */
    grid-template-columns: 1fr 1fr; 
    gap: 8px;
    padding: 10px;
    margin: 10px 0;
    font-family: "Maven Pro", sans-serif;
  }

  .dropdown-wrapper {
    position: relative;
    width: 100%;
  }

  /* Make the first two inputs (Title & City) and the Button span full width */
  .dropdown-wrapper:nth-child(1),
  .dropdown-wrapper:nth-child(2),
  #filterBtn {
    grid-column: span 2;
  }

  .filterBar input[type="text"] {
    width: 100%;
    height: 38px;
    padding: 0 40px 0 15px;
    font-size: 16px;
    border: 2px solid #6d6c66;
    border-radius: 8px;
    background-color: #f3f1de;
    color: #02343F;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2302343F%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
  }

  /* Specifically for the side-by-side inputs, we shrink the text slightly to prevent overlap */
  .dropdown-wrapper:nth-child(3) input,
  .dropdown-wrapper:nth-child(4) input {
    font-size: 14px;
    padding: 0 30px 0 10px;
  }

  .custom-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background-color: #faf9f6;
    border: 2px solid #6d6c66;
    border-radius: 8px;
    z-index: 9999;
    box-shadow: 0 8px 16px rgba(2, 52, 63, 0.2);
    -webkit-overflow-scrolling: touch;
  }

  /* --- REFINED SCROLLBAR --- */
  .custom-dropdown::-webkit-scrollbar {
    width: 13px; 
    display: block;
  }

  .custom-dropdown::-webkit-scrollbar-track {
    background: #e6e4cf;
    border-radius: 0 8px 8px 0;
  }

  .custom-dropdown::-webkit-scrollbar-thumb {
    background: #02343F;
    border: 2px solid #e6e4cf; 
    border-radius: 10px;
  }

  .custom-dropdown.hidden {
    display: none;
  }

  /* PROFESSION CATEGORY TITLES */
  .dropdown-header {
    padding: 7px 18px;
    font-size: 14px;
    font-weight: 800;
    color: #212221;
    background-color: #bfebbd;
    border-bottom: 1px solid rgba(102, 102, 99, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    user-select: none;
    z-index: 10;
  }

  .dropdown-item {
    padding: 8px;
    font-size: 15px;
    color: #02343F;
    border-bottom: 1px solid rgba(167, 167, 166, 0.1);
    background-color: #f9f8f2;
  }

  .dropdown-item:last-child {
    border-bottom: none;
  }

  .dropdown-item:active {
    background-color: #02343F;
    color: #F5D042;
  }

  .reset-option {
    font-style: italic;
    color: #6d6c66;
    background-color: #f3f1de;
    border-bottom: 2px solid #6d6c66;
  }

  #filterBtn {
    width: 100%;
    height: 35px;
    background-color: #F5D042;
    color: #02343F;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 17px;
    box-shadow: 4px 4px 0 #02343F;
    margin-top: 5px;
    transition: all 0.1s ease;
  }
  #filterBtn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #02343F;
    background-color: #e5c130; 
  }
  .filter-toggle-area {
    display: flex;
    width: fit-content;
    margin: 10px;
    gap: 10px;
    align-items: center;
  }
  .filter-toggle-icon {
    width: 25px;
  }
}