add "debt" section for mobile

ServiceHost/Areas/Client/Pages/Shared/_headerAndFooter.cshtml

@@ -14,7 +14,23 @@
 	var debtAmount = await _financialStatmentApplication.GetClientDebtAmount(currentAccount.Id);
 	
 }
+<style>
+	@@keyframes pulse {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0.5; }
+	}
 
+	@@keyframes bounce {
+				 
+		0%   { transform: translateY(0); }
+		25%  { transform: translateY(3px); }      /* سقوط نسبتا سریع */
+		40%  { transform: translateY(-1px); }     /* شروع آهسته بالا رفتن */
+		60%  { transform: translateY(-4px); }     /* اوج پرش */
+		75%  { transform: translateY(-3px); }     /* مکث کوتاه‌تر */
+		90%  { transform: translateY(-1px); }     /* برگشت تدریجی */
+		100% { transform: translateY(0); }
+	}
+</style>
 <div class="dropdown d-flex d-lg-none" style="padding: 0 !important;position: sticky;width: 100%;top: 0;z-index: 99;">
 	<div class="workshop-box" style="width: 100%;">
 		<button class="profile-box d-flex align-items-center justify-content-between" type="button"
@@ -29,8 +45,8 @@
 						fill="#2FC1C1"/>
 				</svg>
 				<span id="Workshop-Selected-Name" class="text-start fw-bold text-nowrap workshopName">
-                    @workshopSelected
-                </span>
+					@workshopSelected
+				</span>
 			</div>
 
 			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" viewBox="0 0 12 10" fill="none">
@@ -75,7 +91,39 @@
 		</ul>
 	</div>
 </div>
-
+@if (debtAmount > 0)
+{
+	<div
+		dir="rtl"
+		onclick="window.location.href='https://client@(AppSetting.Value.Domain)/financial'"
+		class="  d-flex d-lg-none mx-auto"
+		style="
+	       cursor: pointer;
+	       display: flex;
+	       align-items: center;
+	       height: 44px;
+	       gap: 0.5rem;
+	       padding: 0.5rem 1rem;
+	       border-radius: 9999px;
+	       color: white;
+	       background-color: #E4070A;
+	       animation: pulse 2s infinite;
+	       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	       width: 90%;
+	       justify-content: center;
+	       transition: filter 0.2s ease-in-out;
+       "
+		onmouseover="this.style.filter='brightness(1.1)'"
+		onmouseout="this.style.filter='brightness(1)'"
+	>
+		<span style="animation: bounce 1s infinite;">
+			<img src="https://api.iconify.design/hugeicons/alert-circle.svg?color=white" width="28" height="28" alt="icon" />
+		</span>
+		<span style="font-size: 0.75rem; white-space: nowrap;">
+			مبلغ قابل پرداخت: @debtAmount.ToMoney() ریال
+		</span>
+	</div>
+}
 <!-- Header -->
 <div class="header-container main-wrapper d-lg-block d-none px-2">
 	<!-- <header> -->
@@ -94,46 +142,6 @@
 		</div>
 		@if (debtAmount > 0)
 		{
-			<style>
-			@@keyframes pulse {
-				0%, 100% {
-					opacity: 1;
-				}
-				50% {
-					opacity: 0.5;
-				}
-			}
-
-			@@keyframes bounce {
-
-				0% {
-					transform: translateY(0);
-				}
-				25% {
-					transform: translateY(3px);
-				}
-				/* سقوط نسبتا سریع */
-				40% {
-					transform: translateY(-1px);
-				}
-				/* شروع آهسته بالا رفتن */
-				60% {
-					transform: translateY(-4px);
-				}
-				/* اوج پرش */
-				75% {
-					transform: translateY(-3px);
-				}
-				/* مکث کوتاه‌تر */
-				90% {
-					transform: translateY(-1px);
-				}
-				/* برگشت تدریجی */
-				100% {
-					transform: translateY(0);
-				}
-			}
-		</style>
 			<div
 				dir="rtl"
 				onclick="window.location.href='https://client@(AppSetting.Value.Domain)/financial'"