/* ==========================================================================
   星野社驿站 · H5 APP 设计系统 (app-ui.css)
   在既有内联样式之后加载，用于统一升级 UI / 布局 / 风格 / 交互 / 动画。
   设计原则：原生 APP 观感、8px 栅格、单一主色 + 中性灰阶、克制的动效。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌 Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* 品牌主色（沿用橙色，补齐色阶，用于层次表达） */
  --brand-50:  #fff8ef;
  --brand-100: #ffeed6;
  --brand-200: #ffdcaa;
  --brand-300: #fcc46e;
  --brand-400: #f8b043;
  --brand-500: #f5a623;   /* 主色 */
  --brand-600: #e0910f;
  --brand-700: #b8740b;
  --brand: var(--brand-500);
  --brand-grad: linear-gradient(135deg, #ffb63f 0%, #f5a623 55%, #e8940f 100%);
  --brand-glow: 0 8px 24px -6px rgba(245, 166, 35, .45);

  /* 中性色阶 */
  --ink-900: #101828;
  --ink-800: #1e2b3a;
  --ink-700: #344054;
  --ink-600: #475467;
  --ink-500: #667085;
  --ink-400: #98a2b3;
  --ink-300: #d0d5dd;
  --ink-200: #e4e7ec;
  --ink-100: #f2f4f7;
  --ink-50:  #f8fafc;

  /* 语义色 */
  --success: #12b76a;
  --success-bg: #e7f8f0;
  --warning: #f79009;
  --warning-bg: #fff6e5;
  --danger: #f04438;
  --danger-bg: #feeceb;
  --info: #2e90fa;
  --info-bg: #e8f2ff;

  /* 表面与背景 */
  --bg-app: #f4f6f9;
  --surface: #ffffff;
  --surface-sunken: #f8fafc;
  --hairline: rgba(16, 24, 40, .07);

  /* 阴影层级：层级越高越"浮" */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 2px 8px -2px rgba(16, 24, 40, .08);
  --shadow-md: 0 6px 18px -6px rgba(16, 24, 40, .12);
  --shadow-lg: 0 14px 34px -10px rgba(16, 24, 40, .16);
  --shadow-xl: 0 24px 60px -16px rgba(16, 24, 40, .22);

  /* 圆角 */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* 间距（8px 栅格） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* 动效曲线与时长 */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .16s;
  --t-base: .26s;
  --t-slow: .42s;

  /* 安全区 */
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);

  /* 底部导航高度（供内容避让） */
  --navbar-h: 58px;
  --z-nav: 99;
  --z-fab: 98;
  --z-sheet: 200;
  --z-modal: 1000;
  --z-toast: 10050;
}

