From fbbc8faf3df4542827a5ffac0be1028027e706bf Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Tue, 11 Aug 2026 18:02:34 +0800
Subject: [PATCH] fix(vip): render membership icons without wrappers

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 assets/css/frontend/credits.css               | 18 +++++-----
 assets/css/frontend/vip-modal.css             | 14 ++++----
 assets/css/routes/user-center/credits.css     | 34 ++++++++++++-------
 assets/css/routes/user-center/vip.css         | 14 ++++----
 inc/helpers/aksrt-vip.php                     |  2 +-
 inc/helpers/user-center-renderers/vip-tab.php |  3 --
 6 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/assets/css/frontend/credits.css b/assets/css/frontend/credits.css
index d9b39852..1ea352a7 100644
--- a/assets/css/frontend/credits.css
+++ b/assets/css/frontend/credits.css
@@ -352,12 +352,12 @@
 .aksrt-vip-badge {
 	display: inline-flex;
 	align-items: center;
-	gap: 4px;
-	padding: 2px 8px;
-	border-radius: 4px;
-	font: 600 11px/1 var(--font-ui);
-	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-	color: #fff;
+	justify-content: center;
+	padding: 0;
+	border-radius: 0;
+	font: inherit;
+	background: transparent;
+	color: inherit;
 	vertical-align: middle;
 }
 
