/* =====================================================================
 * 丰宁夜市跑腿 —— WAP 组件库
 * 依赖 tokens.css + base.css
 * 所有组件的视觉规格对齐 prototype/client.html（px → rem 按 ×0.02 换算）
 * ===================================================================== */

/* =====================================================================
 * 卡片
 * ===================================================================== */
.card {
  background: var(--card);
  border-radius: var(--r-l);
  margin: 0 .24rem .2rem;
  overflow: hidden;
}
.card.flat { margin: 0; border-radius: 0; }
.pad { padding: .24rem; }

/* 分组标题 */
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .28rem .28rem .16rem;
}
.sec-head h2 {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -.004rem;
}
.sec-head .more {
  font-size: var(--fs-m);
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: .04rem;
}

/* =====================================================================
 * 按钮
 * ===================================================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: var(--fs-l);
  height: var(--h-btn);
  padding: 0 .36rem;
  transition: opacity .15s;
}
/*
 * 按钮按下反馈：轻微缩放 + 降透明度
 * 只降透明度会显得"没反应"，加缩放才有实体按键的手感
 */
.btn:active { transform: scale(.97); opacity: .9; }

/* 主按钮：带暖色光晕，像灯笼在发光 */
.btn.pri {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 .04rem .16rem rgba(224, 51, 13, .28);
}
.btn.pri:active { box-shadow: 0 .02rem .08rem rgba(224, 51, 13, .24); }

/* 渐变按钮：最重要的一类行动按钮（下单、支付） */
.btn.grad {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: var(--glow-btn);
}
.btn.grad:active { box-shadow: 0 .02rem .1rem rgba(224, 51, 13, .26); }

/* 次要按钮 */
.btn.out {
  background: var(--card);
  color: var(--t2);
  border: 1px solid var(--line-2);
}
.btn.out:active { background: var(--bg-deep); }

/* 浅色强调按钮 */
.btn.ghost {
  background: var(--primary-light);
  color: var(--primary);
}

/* 禁用：用暖灰，避免在暖底上发蓝发脏 */
.btn.dis {
  background: var(--bg-deep);
  color: var(--t4);
  box-shadow: none;
  pointer-events: none;
}
.btn.block { width: 100%; }
.btn.sm { height: var(--h-btn-sm); font-size: var(--fs-m); padding: 0 .24rem; }
.btn.xs { height: var(--h-btn-xs); font-size: var(--fs-s); padding: 0 .2rem; }
.btn.lg { height: .88rem; font-size: var(--fs-2xl); }

/* 圆形加号 */
.plus {
  width: .44rem;
  height: .44rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: 600;
  flex: none;
}
.plus.off { background: var(--t4); }

/* =====================================================================
 * 标签 / 徽标
 * ===================================================================== */
.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  line-height: .3rem;
  padding: 0 .1rem;
  border-radius: .06rem;
  background: var(--primary-light);
  color: var(--primary);
  white-space: nowrap;
}
.tag.gray  { background: var(--tag-gray-bg);  color: var(--tag-gray-tx); }
.tag.amber { background: var(--tag-amber-bg); color: var(--tag-amber-tx); }
.tag.green { background: var(--tag-green-bg); color: var(--tag-green-tx); }
.tag.blue  { background: var(--tag-blue-bg);  color: var(--tag-blue-tx); }

.score-pill {
  background: var(--tag-amber-bg);
  color: var(--tag-amber-tx);
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: .02rem .1rem;
  border-radius: var(--r-s);
}

.dot {
  width: .12rem;
  height: .12rem;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
  flex: none;
}
.dot.off { background: var(--t4); }

/* 角标（购物车数量等） */
.badge-num {
  background: var(--danger);
  color: #fff;
  font-size: .18rem;
  min-width: .3rem;
  height: .3rem;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .06rem;
  font-weight: 600;
}

/* =====================================================================
 * 首页 hero 区
 * ===================================================================== */
