/* ============================================================
   陪聊系统 H5 视觉升级覆盖层 override.css  v2（多陪化）
   目标：选人页 + 我的页面视觉对齐"大橘树洞"（juw4.hbddlfd.cn）风格
   设计语言：白底 + 蓝紫渐变点缀 + 紫色主按钮 + 多彩等级徽章/服务标签
   原理：不改 JS/组件结构，仅追加覆盖样式。
   部署：放在 /wechat/css/ 下，并在 index.html 追加一行 link 引用。
   ============================================================ */

/* 1. 全局背景：不再给 html/body/#app 设置任何背景。
      背景图由 App.vue 注入的 body::before（z-index:-1）承载；
      html/body 一旦设背景（绘制层在负 z-index 之上）会盖住后台背景图。 */

/* ==================== 选人页（/user/select） ==================== */

/* 2. 搜索栏：胶囊白底 + 紫色搜索按钮（多陪式） */
.van-search {
  background: transparent !important;
  padding: .5rem 1rem;
}
.van-search__content {
  background: #fff !important;
  border-radius: 1.6rem !important;
  box-shadow: 0 4px 14px rgba(124, 77, 255, .10) !important;
  border: 1px solid rgba(124, 77, 255, .08);
}
.van-search__action {
  color: #7c4dff !important;
  font-weight: 700;
  font-size: .92rem;
  padding-right: .2rem;
}

