<!-- Passenger Section -->
<div class="section-card bg-blue-50 border-blue-100">
  <h3 class="section-title text-blue-800">
    <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="form-input bg-gray-100">
    </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="form-input bg-gray-100">
    </div>
  </div>

  <div class="mt-4">
    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
    <input disabled type="text" name="client_email" id="clientEmail" class="form-input bg-gray-100">
  </div>
</div>