<style>
  .input-holder {
    position: relative;
  }
  .city-suggestions {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 260px;
    overflow-y: auto;
    z-index: 20;
    display: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }
  .city-suggestions li {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid #e5e5e5; /* divider line between rows, like Chase */
  }
  .city-suggestions li:last-child {
    border-bottom: none;
  }
  .city-suggestions li:hover,
  .city-suggestions li.active {
    background: #eef3fa;
  }
  .city-suggestions li b {
    color: #0d5aa7;
  }

  /* Mobile: bigger tap targets, no ghost hover state, less scroll height
     eaten up by the dropdown. Width/left/top don't need overrides here —
     positionSuggestionDropdown() in the JS sets those inline from the
     input's actual on-screen size, so they already track mobile widths. */
  @media (max-width: 767px) {
    .city-suggestions {
      max-height: 200px;
      -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
    }
    .city-suggestions li {
      padding: 12px 14px;
      font-size: 15px;
      min-height: 44px; /* Apple/Google's minimum recommended tap target */
      display: flex;
      align-items: center;
      -webkit-tap-highlight-color: transparent; /* kill the gray flash on tap */
    }
    .city-suggestions li:active,
    .city-suggestions li.active {
      background: #eef3fa; /* :hover doesn't fire on touch, so mirror it on :active */
    }
  }
</style>