<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="v38jIJUx3bMOGKP1N0swonYS8Nsb5d7xFgUbMyW_3dBZtNOJrUfyHKlZ4N6RoMZrOottxI-DSV5Slb4oFMN2dQ" 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_b7cb5157-c954-42cf-826c-a0eb8fe73a63" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="b7cb5157-c954-42cf-826c-a0eb8fe73a63" name="area_id" />
                
                <label for="area_b7cb5157-c954-42cf-826c-a0eb8fe73a63" 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_1c28a6df-2b22-4ef1-969e-e9f3debf9f43" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="1c28a6df-2b22-4ef1-969e-e9f3debf9f43" name="area_id" />
                
                <label for="area_1c28a6df-2b22-4ef1-969e-e9f3debf9f43" 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_fbe4871b-a190-4358-a691-dba76f59dbda" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="fbe4871b-a190-4358-a691-dba76f59dbda" name="area_id" />
                
                <label for="area_fbe4871b-a190-4358-a691-dba76f59dbda" 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_6f2e8844-e116-4b1b-84d1-2092c791c4b2" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="6f2e8844-e116-4b1b-84d1-2092c791c4b2" name="area_id" />
                
                <label for="area_6f2e8844-e116-4b1b-84d1-2092c791c4b2" 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_31f025d7-47fd-4fbb-99fc-8907af48ba4d" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="31f025d7-47fd-4fbb-99fc-8907af48ba4d" name="area_id" />
                
                <label for="area_31f025d7-47fd-4fbb-99fc-8907af48ba4d" 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_990c0796-a3c0-463e-b9db-a78b29104634" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="990c0796-a3c0-463e-b9db-a78b29104634" name="area_id" />
                
                <label for="area_990c0796-a3c0-463e-b9db-a78b29104634" 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_222e106c-46ca-4209-a5d6-e6711c9edbcc" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="222e106c-46ca-4209-a5d6-e6711c9edbcc" name="area_id" />
                
                <label for="area_222e106c-46ca-4209-a5d6-e6711c9edbcc" 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_6b4c61df-2938-4262-a7cf-65365a1c7194" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="6b4c61df-2938-4262-a7cf-65365a1c7194" name="area_id" />
                
                <label for="area_6b4c61df-2938-4262-a7cf-65365a1c7194" 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_3e34e387-0596-40a8-9e4f-695c66a8d031" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="3e34e387-0596-40a8-9e4f-695c66a8d031" name="area_id" />
                
                <label for="area_3e34e387-0596-40a8-9e4f-695c66a8d031" 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_3b44d2a7-d3f0-409d-b04d-5c577e0e4afc" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="3b44d2a7-d3f0-409d-b04d-5c577e0e4afc" name="area_id" />
                
                <label for="area_3b44d2a7-d3f0-409d-b04d-5c577e0e4afc" 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_97bdd2ba-504d-4c1f-8791-434b64ee114f" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="97bdd2ba-504d-4c1f-8791-434b64ee114f" name="area_id" />
                
                <label for="area_97bdd2ba-504d-4c1f-8791-434b64ee114f" 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_4a860e2c-5da4-4f9d-8876-1d03e6eda2fd" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="4a860e2c-5da4-4f9d-8876-1d03e6eda2fd" name="area_id" />
                
                <label for="area_4a860e2c-5da4-4f9d-8876-1d03e6eda2fd" 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_fbedfbcc-06cf-44f6-aef9-96affd5d0aa5" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="fbedfbcc-06cf-44f6-aef9-96affd5d0aa5" name="area_id" />
                
                <label for="area_fbedfbcc-06cf-44f6-aef9-96affd5d0aa5" 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_e0b7dcaf-e264-4496-a7e9-3f2917fc00b0" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="e0b7dcaf-e264-4496-a7e9-3f2917fc00b0" name="area_id" />
                
                <label for="area_e0b7dcaf-e264-4496-a7e9-3f2917fc00b0" 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_332b00de-8431-4730-b168-19369bfb4def" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="332b00de-8431-4730-b168-19369bfb4def" name="area_id" />
                
                <label for="area_332b00de-8431-4730-b168-19369bfb4def" 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_3eda8fd7-7ee9-4b0b-9768-bfc2cbd2c123" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="3eda8fd7-7ee9-4b0b-9768-bfc2cbd2c123" name="area_id" />
                
                <label for="area_3eda8fd7-7ee9-4b0b-9768-bfc2cbd2c123" 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_7db275e4-b50c-4007-8467-f6628a1fa71e" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="7db275e4-b50c-4007-8467-f6628a1fa71e" name="area_id" />
                
                <label for="area_7db275e4-b50c-4007-8467-f6628a1fa71e" 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_0013db44-eefe-4a21-a835-38a4e6dab577" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="0013db44-eefe-4a21-a835-38a4e6dab577" name="area_id" />
                
                <label for="area_0013db44-eefe-4a21-a835-38a4e6dab577" 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_4ce3018b-82d7-4fec-a213-4fd1c235ee60" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="4ce3018b-82d7-4fec-a213-4fd1c235ee60" name="area_id" />
                
                <label for="area_4ce3018b-82d7-4fec-a213-4fd1c235ee60" 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_43ca2122-d966-4a86-85dd-fa54ae2a23f0" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="43ca2122-d966-4a86-85dd-fa54ae2a23f0" name="area_id" />
                
                <label for="area_43ca2122-d966-4a86-85dd-fa54ae2a23f0" 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_6035c873-1155-49d5-a41c-a1189f9af450" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="6035c873-1155-49d5-a41c-a1189f9af450" name="area_id" />
                
                <label for="area_6035c873-1155-49d5-a41c-a1189f9af450" 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_d7230cf1-4c36-4cf6-beb5-0902dfd1108c" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="d7230cf1-4c36-4cf6-beb5-0902dfd1108c" name="area_id" />
                
                <label for="area_d7230cf1-4c36-4cf6-beb5-0902dfd1108c" 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_5d526800-9445-4536-96f2-a2df9f6c46a8" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="5d526800-9445-4536-96f2-a2df9f6c46a8" name="area_id" />
                
                <label for="area_5d526800-9445-4536-96f2-a2df9f6c46a8" 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_cb99079a-19a8-452f-b0eb-d90da5a1d6b8" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="cb99079a-19a8-452f-b0eb-d90da5a1d6b8" name="area_id" />
                
                <label for="area_cb99079a-19a8-452f-b0eb-d90da5a1d6b8" 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_f348f07f-d386-404a-b0cd-d1e4d76235e4" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="f348f07f-d386-404a-b0cd-d1e4d76235e4" name="area_id" />
                
                <label for="area_f348f07f-d386-404a-b0cd-d1e4d76235e4" 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_2d4bada3-a80b-4a18-a986-734ce430b04d" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="2d4bada3-a80b-4a18-a986-734ce430b04d" name="area_id" />
                
                <label for="area_2d4bada3-a80b-4a18-a986-734ce430b04d" 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_5cbc1afe-af78-4777-a79c-caebe34a7301" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="5cbc1afe-af78-4777-a79c-caebe34a7301" name="area_id" />
                
                <label for="area_5cbc1afe-af78-4777-a79c-caebe34a7301" 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_bd82121a-2aa0-46ac-bd67-8b89be1563be" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="bd82121a-2aa0-46ac-bd67-8b89be1563be" name="area_id" />
                
                <label for="area_bd82121a-2aa0-46ac-bd67-8b89be1563be" 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_69446859-7164-4e94-8413-4a480c1d5c46" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="69446859-7164-4e94-8413-4a480c1d5c46" name="area_id" />
                
                <label for="area_69446859-7164-4e94-8413-4a480c1d5c46" 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_450d8a09-d767-4749-b64b-51002b6ee592" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="450d8a09-d767-4749-b64b-51002b6ee592" name="area_id" />
                
                <label for="area_450d8a09-d767-4749-b64b-51002b6ee592" 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_87cd786d-5e56-40ed-92e9-dfef2226c847" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="87cd786d-5e56-40ed-92e9-dfef2226c847" name="area_id" />
                
                <label for="area_87cd786d-5e56-40ed-92e9-dfef2226c847" 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_fbaeac43-9707-4e35-a387-f0f0568c1b12" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="fbaeac43-9707-4e35-a387-f0f0568c1b12" name="area_id" />
                
                <label for="area_fbaeac43-9707-4e35-a387-f0f0568c1b12" 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_763d5667-89b7-417b-8730-81bd54c5f34c" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="763d5667-89b7-417b-8730-81bd54c5f34c" name="area_id" />
                
                <label for="area_763d5667-89b7-417b-8730-81bd54c5f34c" 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_be4f3e29-291a-4399-80da-afdeeb468c1f" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="be4f3e29-291a-4399-80da-afdeeb468c1f" name="area_id" />
                
                <label for="area_be4f3e29-291a-4399-80da-afdeeb468c1f" 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_cacdac04-f60e-4d6b-ad69-3f28ae8ce3d2" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="cacdac04-f60e-4d6b-ad69-3f28ae8ce3d2" name="area_id" />
                
                <label for="area_cacdac04-f60e-4d6b-ad69-3f28ae8ce3d2" 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_bf3e21a5-ddb7-4e27-9bf1-64dfba0a454b" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="bf3e21a5-ddb7-4e27-9bf1-64dfba0a454b" name="area_id" />
                
                <label for="area_bf3e21a5-ddb7-4e27-9bf1-64dfba0a454b" 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_74d8ace1-c1ee-4b1e-9556-507e27d9028f" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="74d8ace1-c1ee-4b1e-9556-507e27d9028f" name="area_id" />
                
                <label for="area_74d8ace1-c1ee-4b1e-9556-507e27d9028f" 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_42a2e495-a650-4fa4-ba4a-09bfd8429f5a" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="42a2e495-a650-4fa4-ba4a-09bfd8429f5a" name="area_id" />
                
                <label for="area_42a2e495-a650-4fa4-ba4a-09bfd8429f5a" 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_89846593-025a-4ae4-9ec9-3413e4d7dcfa" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="89846593-025a-4ae4-9ec9-3413e4d7dcfa" name="area_id" />
                
                <label for="area_89846593-025a-4ae4-9ec9-3413e4d7dcfa" 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_7c15cbdd-59c8-4d95-a33b-28fbce09cf9d" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="7c15cbdd-59c8-4d95-a33b-28fbce09cf9d" name="area_id" />
                
                <label for="area_7c15cbdd-59c8-4d95-a33b-28fbce09cf9d" 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_d0d39382-708f-4a11-b304-484ac37fd96c" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="d0d39382-708f-4a11-b304-484ac37fd96c" name="area_id" />
                
                <label for="area_d0d39382-708f-4a11-b304-484ac37fd96c" 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_9ad036d5-9853-428e-b42d-6bfc41976b70" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="9ad036d5-9853-428e-b42d-6bfc41976b70" name="area_id" />
                
                <label for="area_9ad036d5-9853-428e-b42d-6bfc41976b70" 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_5e325705-b938-4ec8-8342-ba5bf8c763c1" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="5e325705-b938-4ec8-8342-ba5bf8c763c1" name="area_id" />
                
                <label for="area_5e325705-b938-4ec8-8342-ba5bf8c763c1" 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_c2426484-1b84-45ff-9d1f-068fc5052b69" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="c2426484-1b84-45ff-9d1f-068fc5052b69" name="area_id" />
                
                <label for="area_c2426484-1b84-45ff-9d1f-068fc5052b69" 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_68298482-249b-4c02-af0d-c5d09fbcac38" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="68298482-249b-4c02-af0d-c5d09fbcac38" name="area_id" />
                
                <label for="area_68298482-249b-4c02-af0d-c5d09fbcac38" 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_3eb8715e-267b-4811-b75e-0c95adf6aa09" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="3eb8715e-267b-4811-b75e-0c95adf6aa09" name="area_id" />
                
                <label for="area_3eb8715e-267b-4811-b75e-0c95adf6aa09" 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_c2d4d868-0df7-4c64-a9c8-643a82b9ac0c" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="c2d4d868-0df7-4c64-a9c8-643a82b9ac0c" name="area_id" />
                
                <label for="area_c2d4d868-0df7-4c64-a9c8-643a82b9ac0c" 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_8f77958d-e528-40de-ba56-3f36ccc23823" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="8f77958d-e528-40de-ba56-3f36ccc23823" name="area_id" />
                
                <label for="area_8f77958d-e528-40de-ba56-3f36ccc23823" 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_45ffa8f1-bee7-4689-be85-3f9b284b2a21" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="45ffa8f1-bee7-4689-be85-3f9b284b2a21" name="area_id" />
                
                <label for="area_45ffa8f1-bee7-4689-be85-3f9b284b2a21" 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_0daac314-cbdd-4d18-bfcb-4c0b4467bf9a" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="0daac314-cbdd-4d18-bfcb-4c0b4467bf9a" name="area_id" />
                
                <label for="area_0daac314-cbdd-4d18-bfcb-4c0b4467bf9a" 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_5f3e5d69-30b1-47ba-a52e-19a83c479a05" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="5f3e5d69-30b1-47ba-a52e-19a83c479a05" name="area_id" />
                
                <label for="area_5f3e5d69-30b1-47ba-a52e-19a83c479a05" 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_975ba01e-d815-4f0c-a2e3-35578fe9373a" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="975ba01e-d815-4f0c-a2e3-35578fe9373a" name="area_id" />
                
                <label for="area_975ba01e-d815-4f0c-a2e3-35578fe9373a" 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_be17e62d-6040-4ffd-854a-d34f3cfbaaf0" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="be17e62d-6040-4ffd-854a-d34f3cfbaaf0" name="area_id" />
                
                <label for="area_be17e62d-6040-4ffd-854a-d34f3cfbaaf0" 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_add30121-ac0f-4b81-8782-0a73dd5f056c" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="add30121-ac0f-4b81-8782-0a73dd5f056c" name="area_id" />
                
                <label for="area_add30121-ac0f-4b81-8782-0a73dd5f056c" 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_c762a2b4-c8f7-4946-8292-e5ed21d85c2e" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="c762a2b4-c8f7-4946-8292-e5ed21d85c2e" name="area_id" />
                
                <label for="area_c762a2b4-c8f7-4946-8292-e5ed21d85c2e" 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_78eb89e3-41f6-4390-ae1a-613031e10fa2" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="78eb89e3-41f6-4390-ae1a-613031e10fa2" name="area_id" />
                
                <label for="area_78eb89e3-41f6-4390-ae1a-613031e10fa2" 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_ec8ba036-39bb-4bfa-bda8-bf87fd486469" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="ec8ba036-39bb-4bfa-bda8-bf87fd486469" name="area_id" />
                
                <label for="area_ec8ba036-39bb-4bfa-bda8-bf87fd486469" 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_8f6aa938-487f-4dce-8aac-4ea7f92fdeb7" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="8f6aa938-487f-4dce-8aac-4ea7f92fdeb7" name="area_id" />
                
                <label for="area_8f6aa938-487f-4dce-8aac-4ea7f92fdeb7" 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_5d3d5708-4d37-4871-8afa-2b75040bc636" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="5d3d5708-4d37-4871-8afa-2b75040bc636" name="area_id" />
                
                <label for="area_5d3d5708-4d37-4871-8afa-2b75040bc636" 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_b5cf1ec7-01ec-4b5d-99f3-f7b8cd929874" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="b5cf1ec7-01ec-4b5d-99f3-f7b8cd929874" name="area_id" />
                
                <label for="area_b5cf1ec7-01ec-4b5d-99f3-f7b8cd929874" 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_74689199-1931-444c-a160-80701e2b706e" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="74689199-1931-444c-a160-80701e2b706e" name="area_id" />
                
                <label for="area_74689199-1931-444c-a160-80701e2b706e" 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_182f4e6e-7bed-43fb-a36a-4925b632482b" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="182f4e6e-7bed-43fb-a36a-4925b632482b" name="area_id" />
                
                <label for="area_182f4e6e-7bed-43fb-a36a-4925b632482b" 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_c47a9634-126e-4de8-9a0f-5081fed20005" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="c47a9634-126e-4de8-9a0f-5081fed20005" name="area_id" />
                
                <label for="area_c47a9634-126e-4de8-9a0f-5081fed20005" 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_e827b77f-69da-4751-9d93-6bbacf119429" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="e827b77f-69da-4751-9d93-6bbacf119429" name="area_id" />
                
                <label for="area_e827b77f-69da-4751-9d93-6bbacf119429" 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_3151c267-c2d2-4337-9d30-f5b70b5c9673" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="3151c267-c2d2-4337-9d30-f5b70b5c9673" name="area_id" />
                
                <label for="area_3151c267-c2d2-4337-9d30-f5b70b5c9673" 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_d6956d06-f08f-4690-bee6-95ffbdca2e0e" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="d6956d06-f08f-4690-bee6-95ffbdca2e0e" name="area_id" />
                
                <label for="area_d6956d06-f08f-4690-bee6-95ffbdca2e0e" 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_ccbba3c4-aa8c-4fd8-9d26-f751c0ceb640" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="ccbba3c4-aa8c-4fd8-9d26-f751c0ceb640" name="area_id" />
                
                <label for="area_ccbba3c4-aa8c-4fd8-9d26-f751c0ceb640" 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_d4b3b10d-b38c-461d-abf2-9d6067a56b5c" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="d4b3b10d-b38c-461d-abf2-9d6067a56b5c" name="area_id" />
                
                <label for="area_d4b3b10d-b38c-461d-abf2-9d6067a56b5c" 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_164e54ab-9855-4b8d-a8ef-43e1d77550a1" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="164e54ab-9855-4b8d-a8ef-43e1d77550a1" name="area_id" />
                
                <label for="area_164e54ab-9855-4b8d-a8ef-43e1d77550a1" 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_9d0ed540-a8bc-493a-8457-82dbf179ef9a" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="9d0ed540-a8bc-493a-8457-82dbf179ef9a" name="area_id" />
                
                <label for="area_9d0ed540-a8bc-493a-8457-82dbf179ef9a" 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_fb0813ae-364b-442c-8633-67131cbc4fea" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="fb0813ae-364b-442c-8633-67131cbc4fea" name="area_id" />
                
                <label for="area_fb0813ae-364b-442c-8633-67131cbc4fea" 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_cd62019f-ca90-42bd-8071-f0110dc24480" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="cd62019f-ca90-42bd-8071-f0110dc24480" name="area_id" />
                
                <label for="area_cd62019f-ca90-42bd-8071-f0110dc24480" 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_1e4bb177-8104-4693-a3f8-31e67aa40436" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="1e4bb177-8104-4693-a3f8-31e67aa40436" name="area_id" />
                
                <label for="area_1e4bb177-8104-4693-a3f8-31e67aa40436" 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_6aa2f7ad-8333-419d-a498-23649004ca89" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="6aa2f7ad-8333-419d-a498-23649004ca89" name="area_id" />
                
                <label for="area_6aa2f7ad-8333-419d-a498-23649004ca89" 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_c6170035-5b97-4302-b09b-aa5f92617915" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="c6170035-5b97-4302-b09b-aa5f92617915" name="area_id" />
                
                <label for="area_c6170035-5b97-4302-b09b-aa5f92617915" 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_c4c6246a-edca-4c63-868d-4c946a9d39d3" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="c4c6246a-edca-4c63-868d-4c946a9d39d3" name="area_id" />
                
                <label for="area_c4c6246a-edca-4c63-868d-4c946a9d39d3" 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_489ff764-7ab7-46a8-8795-27697918de30" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="489ff764-7ab7-46a8-8795-27697918de30" name="area_id" />
                
                <label for="area_489ff764-7ab7-46a8-8795-27697918de30" 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_e1a3563e-9632-42d9-97c0-94b8c9815096" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="e1a3563e-9632-42d9-97c0-94b8c9815096" name="area_id" />
                
                <label for="area_e1a3563e-9632-42d9-97c0-94b8c9815096" 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_0067a0c8-8341-489d-8ed3-39c699147d85" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="0067a0c8-8341-489d-8ed3-39c699147d85" name="area_id" />
                
                <label for="area_0067a0c8-8341-489d-8ed3-39c699147d85" 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_b8f8242c-6c90-49e9-87c7-305703883ea3" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="b8f8242c-6c90-49e9-87c7-305703883ea3" name="area_id" />
                
                <label for="area_b8f8242c-6c90-49e9-87c7-305703883ea3" 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_ab75fe0e-65af-4d0c-b47a-405a41d3487f" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="ab75fe0e-65af-4d0c-b47a-405a41d3487f" name="area_id" />
                
                <label for="area_ab75fe0e-65af-4d0c-b47a-405a41d3487f" 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_f5850d4e-059f-4bca-b8e0-5fb9318c3c32" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="f5850d4e-059f-4bca-b8e0-5fb9318c3c32" name="area_id" />
                
                <label for="area_f5850d4e-059f-4bca-b8e0-5fb9318c3c32" 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_99d4153e-ee69-43d9-81b0-81dd4ffe5c2a" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="99d4153e-ee69-43d9-81b0-81dd4ffe5c2a" name="area_id" />
                
                <label for="area_99d4153e-ee69-43d9-81b0-81dd4ffe5c2a" 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_da1f7068-e463-4974-9d51-c3a741304f14" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="da1f7068-e463-4974-9d51-c3a741304f14" name="area_id" />
                
                <label for="area_da1f7068-e463-4974-9d51-c3a741304f14" 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_1c9f0d2e-2f57-453e-abda-1ce38e1ad877" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="1c9f0d2e-2f57-453e-abda-1ce38e1ad877" name="area_id" />
                
                <label for="area_1c9f0d2e-2f57-453e-abda-1ce38e1ad877" 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_e81beea2-cbfc-4507-965b-078188beda1c" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="e81beea2-cbfc-4507-965b-078188beda1c" name="area_id" />
                
                <label for="area_e81beea2-cbfc-4507-965b-078188beda1c" 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_3c56db3d-d33b-419b-9a47-1028011b5751" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="3c56db3d-d33b-419b-9a47-1028011b5751" name="area_id" />
                
                <label for="area_3c56db3d-d33b-419b-9a47-1028011b5751" 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_571d4988-f7be-4d62-80fb-5d6cc035d1f9" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="571d4988-f7be-4d62-80fb-5d6cc035d1f9" name="area_id" />
                
                <label for="area_571d4988-f7be-4d62-80fb-5d6cc035d1f9" 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_7283b577-60c8-49d8-86e2-a4da9517446f" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="7283b577-60c8-49d8-86e2-a4da9517446f" name="area_id" />
                
                <label for="area_7283b577-60c8-49d8-86e2-a4da9517446f" 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_13a16938-1b05-45fd-9ce4-43a7e162d17f" data-action="change-&gt;modal#selectArea" data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237" type="radio" value="13a16938-1b05-45fd-9ce4-43a7e162d17f" name="area_id" />
                
                <label for="area_13a16938-1b05-45fd-9ce4-43a7e162d17f" 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_8b900564-4190-4427-804a-2b6181bb1e5b" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="8b900564-4190-4427-804a-2b6181bb1e5b" name="area_id" />
                
                <label for="area_8b900564-4190-4427-804a-2b6181bb1e5b" 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_3c27b9b5-e7f3-4b70-b2e4-07fae4f40457" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="3c27b9b5-e7f3-4b70-b2e4-07fae4f40457" name="area_id" />
                
                <label for="area_3c27b9b5-e7f3-4b70-b2e4-07fae4f40457" 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_b9409e12-5efe-4781-8000-92bdf411e3f4" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="b9409e12-5efe-4781-8000-92bdf411e3f4" name="area_id" />
                
                <label for="area_b9409e12-5efe-4781-8000-92bdf411e3f4" 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_97377177-3365-4b8b-bce5-d1f3cc49db86" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="97377177-3365-4b8b-bce5-d1f3cc49db86" name="area_id" />
                
                <label for="area_97377177-3365-4b8b-bce5-d1f3cc49db86" 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_47bea463-ed71-448c-bbb0-3bfa8c067485" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="47bea463-ed71-448c-bbb0-3bfa8c067485" name="area_id" />
                
                <label for="area_47bea463-ed71-448c-bbb0-3bfa8c067485" 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_0ae6793f-c7c6-44ea-b3bc-8b854e185b5c" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="0ae6793f-c7c6-44ea-b3bc-8b854e185b5c" name="area_id" />
                
                <label for="area_0ae6793f-c7c6-44ea-b3bc-8b854e185b5c" 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_0c874ee4-cee5-4908-9c93-a0276aa9cf7c" data-action="change-&gt;modal#selectArea" data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034" type="radio" value="0c874ee4-cee5-4908-9c93-a0276aa9cf7c" name="area_id" />
                
                <label for="area_0c874ee4-cee5-4908-9c93-a0276aa9cf7c" 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>