/*
 * 头部区域：模拟「灯笼从上方打下来的暖光」
 *
 * 两层叠加：
 *   ::before —— 顶部偏左的琥珀色光晕（主灯）
 *   ::after  —— 右上角的白光柔光（补光，避免右侧死黑）
 * 用径向渐变而不是实心圆，边缘才不会有硬边。
 */
.hero {
  background: var(--grad-hero);
  padding: 0 .24rem .92rem;
  position: relative;
  overflow: hidden;
}
/*
 * 主灯：偏右上的暖黄光晕
 *
 * 刻意放在右上而不是左上 —— 左上是要放「丰宁县·大阁镇」白色文字的，
 * 光晕压在那里会把白字冲淡、可读性变差。放右上既不挡文字，
 * 又能让头部有「灯光从上方打下来」的感觉。
 */
.hero::before {
  content: "";
  position: absolute;
  right: -26%;
  top: -72%;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 200, 92, .38) 0%,
    rgba(255, 160, 60, .14) 40%,
    rgba(255, 120, 40, 0) 70%);
  pointer-events: none;
}
/* 补光：左下角的柔光，让底部不至于死黑，和主灯形成对角 */
.hero::after {
  content: "";
  position: absolute;
  left: -18%;
  bottom: -58%;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 220, 150, .20) 0%,
    rgba(255, 190, 100, .06) 44%,
    rgba(255, 150, 60, 0) 72%);
  pointer-events: none;
}
  background: rgba(255, 255, 255, .08);
  left: -.8rem;
  bottom: -1.2rem;
}
.hero .loc {
  display: flex;
  align-items: center;
  gap: .1rem;
  color: #fff;
  font-size: var(--fs-l);
  font-weight: 600;
  position: relative;
  z-index: 2;
}
.hero .loc .arr { font-size: .18rem; opacity: .85; }
.hero .loc-sub {
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-s);
  margin-top: .04rem;
  position: relative;
  z-index: 2;
}

/* 搜索栏 */
.searchbar {
  margin-top: .24rem;
  height: .72rem;
  background: #fff;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  padding: 0 .24rem;
  gap: .12rem;
  position: relative;
  z-index: 2;
  box-shadow: var(--sh-hero);
}
.searchbar .ph-txt { color: var(--t3); font-size: var(--fs-n); }
.searchbar svg { width: .3rem; height: .3rem; flex: none; }

/* 轮播 */
.banner {
  margin: 0 .24rem;
  height: 2.08rem;
  border-radius: var(--r-l);
  background: var(--grad-night);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 .32rem;
  margin-top: -.68rem;
  z-index: 3;
  box-shadow: 0 .12rem .36rem rgba(20, 24, 30, .14);
}
/* =====================================================================
 * 轮播图（真实幻灯片，交叉淡入）
 *
 * 为什么改成绝对定位叠放而不是横向滚动：
 *   横向滚动在 web-view 里手势容易和页面滚动打架；
 *   交叉淡入只需改 opacity，性能好，也不会误触发横向滑动。
 * ===================================================================== */
