<turbo-stream action="update" target="modal-container"><template><div class="nq-sheet-scrim"
     data-controller="area-sheet"
     data-area-sheet-current-branch-id-value=""
     data-area-sheet-has-cart-items-value="false"
     data-area-sheet-confirm-template-value="__AREA__ يخدمها فرع __BRANCH__. سلتك مجهّزة من مطبخ آخر، لذا سيتم تفريغها."
     data-action="click->area-sheet#backdrop">
  <div class="nq-sheet" role="dialog" aria-modal="true" aria-labelledby="area-gate-title">
    <span class="nq-sheet__handle" aria-hidden="true"></span>
    <header class="nq-sheet__head">
      <h3 id="area-gate-title" class="nq-sheet__title">وين نوصّل طلبك؟</h3>
      <button type="button" class="nq-sheet__close" data-action="click->area-sheet#close"
              aria-label="إغلاق">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg>
      </button>
    </header>

    <div class="nq-sheet__body">
      <div class="h-[430px] max-h-[62vh] flex flex-col">

          <a href="/ar/customers/sign_in"
             data-login-sheet-open data-login-source="sheet_gate"
             class="flex items-center gap-2 pb-2.5 px-0.5 text-brand-primary-600 text-xs font-semibold">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8.5" r="3.5"/><path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5"/></svg>
            سجّل دخولك لاستخدام عنوانك المحفوظ
          </a>


        <div class=" flex-1 min-h-0 flex flex-col" data-area-sheet-target="deliveryPane">
          <div class="relative my-3 shrink-0">
            <span class="absolute start-3 top-1/2 -translate-y-1/2 text-stone-400 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg>
            </span>
            <input type="text"
                   class="w-full ps-9 pe-3 py-2.5 min-h-[44px] text-sm border border-stone-200 rounded-lg bg-stone-50 placeholder:text-stone-400 focus:bg-white focus:border-brand-primary-400 focus:ring-0"
                   placeholder="ابحث عن منطقة…"
                   autocomplete="off"
                   data-area-sheet-target="searchInput"
                   data-action="input->area-sheet#filter">
          </div>

          <div class="flex-1 min-h-0 overflow-y-auto space-y-[7px]" data-area-sheet-target="areaList">
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="b7cb5157-c954-42cf-826c-a0eb8fe73a63"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="العباسية"
                      data-branch-name="العارضية"
                      data-search-text="abasiya العباسية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">العباسية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="d313d5c1-0438-427d-a022-92437d2aaa71"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="العبدلي"
                      data-branch-name="العارضية"
                      data-search-text="abdali العبدلي"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">العبدلي</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="1c28a6df-2b22-4ef1-969e-e9f3debf9f43"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="عبدالله المبارك - غرب الجليب"
                      data-branch-name="العارضية"
                      data-search-text="abdullah al-mubarak - west jleeb عبدالله المبارك - غرب الجليب"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">عبدالله المبارك - غرب الجليب</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="fbe4871b-a190-4358-a691-dba76f59dbda"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="عبدالله السالم"
                      data-branch-name="العارضية"
                      data-search-text="abdullah al-salem عبدالله السالم"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">عبدالله السالم</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="31f025d7-47fd-4fbb-99fc-8907af48ba4d"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="أبو الحصانية"
                      data-branch-name="القرين"
                      data-search-text="abu al-hasaniya أبو الحصانية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">أبو الحصانية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="990c0796-a3c0-463e-b9db-a78b29104634"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="أبو فطيرة"
                      data-branch-name="القرين"
                      data-search-text="abu fatira أبو فطيرة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">أبو فطيرة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="222e106c-46ca-4209-a5d6-e6711c9edbcc"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="‎أبو حليفة"
                      data-branch-name="القرين"
                      data-search-text="abu halifa ‎أبو حليفة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">‎أبو حليفة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="6b4c61df-2938-4262-a7cf-65365a1c7194"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="العدان"
                      data-branch-name="القرين"
                      data-search-text="adan العدان"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">العدان</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="3e34e387-0596-40a8-9e4f-695c66a8d031"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="العديلية"
                      data-branch-name="العارضية"
                      data-search-text="adiliya العديلية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">العديلية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="3b44d2a7-d3f0-409d-b04d-5c577e0e4afc"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="الأحمدي"
                      data-branch-name="القرين"
                      data-search-text="ahmadi الأحمدي"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الأحمدي</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="f0cb0ab1-d8cd-4c8b-bf6c-c7c2db7b088f"
                      data-branch-id=""
                      data-area-name="شاليهات الضباعية"
                      data-branch-name=""
                      data-search-text="al dubaiyah chalets شاليهات الضباعية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">شاليهات الضباعية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="97bdd2ba-504d-4c1f-8791-434b64ee114f"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="علي صباح السالم - أم الهيمان"
                      data-branch-name="القرين"
                      data-search-text="ali sabah al-salem - um  alhayman علي صباح السالم - أم الهيمان"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">علي صباح السالم - أم الهيمان</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="59b032e4-85ba-402a-ab47-d27cbe42e584"
                      data-branch-id=""
                      data-area-name="شاليهات الجليعة"
                      data-branch-name=""
                      data-search-text="al julayah chalets شاليهات الجليعة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">شاليهات الجليعة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="4a860e2c-5da4-4f9d-8876-1d03e6eda2fd"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="المسايل"
                      data-branch-name="القرين"
                      data-search-text="al-masayel المسايل"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">المسايل</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="fbedfbcc-06cf-44f6-aef9-96affd5d0aa5"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="المطلاع"
                      data-branch-name="العارضية"
                      data-search-text="al-mutlaa المطلاع"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">المطلاع</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="fa2d68d6-fcda-409f-bc2e-006cd5b39799"
                      data-branch-id=""
                      data-area-name="شاليهات النويصيب"
                      data-branch-name=""
                      data-search-text="al nuwaiseeb chalets شاليهات النويصيب"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">شاليهات النويصيب</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="e0b7dcaf-e264-4496-a7e9-3f2917fc00b0"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الأندلس"
                      data-branch-name="العارضية"
                      data-search-text="andalous الأندلس"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الأندلس</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="332b00de-8431-4730-b168-19369bfb4def"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="العارضية"
                      data-branch-name="العارضية"
                      data-search-text="ardiya العارضية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">العارضية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="3eda8fd7-7ee9-4b0b-9768-bfc2cbd2c123"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="العارضية الحرفية"
                      data-branch-name="العارضية"
                      data-search-text="ardiya herafiya العارضية الحرفية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">العارضية الحرفية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="ff901924-862b-4cad-b5a9-ce98f7d26061"
                      data-branch-id=""
                      data-area-name="شاليهات الزور"
                      data-branch-name=""
                      data-search-text="az zour chalets شاليهات الزور"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">شاليهات الزور</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="7db275e4-b50c-4007-8467-f6628a1fa71e"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="بيان"
                      data-branch-name="العارضية"
                      data-search-text="bayan بيان"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">بيان</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="03d9ac07-9175-4ce5-bea1-67fa5d5cd3d8"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="بنيد القار"
                      data-branch-name="العارضية"
                      data-search-text="bneid al-qar بنيد القار"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">بنيد القار</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="0013db44-eefe-4a21-a835-38a4e6dab577"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="الظهر"
                      data-branch-name="القرين"
                      data-search-text="daher الظهر"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الظهر</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="4ce3018b-82d7-4fec-a213-4fd1c235ee60"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الدعية"
                      data-branch-name="العارضية"
                      data-search-text="daiya الدعية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الدعية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="43ca2122-d966-4a86-85dd-fa54ae2a23f0"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الدسمة"
                      data-branch-name="العارضية"
                      data-search-text="dasma الدسمة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الدسمة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="6035c873-1155-49d5-a41c-a1189f9af450"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الضجيج"
                      data-branch-name="العارضية"
                      data-search-text="dhajeej الضجيج"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الضجيج</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="d7230cf1-4c36-4cf6-beb5-0902dfd1108c"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الدوحة"
                      data-branch-name="العارضية"
                      data-search-text="doha الدوحة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الدوحة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="b4d55e72-4da8-4a70-873f-164006104908"
                      data-branch-id=""
                      data-area-name="شاليهات الدوحه"
                      data-branch-name=""
                      data-search-text="doha chalets شاليهات الدوحه"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">شاليهات الدوحه</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="5d526800-9445-4536-96f2-a2df9f6c46a8"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="العقيلة"
                      data-branch-name="القرين"
                      data-search-text="eqaila العقيلة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">العقيلة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="cb99079a-19a8-452f-b0eb-d90da5a1d6b8"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name=" فهد الأحمد"
                      data-branch-name="القرين"
                      data-search-text="fahad al-ahmad  فهد الأحمد"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate"> فهد الأحمد</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="f348f07f-d386-404a-b0cd-d1e4d76235e4"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="الفحيحيل"
                      data-branch-name="القرين"
                      data-search-text="fahaheel الفحيحيل"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الفحيحيل</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="2d4bada3-a80b-4a18-a986-734ce430b04d"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الفيحاء"
                      data-branch-name="العارضية"
                      data-search-text="faiha الفيحاء"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الفيحاء</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="5cbc1afe-af78-4777-a79c-caebe34a7301"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الفروانية"
                      data-branch-name="العارضية"
                      data-search-text="farwaniya الفروانية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الفروانية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="bd82121a-2aa0-46ac-bd67-8b89be1563be"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الفردوس"
                      data-branch-name="العارضية"
                      data-search-text="ferdous الفردوس"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الفردوس</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="69446859-7164-4e94-8413-4a480c1d5c46"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="الفنطاس"
                      data-branch-name="القرين"
                      data-search-text="fintas الفنطاس"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الفنطاس</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="450d8a09-d767-4749-b64b-51002b6ee592"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="الفنيطيس"
                      data-branch-name="القرين"
                      data-search-text="fnaitees الفنيطيس"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الفنيطيس</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="87cd786d-5e56-40ed-92e9-dfef2226c847"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="غرناطة"
                      data-branch-name="العارضية"
                      data-search-text="ghornata غرناطة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">غرناطة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="fbaeac43-9707-4e35-a387-f0f0568c1b12"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="هدية"
                      data-branch-name="القرين"
                      data-search-text="hadiya هدية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">هدية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="763d5667-89b7-417b-8730-81bd54c5f34c"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الحساوي"
                      data-branch-name="العارضية"
                      data-search-text="hasawi الحساوي"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الحساوي</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="be4f3e29-291a-4399-80da-afdeeb468c1f"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="حطين"
                      data-branch-name="العارضية"
                      data-search-text="hateen حطين"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">حطين</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="cacdac04-f60e-4d6b-ad69-3f28ae8ce3d2"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="حولي"
                      data-branch-name="العارضية"
                      data-search-text="hawali حولي"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">حولي</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="74d8ace1-c1ee-4b1e-9556-507e27d9028f"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="اشبيلية"
                      data-branch-name="العارضية"
                      data-search-text="ishbiliya اشبيلية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">اشبيلية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="42a2e495-a650-4fa4-ba4a-09bfd8429f5a"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="جابر الأحمد"
                      data-branch-name="العارضية"
                      data-search-text="jaber al-ahmad جابر الأحمد"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">جابر الأحمد</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="89846593-025a-4ae4-9ec9-3413e4d7dcfa"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="جابر العلي"
                      data-branch-name="القرين"
                      data-search-text="jaber al-ali جابر العلي"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">جابر العلي</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="7c15cbdd-59c8-4d95-a33b-28fbce09cf9d"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الجابرية"
                      data-branch-name="العارضية"
                      data-search-text="jabriya الجابرية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الجابرية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="d0d39382-708f-4a11-b304-484ac37fd96c"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الجهراء"
                      data-branch-name="العارضية"
                      data-search-text="jahra الجهراء"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الجهراء</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="9ad036d5-9853-428e-b42d-6bfc41976b70"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الجهراء الصناعية"
                      data-branch-name="العارضية"
                      data-search-text="jahra industrial الجهراء الصناعية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الجهراء الصناعية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="5e325705-b938-4ec8-8342-ba5bf8c763c1"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="جواخير الجهراء"
                      data-branch-name="العارضية"
                      data-search-text="jahra livestock farming jawakheer جواخير الجهراء"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">جواخير الجهراء</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="c2426484-1b84-45ff-9d1f-068fc5052b69"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="جليب الشيوخ"
                      data-branch-name="العارضية"
                      data-search-text="jleeb shuyoukh جليب الشيوخ"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">جليب الشيوخ</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="573c2fb5-9596-4790-b8e2-28bc9fd9420a"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="كبد"
                      data-branch-name="العارضية"
                      data-search-text="kabd كبد"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">كبد</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="68298482-249b-4c02-af0d-c5d09fbcac38"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="كيفان"
                      data-branch-name="العارضية"
                      data-search-text="kaifan كيفان"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">كيفان</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="6f2e8844-e116-4b1b-84d1-2092c791c4b2"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="خيطان"
                      data-branch-name="العارضية"
                      data-search-text="khaitan خيطان"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">خيطان</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="3eb8715e-267b-4811-b75e-0c95adf6aa09"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الخالدية"
                      data-branch-name="العارضية"
                      data-search-text="khaldiya الخالدية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الخالدية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="4d81f29d-f443-406b-9e45-004d845312e4"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="شاليهات الخيران"
                      data-branch-name="القرين"
                      data-search-text="khiran chalets شاليهات الخيران"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">شاليهات الخيران</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="9bfffd80-fe41-4048-9296-bbce7c693b54"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="مدينة الخيران"
                      data-branch-name="القرين"
                      data-search-text="khiran city مدينة الخيران"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">مدينة الخيران</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="8f77958d-e528-40de-ba56-3f36ccc23823"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="المهبولة"
                      data-branch-name="القرين"
                      data-search-text="mahboula المهبولة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">المهبولة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="45ffa8f1-bee7-4689-be85-3f9b284b2a21"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="ميدان حولي"
                      data-branch-name="العارضية"
                      data-search-text="maidan hawali ميدان حولي"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">ميدان حولي</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="0daac314-cbdd-4d18-bfcb-4c0b4467bf9a"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="المنقف"
                      data-branch-name="القرين"
                      data-search-text="mangaf المنقف"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">المنقف</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="5f3e5d69-30b1-47ba-a52e-19a83c479a05"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="المنصورية"
                      data-branch-name="العارضية"
                      data-search-text="mansouriya المنصورية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">المنصورية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="975ba01e-d815-4f0c-a2e3-35578fe9373a"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="المسيلة"
                      data-branch-name="القرين"
                      data-search-text="messila المسيلة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">المسيلة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="ba6953c5-619c-4cb1-a899-2a5b378afced"
                      data-branch-id=""
                      data-area-name="شاليهات ميناء عبد الله"
                      data-branch-name=""
                      data-search-text="mina abdullah chalets شاليهات ميناء عبد الله"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">شاليهات ميناء عبد الله</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="be17e62d-6040-4ffd-854a-d34f3cfbaaf0"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="مشرف"
                      data-branch-name="العارضية"
                      data-search-text="mishrif مشرف"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">مشرف</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="add30121-ac0f-4b81-8782-0a73dd5f056c"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="مبارك العبدالله - غرب مشرف"
                      data-branch-name="العارضية"
                      data-search-text="mubarak al-abdullah - west mishrif مبارك العبدالله - غرب مشرف"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">مبارك العبدالله - غرب مشرف</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="c762a2b4-c8f7-4946-8292-e5ed21d85c2e"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="مبارك الكبير"
                      data-branch-name="القرين"
                      data-search-text="mubarak al-kabeer مبارك الكبير"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">مبارك الكبير</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="78eb89e3-41f6-4390-ae1a-613031e10fa2"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="النعيم"
                      data-branch-name="العارضية"
                      data-search-text="naeem النعيم"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">النعيم</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="ec8ba036-39bb-4bfa-bda8-bf87fd486469"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="النهضة"
                      data-branch-name="العارضية"
                      data-search-text="nahda النهضة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">النهضة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="8f6aa938-487f-4dce-8aac-4ea7f92fdeb7"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="النسيم"
                      data-branch-name="العارضية"
                      data-search-text="naseem النسيم"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">النسيم</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="5d3d5708-4d37-4871-8afa-2b75040bc636"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="شمال غرب الصليبيخات"
                      data-branch-name="العارضية"
                      data-search-text="north west sulaibikhat شمال غرب الصليبيخات"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">شمال غرب الصليبيخات</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="b5cf1ec7-01ec-4b5d-99f3-f7b8cd929874"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="النزهة"
                      data-branch-name="العارضية"
                      data-search-text="nuzha النزهة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">النزهة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="74689199-1931-444c-a160-80701e2b706e"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="العمرية"
                      data-branch-name="العارضية"
                      data-search-text="omariya العمرية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">العمرية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="182f4e6e-7bed-43fb-a36a-4925b632482b"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="العيون"
                      data-branch-name="العارضية"
                      data-search-text="oyoon العيون"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">العيون</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="c47a9634-126e-4de8-9a0f-5081fed20005"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="القادسية"
                      data-branch-name="العارضية"
                      data-search-text="qadisiya القادسية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">القادسية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="e827b77f-69da-4751-9d93-6bbacf119429"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="القيروان"
                      data-branch-name="العارضية"
                      data-search-text="qairawan القيروان"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">القيروان</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="3151c267-c2d2-4337-9d30-f5b70b5c9673"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="القصر"
                      data-branch-name="العارضية"
                      data-search-text="qasr القصر"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">القصر</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="d6956d06-f08f-4690-bee6-95ffbdca2e0e"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="قرطبة"
                      data-branch-name="العارضية"
                      data-search-text="qortuba قرطبة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">قرطبة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="ccbba3c4-aa8c-4fd8-9d26-f751c0ceb640"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="القرين"
                      data-branch-name="القرين"
                      data-search-text="qurain القرين"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">القرين</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="d4b3b10d-b38c-461d-abf2-9d6067a56b5c"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="القصور"
                      data-branch-name="القرين"
                      data-search-text="qusur القصور"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">القصور</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="164e54ab-9855-4b8d-a8ef-43e1d77550a1"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الرابية"
                      data-branch-name="العارضية"
                      data-search-text="rabiya الرابية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الرابية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="9d0ed540-a8bc-493a-8457-82dbf179ef9a"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الري"
                      data-branch-name="العارضية"
                      data-search-text="rai الري"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الري</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="fb0813ae-364b-442c-8633-67131cbc4fea"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الروضة"
                      data-branch-name="العارضية"
                      data-search-text="rawda الروضة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الروضة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="cd62019f-ca90-42bd-8071-f0110dc24480"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الرحاب"
                      data-branch-name="العارضية"
                      data-search-text="rehab الرحاب"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الرحاب</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="1e4bb177-8104-4693-a3f8-31e67aa40436"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الرقعي"
                      data-branch-name="العارضية"
                      data-search-text="riqai الرقعي"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الرقعي</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="6aa2f7ad-8333-419d-a498-23649004ca89"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="الرقة"
                      data-branch-name="القرين"
                      data-search-text="riqqa الرقة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الرقة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="c6170035-5b97-4302-b09b-aa5f92617915"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الرميثية"
                      data-branch-name="العارضية"
                      data-search-text="rumathiya الرميثية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الرميثية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="c4c6246a-edca-4c63-868d-4c946a9d39d3"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="سعد العبدالله"
                      data-branch-name="العارضية"
                      data-search-text="saad al-abdullah سعد العبدالله"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">سعد العبدالله</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="ea6bb2ef-d4ba-40ef-84ae-0fe2d01e82b0"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="مدينة صباح الأحمد البحرية - لؤلؤة الخيران سابقا"
                      data-branch-name="القرين"
                      data-search-text="sabah al-ahmad marine city مدينة صباح الأحمد البحرية - لؤلؤة الخيران سابقا"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">مدينة صباح الأحمد البحرية - لؤلؤة الخيران سابقا</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="a7e4e814-5ea2-4d6c-95a4-1d56b96c0166"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="مدينة صباح الأحمد السكنية"
                      data-branch-name="القرين"
                      data-search-text="sabah al-ahmad residential مدينة صباح الأحمد السكنية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">مدينة صباح الأحمد السكنية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="489ff764-7ab7-46a8-8795-27697918de30"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="صباح الناصر"
                      data-branch-name="العارضية"
                      data-search-text="sabah al-naser صباح الناصر"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">صباح الناصر</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="e1a3563e-9632-42d9-97c0-94b8c9815096"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="صباح السالم"
                      data-branch-name="القرين"
                      data-search-text="sabah al-salem صباح السالم"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">صباح السالم</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="eaa9ef8a-4249-40ad-9a58-7d9b9c4ae1d8"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الصبحان"
                      data-branch-name="العارضية"
                      data-search-text="sabhan الصبحان"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الصبحان</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="0067a0c8-8341-489d-8ed3-39c699147d85"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="السلام"
                      data-branch-name="العارضية"
                      data-search-text="salam السلام"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">السلام</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="b8f8242c-6c90-49e9-87c7-305703883ea3"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="السالمية"
                      data-branch-name="العارضية"
                      data-search-text="salmiya السالمية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">السالمية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="ab75fe0e-65af-4d0c-b47a-405a41d3487f"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="سلوى"
                      data-branch-name="العارضية"
                      data-search-text="salwa سلوى"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">سلوى</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="f5850d4e-059f-4bca-b8e0-5fb9318c3c32"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الصديق"
                      data-branch-name="العارضية"
                      data-search-text="sedeeq الصديق"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الصديق</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="99d4153e-ee69-43d9-81b0-81dd4ffe5c2a"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الشعب"
                      data-branch-name="العارضية"
                      data-search-text="shaab الشعب"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الشعب</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="da1f7068-e463-4974-9d51-c3a741304f14"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الشامية"
                      data-branch-name="العارضية"
                      data-search-text="shamiya الشامية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الشامية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="1c9f0d2e-2f57-453e-abda-1ce38e1ad877"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الشدادية"
                      data-branch-name="العارضية"
                      data-search-text="shedadiya الشدادية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الشدادية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="e81beea2-cbfc-4507-965b-078188beda1c"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الشهداء"
                      data-branch-name="العارضية"
                      data-search-text="shuhada الشهداء"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الشهداء</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="3c56db3d-d33b-419b-9a47-1028011b5751"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الشويخ"
                      data-branch-name="العارضية"
                      data-search-text="shuwaikh الشويخ"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الشويخ</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="571d4988-f7be-4d62-80fb-5d6cc035d1f9"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="جنوب عبدالله المبارك"
                      data-branch-name="العارضية"
                      data-search-text="south abdullah al-mubarak جنوب عبدالله المبارك"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">جنوب عبدالله المبارك</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="13a16938-1b05-45fd-9ce4-43a7e162d17f"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="الصباحية"
                      data-branch-name="القرين"
                      data-search-text="subahiya الصباحية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الصباحية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="8b900564-4190-4427-804a-2b6181bb1e5b"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الصليبيخات"
                      data-branch-name="العارضية"
                      data-search-text="sulaibikhat الصليبيخات"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الصليبيخات</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="567129ff-b07f-47ea-98e2-d2f7f4eedd33"
                      data-branch-id=""
                      data-area-name="الصليبية السكنية"
                      data-branch-name=""
                      data-search-text="sulaibiya residential الصليبية السكنية"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الصليبية السكنية</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="3c27b9b5-e7f3-4b70-b2e4-07fae4f40457"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="السرة"
                      data-branch-name="العارضية"
                      data-search-text="surra السرة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">السرة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="b9409e12-5efe-4781-8000-92bdf411e3f4"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="تيماء"
                      data-branch-name="العارضية"
                      data-search-text="taima تيماء"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">تيماء</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="bdbf4afb-d816-4d5f-a7ff-008008709796"
                      data-branch-id="ee5feb8a-7e77-4a81-9e32-b00e71724237"
                      data-area-name="الوفرة"
                      data-branch-name="القرين"
                      data-search-text="wafra الوفرة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الوفرة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="97377177-3365-4b8b-bce5-d1f3cc49db86"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الواحة"
                      data-branch-name="العارضية"
                      data-search-text="waha الواحة"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الواحة</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="47bea463-ed71-448c-bbb0-3bfa8c067485"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="غرب عبدالله المبارك"
                      data-branch-name="العارضية"
                      data-search-text="west abdullah al-mubarak غرب عبدالله المبارك"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">غرب عبدالله المبارك</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="0ae6793f-c7c6-44ea-b3bc-8b854e185b5c"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="اليرموك"
                      data-branch-name="العارضية"
                      data-search-text="yarmouk اليرموك"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">اليرموك</span>
              </button>
              <button type="button"
                      class="w-full flex items-center gap-2.5 text-start rounded-lg px-3 py-2.5 min-h-[48px] border-[1.5px] transition-colors bg-white border-stone-200"
                      data-area-sheet-target="areaRow"
                      data-area-id="0c874ee4-cee5-4908-9c93-a0276aa9cf7c"
                      data-branch-id="ec4565d1-b38c-4238-9e60-1f7b9e4ec034"
                      data-area-name="الزهراء"
                      data-branch-name="العارضية"
                      data-search-text="zahra الزهراء"
                      data-action="click->area-sheet#pickArea">
                <span class="flex-1 min-w-0 text-[13.5px] font-semibold text-stone-800 truncate">الزهراء</span>
              </button>
            <div class="hidden text-center py-8 text-sm text-stone-500" data-area-sheet-target="emptyState">
              لا توجد نتائج — جرّب كلمة أخرى.
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <div class="hidden fixed inset-0 z-[110] flex items-center justify-center p-6 bg-stone-900/40"
       data-area-sheet-target="confirm">
    <div class="bg-white rounded-xl p-5 w-full max-w-[330px] shadow-2xl" role="alertdialog" aria-modal="true">
      <h3 class="text-base font-semibold text-stone-800 mb-2">تغيير المنطقة؟</h3>
      <p class="text-[13.5px] text-stone-600 leading-relaxed mb-4" data-area-sheet-target="confirmBody"></p>
      <div class="flex flex-col gap-2">
        <button type="button"
                class="cta-shadow w-full rounded-lg bg-brand-primary-600 hover:bg-brand-primary-700 text-white text-sm font-semibold px-4 py-3 min-h-[44px] transition-colors"
                data-action="click->area-sheet#confirmChange">
          غيّر وفرّغ السلة
        </button>
        <button type="button"
                class="w-full rounded-lg border-[1.5px] border-stone-200 text-stone-700 text-sm font-semibold px-4 py-3 min-h-[44px] hover:border-stone-300 transition-colors"
                data-action="click->area-sheet#cancelChange">
          احتفظ بسلتي
        </button>
      </div>
    </div>
  </div>

  <form data-turbo="false" data-area-sheet-target="areaForm" action="/ar/areas/select" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="Wq5rcfBUAbgy-kERIjHx7qksIvRoyVN046JVy_v8HeflXhO6o4KNb-UVhIottVlRwC65OS4xnmoCltRs28puBQ" autocomplete="off" />
    <input type="hidden" name="area_id" data-area-sheet-target="areaIdInput">
    <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" />
    <input type="hidden" name="return_to" data-area-sheet-target="returnTo">
</form></div>
</template></turbo-stream>