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

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

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

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

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

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

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

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

          <div class="space-y-2" id="areas-list">
              <div class="relative area-item" data-area-name="abasiya">
                <input class="peer sr-only" id="area_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">Abasiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="abdullah al-mubarak - west jleeb">
                <input class="peer sr-only" id="area_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">Abdullah Al-Mubarak - West Jleeb</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="abdullah al-salem">
                <input class="peer sr-only" id="area_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">Abdullah Al-Salem</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="abrag khaitan">
                <input class="peer sr-only" id="area_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">Abrag Khaitan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="abu al-hasaniya">
                <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">Abu Al-Hasaniya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="abu fatira">
                <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">Abu Fatira</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="abu halifa">
                <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">Abu Halifa</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="adan">
                <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">Adan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="adiliya">
                <input class="peer sr-only" id="area_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">Adiliya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ahmadi">
                <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">Ahmadi</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ali sabah al-salem - um  alhayman">
                <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">Ali Sabah Al-Salem - Um  Alhayman</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="al-masayel">
                <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">Al-Masayel</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="al-mutlaa">
                <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">Al-Mutlaa</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="andalous">
                <input class="peer sr-only" id="area_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">Andalous</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ardiya">
                <input class="peer sr-only" id="area_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">Ardiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ardiya herafiya">
                <input class="peer sr-only" id="area_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">Ardiya Herafiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="bayan">
                <input class="peer sr-only" id="area_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">Bayan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="daher">
                <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">Daher</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="daiya">
                <input class="peer sr-only" id="area_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">Daiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="dasma">
                <input class="peer sr-only" id="area_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">Dasma</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="dhajeej">
                <input class="peer sr-only" id="area_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">Dhajeej</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="doha">
                <input class="peer sr-only" id="area_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">Doha</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="eqaila">
                <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">Eqaila</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="fahad al-ahmad">
                <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">Fahad Al-Ahmad</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="fahaheel">
                <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">Fahaheel</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="faiha">
                <input class="peer sr-only" id="area_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">Faiha</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="farwaniya">
                <input class="peer sr-only" id="area_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">Farwaniya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ferdous">
                <input class="peer sr-only" id="area_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">Ferdous</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="fintas">
                <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">Fintas</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="fnaitees">
                <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">Fnaitees</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ghornata">
                <input class="peer sr-only" id="area_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">Ghornata</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="hadiya">
                <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">Hadiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="hasawi">
                <input class="peer sr-only" id="area_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">Hasawi</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="hateen">
                <input class="peer sr-only" id="area_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">Hateen</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="hawali">
                <input class="peer sr-only" id="area_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">Hawali</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="industrial ardiya">
                <input class="peer sr-only" id="area_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">Industrial Ardiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="ishbiliya">
                <input class="peer sr-only" id="area_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">Ishbiliya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jaber al-ahmad">
                <input class="peer sr-only" id="area_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">Jaber Al-Ahmad</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jaber al-ali">
                <input class="peer sr-only" id="area_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">Jaber Al-Ali</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jabriya">
                <input class="peer sr-only" id="area_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">Jabriya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jahra">
                <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">Jahra</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jahra industrial">
                <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">Jahra Industrial</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jahra livestock farming jawakheer">
                <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">Jahra Livestock Farming Jawakheer</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="jleeb shuyoukh">
                <input class="peer sr-only" id="area_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">Jleeb Shuyoukh</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="kaifan">
                <input class="peer sr-only" id="area_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">Kaifan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="khaldiya">
                <input class="peer sr-only" id="area_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">Khaldiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="khiatan">
                <input class="peer sr-only" id="area_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">Khiatan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mahboula">
                <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">Mahboula</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="maidan hawali">
                <input class="peer sr-only" id="area_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">Maidan Hawali</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mangaf">
                <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">Mangaf</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mansouriya">
                <input class="peer sr-only" id="area_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">Mansouriya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="messila">
                <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">Messila</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mishrif">
                <input class="peer sr-only" id="area_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">Mishrif</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mubarak al-abdullah - west mishrif">
                <input class="peer sr-only" id="area_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">Mubarak Al-Abdullah - West Mishrif</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="mubarak al-kabeer">
                <input class="peer sr-only" id="area_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">Mubarak Al-Kabeer</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="naeem">
                <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">Naeem</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="nahda">
                <input class="peer sr-only" id="area_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">Nahda</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="naseem">
                <input class="peer sr-only" id="area_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">Naseem</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="north west sulaibikhat">
                <input class="peer sr-only" id="area_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">North West Sulaibikhat</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="nuzha">
                <input class="peer sr-only" id="area_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">Nuzha</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="omariya">
                <input class="peer sr-only" id="area_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">Omariya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="oyoon">
                <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">Oyoon</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qadisiya">
                <input class="peer sr-only" id="area_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">Qadisiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qairawan">
                <input class="peer sr-only" id="area_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">Qairawan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qasr">
                <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">Qasr</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qortuba">
                <input class="peer sr-only" id="area_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">Qortuba</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qurain">
                <input class="peer sr-only" id="area_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">Qurain</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="qusur">
                <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">Qusur</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rabiya">
                <input class="peer sr-only" id="area_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">Rabiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rai">
                <input class="peer sr-only" id="area_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">Rai</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rawda">
                <input class="peer sr-only" id="area_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">Rawda</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rehab">
                <input class="peer sr-only" id="area_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">Rehab</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="riqai">
                <input class="peer sr-only" id="area_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">Riqai</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="riqqa">
                <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">Riqqa</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="rumathiya">
                <input class="peer sr-only" id="area_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">Rumathiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="saad al-abdullah">
                <input class="peer sr-only" id="area_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">Saad Al-Abdullah</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="sabah al-naser">
                <input class="peer sr-only" id="area_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">Sabah Al-Naser</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="sabah al-salem">
                <input class="peer sr-only" id="area_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">Sabah Al-Salem</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="salam">
                <input class="peer sr-only" id="area_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">Salam</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="salmiya">
                <input class="peer sr-only" id="area_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">Salmiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="salwa">
                <input class="peer sr-only" id="area_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">Salwa</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="sedeeq">
                <input class="peer sr-only" id="area_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">Sedeeq</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shaab">
                <input class="peer sr-only" id="area_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">Shaab</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shamiya">
                <input class="peer sr-only" id="area_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">Shamiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shedadiya">
                <input class="peer sr-only" id="area_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">Shedadiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shuhada">
                <input class="peer sr-only" id="area_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">Shuhada</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="shuwaikh">
                <input class="peer sr-only" id="area_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">Shuwaikh</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="south abdullah al-mubarak">
                <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">South Abdullah Al-Mubarak</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="south khaitan">
                <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">South Khaitan</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="subahiya">
                <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">Subahiya</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="sulaibikhat">
                <input class="peer sr-only" id="area_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">Sulaibikhat</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="surra">
                <input class="peer sr-only" id="area_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">Surra</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="taima">
                <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">Taima</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="waha">
                <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">Waha</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="west abdullah al-mubarak">
                <input class="peer sr-only" id="area_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">West Abdullah Al-Mubarak</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="yarmouk">
                <input class="peer sr-only" id="area_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">Yarmouk</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="zahra">
                <input class="peer sr-only" id="area_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">Zahra</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>Min: No minimum</span>
                        <span>Delivery: Free</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Blue circle with checkmark - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-blue-500 bg-blue-500 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-blue-200 opacity-0 peer-checked:opacity-100 pointer-events-none" 
                     style="right: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
          </div>
        </div>

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

</form>    </div>

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

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

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

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

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