/* --------------------------------------------------------------------------
   2. 全局基座：字体渲染 / 触感 / 滚动
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg-app);
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: .01em;
}

/* 去掉移动端点击高亮，交互反馈交由我们自己控制 */
a, button, .nav-item, .product-card, .category-item, .store-item,
.rent-btn, .cart-fab, .days-btn, .change-btn, .tab-nav-item {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* 可交互元素统一禁止误选中（输入类除外） */
.nav-item, .category-item, .rent-btn, .cart-fab,
.days-btn, .tab-nav-item, .change-btn {
  user-select: none;
  -webkit-user-select: none;
}

input, textarea, select { font-size: 16px; } /* iOS 聚焦不缩放 */

/* 键盘可达性：统一焦点环，鼠标点击不显示、键盘 Tab 才显示 */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   3. App 容器与页面转场
   -------------------------------------------------------------------------- */
.app {
  background: var(--bg-app);
}

.page-container {
  padding-bottom: calc(var(--navbar-h) + var(--sa-bottom) + 12px);
  scroll-behavior: smooth;
}

/* 页面进入动画：轻微上浮 + 淡入，模拟原生 push 转场 */
.page.active {
  animation: pageIn var(--t-slow) var(--ease-out) both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* 页面内元素依次入场（由 JS 给子项加 .stagger-item） */
.stagger-item {
  animation: staggerIn .5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes staggerIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   4. 启动页 Splash
   -------------------------------------------------------------------------- */
.startup-overlay {
  background: radial-gradient(120% 90% at 50% 0%, #fff6e8 0%, var(--bg-app) 60%);
  gap: 6px;
  transition: opacity var(--t-slow) var(--ease-out), visibility var(--t-slow);
}

.startup-overlay > i.fa-campground {
  animation: splashPop .7s var(--ease-spring) both, splashFloat 2.8s ease-in-out .7s infinite;
  filter: drop-shadow(0 10px 20px rgba(245, 166, 35, .3));
}

.startup-overlay > div {
  animation: staggerIn .55s var(--ease-out) .14s both;
  letter-spacing: .12em;
}

.startup-overlay > i.fa-spinner {
  animation: fadeIn .4s var(--ease-out) .3s both, fa-spin 1s linear infinite;
  opacity: .85;
}

@keyframes splashPop {
  from { opacity: 0; transform: scale(.6) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes splashFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   5. 卡片
   -------------------------------------------------------------------------- */
.card-white {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   6. 门店卡片 Store Locator
   -------------------------------------------------------------------------- */
.store-locator {
  background:
    linear-gradient(180deg, #fffdf9 0%, #ffffff 42%);
  border: 1px solid rgba(245, 166, 35, .16);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* 卡片左侧品牌色装饰条，强化视觉锚点 */
.store-locator::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-grad);
}

.store-title-row h3 {
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink-900);
}

.change-btn {
  background: var(--brand-50);
  border: 1px solid rgba(245, 166, 35, .22);
  font-weight: 600;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

.change-btn:active { transform: scale(.94); background: var(--brand-100); }

.change-btn i {
  transition: transform var(--t-base) var(--ease-out);
}

/* 门店列表展开时箭头翻转 */
.change-btn.is-open i { transform: rotate(180deg); }

.business-hours, .store-phone, .store-cs, .store-address {
  color: #f5a623;
  font-size: 12.5px;
}

.business-hours i, .store-phone i, .store-cs i, .store-address i {
  color: #f5a623;
  opacity: .9;
}

/* 门店选择弹窗（移动端优先：从顶部滑入、左右留 1% 间隙、四角圆角） */
.store-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
  z-index: 1090;
}
.store-sheet-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
}

.store-sheet {
  position: fixed;
  left: 50%;
  /* 顶部留安全区间隙，避免贴死状态栏 */
  top: max(12px, env(safe-area-inset-top));
  z-index: 1100;
  display: flex;
  flex-direction: column;
  /* 移动端左右各留约 1% 间隙 (width 98% + 居中) */
  width: 98%;
  max-width: 480px;
  max-height: calc(92vh - env(safe-area-inset-top));
  background: var(--surface);
  /* 贴边圆角化：四角统一大圆角 */
  border-radius: var(--r-xl);
  box-shadow: 0 12px 40px rgba(16, 24, 40, .18);
  /* 从顶部滑入（translateX(-50%) 保持水平居中） */
  transform: translate(-50%, -120%);
  transition: transform var(--t-base) var(--ease-out);
  overflow: hidden;
}
.store-sheet.is-open {
  transform: translate(-50%, 0);
}

.store-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 触摸友好内边距，随屏幕缩放 */
  padding: clamp(12px, 3.5vw, 16px) clamp(14px, 4vw, 18px) clamp(10px, 3vw, 14px);
  border-bottom: 1px solid var(--hairline);
}

.store-sheet-title-wrap h3 {
  margin: 0;
  /* 标题：降低4个字号，移动端偏大，桌面端收敛 */
  font-size: clamp(11px, 3vw, 14px);
  font-weight: 400;
  color: var(--ink-900);
  line-height: 1.3;
}

.store-sheet-count {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: clamp(11px, 3vw, 13px);
  font-weight: 400;
  color: var(--brand);
  background: var(--brand-50);
}


.store-items {
  flex: 1;
  overflow-y: auto;
  /* 默认展示约4家门店，其余滚动 */
  max-height: calc((56px + 6px) * 4);
  padding: clamp(4px, 1.5vw, 8px) clamp(6px, 2vw, 10px) clamp(8px, 2.5vw, 12px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.store-item {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 12px);
  padding: 8px clamp(10px, 3vw, 14px);
  margin-bottom: 6px;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.store-item:hover { background: var(--ink-100); }
.store-item:active { background: var(--ink-200); transform: scale(.995); }
.store-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.store-item.active {
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .25);
}
.store-item.store-closed { opacity: .65; }

.store-item-radio {
  width: clamp(20px, 5vw, 24px);
  height: clamp(20px, 5vw, 24px);
  border-radius: 50%;
  border: 2px solid var(--ink-300);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-400);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.store-item.active .store-item-radio {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.store-item-radio i { font-size: clamp(11px, 3vw, 13px); }

.store-item-radio-dot {
  width: clamp(7px, 2vw, 9px);
  height: clamp(7px, 2vw, 9px);
  background: #fff;
  border-radius: 50%;
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease-out);
}
.store-item.active .store-item-radio-dot { transform: scale(1); }

.store-item-body {
  flex: 1;
  min-width: 0;
}

.store-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.store-item-name {
  margin: 0;
  /* 店名降低2个字号，随屏幕缩放，移动端易读 */
  font-size: clamp(12px, 3.5vw, 14px);
  font-weight: 400;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-status {
  flex-shrink: 0;
  font-size: clamp(10px, 2.8vw, 12px);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 400;
}
.store-status.open { background: var(--success-bg); color: var(--success); }
.store-status.closed { background: var(--danger-bg); color: var(--danger); }

.store-item-address {
  margin: 0;
  font-size: clamp(11px, 3vw, 13px);
  color: var(--ink-500);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.store-item-arrow {
  color: var(--ink-400);
  font-size: clamp(12px, 3vw, 14px);
  flex-shrink: 0;
}

.store-sheet-footer {
  padding: clamp(10px, 3vw, 14px) clamp(12px, 4vw, 16px) calc(clamp(12px, 3.5vw, 16px) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}

#locateStoreBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 定位按钮高度降低3，文字一同降低 */
  min-height: clamp(43px, 6.5vw, 49px);
  padding: 10px 16px;
  background: var(--brand-grad);
  color: #fff;
  border: none;
  border-radius: var(--r-lg);
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--brand-glow);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
#locateStoreBtn:hover { box-shadow: 0 10px 28px -8px rgba(245, 166, 35, .55); filter: brightness(1.03); }
#locateStoreBtn:active { transform: scale(.98); }
#locateStoreBtn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* 尊重用户的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .store-sheet-backdrop,
  .store-sheet {
    transition: opacity var(--t-fast);
  }
  .store-sheet { transform: translate(-50%, 0); }
}

/* --------------------------------------------------------------------------
   7. 分类侧栏 Category Sidebar
   -------------------------------------------------------------------------- */
.cat-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: calc(100vh - var(--navbar-h) - 40px);
  overflow-y: auto;
  padding: 4px 0;
  overscroll-behavior: contain;
}

.category-item {
  position: relative;
  font-weight: 500;
  transition: color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.category-item:active { transform: scale(.95); }

.category-item.active {
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(245, 166, 35, .18);
}

/* 选中分类的左侧指示条 */
.category-item.active::before {
  content: '';
  position: absolute;
  left: -1px; top: 50%;
  width: 3px; height: 20px;
  margin-top: -10px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-grad);
  animation: indicatorIn var(--t-base) var(--ease-spring) both;
}

@keyframes indicatorIn {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.cat-icon {
  transition: transform var(--t-base) var(--ease-spring),
              background var(--t-base) var(--ease-out);
}

.category-item.active .cat-icon {
  transform: scale(1.06);
  box-shadow: 0 4px 10px -3px rgba(245, 166, 35, .38);
}

/* --------------------------------------------------------------------------
   8. 搜索栏
   -------------------------------------------------------------------------- */
.goods-search {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.goods-search:focus-within {
  border-color: var(--brand-300);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .12);
}

.goods-search:focus-within i { color: var(--brand); }

.goods-search input { font-size: 14px; }
.goods-search input::placeholder { color: var(--ink-400); }

.goods-search button {
  background: var(--brand-grad);
  font-weight: 600;
  box-shadow: 0 3px 10px -3px rgba(245, 166, 35, .5);
  transition: transform var(--t-fast) var(--ease-out);
}

.goods-search button:active { transform: scale(.94); }

/* --------------------------------------------------------------------------
   9. 商品卡片 Product Card
   -------------------------------------------------------------------------- */
.product-card {
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
  will-change: transform;
}

.product-card:active {
  transform: scale(.975);
  box-shadow: var(--shadow-xs);
}

.product-img {
  position: relative;
  background: linear-gradient(135deg, var(--ink-50), var(--ink-100));
}

.product-img img {
  transition: transform var(--t-slow) var(--ease-out);
}

.product-card:active .product-img img { transform: scale(1.05); }

/* 图片加载淡入 */
.product-img img[data-loaded="1"] { animation: fadeIn var(--t-base) var(--ease-out) both; }

/* 售罄遮罩 */
.product-card.is-soldout .product-img::after {
  content: '暂时售罄';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 24, 40, .45);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.price small { font-weight: 500; color: var(--ink-400); font-size: 11px; }

.rent-btn {
  background: var(--brand-grad);
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 3px 10px -4px rgba(245, 166, 35, .55);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

.rent-btn:active {
  transform: scale(.96);
  box-shadow: 0 1px 4px -2px rgba(245, 166, 35, .5);
}

/* 加入购物车成功的一次性反馈 */
.rent-btn.is-added {
  animation: btnPulse .5s var(--ease-spring);
}

@keyframes btnPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.goods-footer { letter-spacing: .08em; color: var(--ink-400); }

/* 骨架屏：数据未就绪时的占位，避免布局跳动 */
.sk {
  position: relative;
  overflow: hidden;
  background: var(--ink-100);
  border-radius: var(--r-sm);
}

.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer { to { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   10. 底部导航 Bottom Nav（毛玻璃 + 滑动指示器）
   -------------------------------------------------------------------------- */
.bottom-nav {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -6px 24px -10px rgba(16, 24, 40, .14);
  padding: 6px 0 calc(8px + var(--sa-bottom));
}

.nav-item {
  position: relative;
  flex: 1;
  gap: 3px;
  padding: 5px 2px;
  transition: color var(--t-base) var(--ease-out);
}

.nav-item i {
  font-size: 19px;
  transition: transform var(--t-base) var(--ease-spring);
}

.nav-item span { font-size: 10.5px; letter-spacing: .01em; }

/* 激活态：图标上跳 + 顶部小圆点指示器 */
.nav-item.active i { transform: translateY(-2px) scale(1.1); }

.nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 18px; height: 3px;
  margin-left: -9px;
  border-radius: var(--r-full);
  background: var(--brand-grad);
  animation: indicatorSlide var(--t-base) var(--ease-spring) both;
}

@keyframes indicatorSlide {
  from { opacity: 0; transform: scaleX(.2); }
  to   { opacity: 1; transform: scaleX(1); }
}

.nav-item:active i { transform: scale(.88); }

/* 导航红点（如未读消息） */
.nav-item .nav-dot {
  position: absolute;
  top: 3px;
  right: 50%;
  margin-right: -16px;
  min-width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--danger);
  box-shadow: 0 0 0 2px #fff;
}

/* --------------------------------------------------------------------------
   11. 购物车 FAB 与抽屉（设计优化：长方形圆角图标+文字，贴右下角保留间隙）
   -------------------------------------------------------------------------- */
.cart-fab {
  right: 16px; /* 边界间隙保留 */
  bottom: calc(var(--navbar-h) + var(--sa-bottom) + 22px);
  background: var(--brand-grad);
  border-radius: 14px;
  box-shadow: var(--brand-glow), 0 2px 6px rgba(16, 24, 40, .12);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out);
  animation: fabIn var(--t-slow) var(--ease-spring) both;
}

@keyframes fabIn {
  from { opacity: 0; transform: scale(.5) translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.cart-fab:active { transform: scale(.94); }

/* 加入购物车时 FAB 抖动提示 */
.cart-fab.is-bump { animation: fabBump .5s var(--ease-spring); }

@keyframes fabBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16) rotate(-6deg); }
  70%  { transform: scale(.96) rotate(3deg); }
  100% { transform: scale(1); }
}

/* FAB 内部结构：图标 + 文字纵向排列，角标定位需要相对容器 */
.cart-fab { position: relative; }

/* FAB 数量角标 */
.cart-fab .cart-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  animation: badgePop var(--t-base) var(--ease-spring) both;
}

@keyframes badgePop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* 抽屉遮罩：与面板联动 */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
  z-index: calc(var(--z-sheet) - 1);
}

.sheet-backdrop.show { opacity: 1; visibility: visible; }
/* ==========================================================================
   购物车面板（重设计）
   - 卡片化分区：商品 / 租赁天数 / 取货方式 / 费用结算
   - 顶部吸顶，底部吸附，区分区之间留呼吸感
   ========================================================================== */

/* 面板容器：与 header.php 的全屏 fixed 抽屉样式互补，只补充 flex 布局与隐藏溢出 */
.cart-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

/* 可滚动主体：占满 header 与 footer 之间的剩余空间 */
.cart-body {
  flex: 1;
  /* 关键：允许 flex 子项收缩到小于内容高度，否则内容超出时会被父级 overflow:hidden 裁掉而无法滚动 */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 顶部 Header：标题 + 关闭 ---------- */
.cart-header {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 18px 16px 10px;
  background: var(--surface);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}



.cart-header-left,
.cart-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cart-header-right { margin-left: auto; }

.cart-header-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.cart-header-icon {
  font-size: 18px;
  color: var(--brand) !important;
  margin-right: 8px;
}

/* 件数徽章（已由 renderCart 的 cartItemsSub 统一在清单区展示，避免 header 拥挤） */
.cart-header-count { display: none; }

.cart-header .fa-times {
  flex: 0 0 auto;
  width: 44px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f9aa33, #f5a623);
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
}
.cart-header .fa-times:active {
  transform: none;
  filter: none;
}

/* ---------- 通用分区（卡片化） ---------- */
.cart-section {
  margin: 0 14px;
  padding: 14px 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
}
/* 相邻分区用细分隔线连成一体 */
.cart-section + .cart-section {
  border-top: 1px solid var(--hairline);
}

/* 分区标题行 */
.cart-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cart-section-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rental-days-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--brand);
  background: var(--brand-50);
}

.cart-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.01em;
}
.cart-section-title i {
  font-size: 13px;
  color: var(--brand-500);
}

/* 分区副标题：保留类占位，避免旧结构引用报错；当前不再展示 */
.cart-section-sub { display: none; }

/* ---------- 商品列表 ---------- */
.cart-items {
  display: flex;
  flex-direction: column;
  /* 滚动交给 .cart-panel 统一处理，这里不再限制高度，避免双重滚动嵌套 */
  padding: 4px 0 8px;
}
.cart-items::-webkit-scrollbar { width: 4px; }
.cart-items::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 10px; }
.cart-items::-webkit-scrollbar-track { background: transparent; }

