/* ============================================================
   三伢子俱乐部 · 三级详情页专属样式
   live/room（直播间）· cart/checkout（确认订单）
   member/orders（我的订单）· member/vip（会员中心）
   ============================================================ */

/* ===== 面包屑（强化三级层级感） ===== */
.breadcrumb {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px; font-size: 12px; color: #999;
  background: #fff; border-bottom: 1px solid #f0f0f0;
}
.breadcrumb a { color: #18A87C; text-decoration: none; }
.breadcrumb .sep { color: #ccc; }
.breadcrumb .cur { color: #333; }

/* ===== 直播间详情 ===== */
.lr-player {
  position: relative; width: 100%; aspect-ratio: 16/10; max-height: 260px;
  background: #111; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.lr-player .lr-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.82;
}
.lr-center-emoji { position: relative; z-index: 2; font-size: 72px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); }
.lr-play {
  position: absolute; z-index: 3; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff;
  cursor: pointer; transition: transform .15s; padding-left: 4px;
}
.lr-play:active { transform: scale(.9); }
.lr-live-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: #E63946; color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 11px; display: flex; align-items: center; gap: 5px;
}
.lr-live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: lrblink 1s infinite; }
@keyframes lrblink { 50% { opacity: .25; } }
.lr-viewer {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background: rgba(0,0,0,.45); color: #fff; font-size: 11px; padding: 3px 9px; border-radius: 11px;
}
.lr-host-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; }
.lr-host-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: #e8f5ef;
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto;
}
.lr-host-meta { flex: 1; min-width: 0; }
.lr-host-name { font-size: 15px; font-weight: 600; color: #222; }
.lr-host-sub { font-size: 12px; color: #999; margin-top: 2px; }
.lr-follow {
  flex: 0 0 auto; border: none; background: linear-gradient(135deg,#E63946,#ff6b6b);
  color: #fff; font-size: 13px; padding: 7px 16px; border-radius: 18px; font-weight: 600;
}
.lr-follow.on { background: #eee; color: #999; }
.lr-announce {
  margin: 0 14px 12px; padding: 10px 12px; background: #fff7e6; border-radius: 10px;
  font-size: 12px; color: #a06a00; display: flex; gap: 6px; align-items: flex-start; line-height: 1.5;
}
.lr-sec-title { font-size: 14px; font-weight: 600; color: #333; padding: 14px 14px 8px; }
.lr-products { display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 14px; scrollbar-width: none; }
.lr-products::-webkit-scrollbar { display: none; }
.lrp-card {
  flex: 0 0 112px; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); text-decoration: none;
}
.lrp-cover { height: 92px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: #f5f5f5; }
.lrp-cover img { width: 100%; height: 100%; object-fit: cover; }
.lrp-info { padding: 8px; }
.lrp-name { font-size: 12px; color: #333; line-height: 1.3; height: 32px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lrp-price { font-size: 13px; color: #E63946; font-weight: 700; margin-top: 4px; }
.lr-chat { background: #fff; padding: 12px 14px 14px; }
.lr-chat-list { display: flex; flex-direction: column; gap: 9px; }
.chat-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.chat-ava {
  width: 26px; height: 26px; border-radius: 50%; background: #eef0fb;
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto;
}
.chat-body { flex: 1; min-width: 0; }
.chat-name { color: #888; font-size: 11px; }
.chat-text { color: #333; background: #f5f5f5; padding: 6px 10px; border-radius: 10px; display: inline-block; margin-top: 2px; line-height: 1.45; max-width: 100%; word-break: break-word; }
.chat-text.me { background: #d6f0e6; color: #0c6b48; }
.lr-input-bar {
  position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 500px; z-index: 90;
  display: flex; gap: 8px; padding: 8px 12px; background: #fff; border-top: 1px solid #f0f0f0; align-items: center;
}
.lr-input-bar input { flex: 1; border: none; background: #f5f5f5; border-radius: 18px; padding: 9px 14px; font-size: 13px; outline: none; }
.lr-input-bar .gift-btn { font-size: 20px; background: none; border: none; padding: 0 2px; }

/* ===== 确认订单（结算） ===== */
.co-addr {
  margin: 12px 14px; background: #fff; border-radius: 12px; padding: 14px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.co-addr .co-pin { font-size: 24px; }
.co-addr-main { flex: 1; min-width: 0; }
.co-addr-name { font-size: 14px; font-weight: 600; color: #222; }
.co-addr-name b { font-weight: 600; }
.co-addr-sub { font-size: 12px; color: #888; margin-top: 4px; line-height: 1.45; }
.co-addr-arrow { color: #bbb; font-size: 16px; }
.co-block { margin: 12px 14px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); overflow: hidden; }
.co-block .co-block-hd { padding: 12px 14px 6px; font-size: 13px; font-weight: 600; color: #333; }
.co-radio-group { display: flex; flex-direction: column; }
.co-radio {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #f4f4f4; cursor: pointer; font-size: 13px; color: #333;
}
.co-radio .co-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ccc; flex: 0 0 auto; position: relative; }
.co-radio.on .co-dot { border-color: #18A87C; }
.co-radio.on .co-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #18A87C; }
.co-radio .co-radio-sub { color: #999; font-size: 11px; margin-left: auto; }
.co-coupon {
  display: flex; align-items: center; justify-content: space-between;
  margin: 12px 14px; padding: 12px 14px; background: linear-gradient(135deg,#fff5f0,#ffe9e0);
  border: 1px dashed #ffb499; border-radius: 12px; cursor: pointer;
}
.co-coupon .co-coupon-l { font-size: 13px; color: #e0532a; font-weight: 600; }
.co-coupon .co-coupon-r { font-size: 12px; color: #c0653f; }
.co-note { width: 100%; border: none; outline: none; resize: none; padding: 12px 14px; font-size: 13px; color: #333; font-family: inherit; }
.co-fee { padding: 6px 14px 14px; }
.co-fee-row { display: flex; justify-content: space-between; font-size: 13px; color: #666; padding: 5px 0; }
.co-fee-row.total { font-size: 14px; color: #222; font-weight: 600; border-top: 1px solid #f4f4f4; margin-top: 4px; padding-top: 10px; }
.co-fee-row.total b { color: #E63946; font-size: 17px; }
.co-bar {
  position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 500px; z-index: 90; background: #fff;
  display: flex; align-items: center; padding: 10px 14px; border-top: 1px solid #eee;
}
.co-bar .co-total { flex: 1; font-size: 13px; color: #666; }
.co-bar .co-total b { color: #E63946; font-size: 18px; }
.co-bar .co-submit {
  border: none; background: linear-gradient(135deg,#18A87C,#12a072); color: #fff;
  font-size: 15px; font-weight: 600; padding: 10px 28px; border-radius: 22px;
}

/* ===== 我的订单 ===== */
.ord-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; position: sticky; top: 0; z-index: 10; overflow-x: auto; scrollbar-width: none; }
.ord-tabs::-webkit-scrollbar { display: none; }
.ord-tab { flex: 1 0 auto; text-align: center; padding: 12px 10px; font-size: 13px; color: #666; position: relative; white-space: nowrap; }
.ord-tab.active { color: #18A87C; font-weight: 600; }
.ord-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; border-radius: 2px; background: #18A87C; }
.ord-card { margin: 12px 14px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); overflow: hidden; }
.ord-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid #f4f4f4; }
.ord-no { font-size: 12px; color: #999; }
.ord-status { font-size: 13px; color: #E63946; font-weight: 600; }
.ord-items { padding: 10px 14px; }
.ord-item { display: flex; gap: 10px; align-items: center; }
.ord-item + .ord-item { margin-top: 10px; }
.ord-thumb { width: 56px; height: 56px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 26px; background: #f5f5f5; overflow: hidden; }
.ord-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ord-item-mid { flex: 1; min-width: 0; }
.ord-item-name { font-size: 13px; color: #333; line-height: 1.4; }
.ord-item-spec { font-size: 11px; color: #999; margin-top: 3px; }
.ord-item-right { text-align: right; flex: 0 0 auto; }
.ord-item-price { font-size: 13px; color: #333; }
.ord-item-qty { font-size: 11px; color: #999; margin-top: 3px; }
.ord-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid #f4f4f4; }
.ord-foot-l { font-size: 12px; color: #999; }
.ord-foot-l b { color: #333; font-size: 14px; }
.ord-btns { display: flex; gap: 8px; }
.ord-btn { border: 1px solid #ddd; background: #fff; color: #555; font-size: 12px; padding: 6px 14px; border-radius: 16px; cursor: pointer; }
.ord-btn.primary { border-color: #18A87C; color: #18A87C; }
.ord-btn.danger { border-color: #f0a; color: #E63946; border-color: #ffc2c2; }
/* 物流时间轴 */
.ord-timeline { margin: 0 14px 12px; background: #fafafa; border-radius: 10px; padding: 12px; }
.tl-step { display: flex; gap: 10px; position: relative; padding-bottom: 12px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: #18A87C; margin-top: 3px; flex: 0 0 auto; position: relative; z-index: 2; }
.tl-step:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 0; width: 2px; background: #d8ece4; }
.tl-step.pending .tl-dot { background: #ccc; }
.tl-body .tl-title { font-size: 13px; color: #333; }
.tl-step.pending .tl-title { color: #999; }
.tl-body .tl-time { font-size: 11px; color: #aaa; margin-top: 2px; }

/* ===== 会员中心 ===== */
.vip-card {
  margin: 14px; border-radius: 16px; padding: 18px 16px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg,#2b2b3a,#4a3b2a 70%,#6b4f2a);
  box-shadow: 0 8px 22px rgba(90,60,20,.3);
}
.vip-card::after { content: '👑'; position: absolute; right: 12px; top: 8px; font-size: 60px; opacity: .18; }
.vip-card .vc-top { display: flex; align-items: center; gap: 10px; }
.vip-ava { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.vip-name { font-size: 16px; font-weight: 700; }
.vip-lv { font-size: 12px; background: rgba(255,255,255,.22); padding: 2px 8px; border-radius: 10px; margin-top: 3px; display: inline-block; }
.vip-points { font-size: 13px; margin-top: 14px; opacity: .92; }
.vip-points b { font-size: 22px; font-weight: 700; margin: 0 2px; }
.vip-progress { margin-top: 10px; }
.vip-progress .vp-bar { height: 7px; background: rgba(255,255,255,.25); border-radius: 4px; overflow: hidden; }
.vip-progress .vp-fill { height: 100%; background: linear-gradient(90deg,#ffd700,#ffb300); border-radius: 4px; }
.vip-progress .vp-tip { font-size: 11px; margin-top: 6px; opacity: .85; }

.vip-ladder { display: flex; margin: 14px; background: #fff; border-radius: 12px; padding: 14px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.04); overflow-x: auto; scrollbar-width: none; }
.vip-ladder::-webkit-scrollbar { display: none; }
.vip-step { flex: 1 0 20%; text-align: center; position: relative; min-width: 64px; }
.vip-step .vs-dot { width: 30px; height: 30px; border-radius: 50%; background: #eee; color: #aaa; display: flex; align-items: center; justify-content: center; font-size: 15px; margin: 0 auto; position: relative; z-index: 2; }
.vip-step.on .vs-dot { background: linear-gradient(135deg,#18A87C,#12a072); color: #fff; }
.vip-step .vs-name { font-size: 11px; color: #666; margin-top: 6px; }
.vip-step.on .vs-name { color: #18A87C; font-weight: 600; }
.vip-step:not(:last-child)::before { content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: #eee; }
.vip-step.on:not(:last-child)::before { background: #18A87C; }

.vip-perk-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 0 14px; }
.vip-perk { background: #fff; border-radius: 12px; padding: 14px 6px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.vip-perk .vp-ico { font-size: 24px; }
.vip-perk .vp-txt { font-size: 12px; color: #555; margin-top: 6px; }

.vip-task { margin: 14px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.vip-task-hd { padding: 13px 14px 4px; font-size: 14px; font-weight: 600; color: #333; }
.vt-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #f4f4f4; }
.vt-ico { width: 36px; height: 36px; border-radius: 10px; background: #e8f5ef; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.vt-main { flex: 1; min-width: 0; }
.vt-title { font-size: 13px; color: #333; }
.vt-sub { font-size: 11px; color: #999; margin-top: 2px; }
.vt-btn { border: 1px solid #18A87C; color: #18A87C; background: #fff; font-size: 12px; padding: 5px 12px; border-radius: 14px; flex: 0 0 auto; }
.vt-btn.done { border-color: #ddd; color: #bbb; }

.vip-coupon { margin: 14px; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.04); padding: 4px 0; }
.vip-coupon-hd { padding: 12px 14px 2px; font-size: 14px; font-weight: 600; color: #333; }
.vc-item { display: flex; align-items: center; margin: 10px 14px; border: 1px solid #ffe0d0; border-radius: 10px; overflow: hidden; }
.vc-left { background: linear-gradient(135deg,#ff8a5b,#ff6b6b); color: #fff; padding: 12px 14px; text-align: center; flex: 0 0 auto; min-width: 78px; }
.vc-left .vc-amt { font-size: 20px; font-weight: 700; }
.vc-left .vc-amt small { font-size: 12px; }
.vc-left .vc-cond { font-size: 10px; opacity: .9; margin-top: 2px; }
.vc-right { flex: 1; padding: 10px 12px; }
.vc-right .vc-name { font-size: 13px; color: #333; font-weight: 600; }
.vc-right .vc-desc { font-size: 11px; color: #999; margin-top: 3px; }
.vc-get { border: 1px solid #ff8a5b; color: #ff6b6b; background: #fff; font-size: 12px; padding: 5px 12px; border-radius: 14px; margin-right: 12px; flex: 0 0 auto; }

/* ===== 商品详情画廊：附图角度标签 ===== */
.gallery-slide { position: relative; }
.slide-cap {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 12px;
  padding: 3px 10px; border-radius: 11px; backdrop-filter: blur(2px);
}

/* ===== 路线详情：评价 + 相关推荐 ===== */
.rv-item { padding: 12px 14px; border-top: 1px solid #f4f4f4; }
.rv-top { display: flex; align-items: center; gap: 8px; }
.rv-ava { width: 30px; height: 30px; border-radius: 50%; background: #eef0fb; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.rv-name { font-size: 13px; color: #333; font-weight: 600; }
.rv-stars { color: #f5a623; font-size: 12px; margin-left: auto; }
.rv-text { font-size: 13px; color: #555; line-height: 1.5; margin-top: 6px; }
.rel-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 14px; scrollbar-width: none; }
.rel-scroll::-webkit-scrollbar { display: none; }
.rel-card { flex: 0 0 150px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); text-decoration: none; }
.rel-img { height: 90px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: #f5f5f5; }
.rel-img img { width: 100%; height: 100%; object-fit: cover; }
.rel-info { padding: 8px 10px; }
.rel-name { font-size: 12px; color: #333; line-height: 1.35; height: 32px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rel-price { font-size: 13px; color: #E63946; font-weight: 700; margin-top: 4px; }