<!-- Passenger Information -->
<div class="bg-blue-50 rounded-lg border border-blue-100 p-5">
  <h3 class="text-sm font-medium text-blue-800 mb-3 flex items-center">
    <i class="fas fa-user-circle mr-2"></i> Passenger Information
  </h3>
  <div class="mb-4">
    <label class="block text-sm font-medium text-gray-700 mb-1">Select Passenger</label>
    <select id="riderSelect" class="w-full" data-placeholder="Search passenger...">
      <option></option>
    </select>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
      <input disabled type="text" name="client_name" id="clientName" class="block w-full px-3 py-2 h-12 bg-gray-100 border border-gray-300 rounded-md shadow-sm sm:text-sm">
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
      <input disabled type="text" name="client_phone" id="clientPhone" class="block w-full px-3 py-2 h-12 bg-gray-100 border border-gray-300 rounded-md shadow-sm sm:text-sm">
    </div>
  </div>
  <div class="mt-4 pt-2.5">
    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
    <input disabled type="text" name="client_email" id="clientEmail" class="block w-full px-3 py-2 h-12 bg-gray-100 border border-gray-300 rounded-md shadow-sm sm:text-sm">
  </div>
  <div class="mb-3" id="trip_genderl">
    <label for="trip_gender" class="form-label">Gender Preference</label>
    <select class="form-select" id="trip_gender" name="trip_gender">
      <option selected value="Female">Female</option>
      <option value="B">No Preference</option>
    </select>
  </div>
</div>