feat(subscription): highlight popular plans

src/app/subscription/components/subscription-vip-offer-section.module.css

@@ -111,21 +111,37 @@
   transform: translateY(-3px);
 }
 
-.offerBadge {
+.badgeStack {
   position: absolute;
   top: clamp(6px, 1.481vw, 8px);
   left: 50%;
+  display: flex;
   max-width: calc(100% - 12px);
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  transform: translateX(-50%);
+}
+
+.popularBadge,
+.offerBadge {
   padding: var(--subscription-offer-badge-padding, 4px 8px);
   border-radius: 999px;
-  background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
   color: #ffffff;
-  font-size: clamp(12px, 2.963vw, 16px);
+  font-size: clamp(10px, 2.407vw, 13px);
   font-weight: 900;
   line-height: 1;
   white-space: nowrap;
+}
+
+.popularBadge {
+  background: linear-gradient(135deg, #6b3a12 0%, #d99a27 55%, #f4c75a 100%);
+  box-shadow: 0 7px 16px rgba(164, 101, 21, 0.28);
+}
+
+.offerBadge {
+  background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
   box-shadow: 0 7px 16px rgba(255, 95, 174, 0.28);
-  transform: translateX(-50%);
 }
 
 .planTitle {
@@ -136,6 +152,14 @@
   white-space: nowrap;
 }
 
+.planCardWithBadges .planTitle {
+  margin-top: 30px;
+}
+
+.planCardWithTwoBadges .planTitle {
+  margin-top: 50px;
+}
+
 .priceLine {
   display: inline-flex;
   align-items: flex-end;