/* 多商品通过分隔线区分，单商品无分隔线 */
.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  position: relative;
  animation: staggerIn .3s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.cart-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #f0f0f0;
}

/* 单品删除按钮：与加减按钮同款灰色小方角容器 */
.cart-item-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  background: #f4f6f8;
  color: #99a;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cart-item-remove:hover { background: #fff1f0; color: #e94f4f; }
.cart-item-remove:active { transform: scale(.85); }

/* 商品缩略图（图片或图标） */
.cart-item-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5a623;
  font-size: 22px;
  overflow: hidden;
}
.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-item-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.cart-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e2b3a;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 单价 + 押金：水平控制 */
.cart-item-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #999;
}
.cart-item-price {
  font-size: 14px;
  font-weight: 700;
  color: #f5a623;
  font-variant-numeric: tabular-nums;
}
.cart-item-price small {
  font-weight: 500;
  color: #999;
  font-size: 11px;
  margin-left: 1px;
}

/* 单件商品小计 */
.cart-item-subtotal {
  font-size: 13px;
  font-weight: 700;
  color: #f5a623;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 商品行右侧操作区：加减 + 删除，一行横排 */
.cart-item-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* 姝ヨ繘鍣?*/
.cart-item-controls {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 18px;
  padding: 2px;
  font-variant-numeric: tabular-nums;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: #1e2b3a;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.qty-btn:hover { background: #fff8f0; color: #f5a623; }
.qty-btn:active { transform: scale(.85); background: #ffe7ba; }

.item-qty {
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #1e2b3a;
  margin: 0 4px;
}

/* 瑙︽帉灞忓鏀归€펜鎸夐挳鎼愰粠鍖?*/
@media (hover: none) {
  .qty-btn { width: 32px; height: 32px; }
  .cart-item-remove { width: 32px; height: 32px; }
}

/* 删除购物车项的退场动画 */
.cart-item.is-removing {
  animation: itemOut var(--t-base) var(--ease-in-out) forwards;
}
@keyframes itemOut {
  to { opacity: 0; transform: translateX(-30px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; }
}

/* 空购物车占位 */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 12px 24px;
  color: var(--ink-400);
  text-align: center;
  gap: 8px;
}
.cart-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: var(--ink-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--ink-300);
  margin-bottom: 4px;
}
.cart-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-600);
}
.cart-empty-desc {
  font-size: 12px;
  color: var(--ink-400);
}

