<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-md 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-brand-primary-600 to-brand-primary-700 rounded-md flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-900">اختيار المنطقة</h3>
            <p class="text-sm text-gray-500">اضغط لاختيار منطقة التوصيل</p>
          </div>
        </div>
        
        <button type="button"
                data-action="click->modal#close"
                class="text-gray-400 rounded-md 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-md 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#submitSelectionForm" action="/ar/areas/select" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="vcrfsJv8d9mnvvWMy0f9lmigSvfdOnr5aF7Y8xmY_OjENFlUTgd-agFXa5Gr8NjnN6beLzKvTu2Wj4P_K4qTJA" autocomplete="off" />
        
        <!-- Area Selection -->
        <div class="space-y-3">
          <label class="text-sm font-semibold text-gray-700 block">
            المناطق المتاحة
          </label>

          <!-- Search Input -->
          <div class="relative">
            <input type="text"
                   id="area-search-input"
                   placeholder="البحث في المناطق..."
                   autocomplete="off"
                   class="w-full pl-10 pr-10 py-3 border-2 border-gray-200 rounded-md focus:ring-2 focus:ring-brand-primary-600 focus:border-brand-primary-600 transition-all duration-200 text-sm"
                   data-action="input->modal#filterAreas">

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

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

          <!-- No Results Message -->
          <div id="no-areas-found" class="hidden text-center py-8">
            <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <p class="text-gray-500 text-sm">لم يتم العثور على مناطق</p>
            <p class="text-gray-400 text-xs mt-1">جرب كلمة بحث مختلفة</p>
          </div>

          <div class="space-y-2" id="areas-list">
              <div class="relative area-item" data-area-name="عبدالله المبارك - غرب الجليب">
                <input class="peer sr-only" id="area_ea91c890-b7de-4377-9a57-5d7920f1bfda" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="ea91c890-b7de-4377-9a57-5d7920f1bfda" name="area_id" />
                
                <label for="area_ea91c890-b7de-4377-9a57-5d7920f1bfda" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">عبدالله المبارك - غرب الجليب</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="العارضية">
                <input class="peer sr-only" id="area_758027d7-da12-43f9-9a13-e8499192255c" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="758027d7-da12-43f9-9a13-e8499192255c" name="area_id" />
                
                <label for="area_758027d7-da12-43f9-9a13-e8499192255c" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">العارضية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="العارضية استعمالات حكومية">
                <input class="peer sr-only" id="area_39af2a1a-2c55-4678-92ba-fcd438b2fb72" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="39af2a1a-2c55-4678-92ba-fcd438b2fb72" name="area_id" />
                
                <label for="area_39af2a1a-2c55-4678-92ba-fcd438b2fb72" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">العارضية استعمالات حكومية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 1.000 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="العارضية الحرفية">
                <input class="peer sr-only" id="area_b1c62bae-48b2-4e4d-89a7-6ddacf7e7118" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="b1c62bae-48b2-4e4d-89a7-6ddacf7e7118" name="area_id" />
                
                <label for="area_b1c62bae-48b2-4e4d-89a7-6ddacf7e7118" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">العارضية الحرفية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 1.000 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="العارضية مخازن">
                <input class="peer sr-only" id="area_0cd71bd5-d039-44b8-a3c3-f40038513f78" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="0cd71bd5-d039-44b8-a3c3-f40038513f78" name="area_id" />
                
                <label for="area_0cd71bd5-d039-44b8-a3c3-f40038513f78" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">العارضية مخازن</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 1.000 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="الفروانية">
                <input class="peer sr-only" id="area_2f48ed94-76e8-4605-ba0a-b725c015d9ed" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="2f48ed94-76e8-4605-ba0a-b725c015d9ed" name="area_id" />
                
                <label for="area_2f48ed94-76e8-4605-ba0a-b725c015d9ed" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">الفروانية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="الفردوس">
                <input class="peer sr-only" id="area_83097489-9bfa-4624-8520-3cebe40fb610" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="83097489-9bfa-4624-8520-3cebe40fb610" name="area_id" />
                
                <label for="area_83097489-9bfa-4624-8520-3cebe40fb610" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">الفردوس</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="حطين">
                <input class="peer sr-only" id="area_1f2d473b-efe2-4338-8db9-e295e227bcf1" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="1f2d473b-efe2-4338-8db9-e295e227bcf1" name="area_id" />
                
                <label for="area_1f2d473b-efe2-4338-8db9-e295e227bcf1" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">حطين</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="حولي">
                <input class="peer sr-only" id="area_2b0484be-b0b1-4e36-9024-42520b9d48cc" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="2b0484be-b0b1-4e36-9024-42520b9d48cc" name="area_id" />
                
                <label for="area_2b0484be-b0b1-4e36-9024-42520b9d48cc" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">حولي</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="اشبيلية">
                <input class="peer sr-only" id="area_ec19a5f2-55de-42e3-90b2-f4014cd693e6" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="ec19a5f2-55de-42e3-90b2-f4014cd693e6" name="area_id" />
                
                <label for="area_ec19a5f2-55de-42e3-90b2-f4014cd693e6" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">اشبيلية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="الجابرية">
                <input class="peer sr-only" id="area_339a6435-24ee-4d64-9eae-1e757a8b3385" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="339a6435-24ee-4d64-9eae-1e757a8b3385" name="area_id" />
                
                <label for="area_339a6435-24ee-4d64-9eae-1e757a8b3385" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">الجابرية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="جليب الشيوخ">
                <input class="peer sr-only" id="area_e21ff804-307a-4c58-8c08-3f6e95c4919c" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="e21ff804-307a-4c58-8c08-3f6e95c4919c" name="area_id" />
                
                <label for="area_e21ff804-307a-4c58-8c08-3f6e95c4919c" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">جليب الشيوخ</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="خيطان">
                <input class="peer sr-only" id="area_654c634f-0e1f-4bab-be20-d1532d9b07ef" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="654c634f-0e1f-4bab-be20-d1532d9b07ef" name="area_id" />
                
                <label for="area_654c634f-0e1f-4bab-be20-d1532d9b07ef" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">خيطان</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="العمرية">
                <input class="peer sr-only" id="area_a00f2ba3-be22-4442-95a9-15dc1aac604f" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="a00f2ba3-be22-4442-95a9-15dc1aac604f" name="area_id" />
                
                <label for="area_a00f2ba3-be22-4442-95a9-15dc1aac604f" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">العمرية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="قرطبة">
                <input class="peer sr-only" id="area_c99d6cad-c6ed-4507-bcb4-b11ccc18d019" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="c99d6cad-c6ed-4507-bcb4-b11ccc18d019" name="area_id" />
                
                <label for="area_c99d6cad-c6ed-4507-bcb4-b11ccc18d019" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">قرطبة</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="الرابية">
                <input class="peer sr-only" id="area_ac236460-b6f8-4545-a6d7-ce52da7e271a" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="ac236460-b6f8-4545-a6d7-ce52da7e271a" name="area_id" />
                
                <label for="area_ac236460-b6f8-4545-a6d7-ce52da7e271a" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">الرابية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="الرحاب">
                <input class="peer sr-only" id="area_4985a697-adb1-456a-94d2-4cd730c10a58" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="4985a697-adb1-456a-94d2-4cd730c10a58" name="area_id" />
                
                <label for="area_4985a697-adb1-456a-94d2-4cd730c10a58" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">الرحاب</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="الرقعي">
                <input class="peer sr-only" id="area_58d26193-a513-431e-be0f-0cf336000f52" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="58d26193-a513-431e-be0f-0cf336000f52" name="area_id" />
                
                <label for="area_58d26193-a513-431e-be0f-0cf336000f52" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">الرقعي</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="السلام">
                <input class="peer sr-only" id="area_c7f44d9f-437d-4259-afe6-53957e4af474" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="c7f44d9f-437d-4259-afe6-53957e4af474" name="area_id" />
                
                <label for="area_c7f44d9f-437d-4259-afe6-53957e4af474" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">السلام</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="السالمية">
                <input class="peer sr-only" id="area_cf653393-842d-45a3-93df-1496d8a83d44" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="cf653393-842d-45a3-93df-1496d8a83d44" name="area_id" />
                
                <label for="area_cf653393-842d-45a3-93df-1496d8a83d44" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">السالمية</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="الصديق">
                <input class="peer sr-only" id="area_06a77e33-2b97-45ef-9313-d2367e746e12" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="06a77e33-2b97-45ef-9313-d2367e746e12" name="area_id" />
                
                <label for="area_06a77e33-2b97-45ef-9313-d2367e746e12" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">الصديق</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="الشهداء">
                <input class="peer sr-only" id="area_6b5686c0-17ef-4c21-b716-480dda8b160c" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="6b5686c0-17ef-4c21-b716-480dda8b160c" name="area_id" />
                
                <label for="area_6b5686c0-17ef-4c21-b716-480dda8b160c" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">الشهداء</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="اليرموك">
                <input class="peer sr-only" id="area_cd009e38-bd75-4dcd-a9af-457ca23e641e" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="cd009e38-bd75-4dcd-a9af-457ca23e641e" name="area_id" />
                
                <label for="area_cd009e38-bd75-4dcd-a9af-457ca23e641e" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">اليرموك</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
              <div class="relative area-item" data-area-name="الزهراء">
                <input class="peer sr-only" id="area_a63273aa-40bf-4bf5-a293-f676134599bc" data-action="change-&gt;modal#selectArea" data-branch-id="9acd314f-ba41-4729-8886-62be04d3c43c" type="radio" value="a63273aa-40bf-4bf5-a293-f676134599bc" name="area_id" />
                
                <label for="area_a63273aa-40bf-4bf5-a293-f676134599bc" class="flex items-center justify-between p-4 border-2 border-gray-200 rounded-md cursor-pointer hover:shadow-md hover:border-brand-primary-300 transition-all duration-200 peer-checked:border-brand-primary-600 peer-checked:shadow-lg peer-checked:bg-brand-primary-50 peer-checked:scale-105">
                  <div class="flex items-center gap-3">
                    <div>
                      <h4 class="font-semibold text-gray-900">الزهراء</h4>
                      <div class="flex items-center gap-4 text-xs text-gray-500 mt-1">
                        <span>الحد الأدنى: لا يوجد حد أدنى</span>
                        <span>التوصيل: 0.500 دك</span>
                      </div>
                    </div>
                  </div>
                  <div class="w-8 h-8 border-2 border-gray-300 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg">
                    <!-- Empty circle for default state -->
                  </div>
                </label>
                
                <!-- Selected indicator - positioned as sibling for peer-checked to work -->
                <div class="absolute top-1/2 -translate-y-1/2 w-8 h-8 border-2 border-brand-primary-600 bg-brand-primary-600 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg shadow-brand-primary-200 opacity-0 peer-checked:opacity-100 pointer-events-none"
                     style="left: 0.625rem;">
                  <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
          </div>
        </div>

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

</form>    </div>

    <!-- Fixed Footer with Action Buttons -->
    <div class="flex-shrink-0 px-6 py-4 border-t border-gray-100 bg-gray-50 rounded-b-md">
      <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-md font-medium transition-colors border border-gray-300">
          إلغاء
        </button>

        <button type="button"
                data-action="click->modal#submitSelectionForm"
                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-brand-primary-600 to-brand-primary-700 text-white rounded-md font-medium hover:from-brand-primary-700 hover:to-brand-primary-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200">
          <span data-modal-target="submitText">متابعة</span>
          <span data-modal-target="submitLoader" class="hidden">
            <svg class="w-4 h-4 animate-spin inline ml-2" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            جاري المعالجة...
          </span>
        </button>
      </div>
    </div>
  </div>
</div>

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

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

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

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