<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">اختيار المنطقة</h3>
            <p class="text-sm text-gray-500">اختر منطقة التوصيل للمتابعة</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="/ar/areas/select" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="JCIGgVInj945s-1VDE_6-oMzeGz40DipxKAnRl-wl_OqHVA_uP2i8FK4hlj7GfyBfqRBqvCyeqh35WfZSuxNHg" autocomplete="off" />
        
        <!-- Area Selection -->
        <div class="space-y-3">
          <label class="text-sm font-semibold text-gray-700 block">
            المناطق المتاحة
          </label>

          <!-- Search Input -->
          <div class="relative">
            <input type="text"
                   id="area-search-input"
                   placeholder="البحث في المناطق..."
                   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 right-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 left-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">لم يتم العثور على مناطق</p>
            <p class="text-gray-400 text-xs mt-1">جرب كلمة بحث مختلفة</p>
          </div>

          <div class="space-y-2" id="areas-list">
              <div class="relative area-item" data-area-name="العباسية">
                <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">العباسية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="عبدالله المبارك - غرب الجليب">
                <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">عبدالله المبارك - غرب الجليب</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="عبدالله السالم">
                <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">عبدالله السالم</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="أبرق خيطان">
                <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">أبرق خيطان</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="العديلية">
                <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">العديلية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الأندلس">
                <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">الأندلس</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="العارضية">
                <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">العارضية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="العارضية الحرفية">
                <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">العارضية الحرفية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="بيان">
                <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">بيان</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الدعية">
                <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">الدعية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الدسمة">
                <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">الدسمة</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الضجيج">
                <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">الضجيج</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الدوحة">
                <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">الدوحة</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الفيحاء">
                <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">الفيحاء</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الفروانية">
                <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">الفروانية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الفردوس">
                <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">الفردوس</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="غرناطة">
                <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">غرناطة</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الحساوي">
                <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">الحساوي</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="حطين">
                <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">حطين</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="حولي">
                <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">حولي</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="العارضية الصناعية">
                <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">العارضية الصناعية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="اشبيلية">
                <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">اشبيلية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="جابر الأحمد">
                <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">جابر الأحمد</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="جابر العلي">
                <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">جابر العلي</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الجابرية">
                <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">الجابرية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="جليب الشيوخ">
                <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">جليب الشيوخ</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="كيفان">
                <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">كيفان</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الخالدية">
                <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">الخالدية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="خيطان">
                <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">خيطان</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="ميدان حولي">
                <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">ميدان حولي</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="المنصورية">
                <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">المنصورية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="مشرف">
                <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">مشرف</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="مبارك العبدالله - غرب مشرف">
                <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">مبارك العبدالله - غرب مشرف</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="مبارك الكبير">
                <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">مبارك الكبير</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="النهضة">
                <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">النهضة</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="النسيم">
                <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">النسيم</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="شمال غرب الصليبيخات">
                <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">شمال غرب الصليبيخات</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="النزهة">
                <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">النزهة</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="العمرية">
                <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">العمرية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="القادسية">
                <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">القادسية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="القيروان">
                <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">القيروان</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="قرطبة">
                <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">قرطبة</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="القرين">
                <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">القرين</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الرابية">
                <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">الرابية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الري">
                <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">الري</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الروضة">
                <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">الروضة</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الرحاب">
                <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">الرحاب</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الرقعي">
                <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">الرقعي</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الرميثية">
                <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">الرميثية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="سعد العبدالله">
                <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">سعد العبدالله</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="صباح الناصر">
                <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">صباح الناصر</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="صباح السالم">
                <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">صباح السالم</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="السلام">
                <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">السلام</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="السالمية">
                <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">السالمية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="سلوى">
                <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">سلوى</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الصديق">
                <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">الصديق</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الشعب">
                <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">الشعب</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الشامية">
                <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">الشامية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الشدادية">
                <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">الشدادية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الشهداء">
                <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">الشهداء</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الشويخ">
                <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">الشويخ</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="خيطان الجنوبي">
                <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">خيطان الجنوبي</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الصليبيخات">
                <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">الصليبيخات</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="السرة">
                <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">السرة</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="غرب عبدالله المبارك">
                <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">غرب عبدالله المبارك</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="اليرموك">
                <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">اليرموك</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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="الزهراء">
                <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">الزهراء</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: مجاني</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="left: 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">
          إلغاء
        </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">متابعة</span>
          <span data-modal-target="submitLoader" class="hidden">
            <svg class="w-4 h-4 animate-spin inline ml-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>
            جاري المعالجة...
          </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>