/* ---------- 租赁天数卡片 ---------- */
.rental-days-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid rgba(245, 166, 35, .25);
  font-variant-numeric: tabular-nums;
  transition: transform var(--t-base) var(--ease-spring);
}
.rental-days-badge::before {
  content: '\f073';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 10px;
}
.rental-days-badge.is-changed { animation: numPop var(--t-base) var(--ease-spring); }

.date-range-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.date-range-arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-400);
  font-size: 13px;
  margin-bottom: 0;
  align-self: flex-end;
}

.date-input-wrapper {
  flex: 1;
  min-width: 0;
  position: relative;
}

.date-input-label {
  font-size: 12px;
  color: var(--ink-500);
  margin-bottom: 4px;
  padding-left: 2px;
}

.datepicker-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  background: var(--ink-50);
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 600;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.datepicker-input:hover { border-color: var(--ink-300); background: var(--surface); }
.datepicker-input:focus {
  border-color: var(--brand-400);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .12);
}
.datepicker-input[readonly] { color: var(--ink-400); cursor: not-allowed; }

#longRentalTip {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--warning-bg);
  border: 1px solid #ffe7ba;
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--warning);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: staggerIn var(--t-base) var(--ease-out) both;
}
#longRentalTip[hidden] { display: none !important; }

