<turbo-stream action="update" target="modal-container"><template><!-- Area Selection Modal -->
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-md transition-all duration-300"
     data-controller="modal"
     data-modal-target="overlay"
     data-action="click->modal#closeOnOverlay">
  
  <div class="relative bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 flex flex-col transform transition-all duration-300"
       data-modal-target="content"
       data-action="click->modal#preventClose">
    
    <!-- Header -->
    <div class="px-6 py-4 border-b border-gray-100">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-900">Choose Area</h3>
            <p class="text-sm text-gray-500">Select your delivery area to continue</p>
          </div>
        </div>
        
        <button type="button" 
                data-action="click->modal#close"
                class="text-gray-400 rounded-lg p-2">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- Content - Fixed height for consistent UX -->
    <div class="px-6 py-4" style="height: 400px; overflow-y: auto;">

      <!-- Error/Success Messages -->
      <div id="modal-messages" class="mb-4 hidden">
        <div class="p-4 rounded-xl border" id="modal-alert">
          <div class="flex items-center gap-3">
            <div id="modal-alert-icon" class="flex-shrink-0"></div>
            <div>
              <p id="modal-alert-message" class="text-sm font-medium"></p>
            </div>
          </div>
        </div>
      </div>

      <form id="area-selection-form" class="space-y-4" data-turbo="false" data-action="submit-&gt;modal#handleSubmit" action="/en/areas/select" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="fhNIsG4p6J7H-7f3G0-A4Xd5AdC54cVNMuf2iaszoDga7szi_TMYqEPvzQac6aBWV2FXcWcuV8KhlEigNXVrJw" autocomplete="off" />
        
        <!-- Area Selection -->
        <div class="space-y-3">
          <label class="text-sm font-semibold text-gray-700 block">
            Available Areas
          </label>

          <!-- Search Input -->
          <div class="relative">
            <input type="text"
                   id="area-search-input"
                   placeholder="Search areas..."
                   autocomplete="off"
                   class="w-full pl-10 pr-10 py-3 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 text-sm"
                   data-action="input->modal#filterAreas">

            <!-- Search Icon -->
            <svg class="absolute left-3 top-3.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>

            <!-- Clear Button -->
            <button type="button"
                    id="clear-search-btn"
                    class="absolute right-3 top-3 p-1 text-gray-400 hover:text-gray-600 transition-colors opacity-0 pointer-events-none"
                    data-action="click->modal#clearSearch">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
              </svg>
            </button>
          </div>

          <!-- No Results Message -->
          <div id="no-areas-found" class="hidden text-center py-8">
            <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <p class="text-gray-500 text-sm">No areas found</p>
            <p class="text-gray-400 text-xs mt-1">Try a different search term</p>
          </div>

          <div class="space-y-2" id="areas-list">
              <div class="relative area-item" data-area-name="abasiya">
                <input class="peer sr-only" id="area_9d86c42a-b50c-4b0d-893a-03327f5c4080" data-action="change-&gt;modal#selectArea" type="radio" value="9d86c42a-b50c-4b0d-893a-03327f5c4080" name="area_id" />
                
                <label for="area_9d86c42a-b50c-4b0d-893a-03327f5c4080" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Abasiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="abdullah al-mubarak - west jleeb">
                <input class="peer sr-only" id="area_ea91c890-b7de-4377-9a57-5d7920f1bfda" data-action="change-&gt;modal#selectArea" type="radio" value="ea91c890-b7de-4377-9a57-5d7920f1bfda" name="area_id" />
                
                <label for="area_ea91c890-b7de-4377-9a57-5d7920f1bfda" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Abdullah Al-Mubarak - West Jleeb</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="abdullah al-salem">
                <input class="peer sr-only" id="area_8f08eb78-457a-4a7b-972a-2496f3ff3606" data-action="change-&gt;modal#selectArea" type="radio" value="8f08eb78-457a-4a7b-972a-2496f3ff3606" name="area_id" />
                
                <label for="area_8f08eb78-457a-4a7b-972a-2496f3ff3606" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Abdullah Al-Salem</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="abrag khaitan">
                <input class="peer sr-only" id="area_654c634f-0e1f-4bab-be20-d1532d9b07ef" data-action="change-&gt;modal#selectArea" type="radio" value="654c634f-0e1f-4bab-be20-d1532d9b07ef" name="area_id" />
                
                <label for="area_654c634f-0e1f-4bab-be20-d1532d9b07ef" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Abrag Khaitan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="adiliya">
                <input class="peer sr-only" id="area_1bf8a3f7-be1d-4964-a6f0-01d0a0b486f7" data-action="change-&gt;modal#selectArea" type="radio" value="1bf8a3f7-be1d-4964-a6f0-01d0a0b486f7" name="area_id" />
                
                <label for="area_1bf8a3f7-be1d-4964-a6f0-01d0a0b486f7" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Adiliya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="andalous">
                <input class="peer sr-only" id="area_2be82197-ef08-4e80-be08-ef7967f48f40" data-action="change-&gt;modal#selectArea" type="radio" value="2be82197-ef08-4e80-be08-ef7967f48f40" name="area_id" />
                
                <label for="area_2be82197-ef08-4e80-be08-ef7967f48f40" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Andalous</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ardiya">
                <input class="peer sr-only" id="area_758027d7-da12-43f9-9a13-e8499192255c" data-action="change-&gt;modal#selectArea" type="radio" value="758027d7-da12-43f9-9a13-e8499192255c" name="area_id" />
                
                <label for="area_758027d7-da12-43f9-9a13-e8499192255c" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Ardiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ardiya herafiya">
                <input class="peer sr-only" id="area_b1c62bae-48b2-4e4d-89a7-6ddacf7e7118" data-action="change-&gt;modal#selectArea" type="radio" value="b1c62bae-48b2-4e4d-89a7-6ddacf7e7118" name="area_id" />
                
                <label for="area_b1c62bae-48b2-4e4d-89a7-6ddacf7e7118" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Ardiya Herafiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="bayan">
                <input class="peer sr-only" id="area_1b50fb17-5d36-488b-9c1d-d81d4cbcaab8" data-action="change-&gt;modal#selectArea" type="radio" value="1b50fb17-5d36-488b-9c1d-d81d4cbcaab8" name="area_id" />
                
                <label for="area_1b50fb17-5d36-488b-9c1d-d81d4cbcaab8" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Bayan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="daiya">
                <input class="peer sr-only" id="area_bbcf90f6-11e4-478f-8725-4b78db6c9990" data-action="change-&gt;modal#selectArea" type="radio" value="bbcf90f6-11e4-478f-8725-4b78db6c9990" name="area_id" />
                
                <label for="area_bbcf90f6-11e4-478f-8725-4b78db6c9990" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Daiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="dasma">
                <input class="peer sr-only" id="area_623b43f0-f3cb-44c0-8104-2e4cdca1c3df" data-action="change-&gt;modal#selectArea" type="radio" value="623b43f0-f3cb-44c0-8104-2e4cdca1c3df" name="area_id" />
                
                <label for="area_623b43f0-f3cb-44c0-8104-2e4cdca1c3df" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Dasma</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="dhajeej">
                <input class="peer sr-only" id="area_9121c7bf-3075-4271-8135-4c044ede6c2d" data-action="change-&gt;modal#selectArea" type="radio" value="9121c7bf-3075-4271-8135-4c044ede6c2d" name="area_id" />
                
                <label for="area_9121c7bf-3075-4271-8135-4c044ede6c2d" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Dhajeej</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="doha">
                <input class="peer sr-only" id="area_e49ea4b3-956d-4b0e-b7a8-a5514d0a845c" data-action="change-&gt;modal#selectArea" type="radio" value="e49ea4b3-956d-4b0e-b7a8-a5514d0a845c" name="area_id" />
                
                <label for="area_e49ea4b3-956d-4b0e-b7a8-a5514d0a845c" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Doha</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="faiha">
                <input class="peer sr-only" id="area_c899fc82-7a30-4b35-ae6f-90c90b9d9413" data-action="change-&gt;modal#selectArea" type="radio" value="c899fc82-7a30-4b35-ae6f-90c90b9d9413" name="area_id" />
                
                <label for="area_c899fc82-7a30-4b35-ae6f-90c90b9d9413" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Faiha</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="farwaniya">
                <input class="peer sr-only" id="area_2f48ed94-76e8-4605-ba0a-b725c015d9ed" data-action="change-&gt;modal#selectArea" type="radio" value="2f48ed94-76e8-4605-ba0a-b725c015d9ed" name="area_id" />
                
                <label for="area_2f48ed94-76e8-4605-ba0a-b725c015d9ed" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Farwaniya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ferdous">
                <input class="peer sr-only" id="area_83097489-9bfa-4624-8520-3cebe40fb610" data-action="change-&gt;modal#selectArea" type="radio" value="83097489-9bfa-4624-8520-3cebe40fb610" name="area_id" />
                
                <label for="area_83097489-9bfa-4624-8520-3cebe40fb610" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Ferdous</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ghornata">
                <input class="peer sr-only" id="area_8e1769d6-ba4a-4b96-8082-03eed54cdfc5" data-action="change-&gt;modal#selectArea" type="radio" value="8e1769d6-ba4a-4b96-8082-03eed54cdfc5" name="area_id" />
                
                <label for="area_8e1769d6-ba4a-4b96-8082-03eed54cdfc5" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Ghornata</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="hasawi">
                <input class="peer sr-only" id="area_f1691eb3-0d9a-490b-b459-9b6277703106" data-action="change-&gt;modal#selectArea" type="radio" value="f1691eb3-0d9a-490b-b459-9b6277703106" name="area_id" />
                
                <label for="area_f1691eb3-0d9a-490b-b459-9b6277703106" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Hasawi</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="hateen">
                <input class="peer sr-only" id="area_1f2d473b-efe2-4338-8db9-e295e227bcf1" data-action="change-&gt;modal#selectArea" type="radio" value="1f2d473b-efe2-4338-8db9-e295e227bcf1" name="area_id" />
                
                <label for="area_1f2d473b-efe2-4338-8db9-e295e227bcf1" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Hateen</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="hawali">
                <input class="peer sr-only" id="area_2b0484be-b0b1-4e36-9024-42520b9d48cc" data-action="change-&gt;modal#selectArea" type="radio" value="2b0484be-b0b1-4e36-9024-42520b9d48cc" name="area_id" />
                
                <label for="area_2b0484be-b0b1-4e36-9024-42520b9d48cc" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Hawali</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="industrial ardiya">
                <input class="peer sr-only" id="area_d91558a9-3a83-4d9d-bbce-56a4b5966bab" data-action="change-&gt;modal#selectArea" type="radio" value="d91558a9-3a83-4d9d-bbce-56a4b5966bab" name="area_id" />
                
                <label for="area_d91558a9-3a83-4d9d-bbce-56a4b5966bab" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Industrial Ardiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ishbiliya">
                <input class="peer sr-only" id="area_ec19a5f2-55de-42e3-90b2-f4014cd693e6" data-action="change-&gt;modal#selectArea" type="radio" value="ec19a5f2-55de-42e3-90b2-f4014cd693e6" name="area_id" />
                
                <label for="area_ec19a5f2-55de-42e3-90b2-f4014cd693e6" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Ishbiliya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jaber al-ahmad">
                <input class="peer sr-only" id="area_10347976-22ac-46ad-b0b7-149ec565f61c" data-action="change-&gt;modal#selectArea" type="radio" value="10347976-22ac-46ad-b0b7-149ec565f61c" name="area_id" />
                
                <label for="area_10347976-22ac-46ad-b0b7-149ec565f61c" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Jaber Al-Ahmad</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jaber al-ali">
                <input class="peer sr-only" id="area_f586d793-f104-4c2f-a151-2de0717171ae" data-action="change-&gt;modal#selectArea" type="radio" value="f586d793-f104-4c2f-a151-2de0717171ae" name="area_id" />
                
                <label for="area_f586d793-f104-4c2f-a151-2de0717171ae" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Jaber Al-Ali</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jabriya">
                <input class="peer sr-only" id="area_339a6435-24ee-4d64-9eae-1e757a8b3385" data-action="change-&gt;modal#selectArea" type="radio" value="339a6435-24ee-4d64-9eae-1e757a8b3385" name="area_id" />
                
                <label for="area_339a6435-24ee-4d64-9eae-1e757a8b3385" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Jabriya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jleeb shuyoukh">
                <input class="peer sr-only" id="area_e21ff804-307a-4c58-8c08-3f6e95c4919c" data-action="change-&gt;modal#selectArea" type="radio" value="e21ff804-307a-4c58-8c08-3f6e95c4919c" name="area_id" />
                
                <label for="area_e21ff804-307a-4c58-8c08-3f6e95c4919c" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Jleeb Shuyoukh</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="kaifan">
                <input class="peer sr-only" id="area_fd05da61-c551-47b0-b7f5-089a9335b914" data-action="change-&gt;modal#selectArea" type="radio" value="fd05da61-c551-47b0-b7f5-089a9335b914" name="area_id" />
                
                <label for="area_fd05da61-c551-47b0-b7f5-089a9335b914" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Kaifan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="khaldiya">
                <input class="peer sr-only" id="area_c9526d9a-71c3-4c38-9ec8-57c13e0bae25" data-action="change-&gt;modal#selectArea" type="radio" value="c9526d9a-71c3-4c38-9ec8-57c13e0bae25" name="area_id" />
                
                <label for="area_c9526d9a-71c3-4c38-9ec8-57c13e0bae25" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Khaldiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="khiatan">
                <input class="peer sr-only" id="area_28cd0c93-6e96-4b0f-8f4d-fdc9ea509135" data-action="change-&gt;modal#selectArea" type="radio" value="28cd0c93-6e96-4b0f-8f4d-fdc9ea509135" name="area_id" />
                
                <label for="area_28cd0c93-6e96-4b0f-8f4d-fdc9ea509135" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Khiatan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="maidan hawali">
                <input class="peer sr-only" id="area_71d7d625-2420-4474-97c7-c8492cef8e9b" data-action="change-&gt;modal#selectArea" type="radio" value="71d7d625-2420-4474-97c7-c8492cef8e9b" name="area_id" />
                
                <label for="area_71d7d625-2420-4474-97c7-c8492cef8e9b" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Maidan Hawali</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mansouriya">
                <input class="peer sr-only" id="area_2306cf83-43f9-41fa-af4a-ba8a7a029dfa" data-action="change-&gt;modal#selectArea" type="radio" value="2306cf83-43f9-41fa-af4a-ba8a7a029dfa" name="area_id" />
                
                <label for="area_2306cf83-43f9-41fa-af4a-ba8a7a029dfa" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Mansouriya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mishrif">
                <input class="peer sr-only" id="area_aeb16ab6-4db3-491d-b01d-02c7f67bd134" data-action="change-&gt;modal#selectArea" type="radio" value="aeb16ab6-4db3-491d-b01d-02c7f67bd134" name="area_id" />
                
                <label for="area_aeb16ab6-4db3-491d-b01d-02c7f67bd134" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Mishrif</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mubarak al-abdullah - west mishrif">
                <input class="peer sr-only" id="area_bd5e9717-b88c-4405-a9a9-4a04441f9031" data-action="change-&gt;modal#selectArea" type="radio" value="bd5e9717-b88c-4405-a9a9-4a04441f9031" name="area_id" />
                
                <label for="area_bd5e9717-b88c-4405-a9a9-4a04441f9031" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Mubarak Al-Abdullah - West Mishrif</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mubarak al-kabeer">
                <input class="peer sr-only" id="area_12cd896e-7e47-40fc-8cfb-d4ad01c22de6" data-action="change-&gt;modal#selectArea" type="radio" value="12cd896e-7e47-40fc-8cfb-d4ad01c22de6" name="area_id" />
                
                <label for="area_12cd896e-7e47-40fc-8cfb-d4ad01c22de6" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Mubarak Al-Kabeer</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="nahda">
                <input class="peer sr-only" id="area_d48fc10e-7e32-4243-ae3e-cb474c2f924e" data-action="change-&gt;modal#selectArea" type="radio" value="d48fc10e-7e32-4243-ae3e-cb474c2f924e" name="area_id" />
                
                <label for="area_d48fc10e-7e32-4243-ae3e-cb474c2f924e" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Nahda</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="naseem">
                <input class="peer sr-only" id="area_2cc28716-e22e-4dfd-87bb-917aacd49301" data-action="change-&gt;modal#selectArea" type="radio" value="2cc28716-e22e-4dfd-87bb-917aacd49301" name="area_id" />
                
                <label for="area_2cc28716-e22e-4dfd-87bb-917aacd49301" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Naseem</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="north west sulaibikhat">
                <input class="peer sr-only" id="area_5bd815f9-39d3-4721-83aa-da33647f3800" data-action="change-&gt;modal#selectArea" type="radio" value="5bd815f9-39d3-4721-83aa-da33647f3800" name="area_id" />
                
                <label for="area_5bd815f9-39d3-4721-83aa-da33647f3800" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">North West Sulaibikhat</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="nuzha">
                <input class="peer sr-only" id="area_e0b4aa54-c5f7-4f8e-b4b7-b6c503b736c3" data-action="change-&gt;modal#selectArea" type="radio" value="e0b4aa54-c5f7-4f8e-b4b7-b6c503b736c3" name="area_id" />
                
                <label for="area_e0b4aa54-c5f7-4f8e-b4b7-b6c503b736c3" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Nuzha</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="omariya">
                <input class="peer sr-only" id="area_a00f2ba3-be22-4442-95a9-15dc1aac604f" data-action="change-&gt;modal#selectArea" type="radio" value="a00f2ba3-be22-4442-95a9-15dc1aac604f" name="area_id" />
                
                <label for="area_a00f2ba3-be22-4442-95a9-15dc1aac604f" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Omariya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qadisiya">
                <input class="peer sr-only" id="area_9caf6cbe-e93d-49cb-be05-f84ab0b6559d" data-action="change-&gt;modal#selectArea" type="radio" value="9caf6cbe-e93d-49cb-be05-f84ab0b6559d" name="area_id" />
                
                <label for="area_9caf6cbe-e93d-49cb-be05-f84ab0b6559d" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Qadisiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qairawan">
                <input class="peer sr-only" id="area_33af4ffe-fdcd-44be-bba4-2a73810ddf96" data-action="change-&gt;modal#selectArea" type="radio" value="33af4ffe-fdcd-44be-bba4-2a73810ddf96" name="area_id" />
                
                <label for="area_33af4ffe-fdcd-44be-bba4-2a73810ddf96" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Qairawan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qortuba">
                <input class="peer sr-only" id="area_c99d6cad-c6ed-4507-bcb4-b11ccc18d019" data-action="change-&gt;modal#selectArea" type="radio" value="c99d6cad-c6ed-4507-bcb4-b11ccc18d019" name="area_id" />
                
                <label for="area_c99d6cad-c6ed-4507-bcb4-b11ccc18d019" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Qortuba</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qurain">
                <input class="peer sr-only" id="area_0fdf764b-2a11-4b11-9e54-b3b6c595661e" data-action="change-&gt;modal#selectArea" type="radio" value="0fdf764b-2a11-4b11-9e54-b3b6c595661e" name="area_id" />
                
                <label for="area_0fdf764b-2a11-4b11-9e54-b3b6c595661e" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Qurain</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rabiya">
                <input class="peer sr-only" id="area_ac236460-b6f8-4545-a6d7-ce52da7e271a" data-action="change-&gt;modal#selectArea" type="radio" value="ac236460-b6f8-4545-a6d7-ce52da7e271a" name="area_id" />
                
                <label for="area_ac236460-b6f8-4545-a6d7-ce52da7e271a" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Rabiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rai">
                <input class="peer sr-only" id="area_a7440a25-0e45-4d02-940a-b4432f860dc3" data-action="change-&gt;modal#selectArea" type="radio" value="a7440a25-0e45-4d02-940a-b4432f860dc3" name="area_id" />
                
                <label for="area_a7440a25-0e45-4d02-940a-b4432f860dc3" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Rai</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rawda">
                <input class="peer sr-only" id="area_cd334ff9-5f97-4505-9a2c-9a77bbb61f7b" data-action="change-&gt;modal#selectArea" type="radio" value="cd334ff9-5f97-4505-9a2c-9a77bbb61f7b" name="area_id" />
                
                <label for="area_cd334ff9-5f97-4505-9a2c-9a77bbb61f7b" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Rawda</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rehab">
                <input class="peer sr-only" id="area_4985a697-adb1-456a-94d2-4cd730c10a58" data-action="change-&gt;modal#selectArea" type="radio" value="4985a697-adb1-456a-94d2-4cd730c10a58" name="area_id" />
                
                <label for="area_4985a697-adb1-456a-94d2-4cd730c10a58" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Rehab</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="riqai">
                <input class="peer sr-only" id="area_58d26193-a513-431e-be0f-0cf336000f52" data-action="change-&gt;modal#selectArea" type="radio" value="58d26193-a513-431e-be0f-0cf336000f52" name="area_id" />
                
                <label for="area_58d26193-a513-431e-be0f-0cf336000f52" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Riqai</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rumathiya">
                <input class="peer sr-only" id="area_4472e638-6a8b-415c-a394-957e7a1998f2" data-action="change-&gt;modal#selectArea" type="radio" value="4472e638-6a8b-415c-a394-957e7a1998f2" name="area_id" />
                
                <label for="area_4472e638-6a8b-415c-a394-957e7a1998f2" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Rumathiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="saad al-abdullah">
                <input class="peer sr-only" id="area_455b0822-67c1-427c-a546-627a07fe916a" data-action="change-&gt;modal#selectArea" type="radio" value="455b0822-67c1-427c-a546-627a07fe916a" name="area_id" />
                
                <label for="area_455b0822-67c1-427c-a546-627a07fe916a" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Saad Al-Abdullah</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="sabah al-naser">
                <input class="peer sr-only" id="area_ca8dbb96-0ac0-48f7-a541-86779e0f5028" data-action="change-&gt;modal#selectArea" type="radio" value="ca8dbb96-0ac0-48f7-a541-86779e0f5028" name="area_id" />
                
                <label for="area_ca8dbb96-0ac0-48f7-a541-86779e0f5028" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Sabah Al-Naser</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="sabah al- salem">
                <input class="peer sr-only" id="area_cc85eef8-6532-43f1-aa02-7dbb03551785" data-action="change-&gt;modal#selectArea" type="radio" value="cc85eef8-6532-43f1-aa02-7dbb03551785" name="area_id" />
                
                <label for="area_cc85eef8-6532-43f1-aa02-7dbb03551785" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Sabah Al- Salem</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="salam">
                <input class="peer sr-only" id="area_c7f44d9f-437d-4259-afe6-53957e4af474" data-action="change-&gt;modal#selectArea" type="radio" value="c7f44d9f-437d-4259-afe6-53957e4af474" name="area_id" />
                
                <label for="area_c7f44d9f-437d-4259-afe6-53957e4af474" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Salam</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="salmiya">
                <input class="peer sr-only" id="area_cf653393-842d-45a3-93df-1496d8a83d44" data-action="change-&gt;modal#selectArea" type="radio" value="cf653393-842d-45a3-93df-1496d8a83d44" name="area_id" />
                
                <label for="area_cf653393-842d-45a3-93df-1496d8a83d44" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Salmiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="salwa">
                <input class="peer sr-only" id="area_14fca7bb-bfc6-4607-9173-1846864df673" data-action="change-&gt;modal#selectArea" type="radio" value="14fca7bb-bfc6-4607-9173-1846864df673" name="area_id" />
                
                <label for="area_14fca7bb-bfc6-4607-9173-1846864df673" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Salwa</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="sedeeq">
                <input class="peer sr-only" id="area_06a77e33-2b97-45ef-9313-d2367e746e12" data-action="change-&gt;modal#selectArea" type="radio" value="06a77e33-2b97-45ef-9313-d2367e746e12" name="area_id" />
                
                <label for="area_06a77e33-2b97-45ef-9313-d2367e746e12" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Sedeeq</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shaab">
                <input class="peer sr-only" id="area_b7197ab8-74bb-4113-b0be-fad268886149" data-action="change-&gt;modal#selectArea" type="radio" value="b7197ab8-74bb-4113-b0be-fad268886149" name="area_id" />
                
                <label for="area_b7197ab8-74bb-4113-b0be-fad268886149" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Shaab</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shamiya">
                <input class="peer sr-only" id="area_5c5a2f5c-cd30-4934-aab6-2724bbbe54af" data-action="change-&gt;modal#selectArea" type="radio" value="5c5a2f5c-cd30-4934-aab6-2724bbbe54af" name="area_id" />
                
                <label for="area_5c5a2f5c-cd30-4934-aab6-2724bbbe54af" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Shamiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shedadiya">
                <input class="peer sr-only" id="area_817af7cd-fa8c-44e7-b276-40ba53fbbcf4" data-action="change-&gt;modal#selectArea" type="radio" value="817af7cd-fa8c-44e7-b276-40ba53fbbcf4" name="area_id" />
                
                <label for="area_817af7cd-fa8c-44e7-b276-40ba53fbbcf4" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Shedadiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shuhada">
                <input class="peer sr-only" id="area_6b5686c0-17ef-4c21-b716-480dda8b160c" data-action="change-&gt;modal#selectArea" type="radio" value="6b5686c0-17ef-4c21-b716-480dda8b160c" name="area_id" />
                
                <label for="area_6b5686c0-17ef-4c21-b716-480dda8b160c" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Shuhada</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shuwaikh">
                <input class="peer sr-only" id="area_1eecabbe-5b6c-4036-99a9-fcd63a387995" data-action="change-&gt;modal#selectArea" type="radio" value="1eecabbe-5b6c-4036-99a9-fcd63a387995" name="area_id" />
                
                <label for="area_1eecabbe-5b6c-4036-99a9-fcd63a387995" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Shuwaikh</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="south khaitan">
                <input class="peer sr-only" id="area_694daccb-167f-44c5-adee-af0ce6ef981e" data-action="change-&gt;modal#selectArea" type="radio" value="694daccb-167f-44c5-adee-af0ce6ef981e" name="area_id" />
                
                <label for="area_694daccb-167f-44c5-adee-af0ce6ef981e" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">South Khaitan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="sulaibikhat">
                <input class="peer sr-only" id="area_69407799-0813-42fc-b648-ad673dc76c37" data-action="change-&gt;modal#selectArea" type="radio" value="69407799-0813-42fc-b648-ad673dc76c37" name="area_id" />
                
                <label for="area_69407799-0813-42fc-b648-ad673dc76c37" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Sulaibikhat</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="surra">
                <input class="peer sr-only" id="area_478a1a61-095d-43eb-9cba-0541c839f17f" data-action="change-&gt;modal#selectArea" type="radio" value="478a1a61-095d-43eb-9cba-0541c839f17f" name="area_id" />
                
                <label for="area_478a1a61-095d-43eb-9cba-0541c839f17f" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Surra</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="west abdullah al-mubarak">
                <input class="peer sr-only" id="area_4c2644aa-47d6-4f9d-b9e8-6ee0a8cd141a" data-action="change-&gt;modal#selectArea" type="radio" value="4c2644aa-47d6-4f9d-b9e8-6ee0a8cd141a" name="area_id" />
                
                <label for="area_4c2644aa-47d6-4f9d-b9e8-6ee0a8cd141a" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">West Abdullah Al-Mubarak</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="yarmouk">
                <input class="peer sr-only" id="area_cd009e38-bd75-4dcd-a9af-457ca23e641e" data-action="change-&gt;modal#selectArea" type="radio" value="cd009e38-bd75-4dcd-a9af-457ca23e641e" name="area_id" />
                
                <label for="area_cd009e38-bd75-4dcd-a9af-457ca23e641e" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Yarmouk</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="zahra">
                <input class="peer sr-only" id="area_a63273aa-40bf-4bf5-a293-f676134599bc" data-action="change-&gt;modal#selectArea" type="radio" value="a63273aa-40bf-4bf5-a293-f676134599bc" name="area_id" />
                
                <label for="area_a63273aa-40bf-4bf5-a293-f676134599bc" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:shadow-md hover:border-blue-300 transition-all duration-200 peer-checked:border-blue-500 peer-checked:shadow-lg peer-checked:bg-blue-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">Zahra</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
          </div>
        </div>

        <!-- Hidden field to store the item that triggered this modal -->
        <input type="hidden" name="pending_item_id" id="pending_item_id" autocomplete="off" />
        <input type="hidden" name="pending_item_options" id="pending_item_options" autocomplete="off" />

</form>    </div>

    <!-- Fixed Footer with Action Buttons -->
    <div class="flex-shrink-0 px-6 py-4 border-t border-gray-100 bg-gray-50 rounded-b-2xl">
      <div class="flex gap-3">
        <button type="button"
                data-action="click->modal#close"
                class="flex-1 px-4 py-3 text-gray-700 bg-white hover:bg-gray-100 rounded-xl font-medium transition-colors border border-gray-300">
          Cancel
        </button>
        
        <button type="submit"
                form="area-selection-form"
                disabled
                data-modal-target="submitButton"
                data-has-cart-items="false"
                data-will-change-branch="false"
                data-current-branch-id=""
                class="flex-1 px-4 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-xl font-medium hover:from-blue-600 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200">
          <span data-modal-target="submitText">Continue</span>
          <span data-modal-target="submitLoader" class="hidden">
            <svg class="w-4 h-4 animate-spin inline mr-2" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Processing...
          </span>
        </button>
      </div>
    </div>
  </div>
</div>

<style>
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-animate-in {
  animation: modalSlideIn 0.3s ease-out;
}

.modal-overlay-animate-in {
  animation: modalFadeIn 0.3s ease-out;
}
</style></template></turbo-stream>