.banner-slider {
  position: relative;
  margin: 0 .24rem;
  height: 2.08rem;
  border-radius: var(--r-l);
  overflow: hidden;
  margin-top: -.68rem;
  z-index: 3;
  box-shadow: 0 .12rem .36rem rgba(20, 24, 30, .14);
  background: var(--grad-night);
}
.banner-slider .bslide {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .55s ease;
  -webkit-tap-highlight-color: transparent;
}
.banner-slider .bslide.on { opacity: 1; }
.banner-slider .bs-mask {
  position: absolute;
  inset: 0;
  /* 左深右浅，保证文字可读的同时露出右侧菜品 */
  background: linear-gradient(90deg,
    rgba(18, 22, 28, .78) 0%,
    rgba(18, 22, 28, .48) 48%,
    rgba(18, 22, 28, .06) 100%);
}
.banner-slider .bs-txt {
  position: absolute;
  left: .32rem;
  right: 1.3rem;
  bottom: .3rem;
  color: #fff;
  z-index: 2;
}
.banner-slider .bs-t {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 .02rem .12rem rgba(0, 0, 0, .35);
}
.banner-slider .bs-s {
  font-size: var(--fs-m);
  opacity: .92;
  margin-top: .06rem;
  text-shadow: 0 .02rem .1rem rgba(0, 0, 0, .35);
}
.banner-slider .bs-dots {
  position: absolute;
  right: .28rem;
  bottom: .22rem;
  display: flex;
  gap: .08rem;
  z-index: 3;
}
.banner-slider .bs-dots i {
  width: .1rem;
  height: .1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: all .25s;
  cursor: pointer;
}
.banner-slider .bs-dots i.on {
  width: .3rem;
  border-radius: .06rem;
  background: #fff;
}

.banner .txt { color: #fff; position: relative; z-index: 2; }
.banner .txt .bt { font-size: var(--fs-3xl); font-weight: 700; }
.banner .txt .bs { font-size: var(--fs-m); opacity: .82; margin-top: .06rem; }
.banner .lantern {
  position: absolute;
  right: .28rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .88rem;
  opacity: .92;
}
.banner .dots {
  position: absolute;
  bottom: .16rem;
  right: .28rem;
  display: flex;
  gap: .08rem;
  z-index: 2;
}
.banner .dots i {
  width: .1rem;
  height: .1rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: width .2s;
}
.banner .dots i.on { width: .28rem; border-radius: .06rem; background: #fff; }

/* 分类快捷入口 */
.quick {
  display: flex;
  gap: .16rem;
  overflow-x: auto;
  padding: .24rem .24rem .04rem;
  scrollbar-width: none;
}
.quick::-webkit-scrollbar { display: none; }
.quick .q {
  flex: none;
  width: 1.16rem;
  text-align: center;
}
.quick .q .ic {
  width: .96rem;
  height: .96rem;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .48rem;
  margin: 0 auto .08rem;
}
.quick .q span { font-size: var(--fs-s); color: var(--t2); }

/*
 * 金刚区（8 个固定分类，4×2 网格）
 * 刻意不做横滑：横滑条会越铺越长，用户要滑才看得全；
 * 固定 8 格一屏展示完，扫一眼就能定位。
 */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .3rem .08rem;
  padding: .3rem .16rem .12rem;
}
.quick-grid .qg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.quick-grid .qg:active .ic { transform: scale(.94); }
.quick-grid .qg .ic {
  width: .96rem;
  height: .96rem;
  border-radius: .28rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .46rem;
  line-height: 1;
  transition: transform .12s;
}
.quick-grid .qg span {
  font-size: var(--fs-s);
  color: var(--t2);
  line-height: 1.2;
}

/* 排序栏 */
.sorter {
  display: flex;
  gap: .32rem;
  padding: .2rem .28rem .12rem;
  font-size: var(--fs-n);
  color: var(--t2);
  align-items: center;
}
.sorter .s { display: flex; align-items: center; gap: .04rem; }
.sorter .s.on { color: var(--primary); font-weight: 700; }
.sorter .caret { font-size: .16rem; opacity: .6; }

/* =====================================================================
 * 商贩卡片
 * ===================================================================== */
.mcard {
  background: #fff;
  border-radius: var(--r-l);
  margin: 0 .24rem .2rem;
  padding: .2rem;
  display: flex;
  gap: .2rem;
}
.mcard .cover {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: .2rem;
  font-size: .64rem;
}
.mcard .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mcard .nm {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -.004rem;
}
.mcard .info {
  font-size: var(--fs-s);
  color: var(--t3);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: .12rem;
  flex-wrap: wrap;
}
.mcard .pill {
  background: #F5F6F7;
  border-radius: var(--r-s);
  padding: .02rem .1rem;
  color: var(--t2);
  font-size: var(--fs-xs);
}
.mcard .acts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  flex: none;
}