/* 取货方式：胶囊分段选择器 */
.pickup-method {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--ink-50);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
}
/* 标题栏内联模式：选项按内容自适应，不再拉伸铺满 */
.pickup-method--inline {
  margin-top: 0;
  flex: 0 0 auto;
}
.pickup-method--inline .pickup-option {
  flex: 0 0 auto;
}
.pickup-method--inline .pickup-pill {
  width: auto;
  padding: 6px 10px;
  font-size: 12px;
}

.pickup-option {
  position: relative;
  flex: 1;
  cursor: pointer;
  display: block;
}

.pickup-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.pickup-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-500);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              font-weight var(--t-fast);
}
.pickup-option:active .pickup-pill { transform: scale(.97); }
.pickup-option:has(input:checked) .pickup-pill {
  background: #fff;
  border-color: var(--brand-400);
  color: var(--brand-600);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

.pickup-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.pickup-option:has(input:checked) .pickup-radio-dot {
  background: currentColor;
}

/* 取货时间（行内） */
.pickup-time-inline {
  display: flex;
  align-items: center;
  margin-top: 12px;
  animation: sectionIn var(--t-base) var(--ease-out) both;
}
.pickup-time-inline[hidden] { display: none !important; }
.pickup-time-input { flex: 1; min-width: 0; }
.pickup-date-col { flex: 1 1 auto; min-width: 0; }

/* 送货地址 */
#deliveryAddressSection {
  margin-top: 12px;
  animation: sectionIn var(--t-base) var(--ease-out) both;
}
#deliveryAddressSection[hidden] { display: none !important; }

