Mobile hero search: compact magnify button + dropdown under the input

- Submit button is now a 44x44 magnify icon inside the search pill on mobile instead of a full-width stacked button (desktop keeps the جستجو text).
- Anchor the typeahead dropdown to the search pill so results appear directly under the input rather than below the popular-search chips; full pill width.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/JobsMedical.Web/Pages/Index.cshtml

@@ -19,7 +19,10 @@
                 <span class="hs-ico">🔎</span>
                 <input type="search" name="Q" autocomplete="off"
                        placeholder="جستجو: پرستار، mmt، دندان‌پزشک…" />
-                <button type="submit" class="btn btn-accent btn-lg">جستجو</button>
+                <button type="submit" class="btn btn-accent btn-lg hs-submit" aria-label="جستجو">
+                    <span class="hs-submit-txt">جستجو</span>
+                    <span class="hs-submit-ico" aria-hidden="true">🔎</span>
+                </button>
             </div>
             <div class="hero-chips">
                 <span class="hc-label">جستجوهای پرطرفدار:</span>

src/JobsMedical.Web/Pages/Shared/_Layout.cshtml

@@ -242,7 +242,9 @@
             var box = document.createElement('div');
             box.className = 'nav-search-results';
             box.style.display = 'none';
-            form.appendChild(box);
+            // Anchor the dropdown to the input's box (the hero pill) so it sits
+            // directly under the input rather than below the popular-search chips.
+            (input.closest('.hero-search-pill') || form).appendChild(box);
             var timer;
             function hide() { box.style.display = 'none'; box.innerHTML = ''; }
             input.addEventListener('input', function () {