/* =====================================================================
 * 商贩详情头部
 * ===================================================================== */
.mhead {
  background: var(--grad-mhead);
  padding: .28rem;
  position: relative;
  overflow: hidden;
}
.mhead::after {
  content: "";
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  right: -.8rem;
  top: -1rem;
}
.mhead .nm {
  color: #fff;
  font-size: var(--fs-3xl);
  font-weight: 700;
  position: relative;
  z-index: 2;
}
.mhead .stat {
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-s);
  margin-top: .1rem;
  display: flex;
  gap: .2rem;
  position: relative;
  z-index: 2;
}
.mhead .stat b { color: #FFC98A; font-weight: 700; }

/* 公告条 */
.notice {
  margin: .16rem .24rem;
  background: #FFF8E8;
  border-radius: var(--r-m);
  padding: .14rem .2rem;
  font-size: var(--fs-s);
  color: #9A6B00;
  display: flex;
  gap: .1rem;
  line-height: 1.5;
}

/* =====================================================================
 * 商品（左分类 + 右列表）
 * ===================================================================== */
.cat-wrap {
  display: flex;
  background: #fff;
  margin: 0 .24rem;
  border-radius: var(--r-l);
  overflow: hidden;
  min-height: 8rem;
}
.catside {
  width: 1.64rem;
  flex: none;
  background: #F7F8F9;
  overflow-y: auto;
  scrollbar-width: none;
}
.catside::-webkit-scrollbar { display: none; }
.catside .c {
  padding: .28rem .12rem;
  font-size: var(--fs-m);
  color: var(--t2);
  text-align: center;
  position: relative;
  line-height: 1.35;
}
.catside .c.on { background: #fff; color: var(--primary); font-weight: 700; }
.catside .c.on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: .06rem;
  height: .32rem;
  background: var(--primary);
  border-radius: 0 .06rem .06rem 0;
}
.glist { flex: 1; min-width: 0; padding: .16rem .2rem; }
.gcat {
  font-size: var(--fs-m);
  color: var(--t3);
  margin: .12rem 0 .16rem;
  font-weight: 600;
}
.gitem { display: flex; gap: .18rem; margin-bottom: .28rem; }
.gitem .gimg { width: 1.48rem; height: 1.48rem; border-radius: var(--r-m); font-size: .56rem; }
.gitem .gnm { font-size: var(--fs-l); font-weight: 600; line-height: 1.3; }
.gitem .gdesc {
  font-size: var(--fs-s);
  color: var(--t3);
  margin-top: .06rem;
  line-height: 1.4;
}
.gitem .gfoot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: .1rem;
}
.gitem.soldout .gimg { filter: grayscale(1); opacity: .6; }
.gitem.soldout .gnm { color: var(--t3); }

/* 数量步进器 */
.stepper { display: flex; align-items: center; gap: .1rem; }
.stepper .num {
  min-width: .36rem;
  text-align: center;
  font-size: var(--fs-l);
  font-weight: 600;
}
.stepper .minus {
  width: .44rem;
  height: .44rem;
  border-radius: 50%;
  border: 1px solid var(--primary);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  line-height: 1;
  background: #fff;
}
.stepper .minus.dis { border-color: var(--t4); color: var(--t4); }

/* =====================================================================
 * 订单卡片
 * ===================================================================== */