@keyframes sectionIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
#deliveryAddressSection textarea {
  width: 100%;
  height: 45px;
  padding: 10px 12px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.45;
  box-sizing: border-box;
  color: var(--ink-900);
  background: var(--ink-50);
  outline: none;
  resize: none;
  display: block;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
#deliveryAddressSection textarea::placeholder {
  color: var(--ink-400);
  font-size: 14px;
  font-weight: 600;
}
#deliveryAddressSection textarea:focus {
  border-color: var(--brand-400);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .12);
}

@keyframes cartFocusFlash {
  0%   { outline: 0 solid rgba(245,166,35,0); box-shadow: 0 0 0 0 rgba(245,166,35,0); background: rgba(245,166,35,.16); }
  100% { outline: 0 solid rgba(245,166,35,0); box-shadow: 0 0 0 0 rgba(245,166,35,0); background: transparent; }
}
/* 高亮：作用于容器，强制动画重播；内层输入框显示品牌色边框/阴影 */
.cart-focus-flash {
  position: relative;
  animation: cartFocusFlash var(--t-base) var(--ease-out) 2;
  border-radius: var(--r-sm);
}
.cart-focus-flash .datepicker-input,
.cart-focus-flash textarea {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(245,166,35,.30) !important;
  background: var(--surface) !important;
}

