/* 
  =========================================
  Premium VIP Page Teal & Black Theme Overrides
  =========================================
*/

/* Main VIP Header & Page Background */
.vip-header {
  background: linear-gradient(180deg, #04090a 0%, #0a1416 100%) !important;
  border-bottom: 1px solid rgba(0, 245, 255, 0.15) !important;
}

/* VIP Card General Styles */
.vip-content-card .itemInfo {
  border: 1px solid rgba(0, 245, 255, 0.2) !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
}

/* Level 1-3: Sleek Low-Key Teal Accent */
.vip-content-card .itemInfo.level1,
.vip-content-card .itemInfo.level2,
.vip-content-card .itemInfo.level3 {
  background: linear-gradient(135deg, #050b0c 0%, #00403b 100%) !important;
  box-shadow: 0 4px 15px rgba(0, 64, 59, 0.35), inset 0 1px 2px rgba(0, 245, 255, 0.15) !important;
}

/* Level 4-7: Vibrant Teal Glow */
.vip-content-card .itemInfo.level4,
.vip-content-card .itemInfo.level5,
.vip-content-card .itemInfo.level6,
.vip-content-card .itemInfo.level7 {
  background: linear-gradient(135deg, #071112 0%, #005a53 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 90, 83, 0.5), inset 0 1px 2px rgba(0, 245, 255, 0.25) !important;
}

/* Level 8-10: Ultra Premium Neon Teal Glow */
.vip-content-card .itemInfo.level8,
.vip-content-card .itemInfo.level9,
.vip-content-card .itemInfo.level10 {
  background: linear-gradient(135deg, #091718 0%, #007c72 100%) !important;
  box-shadow: 0 6px 25px rgba(0, 245, 255, 0.35), inset 0 1px 3px rgba(0, 245, 255, 0.4) !important;
  border: 1px solid rgba(0, 245, 255, 0.4) !important;
}

/* Hide original background images if they interfere with custom design */
.vip-content-card .itemInfo::before,
.vip-content-card .itemInfo::after {
  background-image: none !important;
}

/* Progress bar inside cards */
.vip-content-card .van-progress {
  background: #04090a !important;
  border: 1px solid rgba(0, 245, 255, 0.1) !important;
  height: 8px !important;
}
.vip-content-card .van-progress__portion {
  background: linear-gradient(90deg, #00cbbe 0%, #00f5ff 100%) !important;
  box-shadow: 0 0 10px rgba(0, 245, 255, 0.8) !important;
}

/* Experience Details Block */
.vip-content-empirical > div {
  background: #091214 !important;
  border: 1px solid rgba(0, 245, 255, 0.15) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  border-radius: 12px !important;
}
.vip-content-empirical > div > p.red {
  color: #00f5ff !important;
}
.vip-content-empirical > div > p > span {
  color: #eaffff !important;
  text-shadow: 0 0 8px rgba(0, 245, 255, 0.5) !important;
}

/* Welfare and My Welfare Blocks */
.vip-content-weal,
.vip-content-myWelfare {
  background: #070e10 !important;
  border: 1px solid rgba(0, 245, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Welfare Sub-elements */
.vip-content-myWelfare-con .cards .card-bottom {
  background: #04090a !important;
  border: 1px solid rgba(0, 245, 255, 0.08) !important;
}
.vip-content-myWelfare-con .cards button.active {
  background: linear-gradient(135deg, #00cbbe 0%, #00736a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 203, 190, 0.4) !important;
  border: none !important;
}
.vip-content-weal-con > div:nth-of-type(3) > p {
  border-color: #00cbbe !important;
  color: #00cbbe !important;
}
.vip-content-weal-con > div:nth-of-type(3) > p:nth-of-type(1) {
  border-color: #00f5ff !important;
  color: #00f5ff !important;
  text-shadow: 0 0 5px rgba(0, 245, 255, 0.3) !important;
}

/* Records vs Rules Tabs */
.vip-content-recordVsrule-head > button {
  background: #04090a !important;
  color: #959f9f !important;
  border: 1px solid rgba(0, 245, 255, 0.05) !important;
}
.vip-content-recordVsrule-head > button.active {
  background: #091214 !important;
  color: #00f5ff !important;
  border: 1px solid rgba(0, 245, 255, 0.15) !important;
}
.vip-content-recordVsrule-head > button.active:before {
  background-color: #00f5ff !important;
  box-shadow: 0 0 8px rgba(0, 245, 255, 0.8) !important;
}

/* Records vs Rules Content */
.vip-content-recordVsrule-con {
  background: #070e10 !important;
  border: 1px solid rgba(0, 245, 255, 0.1) !important;
  border-radius: 12px !important;
}
.vip-content-recordVsrule-con .con-content__rules-item {
  background: #091214 !important;
  border: 1px solid rgba(0, 245, 255, 0.08) !important;
  border-radius: 8px !important;
}

/* Reward numbers and titles styling */
.vip-content-weal-con > div h1,
.vip-content-myWelfare-con .cards h2,
.vip-content-recordVsrule-con .con-content__rules-item h1 {
  color: #eaffff !important;
}

/* Swiper layout adjustment to keep VIP cards centered and fully inside their own boxes */
.vip-content-card {
  overflow: hidden !important;
}
.vip-content-card .my-swipe,
.vip-content-card .swiper {
  width: 100% !important;
  height: 4.45rem !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.vip-content-card .swiper-wrapper {
  display: flex !important;
  align-items: center !important;
}
.vip-content-card .swiper-slide {
  width: 7.62667rem !important;
  flex: 0 0 7.62667rem !important;
  display: flex !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.vip-content-card .swiper-slide .itemInfo {
  width: 7.62667rem !important;
  min-width: 7.62667rem !important;
  max-width: 7.62667rem !important;
  height: 4.2rem !important;
  min-height: 4.2rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.vip-content-card .itemInfo {
  display: block !important;
  padding: 0.2rem 0.26667rem !important;
}
.vip-content-card .itemInfo-head {
  display: block !important;
  max-width: calc(100% - 2.1rem) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.vip-content-card .itemInfo-head > div:first-child {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  min-width: 0 !important;
}
.vip-content-card .itemInfo-head > div:first-child > h1 {
  flex: 0 0 auto !important;
  margin-right: 0.13333rem !important;
}
.vip-content-card .itemInfo-head > div:first-child > span {
  display: inline-block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.vip-content-card .itemInfo-head > div:not(:first-child) {
  max-width: 100% !important;
}
.vip-content-card .itemInfo-right {
  top: 0.13333rem !important;
  right: 0.13333rem !important;
  z-index: 1 !important;
}
.vip-content-card .itemInfo-right img {
  width: 1.86667rem !important;
  max-width: 1.86667rem !important;
}
.vip-content-card .itemInfo-bottom {
  position: absolute !important;
  left: 0.26667rem !important;
  right: 0.26667rem !important;
  bottom: 0.26667rem !important;
  z-index: 2 !important;
  width: auto !important;
  margin: 0 !important;
}
.vip-content-card .itemInfo-bottom.mt50 {
  margin-top: 0 !important;
}
.vip-content-card .itemInfo-bottom .van-progress {
  width: 100% !important;
}