.ocard {
  background: #fff;
  border-radius: var(--r-l);
  margin: 0 .24rem .2rem;
  overflow: hidden;
}
.ocard .oh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .24rem .24rem .16rem;
}
.ocard .ostatus { font-size: var(--fs-n); font-weight: 600; color: var(--primary); }
.ocard .ostatus.done { color: var(--success); }
.ocard .ostatus.cancel { color: var(--t3); }
.ocard .shop {
  display: flex;
  align-items: center;
  gap: .08rem;
  font-size: var(--fs-l);
  font-weight: 600;
  padding: 0 .24rem .16rem;
}
.ocard .goods {
  display: flex;
  gap: .18rem;
  padding: 0 .24rem .2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ocard .goods::-webkit-scrollbar { display: none; }
.ocard .goods .g {
  width: 1.4rem;
  flex: none;
}
.ocard .goods .g .im {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--r-m);
  font-size: .48rem;
}
.ocard .goods .g .nm {
  font-size: var(--fs-s);
  color: var(--t2);
  margin-top: .06rem;
  text-align: center;
}
.ocard .ofoot {
  padding: .2rem .24rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .16rem;
}
.ocard .oacts { display: flex; gap: .16rem; flex: none; }

/* 订单状态条（详情页） */
.ostatus-bar {
  background: var(--grad-hero);
  color: #fff;
  padding: .32rem .28rem .4rem;
}
.ostatus-bar .st { font-size: var(--fs-4xl); font-weight: 700; }
.ostatus-bar .sb2 { font-size: var(--fs-n); opacity: .9; margin-top: .1rem; }

/* 时间线 */
.timeline { padding: .24rem; }
.timeline .tl {
  display: flex;
  gap: .2rem;
  position: relative;
  padding-bottom: .32rem;
}
.timeline .tl:last-child { padding-bottom: 0; }
.timeline .tl::before {
  content: "";
  position: absolute;
  left: .11rem;
  top: .28rem;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline .tl:last-child::before { display: none; }
.timeline .tl .pt {
  width: .22rem;
  height: .22rem;
  border-radius: 50%;
  background: var(--line);
  flex: none;
  margin-top: .08rem;
  position: relative;
  z-index: 1;
}
.timeline .tl.on .pt { background: var(--primary); }
.timeline .tl .tc { flex: 1; min-width: 0; }
.timeline .tl .tt { font-size: var(--fs-n); color: var(--t1); }
.timeline .tl .tm { font-size: var(--fs-s); color: var(--t3); margin-top: .04rem; }

/* =====================================================================
 * 空状态
 * ===================================================================== */
.empty {
  padding: 1.6rem .4rem;
  text-align: center;
  color: var(--t3);
}
.empty .ico { font-size: 1.2rem; opacity: .35; }
.empty .et { font-size: var(--fs-l); margin-top: .2rem; color: var(--t2); }
.empty .es { font-size: var(--fs-m); margin-top: .08rem; }
.empty .ebtn { margin-top: .32rem; display: flex; justify-content: center; }

/* 列表加载态 */
.loadmore {
  text-align: center;
  font-size: var(--fs-m);
  color: var(--t3);
  padding: .32rem 0 .4rem;
}

/* =====================================================================
 * 弹层 / 抽屉
 * ===================================================================== */
.mask {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, .45);
  z-index: 100;
  opacity: 0;
  transition: opacity .22s;
}
.mask.show { opacity: 1; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  max-width: 7.5rem;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--r-l) var(--r-l) 0 0;
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.sheet.show { transform: translateY(0); }
.sheet .sh {
  padding: .28rem .28rem .16rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}