/* ---------- 底部：费用明细 + 结算按钮 ---------- */
.cart-footer {
  margin-top: auto;
  padding: 12px 14px calc(14px + var(--sa-bottom));
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

/* 费用明细 */
.cart-summary { margin-bottom: 12px; }

.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.cart-summary-label {
  color: var(--ink-600);
  font-size: 13px;
}
.cart-summary-icon {
  color: var(--ink-400);
  font-size: 12px;
}
.cart-summary-value {
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 总计行：与明细融为一体，金额高亮 */
.cart-summary-row--total {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px dashed var(--hairline);
}
.cart-summary-label--total {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
}
.cart-summary-value--total {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-600);
}
.cart-summary-value--total::before {
  content: '¥';
  font-size: 13px;
  font-weight: 700;
  margin-right: 1px;
}

/* 总计行：单独突出 */
.cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--brand-50), #fff5e6);
  border-radius: var(--r-md);
  border: 1px solid rgba(245, 166, 35, .18);
}
.cart-total-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}
.cart-total {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-600);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.cart-total::before {
  content: '楼';
  font-size: 13px;
  font-weight: 700;
  margin-right: 1px;
  opacity: .8;
}

/* 双按钮 */
.cart-footer-buttons {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

.clear-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-600);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.clear-cart-btn i { font-size: 12px; }
.clear-cart-btn:active {
  transform: scale(.96);
  background: var(--danger-bg);
  border-color: rgba(240, 68, 56, .3);
  color: var(--danger);
}

.checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: var(--r-md);
  background: var(--brand-grad);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: transform var(--t-fast) var(--ease-out),
              filter var(--t-fast) var(--ease-out),
              opacity var(--t-fast);
}
.checkout-btn i { font-size: 14px; }
.checkout-btn:active { transform: scale(.98); }
.checkout-btn:disabled { opacity: .5; box-shadow: none; }
.checkout-btn[hidden] { display: none !important; }

/* 鎸夐挳鍔犺浇鎬?*/
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* --------------------------------------------------------------------------
   12. 表单 / 登录 / 注册
   -------------------------------------------------------------------------- */
.login-box, .register-box {
  animation: staggerIn var(--t-slow) var(--ease-out) both;
}

.login-box h2, .register-box h2 {
  letter-spacing: -.02em;
}

.input-group input {
  border-radius: var(--r-md);
  border-color: var(--ink-200);
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

.input-group input:focus {
  border-color: var(--brand-400);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .12);
}

.input-group input::placeholder { color: var(--ink-400); }

/* 校验失败抖动 */
.input-group.has-error input {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(240, 68, 56, .1);
  animation: shake .38s var(--ease-out);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

.login-btn, .register-btn, .reset-pwd-btn {
  background: var(--brand-grad);
  border-radius: var(--r-md);
  box-shadow: var(--brand-glow);
  letter-spacing: .04em;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast);
}

.login-btn:active, .register-btn:active, .reset-pwd-btn:active {
  transform: scale(.98);
  opacity: .92;
}

.promoter-tip { border-radius: var(--r-md); line-height: 1.6; }

/* 滑块验证码 */
.slider-track {
  border-radius: var(--r-full);
  border: 1px solid var(--ink-200);
  background: var(--ink-100);
}

.slider-btn {
  box-shadow: var(--shadow-sm);
  transition: left var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}

.slider-btn:active { transform: scale(1.06); cursor: grabbing; }

.slider-bg.success ~ .slider-text,
.slider-text.success { font-weight: 600; letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   13. 弹窗 Modal（统一进出场）
   -------------------------------------------------------------------------- */
.image-modal,
.rental-notice-modal,
.product-detail-modal,
.agreement-modal-overlay,
.reset-pwd-modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(16, 24, 40, .5);
}

