/* =====================================================================
 * 丰宁夜市跑腿 —— WAP 基础样式
 * 依赖 tokens.css
 * ===================================================================== */

/* 1rem = 100rpx；375px 视口下 1rem = 50px，与小程序 rpx 逐行对照 */
html {
  font-size: calc(100vw / 7.5);
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0 auto;
  max-width: 7.5rem;          /* 超宽屏（PC 浏览器）限制宽度，保持手机观感 */
  min-height: 100%;
  background: var(--bg);
  color: var(--t1);
  font-size: var(--fs-l);
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overscroll-behavior-y: none;
}

/* ---------- 元素重置 ---------- */
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; border: 0; }
input, textarea, button, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: 0;
  outline: 0;
  background: none;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--t3); }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
table { border-collapse: collapse; }

/* ---------- 页面骨架 ---------- */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 固定顶部导航 */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--h-nav);
  display: flex;
  align-items: center;
  padding: 0 .28rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xl);
  font-weight: 600;
}
.nav .back {
  width: .56rem;
  font-size: .38rem;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
}
.nav .title { flex: 1; text-align: center; }
.nav .right { width: .56rem; text-align: right; font-size: .36rem; }
.nav.on-grad {
  background: transparent;
  border-bottom: 0;
  color: #fff;
}

/* 可滚动主体 */
.main {
  flex: 1;
  min-height: 0;
}
/* 有底部 tabBar 时留出空间 */
.main.has-tabbar { padding-bottom: calc(var(--h-tabbar) + env(safe-area-inset-bottom)); }

/* ---------- 安全区适配 ---------- */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-top    { padding-top: env(safe-area-inset-top); }

/* 底部固定操作栏 */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  max-width: 7.5rem;
  margin: 0 auto;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: .2rem .24rem calc(.2rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: .2rem;
}

/* ---------- 底部 tabBar ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  max-width: 7.5rem;
  margin: 0 auto;
  height: calc(var(--h-tabbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  display: flex;
}
.tabbar .t {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .04rem;
  font-size: var(--fs-xs);
  color: var(--t3);
  position: relative;
}
.tabbar .t.on { color: var(--primary); font-weight: 600; }
.tabbar .t svg { width: .44rem; height: .44rem; }
.tabbar .badge {
  position: absolute;
  top: .1rem;
  left: 50%;
  transform: translateX(.06rem);
  background: var(--danger);
  color: #fff;
  font-size: .18rem;
  min-width: .3rem;
  height: .3rem;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .06rem;
  font-weight: 600;
}

/* ---------- 工具类 ---------- */
.row      { display: flex; align-items: center; }
.between  { display: flex; align-items: center; justify-content: space-between; }
.center   { display: flex; align-items: center; justify-content: center; }
.col      { display: flex; flex-direction: column; }
.grow     { flex: 1; min-width: 0; }
.flexnone { flex: none; }
.wrap     { flex-wrap: wrap; }

.gap4  { gap: .08rem; }  .gap6  { gap: .12rem; }  .gap8  { gap: .16rem; }
.gap10 { gap: .2rem; }   .gap12 { gap: .24rem; }

.mt4  { margin-top: .08rem; }  .mt6  { margin-top: .12rem; }
.mt8  { margin-top: .16rem; }  .mt10 { margin-top: .2rem; }
.mt12 { margin-top: .24rem; }  .mt16 { margin-top: .32rem; }

.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ell2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hidden { display: none !important; }

/* 文字层级 */
.t1 { color: var(--t1); }  .t2 { color: var(--t2); }  .t3 { color: var(--t3); }
.f10 { font-size: var(--fs-xs); }  .f11 { font-size: var(--fs-s); }
.f12 { font-size: var(--fs-m); }   .f13 { font-size: var(--fs-n); }
.f14 { font-size: var(--fs-l); }   .f15 { font-size: var(--fs-xl); }
.f16 { font-size: var(--fs-2xl); } .f17 { font-size: var(--fs-3xl); }
.f20 { font-size: var(--fs-4xl); }
.b6 { font-weight: 600; }  .b7 { font-weight: 700; }