@@ -371,10 +371,10 @@
 
 .aksrt-vip-badge__icon {
 	display: inline-block;
-	width: 1.1em;
-	height: 1.1em;
+	width: 1.35em;
+	height: 1.35em;
 	object-fit: contain;
-	vertical-align: -.15em;
+	vertical-align: middle;
 }
 
 .aksrt-vip-badge i {
diff --git a/assets/css/frontend/vip-modal.css b/assets/css/frontend/vip-modal.css
index b0d486a6..42555f01 100644
--- a/assets/css/frontend/vip-modal.css
+++ b/assets/css/frontend/vip-modal.css
@@ -160,9 +160,9 @@
 }
 
 .pay-vip-info {
-  padding: 12px;
-  border-radius: 10px;
-  background: var(--surface-2, rgba(0, 0, 0, 0.04));
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
 }
 
 .pay-vip-info.level-1 {
@@ -219,10 +219,10 @@
 .vip-product {
   position: relative;
   padding: 12px 8px;
-  border-radius: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  background: var(--main-bg-color, #fff);
-  transition: border-color 0.15s, box-shadow 0.15s;
+  border-radius: 0;
+  border: 0;
+  background: transparent;
+  transition: none;
 }
 
 .aksrt-vip-product-label input:checked + .vip-product {
diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css
index c48c9a41..9d39aa28 100644
--- a/assets/css/routes/user-center/credits.css
+++ b/assets/css/routes/user-center/credits.css
@@ -1211,7 +1211,11 @@ body.uc-modal-open {
 /* Defensive: modal stylesheet also styles .pay-vip-info; keep UC cards independent */
 .uc-vip-tab .uc-vip-level-card.pay-vip-info {
   display: block;
-  background: var(--main-bg-color, var(--surface-1, #fff));
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
 }
 .uc-vip-level-card.level-1 {
   background: linear-gradient(180deg, rgba(246, 196, 83, 0.16), rgba(255, 255, 255, 0.02)) !important;
@@ -1220,18 +1224,22 @@ body.uc-modal-open {
   background: linear-gradient(180deg, rgba(142, 68, 173, 0.12), rgba(255, 255, 255, 0.02)) !important;
 }
 .uc-vip-level-card .vip-baicon {
-  position: absolute !important;
-  left: auto !important;
-  right: 8px !important;
-  top: 6px !important;
-  bottom: auto !important;
-  width: auto !important;
-  transform: none !important;
-  opacity: 0.08;
-  font-size: 64px;
-  line-height: 1;
-  pointer-events: none;
-  z-index: 0;
+  display: none;
+}
+.uc-vip-level-card .v-iconbox {
+  justify-content: flex-start;
+  gap: 0;
+}
+.uc-vip-level-card .v-icon {
+  display: inline-flex;
+  width: auto;
+  height: auto;
+  border-radius: 0;
+  background: transparent !important;
+  color: inherit;
+}
+.uc-vip-level-card .v-info {
+  display: none;
 }
 .uc-vip-level-card__inner {
   position: relative;
diff --git a/assets/css/routes/user-center/vip.css b/assets/css/routes/user-center/vip.css
index e9af7886..27dc4651 100644
--- a/assets/css/routes/user-center/vip.css
+++ b/assets/css/routes/user-center/vip.css
@@ -24,9 +24,9 @@
   padding-inline-end: 84px;
   overflow: hidden;
   box-sizing: border-box;
-  border-radius: var(--radius, 8px);
-  background: #fff;
-  box-shadow: var(--shadow-sm);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
   color: var(--color-ink-2);
 }
 
@@ -112,11 +112,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: auto;
+  height: auto;
   flex: 0 0 auto;
-  border-radius: 50%;
-  background: var(--vip-card-soft);
+  border-radius: 0;
+  background: transparent;
   color: var(--vip-card-accent);
   font-size: 15px;
 }
diff --git a/inc/helpers/aksrt-vip.php b/inc/helpers/aksrt-vip.php
index a00790f3..5a875c56 100644
--- a/inc/helpers/aksrt-vip.php
+++ b/inc/helpers/aksrt-vip.php
@@ -367,7 +367,7 @@ function aksrt_render_vip_badge(int $user_id = 0, string $size = 'sm'): string {
         ? '<img class="aksrt-vip-badge__icon" src="' . $icon_url . '" alt="" loading="lazy" decoding="async" />'
         : '<i class="fas fa-crown" aria-hidden="true"></i>';
 
-    return '<span class="aksrt-vip-badge aksrt-vip-badge--gold ' . esc_attr($size_class . ' ' . $level_class) . '">' . $icon . ' ' . esc_html($badge_text) . '</span>';
+    return '<span class="aksrt-vip-badge aksrt-vip-badge--gold ' . esc_attr($size_class . ' ' . $level_class) . '" title="' . esc_attr($badge_text) . '">' . $icon . '</span>';
 }
 
 /**
diff --git a/inc/helpers/user-center-renderers/vip-tab.php b/inc/helpers/user-center-renderers/vip-tab.php
index fdb7d46a..7ec99abc 100644
--- a/inc/helpers/user-center-renderers/vip-tab.php
+++ b/inc/helpers/user-center-renderers/vip-tab.php
@@ -101,7 +101,6 @@ $status_html = '<div class="uc-vip-status" role="status">'
 	. '</div>'
 	. '<div class="uc-vip-status__main uc-vip-status__main--level-' . (int) $vip_level_number . '">'
 	. '<span class="uc-vip-status__icon" aria-hidden="true">' . $status_icon . '</span>'
-	. '<span class="uc-vip-status__level">' . esc_html($vip_level_name) . '</span>'
 	. '</div>'
 	. '<div class="uc-vip-status__desc">' . esc_html($vip_description) . '</div>'
 	. '<div class="uc-vip-status__expiry"><i class="fas fa-clock" aria-hidden="true"></i><span>' . esc_html($vip_expiry_text) . '</span></div>'
@@ -148,8 +147,6 @@ foreach ([1, 2] as $lv) {
 	}
 
 	$cards .= '<div class="zib-widget text-center pay-vip-info flex1 level-' . $lv . ' uc-vip-level-card">';
-	// Decorative gem: do NOT use .abs-center (that utility is full-width header/search placement).
-	$cards .= '<div class="vip-baicon" aria-hidden="true"><i class="fas fa-gem"></i></div>';
 	$cards .= '<div class="relative uc-vip-level-card__inner">';
 	$cards .= '<div class="v-iconbox mb10 flex jc ac">';
 	$cards .= '<div class="v-icon flex jc ac">' . $lv_icon . '</div>';