.image-modal { background: rgba(0, 0, 0, .92); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 显示时遮罩淡入 */
.image-modal[style*="flex"],
.rental-notice-modal[style*="flex"],
.product-detail-modal[style*="flex"],
.agreement-modal-overlay.active,
.reset-pwd-modal-overlay.active {
  animation: fadeIn var(--t-base) var(--ease-out) both;
}

/* 内容卡片弹性上浮 */
.rental-notice-content,
.agreement-modal,
.reset-pwd-modal,
.image-modal-content {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  animation: modalIn var(--t-slow) var(--ease-spring) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.rental-notice-header,
.agreement-modal-header,
.reset-pwd-modal-header {
  border-bottom-color: var(--hairline);
}

.rental-notice-close,
.reset-pwd-modal-close,
.close-modal {
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast);
}

.rental-notice-close:active,
.reset-pwd-modal-close:active,
.close-modal:active { transform: scale(.85) rotate(90deg); }

.rental-notice-footer button,
.agreement-modal-footer button {
  background: var(--brand-grad);
  border-radius: var(--r-md);
  box-shadow: var(--brand-glow);
  transition: transform var(--t-fast) var(--ease-out);
}

.rental-notice-footer button:active,
.agreement-modal-footer button:active { transform: scale(.98); }

/* 营地推荐详情弹窗：点击整卡触发，显示大图+标题+描述 */
.explore-detail-modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.explore-detail-modal[style*="flex"] { animation: fadeIn var(--t-base) var(--ease-out) both; }

.explore-detail-content { animation: modalIn var(--t-slow) var(--ease-spring) both; }

.explore-detail-img img { transition: transform var(--t-slow) var(--ease-out); }

.explore-detail-footer button { box-shadow: var(--brand-glow); }

/* --------------------------------------------------------------------------
   14. 营地推荐 Explore
   -------------------------------------------------------------------------- */
.explore-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
  animation: staggerIn .45s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

.explore-card:active {
  transform: scale(.985);
  box-shadow: var(--shadow-sm);
}

.explore-icon {
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-50), var(--ink-100));
}

.explore-icon img { transition: transform var(--t-base) var(--ease-out); }
.explore-card:active .explore-icon img { transform: scale(1.06); }

.explore-text h3 { letter-spacing: -.01em; color: var(--ink-900); }
.explore-text p { color: var(--ink-500); }

/* --------------------------------------------------------------------------
   15. 空状态
   -------------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  animation: staggerIn var(--t-slow) var(--ease-out) both;
}

.empty-state i {
  font-size: 46px;
  color: var(--ink-300);
  margin-bottom: 14px;
}

.empty-state p { font-size: 14px; color: var(--ink-500); margin-bottom: 4px; }
.empty-state small { font-size: 12px; color: var(--ink-400); }

/* --------------------------------------------------------------------------
   16. 通用工具 & 触感反馈
   -------------------------------------------------------------------------- */
/* 通用按压态：给任意元素加 .pressable 即获得统一反馈 */
.pressable { transition: transform var(--t-fast) var(--ease-out); }
.pressable:active { transform: scale(.96); }

/* 徽章 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
}

.badge-success { background: var(--success-bg); color: #067647; }
.badge-danger  { background: var(--danger-bg);  color: #b42318; }
.badge-warning { background: var(--warning-bg); color: #b54708; }
.badge-info    { background: var(--info-bg);    color: #175cd3; }
.badge-neutral { background: var(--ink-100);    color: var(--ink-600); }

/* 分隔线 */
.hairline { height: 1px; background: var(--hairline); border: 0; }

/* 下拉刷新指示器 */
.ptr-indicator {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--brand);
  font-size: 18px;
  transition: height var(--t-base) var(--ease-out);
}

.ptr-indicator.is-active { height: 44px; }
.ptr-indicator i { animation: spin .8s linear infinite; }

/* --------------------------------------------------------------------------
   17. 无障碍与系统偏好
   -------------------------------------------------------------------------- */
/* 尊重"减少动态效果"设置：关闭非必要动画，保障前庭障碍用户 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 高对比度偏好：加强边界 */
@media (prefers-contrast: more) {
  .card-white, .product-card, .explore-card { border-color: var(--ink-300); }
  .business-hours, .store-phone, .store-cs, .store-address { color: var(--ink-700); }
}

/* 屏幕阅读器专用文本 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   18. 大屏适配增强（沿用既有断点，仅补充容器观感）
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .app {
    box-shadow: var(--shadow-lg);
    background: var(--surface);
  }
  .bottom-nav {
    max-width: 680px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
}

@media (min-width: 1024px) { .bottom-nav { max-width: 900px; } }
@media (min-width: 1280px) { .bottom-nav { max-width: 1100px; } }