currency for market

src/app/components/header/header.component.html

@@ -36,6 +36,7 @@
         <app-language-selector />
         
         <a [routerLink]="'/cart' | langRoute" routerLinkActive="novo-cart-active" class="novo-cart" (click)="closeMenu()" [attr.aria-label]="'header.cart' | translate">
+          <span class="novo-cart-icon">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
               <circle cx="9" cy="21" r="1"></circle>
               <circle cx="20" cy="21" r="1"></circle>
@@ -44,6 +45,10 @@
             @if (cartItemCount() > 0) {
               <span class="novo-cart-badge">{{ cartItemCount() }}</span>
             }
+          </span>
+          @if (cartItemCount() > 0) {
+            <span class="novo-cart-total">{{ formatCartTotal(cartTotal()) }}</span>
+          }
         </a>
         
         <button class="menu-toggle novo-menu-toggle" (click)="toggleMenu()" [class.active]="menuOpen" [class.novo-active]="menuOpen" [attr.aria-label]="menuOpen ? 'Close menu' : 'Open menu'" [attr.aria-expanded]="menuOpen">
@@ -102,6 +107,7 @@
       <div class="dexar-actions">
         <!-- Cart Button -->
         <a [routerLink]="'/cart' | langRoute" routerLinkActive="dexar-cart-active" class="dexar-cart-btn" (click)="closeMenu()">
+          <span class="dexar-cart-icon">
             <svg width="32" height="24" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="transparent" />
               <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" stroke="#677B78" />
@@ -110,6 +116,10 @@
             @if (cartItemCount() > 0) {
               <span class="dexar-cart-badge">{{ cartItemCount() }}</span>
             }
+          </span>
+          @if (cartItemCount() > 0) {
+            <span class="dexar-cart-total">{{ formatCartTotal(cartTotal()) }}</span>
+          }
         </a>
 
         <!-- Region Selector (desktop only) -->

src/app/components/header/header.component.scss

@@ -333,24 +333,36 @@
 }
 
 .novo-cart {
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
   color: var(--text-primary);
   text-decoration: none;
   padding: 0.5rem;
   border-radius: var(--radius-md);
   transition: all 0.3s;
   
-  svg {
-    display: block;
-  }
-  
   &:hover,
   &.novo-cart-active {
     color: var(--primary-color);
     background: var(--bg-secondary);
   }
+}
 
-  .novo-cart-badge {
+.novo-cart-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+
+  svg {
+    display: block;
+  }
+}
+
+.novo-cart-badge {
   position: absolute;
   top: -4px;
   right: -4px;
@@ -366,7 +378,13 @@
   justify-content: center;
   padding: 0 5px;
   box-shadow: var(--shadow-sm);
-  }
+}
+
+.novo-cart-total {
+  font-size: 0.68rem;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
 }
 
 .novo-menu-toggle {
@@ -492,7 +510,7 @@
   display: flex;
   align-items: center;
   gap: 32px;
-  height: 48px;
+  min-height: 48px;
 }
 
 .dexar-logo {
@@ -615,15 +633,15 @@
 }
 
 .dexar-cart-btn {
-  position: relative;
-  width: 36px;
-  height: 28px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  min-width: 36px;
   text-decoration: none;
   cursor: pointer;
   transition: opacity 0.3s ease;
+  gap: 2px;
   
   svg {
     width: 36px;
@@ -639,6 +657,15 @@
   }
 }
 
+.dexar-cart-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 28px;
+}
+
 .dexar-cart-badge {
   position: absolute;
   top: -8px;
@@ -658,6 +685,15 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
+.dexar-cart-total {
+  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 1;
+  color: #1e3c38;
+  white-space: nowrap;
+}
+
 .dexar-lang-selector {
   display: flex;
   align-items: center;

src/app/components/header/header.component.ts

@@ -17,6 +17,7 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
 })
 export class HeaderComponent {
   cartItemCount;
+  cartTotal;
   menuOpen = false;
   brandName = environment.brandFullName;
   logo = environment.logo;
@@ -28,6 +29,7 @@ export class HeaderComponent {
 
   constructor(private cartService: CartService, private router: Router) {
     this.cartItemCount = this.cartService.itemCount;
+    this.cartTotal = this.cartService.totalPrice;
   }
 
   get homeUrl(): string {
@@ -79,4 +81,20 @@ export class HeaderComponent {
       }, 100);
     });
   }
+
+  formatCartTotal(total: number): string {
+    const locale = this.langService.currentLanguage() === 'en'
+      ? 'en-US'
+      : this.langService.currentLanguage() === 'hy'
+        ? 'hy-AM'
+        : 'ru-RU';
+    const fractionDigits = Number.isInteger(total) ? 0 : 2;
+    const amount = new Intl.NumberFormat(locale, {
+      minimumFractionDigits: fractionDigits,
+      maximumFractionDigits: 2,
+    }).format(total);
+    const currencySymbol = this.langService.getCurrentCurrency()?.symbol ?? this.langService.currentCurrency();
+
+    return `${amount} ${currencySymbol}`;
+  }
 }