/* 3. 打赏流水滚动条：多陪式浅紫圆角白条 */
.information.van-notice-bar {
  background: rgba(255, 255, 255, .85) !important;
  border-radius: 1.4rem !important;
  box-shadow: 0 3px 12px rgba(124, 77, 255, .08) !important;
  color: #8b6bd6 !important;
  margin: .3rem .9rem;
  width: auto;
}
.van-notice-bar__content { color: #8b6bd6 !important; }

/* 4. 人气店员/新人推荐 tab：白底圆角卡片 + 紫色选中态 */
.tabs_warpper {
  background: #fff !important;
  border-radius: 1.1rem !important;
  box-shadow: 0 6px 18px rgba(124, 77, 255, .08) !important;
  margin: .3rem .9rem;
  width: auto;
}
.tabs_warpper .van-tab { color: #8b8ba6; font-weight: 600; }
.tabs_warpper .van-tab--active { color: #7c4dff !important; font-weight: 700; }
.tabs_warpper .van-tabs__line {
  background: linear-gradient(135deg, #9b6cff, #7c4dff) !important;
  border-radius: .3rem;
  height: .28rem;
}

/* 5. 筛选条（全部/性别/等级）：多陪式浅灰细条 + 紫色选中 */
.clerk_tite {
  color: #8b8ba6 !important;
  font-weight: 600;
  margin: .4rem .9rem .15rem;
  width: auto;
  background: #fff;
  border-radius: .9rem;
  padding: .4rem .8rem;
  box-shadow: 0 3px 10px rgba(124, 77, 255, .06);
}
.clerk_tite .van-icon { color: #7c4dff !important; }

/* 6. 店员卡片：背景跟随后台透明度（内联 rgba 生效），不再强制纯白；间距紧凑 */
.clerk_list { margin: 0 .5rem; }
.info_box {
  border-radius: 1.1rem !important;
  box-shadow: 0 6px 18px rgba(124, 77, 255, .09) !important;
  margin: .3rem .3rem !important;
  padding: .42rem .55rem !important;
  transition: transform .15s ease;
}
.info_box:active { transform: scale(.985); }

/* 头像：加精致描边 */
.info_left .van-image {
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(124, 77, 255, .25), 0 4px 12px rgba(124, 77, 255, .18);
  border-radius: 50% !important;
}

/* 在线状态：高亮醒目（在线=紫色渐变白字，一眼可见） */
.work.workState,
.work:not(.workState) {
  background: linear-gradient(135deg, #8a5cf6, #6b3de8) !important;
  color: #ffffff !important;
  font-size: .78rem !important;
  border-radius: .32rem !important;
  padding: .08rem .5rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(138, 92, 246, .5) !important;
}
.work.workState {
  background: linear-gradient(135deg, #8a5cf6, #6b3de8) !important;
}

/* 昵称行：名片复刻版小字 */
.info_right .name {
  font-size: .7rem !important;
  font-weight: 700;
  color: #2b2b40;
}

/* 等级徽章（金牌/普通）：多陪式多彩渐变 */
.grade {
  border-radius: .55rem !important;
  padding: .08rem .5rem !important;
  font-size: .72rem !important;
  font-weight: 700;
}
.grade.sexbg_color1 {
  background: linear-gradient(135deg, #ffb84d, #ff8a3d) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(255, 138, 61, .35);
}

/* 星座：浅紫小圆角 */
.constellation {
  background: rgba(124, 77, 255, .10) !important;
  color: #7c4dff !important;
  border-radius: .55rem !important;
  padding: .08rem .5rem !important;
  font-size: .72rem !important;
  font-weight: 600;
}

/* 服务标签：多陪式彩色小圆角（青/紫/粉轮换） */
.info_right_box.flex5 { gap: .2rem; }
.tag {
  border-radius: .55rem !important;
  padding: .08rem .45rem !important;
  font-size: .7rem !important;
  font-weight: 600;
}
.tag.sex_color1:nth-child(3n+1) {
  background: rgba(0, 191, 166, .12) !important;
  color: #00bfa6 !important;
}
.tag.sex_color1:nth-child(3n+2) {
  background: rgba(124, 77, 255, .12) !important;
  color: #7c4dff !important;
}
.tag.sex_color1:nth-child(3n+3) {
  background: rgba(255, 77, 148, .12) !important;
  color: #ff4d94 !important;
}

/* 试音时长（record）：统一粉紫渐变窄条（头像下方） */
.record {
  border-radius: 1rem !important;
  background: linear-gradient(135deg, #ff7ab8, #a96bff) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: .6rem !important;
  padding: .12rem .3rem;
}

/* 地区：浅灰弱化（多陪式 @城市） */
.location {
  color: #a0a0b5 !important;
  font-size: .76rem !important;
}

/* 收藏按钮：多陪式"喜欢"粉心 */
.collection {
  color: #ff4d94 !important;
  font-weight: 600;
  font-size: .78rem;
}
.collection .my-icon { color: #ff4d94 !important; }

/* ==================== 底部导航（全局） ==================== */

/* 7. 底部导航：白底 + 紫色选中（多陪式） */
.van-tabbar {
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 -4px 18px rgba(124, 77, 255, .08) !important;
}
.van-tabbar-item { color: #a3a3b8; font-weight: 500; }
.van-tabbar-item--active {
  color: #7c4dff !important;
  font-weight: 700;
}
.van-tabbar-item--active .my-icon,
.van-tabbar-item--active .van-icon { color: #7c4dff !important; }

/* 6 项导航适配：缩小字号图标，保证一行放得下 */
.van-tabbar-item { font-size: .68rem; }
.van-tabbar-item .van-icon { font-size: 1.05rem !important; }
.van-tabbar-item--active { font-size: .7rem; }

/* ==================== 我的页（/user/center） ==================== */

/* 8. 头部信息卡：多陪式蓝紫渐变 + 白字 */
.container .info {
  background: linear-gradient(135deg, #7c4dff 0%, #9b6cff 55%, #b56cff 100%) !important;
  border-radius: 1.2rem !important;
  margin: .6rem .9rem;
  width: auto;
  box-shadow: 0 8px 22px rgba(124, 77, 255, .28);
  padding: 1rem 1.1rem !important;
}
.container .info .avater {
  border: 2.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.container .info .nickname {
  color: #fff !important;
  font-size: 1.12rem !important;
  font-weight: 700;
}
.container .info .userId {
  color: rgba(255, 255, 255, .78) !important;
  font-size: .78rem !important;
}

/* 9. 我的订单 / 我的钱包：白底圆角卡片（多陪式分区块） */
.instruct_box {
  background: #fff !important;
  border-radius: 1.1rem !important;
  box-shadow: 0 6px 18px rgba(124, 77, 255, .08) !important;
  margin: .4rem .9rem;
  width: auto;
}
.instruct_box .title {
  color: #7c4dff !important;
  font-weight: 700;
  font-size: .95rem;
}
.instruct_item {
  color: #4a4a60 !important;
  font-weight: 600;
  font-size: .88rem;
}
.instruct_item .my-icon { color: #9b6cff !important; }

/* 10. 轮播/横幅：白卡统一圆角 */
.my-swipe, .my-swipe .van-swipe-item {
  border-radius: 1rem !important;
}