.sheet .sh .st { font-size: var(--fs-2xl); font-weight: 700; }
.sheet .sh .close { font-size: .4rem; color: var(--t3); line-height: 1; }
.sheet .sbody { overflow-y: auto; flex: 1; min-height: 0; }
.sheet .sfoot {
  flex: none;
  padding: .2rem .24rem calc(.2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

/* =====================================================================
 * Toast / Loading
 * ===================================================================== */
.toast {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 200;
  background: rgba(20, 24, 30, .86);
  color: #fff;
  font-size: var(--fs-l);
  padding: .2rem .32rem;
  border-radius: var(--r-m);
  max-width: 5.6rem;
  text-align: center;
  line-height: 1.45;
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

.loading {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .01);
}
.loading .box {
  background: rgba(20, 24, 30, .82);
  border-radius: var(--r-l);
  padding: .32rem .36rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
}
.loading .spin {
  width: .56rem;
  height: .56rem;
  border: .05rem solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loading .spin { animation-duration: 2s; }
}
.loading .lt { color: #fff; font-size: var(--fs-n); }

/* =====================================================================
 * 表单
 * ===================================================================== */
.field {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .26rem .24rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.field:last-child { border-bottom: 0; }
.field .fl {
  width: 1.6rem;
  flex: none;
  font-size: var(--fs-l);
  color: var(--t1);
}
.field input {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-l);
}
.field .fr { flex: none; font-size: var(--fs-n); color: var(--t3); }
.field.link::after {
  content: "›";
  font-size: .36rem;
  color: var(--t4);
  margin-left: .08rem;
}

.switch {
  width: .86rem;
  height: .48rem;
  border-radius: var(--r-full);
  background: var(--t4);
  position: relative;
  transition: background .2s;
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  top: .04rem;
  left: .04rem;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(.38rem); }

/* =====================================================================
 * 地址 / 优惠券
 * ===================================================================== */
.addr-item {
  background: #fff;
  padding: .28rem .24rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: .2rem;
  align-items: flex-start;
}
.addr-item .ai { flex: 1; min-width: 0; }
.addr-item .an { font-size: var(--fs-xl); font-weight: 600; }
.addr-item .ap { font-size: var(--fs-n); color: var(--t2); margin-left: .12rem; }
.addr-item .ad {
  font-size: var(--fs-n);
  color: var(--t2);
  margin-top: .08rem;
  line-height: 1.5;
}
.addr-item .edit { flex: none; color: var(--t3); font-size: .36rem; padding-left: .16rem; }

/* 优惠券 */
.coupon {
  display: flex;
  background: #fff;
  border-radius: var(--r-l);
  margin: 0 .24rem .2rem;
  overflow: hidden;
  position: relative;
}
.coupon .left {
  width: 2.6rem;
  flex: none;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .28rem .12rem;
  position: relative;
}
.coupon .left .v { font-size: var(--fs-5xl); font-weight: 700; line-height: 1; }
.coupon .left .v small { font-size: var(--fs-l); font-weight: 600; }
.coupon .left .c { font-size: var(--fs-s); margin-top: .08rem; }
.coupon .right { flex: 1; min-width: 0; padding: .28rem .24rem; }
.coupon .right .cn { font-size: var(--fs-xl); font-weight: 600; }
.coupon .right .cd { font-size: var(--fs-s); color: var(--t3); margin-top: .08rem; }
.coupon.used .left { background: #F2F3F5; color: var(--t3); }
.coupon.used .right .cn { color: var(--t3); }
.coupon .pick {
  position: absolute;
  right: .24rem;
  top: 50%;
  transform: translateY(-50%);
  width: .44rem;
  height: .44rem;
  border-radius: 50%;
  border: 1px solid var(--t4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-m);
  color: transparent;
}
.coupon.on .pick { background: var(--primary); border-color: var(--primary); color: #fff; }

/* =====================================================================
 * 骑手端：接单大厅
 * ===================================================================== */
.rider-bar {
  background: var(--grad-hero);
  padding: .24rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 60;
}
.rider-bar .rs { font-size: var(--fs-m); opacity: .9; }
.rider-bar .rn { font-size: var(--fs-5xl); font-weight: 700; margin-top: .06rem; }
.rider-bar .rn small { font-size: var(--fs-l); font-weight: 600; }
.rider-bar .toggle {
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  height: .68rem;
  padding: 0 .28rem;
  border-radius: var(--r-full);
  font-size: var(--fs-l);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .08rem;
}
.rider-bar .toggle.off { background: rgba(255, 255, 255, .12); }

/* 大厅订单卡 */
.hcard {
  background: #fff;
  border-radius: var(--r-l);
  margin: 0 .24rem .2rem;
  padding: .24rem;
  position: relative;
  overflow: hidden;
}
.hcard.strong { border: 1px solid var(--primary); }
.hcard .hh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .16rem;
}
.hcard .route { display: flex; flex-direction: column; gap: .1rem; }
.hcard .rp { display: flex; align-items: flex-start; gap: .1rem; font-size: var(--fs-l); }
.hcard .rp .ic {
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: #fff;
  margin-top: .04rem;
}
.hcard .rp.from .ic { background: var(--primary); }
.hcard .rp.to .ic { background: var(--success); }
.hcard .rp .rt { flex: 1; min-width: 0; line-height: 1.4; }
.hcard .rp .rt .s { font-size: var(--fs-s); color: var(--t3); }
.hcard .hfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .2rem;
  padding-top: .2rem;
  border-top: 1px dashed var(--line);
}
.hcard .grab {
  background: var(--grad-btn);
  color: #fff;
  height: .72rem;
  padding: 0 .48rem;
  border-radius: var(--r-full);
  font-size: var(--fs-2xl);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.hcard .grab:active { opacity: .85; }
.hcard .cd {
  position: absolute;
  right: .24rem;
  top: .24rem;
  font-size: var(--fs-s);
  color: var(--t3);
  font-variant-numeric: tabular-nums;
}
.hcard .cd.urgent { color: var(--danger); font-weight: 600; }

/* 任务卡（我的任务） */
.tcard {
  background: #fff;
  border-radius: var(--r-l);
  margin: 0 .24rem .2rem;
  padding: .24rem;
}
.tcard .th {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .16rem;
}
.tcard .row2 {
  display: flex;
  align-items: flex-start;
  gap: .12rem;
  font-size: var(--fs-n);
  color: var(--t2);
  line-height: 1.5;
  margin-bottom: .1rem;
}
.tcard .row2 .lb {
  flex: none;
  width: 1.12rem;
  color: var(--t3);
  font-size: var(--fs-m);
}
.tcard .tfoot {
  display: flex;
  gap: .16rem;
  margin-top: .2rem;
  padding-top: .2rem;
  border-top: 1px solid var(--line);
}
.tcard .tfoot .btn { flex: 1; }

/* Tab 切换 */
.tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 55;
}
.tabs .tb {
  flex: 1;
  text-align: center;
  padding: .24rem 0;
  font-size: var(--fs-l);
  color: var(--t2);
  position: relative;
}
.tabs .tb.on { color: var(--primary); font-weight: 700; }
.tabs .tb.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: .56rem;
  height: .06rem;
  border-radius: .03rem;
  background: var(--primary);
}

/* =====================================================================
 * 金额行
 * ===================================================================== */
.amt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-n);
  color: var(--t2);
  padding: .1rem 0;
}
.amt-row .v { color: var(--t1); font-variant-numeric: tabular-nums; }
.amt-row.total { font-size: var(--fs-2xl); color: var(--t1); font-weight: 700; }
.amt-row.total .v { color: var(--primary); font-size: var(--fs-4xl); }
.amt-row .minus { color: var(--primary); }

/* =====================================================================
 * 配送进度条（订单详情）
 * ===================================================================== */
.progress {
  display: flex;
  align-items: center;
  padding: .32rem .28rem;
  background: #fff;
}
.progress .ps { flex: 1; text-align: center; position: relative; }
.progress .ps .pd {
  width: .2rem;
  height: .2rem;
  border-radius: 50%;
  background: var(--line);
  margin: 0 auto .1rem;
  position: relative;
  z-index: 2;
}
.progress .ps.done .pd { background: var(--primary); }
.progress .ps .pt { font-size: var(--fs-s); color: var(--t3); }
.progress .ps.done .pt { color: var(--primary); }
.progress .ps::before {
  content: "";
  position: absolute;
  top: .09rem;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--line);
  z-index: 1;
}
.progress .ps:first-child::before { display: none; }
.progress .ps.done::before { background: var(--primary); }