/* ============================================================
   Nav — MVP 全站精简版（Stripe 风）
   - 透明背景、去胶囊
   - 底部 1px 分隔线，作为 header 切割
   - 右侧：联系客服 + 查询订单 →，两颗按钮同为 ghost 次要操作，
     首屏主 CTA 完全交给 hero
   ============================================================ */

.nav-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(21, 33, 29, 0.08);
}

.nav {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: var(--nav-height);
  padding: 0 clamp(16px, 3vw, 40px);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--nav-height);
  padding: 0;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.nav-brand:hover {
  color: inherit;
}

.nav-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--gradient-brand);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: none;
  flex-shrink: 0;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-brand-text strong {
  font-size: 17px;
  line-height: 1.1;
  color: var(--color-text);
}

.nav-brand-text small {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* nav 里的按钮比全站 btn-sm 更紧凑 */
.nav-actions .btn {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 6px;
}

/* 联系客服 / 查询订单 都是 ghost：透明背景、无边框、hover 浅灰，
   与 hamburger 视觉权重一致；不与 hero 主 CTA 抢眼。 */
.nav-action-secondary {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-weight: 600;
}

.nav-action-secondary:hover {
  background: rgba(21, 33, 29, 0.05);
  color: var(--color-text);
}

.nav-action-contact {
  cursor: pointer;
}

/* ----------------------------------------------------------
   查询订单按钮：与联系客服同 ghost 样式 + 淡箭头位移动效
   ---------------------------------------------------------- */
.nav-action-order {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-action-order-label {
  line-height: 1;
}

.nav-action-arrow {
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.nav-action-order:hover .nav-action-arrow,
.nav-drawer-order:hover .nav-action-arrow {
  transform: translateX(3px);
  color: var(--color-text);
}

/* Drawer 版本主 CTA（移动端抽屉），保留整按钮黑底白字 + 箭头位移
   因为 drawer 占整屏一侧，hero 不可见，主 CTA 权重更合适 */
.nav-drawer-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Hamburger / 二级菜单触发图标
   桌面端始终显示（小尺寸 36×36 与按钮齐高），点击打开 drawer 二级菜单。
   ghost 风格、无边框，与联系客服 / 查询订单 视觉权重一致。 */
.nav-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.nav-hamburger:hover {
  background: rgba(21, 33, 29, 0.05);
}

.nav-hamburger-line {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-text);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.nav-hamburger.active .nav-hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.active .nav-hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active .nav-hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Drawer */
.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 15, 13, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  z-index: 101;
}

.nav-drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: #ffffff;
  box-shadow: -24px 0 48px rgba(16, 25, 23, 0.12);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  z-index: 102;
}

.nav-drawer.active {
  transform: translateX(0);
}

.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.nav-drawer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-drawer-brand-text {
  display: flex;
  flex-direction: column;
}

.nav-drawer-brand-text strong {
  font-size: 17px;
  line-height: 1.1;
}

.nav-drawer-brand-text small {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.nav-drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(21, 33, 29, 0.06);
  font-size: 22px;
  line-height: 1;
}

/* Drawer 二级菜单（站点辅助入口：帮助中心 / 教程博客 / ……） */
.nav-drawer-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.nav-drawer-section-title {
  margin: 0 0 6px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.nav-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.nav-drawer-link:hover {
  background: rgba(21, 33, 29, 0.05);
}

.nav-drawer-link[aria-current="page"] {
  background: rgba(21, 33, 29, 0.06);
}

.nav-drawer-link-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nav-drawer-link-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.nav-drawer-link-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.nav-drawer-link-arrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  transition: transform var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.nav-drawer-link:hover .nav-drawer-link-arrow {
  transform: translateX(3px);
  color: var(--color-text);
}

.nav-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

/* 桌面端：drawer 仅作为「二级菜单」（帮助中心 / 教程博客），
   主要操作（联系客服 / 查询订单）已在 nav-actions 直接展示，
   隐藏 drawer-actions 避免重复入口。 */
@media (min-width: 1101px) {
  .nav-drawer-actions {
    display: none;
  }
}

/* 移动端：actions 因屏幕窄隐藏，全部入口收纳进 drawer */
@media (max-width: 1100px) {
  .nav-actions .nav-action-secondary {
    display: none;
  }

  .nav-hamburger {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }
}

@media (max-width: 767px) {
  .nav-brand-text small {
    display: none;
  }

  .nav-brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    font-size: 15px;
  }

  .nav-brand-text strong {
    font-size: 16px;
  }
}

/* ============================================================
   Swiss override — C 端公开页面统一应用
   作用域：body.page-index / page-comparison / page-purchase /
           page-recharge / page-order / page-help / page-blog
   仅 admin 后台保留默认 Stripe 风导航。
   用 :is() 集中维护选择器列表；特异性 (0,2,1) 与原写法等价。
   ============================================================ */

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-shell {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--sw-ink);
  box-shadow: none;
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-brand-mark {
  background: var(--sw-ink);
  color: #fff;
  border-radius: 0;
  font-family: var(--sw-mono);
  font-weight: 800;
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-brand-text strong {
  font-family: var(--sw-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sw-ink);
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-brand-text small {
  font-family: var(--sw-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sw-ink-soft);
}

/* 联系客服 / 查询订单：Swiss 风下保留 sans 字体 + 工程感字距，
   但样式仍为 ghost（无边框、透明背景），与 Stripe 风共享。 */
body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-action-secondary {
  background: transparent;
  color: var(--sw-ink);
  border: none;
  border-radius: 6px;
  padding: 0 12px;
  font-family: var(--sw-sans);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  transition: background var(--transition-fast);
}
body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-action-secondary:hover {
  background: rgba(10, 10, 10, 0.06);
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-action-arrow {
  font-family: var(--sw-mono);
  font-weight: 600;
  color: var(--sw-ink-soft);
  margin-left: 2px;
}

/* Drawer (mobile menu) — Swiss */
body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-drawer {
  background: #fff;
  border-left: 1px solid var(--sw-ink);
  border-radius: 0;
  box-shadow: none;
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-drawer-order {
  background: var(--sw-ink);
  color: #fff;
  border: 1px solid var(--sw-ink);
  border-radius: 0;
  font-family: var(--sw-sans);
  font-weight: 700;
  box-shadow: none;
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-drawer-contact {
  background: #fff;
  color: var(--sw-ink);
  border: 1px solid var(--sw-ink);
  border-radius: 0;
  font-family: var(--sw-sans);
  font-weight: 700;
  box-shadow: none;
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-hamburger-line {
  background: var(--sw-ink);
}

/* Drawer 二级菜单链接：Swiss 工程感（直角、sans 字体、虚线分割） */
body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-drawer-section-title {
  font-family: var(--sw-mono);
  color: var(--sw-ink-soft);
  letter-spacing: 0.18em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sw-ink);
  margin-bottom: 8px;
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-drawer-link {
  border-radius: 0;
  border-bottom: 1px dashed var(--sw-line-soft);
  font-family: var(--sw-sans);
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-drawer-link:hover {
  background: var(--sw-bg);
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-drawer-link[aria-current="page"] {
  background: var(--sw-bg);
  border-left: 2px solid var(--sw-accent);
  padding-left: 12px;
}

body:is(
  .page-index,
  .page-comparison,
  .page-purchase,
  .page-recharge,
  .page-order,
  .page-help,
  .page-blog
) .nav-drawer-link-arrow {
  font-family: var(--sw-mono);
  color: var(--sw-ink-soft);
}