/* ============================================================
   智购壹刻 移动端 UI/UX 优化补丁 V1.5
   恢复项：移除导航条所有背景和毛玻璃，回归全透明
   保留项：底部栏微信适配、字号修复、触摸目标优化
   ============================================================ */

/* ---- 1. 全局字体栈 ---- */
:root {
  --font-sans-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans CN", system-ui, -apple-system, sans-serif;
}

/* ---- 2. 移动端基础修复 ---- */
@media (max-width: 767px) {
  .text-xs { font-size: 13px !important; line-height: 1.4 !important; }
  .text-sm { font-size: 14px !important; line-height: 1.5 !important; }
  [class*="text-\[10px\]"], [class*="text-\[11px\]"], [class*="text-\[12px\]"] { font-size: 13px !important; }

  /* ---- 3. 触摸目标修复 ---- */
  footer a, nav a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  nav button { min-width: 48px !important; min-height: 48px !important; }

  /* ---- 4. 导航条恢复全透明 (核心恢复) ---- */
  header, 
  nav,
  nav.container,
  header > div {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 确保导航文字颜色恢复（通常是白色，取决于页面背景） */
  nav .text-white, nav span {
    /* 不强制颜色，让它跟随原始逻辑 */
  }

  /* ---- 5. 底部固定栏 - 微信 iOS 适配 (保留修复) ---- */
  div[class*="fixed"][class*="bottom-0"][class*="inset-x-0"][class*="z-50"][class*="md\:hidden"] {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
    margin-bottom: -100px !important;
    pointer-events: none;
  }

  div[class*="fixed"][class*="bottom-0"] > div {
    pointer-events: auto;
    position: relative;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12), 0 100px 0 0 white !important; 
  }

  div[class*="fixed"][class*="bottom-0"] a[href^="tel"]::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100px; background: inherit; z-index: -1;
  }

  div[class*="fixed"][class*="bottom-0"] a:not([href^="tel"])::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100px; background: #FF6B00; z-index: -1;
  }
}

/* ---- 6. 微信公众号弹窗样式 (保留) ---- */
#wechat-qr-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999;
  background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  justify-content: center; align-items: center;
}
#wechat-qr-modal.active { display: flex !important; }
#wechat-qr-modal .qr-content { background: #fff; border-radius: 16px; padding: 32px 24px; text-align: center; max-width: 320px; width: 85%; animation: qr-pop 0.3s ease-out; }
#wechat-qr-modal .qr-content img { width: 200px; height: 200px; margin: 0 auto 16px; border-radius: 8px; }
#wechat-qr-modal .qr-close { display: inline-block; padding: 10px 32px; background: #FF6B00; color: #fff; border: none; border-radius: 24px; cursor: pointer; }
/* ============================================================
   智购壹刻 移动端 UI/UX 优化补丁 V1.8
   专项修复：导航菜单磨砂背景全屏延伸，消除顶部行断层
   ============================================================ */

@media (max-width: 1023px) {
  /* 1. 核心修复：让磨砂背景从顶部一直延伸到屏幕底端 */
  /* 针对展开后的全屏容器，强制其背景和模糊效果覆盖全屏 */
  div[class*="fixed"][class*="inset-0"][class*="lg\:hidden"][class*="bg-"] {
    background: rgba(255, 255, 255, 0.92) !important; /* 浅色半透明，足够遮挡底层 */
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important; /* 磨砂效果 */
    backdrop-filter: blur(12px) saturate(160%) !important;
    height: 100vh !important; /* 强制全屏高度 */
    width: 100vw !important; /* 强制全屏宽度 */
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    padding-top: 80px !important; /* 留出顶部 Logo 空间 */
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. 确保顶部导航条（Logo行）在展开时与背景融为一体 */
  /* 移除顶部行自带的、局限在窄条内的磨砂/背景 */
  header, 
  nav.container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* 3. 菜单项样式：确保在全屏磨砂背景上清晰排列 */
  div[class*="fixed"][class*="inset-0"][class*="lg\:hidden"] a {
    color: #1F1F1F !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 18px 24px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    width: 100% !important;
    background: transparent !important;
  }

  /* 4. 保持 Logo 和关闭按钮在最顶层且颜色正确 */
  nav.container {
    z-index: 10000 !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
  }

  /* 5. 底部固定栏适配 (持续保留) */
  div[class*="fixed"][class*="bottom-0"][class*="inset-x-0"][class*="z-50"] {
    z-index: 9998 !important;
  }
}
