add congrats when loyalty prize is available

src/components/LoyaltyCard/LoyaltyCard.module.css

@@ -7,14 +7,12 @@
 }
 
 .loyaltyContainer {
-  height: 115px;
-  background-color: #FFF;
+  background-color: var(--secondary-background);
   border: none;
-   margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 .loyaltyContainer :global(.ant-card-body) {
-  height: 115px;
   padding: 12px 16px !important;
   border: none;
   border-radius: 0px;
@@ -22,7 +20,7 @@
 
 .loyaltyCard {
   border-radius: 0px !important;
-  border: none
+  border: none;
 }
 
 .presentIcon {
@@ -60,3 +58,69 @@
 :global(.rtl) .presentIconItem {
   margin-right: 0px;
 }
+
+.congratulationsContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, var(--primary), #fa0505);
+  border-radius: 8px;
+  animation: celebrate 0.6s ease-in-out;
+}
+
+.congratulationsIcon {
+  color: var(--secondary-background);
+  font-size: 18px;
+  animation: bounce 1s infinite;
+}
+
+.congratulationsText {
+  color: var(--secondary-background);
+  font-weight: 600;
+  font-size: 14px;
+  margin: 0;
+}
+
+.congratulationsSubtext {
+  color: var(--secondary-background);
+  font-weight: 400;
+  font-size: 12px;
+  margin: 0;
+  opacity: 0.9;
+}
+
+@keyframes celebrate {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-3px);
+  }
+  60% {
+    transform: translateY(-2px);
+  }
+}
+
+:global(.darkApp) .congratulationsContainer {
+  background: linear-gradient(135deg, var(--primary), #fa0505);
+}