.price { color: var(--primary); font-weight: 700; }
.price small { font-size: var(--fs-s); font-weight: 600; }

.line { height: 1px; background: var(--line); }
.dash { border-top: 1px dashed var(--line); }

/* 加载/空态骨架 */
.skeleton {
  background: linear-gradient(90deg, #F0F1F3 25%, #F7F8F9 37%, #F0F1F3 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: var(--r-m);
}
@keyframes skeleton {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* 图片占位（原型 .ph 系列） */
.ph {
  background: linear-gradient(135deg, #FFE0CF, #FFC7A6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .52rem;
  flex: none;
  overflow: hidden;
}
.ph.g2 { background: linear-gradient(135deg, #D9E8FF, #B9D2F7); }
.ph.g3 { background: linear-gradient(135deg, #FFEFC2, #FFD98A); }
.ph.g4 { background: linear-gradient(135deg, #E2F5E9, #BEE8CE); }
.ph.g5 { background: linear-gradient(135deg, #F2E4FF, #DCC4F7); }
.ph.g6 { background: linear-gradient(135deg, #FFE3E3, #FFC9C9); }

.r8  { border-radius: var(--r-m); }
.r10 { border-radius: .2rem; }
.r12 { border-radius: var(--r-l); }
.circle { border-radius: 50%; }

/* 转义：防止长数字/长词撑破布局 */
.break { word-break: break-all; }

/* =====================================================================
 * 内联 SVG 图标
 * 图标由 PHP 的 icon() 输出，不带尺寸，统一在这里控制
 * ===================================================================== */
/*
 * 默认尺寸必须有。
 * 内联 <svg> 只写了 viewBox、没写 width/height 时，浏览器会按替换元素的
 * 默认尺寸 300×150 渲染 —— 漏配尺寸的图标会变成巨大一块（首页定位图标就中过这个坑）。
 * 这里给一个兜底默认值，具体场景再用更具体的选择器覆盖。
 */
svg { display: block; flex: none; width: .36rem; height: .36rem; }

.nav .back svg { width: .4rem; height: .4rem; }
.tabbar .t svg { width: .44rem; height: .44rem; }
.empty .ico-svg { width: 1.2rem; height: 1.2rem; margin: 0 auto; color: var(--t4); }
.btn svg { width: .32rem; height: .32rem; }
.searchbar svg { width: .32rem; height: .32rem; }
.sec-head .more svg { width: .26rem; height: .26rem; }

/*
 * 图标居中工具类。
 * 因为 svg 默认是 display:block（块级），父级的 text-align:center 对它无效 ——
 * 图标会贴在左边、和下面的居中文字对不齐。需要居中时套这个类。
 */
.icon-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 按场景微调 ---- */
.hero .loc svg { width: .32rem; height: .32rem; }
.mhead .stat svg { width: .26rem; height: .26rem; }
.rider-bar svg { width: .3rem; height: .3rem; }
.faq-arrow svg { width: .26rem; height: .26rem; }
.field svg { width: .3rem; height: .3rem; }
.ocard svg, .tcard svg, .hcard svg { width: .3rem; height: .3rem; }
.card .row > svg { width: .3rem; height: .3rem; }
.notice svg { width: .28rem; height: .28rem; flex: none; margin-top: .04rem; }
.gfoot svg, .hfoot svg { width: .3rem; height: .3rem; }

/* =====================================================================
 * 桌面端钳制
 * 手机上 1rem = 100rpx = 视口宽度的 1/7.5；但桌面 1920px 视口会让字号
 * 放大到 256px。因此宽屏下固定按 375px 视口渲染，并给一个手机外框，
 * 这样在 PC 浏览器里也能看到与真机一致的观感，方便对照原型验收。
 * ===================================================================== */
@media (min-width: 480px) {
  html { font-size: 50px; }              /* 等效 375px 视口 */
  body {
    max-width: 7.5rem;                   /* 375px */
    min-height: 100vh;
    box-shadow: 0 0 0 1px var(--line), 0 .16rem .8rem rgba(20, 24, 30, .08);
    background: var(--card);
  }
  /* 页面主体在桌面保持灰底，避免整页发白 */
  .page { background: var(--bg); }
}