/* VitePress 首页模板：文档页版面（商户接入、安装使用共用；侧栏 / 手机抽屉、本页目录、接口页两栏、上一页下一页、搜索）。
 * 断点照 VitePress：<960 侧栏收成抽屉；960 起侧栏常驻；1280 起右侧出「本页目录」（接口页改成参数 + 示例两栏）；1440 起版心封顶。 */

/* ---------- 顶栏在文档页的样子：logo 区与侧栏同底色 ---------- */
.VPNavBarSearch { flex-grow: 1; display: flex; align-items: center; justify-content: flex-end; }
.VPNavBarSearch-button {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid transparent;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--vp-c-text-2); transition: border-color 0.25s, color 0.25s;
}
.VPNavBarSearch-button:hover { color: var(--vp-c-text-1); }
.VPNavBarSearch-icon { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.VPNavBarSearch-text, .VPNavBarSearch-keys { display: none; }
.VPNavBarSearch-keys kbd {
  min-width: 20px; padding: 0 5px; border: 1px solid var(--vp-c-divider); border-radius: 4px;
  font-size: 12px; line-height: 20px; text-align: center; color: var(--vp-c-text-3);
}
@media (min-width: 768px) { .VPNavBarSearch { justify-content: flex-start; padding-left: 24px; } }
/* 768–959 顶栏放不下整条搜索框，只留图标；960 起才展开成「搜索文档 Ctrl K」 */
@media (min-width: 960px) {
  .VPNavBarSearch-button { min-width: 180px; padding: 0 10px 0 12px; background-color: var(--vp-c-bg-alt); }
  .VPNavBarSearch-button:hover { border-color: var(--vp-c-brand-1); }
  .VPNavBarSearch-text { display: inline; }
  .VPNavBarSearch-keys { display: flex; gap: 2px; margin-left: auto; padding-left: 12px; }
  .zp-layout-doc .VPNavBar-wrapper { padding: 0; }
  .zp-layout-doc .VPNavBar-container { max-width: none; }
  .zp-layout-doc .VPNavBarTitle { width: var(--vp-sidebar-width); padding: 0 32px; background-color: var(--vp-sidebar-bg-color); }
  .zp-layout-doc .VPNavBar-content { padding: 0 32px; }
  .zp-layout-doc .VPNavBarSearch { padding-left: 0; }
}
/* 顶栏收起成手机形态时（#zp-nav 带 is-compact，见 site.css），搜索照旧在原处，只留放大镜，与 960 以下一样 */
.VPNav.is-compact .VPNavBarSearch-button { min-width: 0; padding: 0 10px; background-color: transparent; }
.VPNav.is-compact .VPNavBarSearch-button:hover { border-color: transparent; }
.VPNav.is-compact .VPNavBarSearch-text, .VPNav.is-compact .VPNavBarSearch-keys { display: none; }

/* ---------- 手机二级栏：菜单 + 本页目录 ---------- */
.VPLocalNav {
  position: sticky; top: var(--vp-nav-height); z-index: var(--vp-z-index-local-nav);
  display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 24px;
  border-bottom: 1px solid var(--vp-c-gutter); background-color: var(--vp-c-bg);
}
.VPLocalNav-menu, .VPLocalNav-outlineToggle {
  display: flex; align-items: center; gap: 6px; padding: 12px 0; line-height: 24px; font-size: 12px; font-weight: 500;
  color: var(--vp-c-text-2); transition: color 0.25s;
}
.VPLocalNav-menu:hover, .VPLocalNav-outlineToggle:hover { color: var(--vp-c-text-1); }
.VPLocalNav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.VPLocalNav-outlineToggle svg { width: 14px; height: 14px; transition: transform 0.25s; }
.VPLocalNav-outlineToggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.VPLocalNav-outline { position: relative; }
.VPLocalNav-outlinePanel {
  position: absolute; top: 44px; right: 0; width: min(320px, calc(100vw - 48px)); max-height: calc(100vh - 160px);
  overflow-y: auto; padding: 8px 16px; border: 1px solid var(--vp-c-border); border-radius: 8px;
  background-color: var(--vp-c-bg-elv); box-shadow: var(--vp-shadow-3);
}
@media (min-width: 768px) { .VPLocalNav { padding: 0 32px; } }
@media (min-width: 960px) {
  .VPLocalNav { justify-content: flex-start; padding-left: calc(var(--vp-sidebar-width) + 32px); }
  .VPLocalNav-menu { display: none; }
  .VPLocalNav.no-outline { display: none; }
  .VPLocalNav-outlinePanel { right: auto; left: 0; }
}
@media (min-width: 1280px) { .VPLocalNav { display: none; } }

/* ---------- 侧栏 ---------- */
.VPSidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--vp-z-index-sidebar);
  width: calc(100vw - 64px); max-width: 320px; padding: 32px 32px 96px; background-color: var(--vp-sidebar-bg-color);
  box-shadow: var(--vp-shadow-3); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateX(-100%);
  transition: opacity 0.5s, transform 0.25s ease, visibility 0.5s;
}
.VPSidebar.open {
  opacity: 1; visibility: visible; transform: translateX(0);
  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), visibility 0s;
}
.VPSidebar-backdrop { position: fixed; inset: 0; z-index: var(--vp-z-index-backdrop); background-color: var(--vp-backdrop-bg-color); }
.VPSidebarGroup { padding-bottom: 20px; }
.VPSidebarGroup + .VPSidebarGroup { border-top: 1px solid var(--vp-c-divider); padding-top: 10px; }
.VPSidebarGroup-title { padding: 4px 0; line-height: 24px; font-size: 14px; font-weight: 700; color: var(--vp-c-text-1); }
.VPSidebarItem {
  display: block; padding: 4px 0; line-height: 24px; font-size: 14px; font-weight: 500;
  color: var(--vp-c-text-2); transition: color 0.25s;
}
.VPSidebarItem:hover, .VPSidebarItem.active { color: var(--vp-c-brand-1); }

.VPDocLayout { position: relative; }
.VPContent { min-width: 0; }
@media (min-width: 960px) {
  .VPDocLayout { display: flex; align-items: flex-start; }
  .VPSidebar {
    position: sticky; top: var(--vp-nav-height); z-index: 1; flex: 0 0 auto; width: var(--vp-sidebar-width); max-width: none;
    height: calc(100vh - var(--vp-nav-height)); box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .VPSidebar-backdrop { display: none !important; }
  .VPContent { flex: 1 1 auto; }
}
@media (min-width: 1440px) {
  .zp-layout-doc .VPNavBarTitle, .VPSidebar {
    width: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
    padding-left: calc((100% - var(--vp-layout-max-width)) / 2 + 32px);
  }
  .VPContent { padding-right: calc((100% - var(--vp-layout-max-width)) / 2); }
  .zp-layout-doc .VPNavBar-content { padding-right: calc((100% - var(--vp-layout-max-width)) / 2 + 32px); }
}

/* ---------- 正文区 + 本页目录 ---------- */
.VPDoc { width: 100%; padding: 32px 24px 96px; }
.VPDoc-container { display: flex; justify-content: center; margin: 0 auto; width: 100%; }
.VPDoc-content { order: 1; flex: 1 1 auto; min-width: 0; max-width: 752px; }
.VPDoc-aside { display: none; order: 2; flex: 0 0 256px; padding-left: 32px; align-self: stretch; }
.VPDoc-group { margin-bottom: 8px; line-height: 20px; font-size: 14px; font-weight: 600; color: var(--vp-c-brand-1); }
@media (min-width: 768px) { .VPDoc { padding: 48px 32px 128px; } }
@media (min-width: 960px) {
  .VPDoc { padding: 48px 32px 96px; }
  .VPDoc-content { padding: 0 32px; }
}
@media (min-width: 1280px) {
  .VPDoc-aside { display: block; }
  .VPDoc-content { max-width: calc(688px + 64px); }
}

.VPDocOutline { position: sticky; top: calc(var(--vp-nav-height) + 32px); max-height: calc(100vh - var(--vp-nav-height) - 64px); overflow-y: auto; }
.VPDocOutline-title { line-height: 32px; font-size: 14px; font-weight: 600; color: var(--vp-c-text-1); }
.VPDocOutline-body { position: relative; border-left: 1px solid var(--vp-c-divider); padding-left: 16px; }
.VPDocOutline-marker {
  position: absolute; top: 0; left: -1px; z-index: 0; width: 2px; height: 18px; border-radius: 2px;
  background-color: var(--vp-c-brand-1); opacity: 0; transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s;
}
.VPDocOutline-link {
  display: block; line-height: 32px; font-size: 14px; font-weight: 400; color: var(--vp-c-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.25s;
}
.VPDocOutline-link:hover, .VPDocOutline-link.active { color: var(--vp-c-text-1); }
.VPDocOutline-link.active { font-weight: 500; }
.VPDocOutline-link.nested { padding-left: 13px; }

/* ---------- 接口页两栏：左参数表、右示例（照微信支付文档） ----------
 * 片段里出现 .api-columns 的就是接口页。1280 以下上下排，示例紧跟参数表（本页目录照旧在顶部二级栏的下拉里）；
 * 1280 起左右排（左 3 : 右 2），右侧「本页目录」收起、宽度让给两栏；右栏示例贴顶跟随，参数再长示例也一直看得见，
 * 比视口高时右栏自己滚动。 */
.vp-doc .api-code > p { margin: 12px 0 8px; font-size: 14px; line-height: 24px; }
.vp-doc .api-fields th, .vp-doc .api-fields td { padding-left: 12px; padding-right: 12px; }
@media (min-width: 1280px) {
  .VPDoc:has(.api-columns) .VPDoc-aside { display: none; }
  .VPDoc:has(.api-columns) .VPDoc-content { max-width: none; padding: 0; }
  .vp-doc .api-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; }
  .vp-doc .api-fields > :first-child, .vp-doc .api-code > :first-child { margin-top: 0; }
  .vp-doc .api-fields > :last-child, .vp-doc .api-code > :last-child { margin-bottom: 0; }
  /* 右栏往左多留 20px 内边距再用负外边距抵回：标题左侧的「#」锚点不被滚动区裁掉。 */
  .vp-doc .api-code {
    position: sticky; top: calc(var(--vp-nav-height) + 24px); max-height: calc(100vh - var(--vp-nav-height) - 48px);
    margin-left: -20px; padding-left: 20px; overflow-y: auto;
  }
}

/* ---------- 上一页 / 下一页 ---------- */
.VPDocFooter { margin-top: 64px; }
.VPDocFooter-prevNext { display: grid; grid-row-gap: 8px; border-top: 1px solid var(--vp-c-divider); padding-top: 24px; }
.VPDocFooter-link {
  display: block; height: 100%; border: 1px solid var(--vp-c-divider); border-radius: 8px; padding: 11px 16px 13px;
  transition: border-color 0.25s;
}
.VPDocFooter-link:hover { border-color: var(--vp-c-brand-1); }
.VPDocFooter-link.next { text-align: right; }
.VPDocFooter-desc { display: block; line-height: 20px; font-size: 12px; font-weight: 500; color: var(--vp-c-text-2); }
.VPDocFooter-title { display: block; line-height: 20px; font-size: 14px; font-weight: 500; color: var(--vp-c-brand-1); }
@media (max-width: 639px) { .VPDocFooter-pager:empty { display: none; } }
@media (min-width: 640px) { .VPDocFooter-prevNext { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 16px; } }

/* ---------- 搜索（按页标题与本页小节标题） ---------- */
.VPLocalSearch { position: fixed; inset: 0; z-index: var(--vp-z-index-search); display: flex; }
.VPLocalSearch-backdrop { position: absolute; inset: 0; background-color: var(--vp-backdrop-bg-color); }
.VPLocalSearch-shell {
  position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 12px;
  width: 100%; height: 100%; background-color: var(--vp-c-bg);
}
.VPLocalSearch-bar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; height: 52px; padding: 0 8px 0 12px;
  border: 1px solid var(--vp-c-divider); border-radius: 6px; transition: border-color 0.25s;
}
.VPLocalSearch-bar:focus-within { border-color: var(--vp-c-brand-1); }
.VPLocalSearch-icon { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: var(--vp-c-text-2); stroke-width: 2; stroke-linecap: round; }
.VPLocalSearch-input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  font-size: 16px; -webkit-appearance: none; appearance: none;
}
.VPLocalSearch-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.VPLocalSearch-close kbd {
  display: block; padding: 0 6px; border: 1px solid var(--vp-c-divider); border-radius: 4px;
  font-size: 12px; line-height: 22px; color: var(--vp-c-text-2);
}
.VPLocalSearch-close:hover kbd { border-color: var(--vp-c-brand-1); color: var(--vp-c-text-1); }
.VPLocalSearch-results {
  display: flex; flex-direction: column; gap: 6px; flex: 0 1 auto; min-height: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.VPLocalSearch-results:empty { display: none; }
.VPLocalSearch-link {
  display: block; padding: 10px 12px; border: 2px solid var(--vp-c-divider); border-radius: 6px;
  background-color: var(--vp-c-bg); outline: none;
}
.VPLocalSearch-result.selected .VPLocalSearch-link { border-color: var(--vp-c-brand-1); }
.VPLocalSearch-crumbs { display: block; line-height: 18px; font-size: 12px; font-weight: 500; color: var(--vp-c-text-2); }
.VPLocalSearch-title { display: block; margin-top: 2px; line-height: 22px; font-size: 15px; font-weight: 600; color: var(--vp-c-text-1); }
.VPLocalSearch-link mark {
  padding: 0 2px; border-radius: 2px; background-color: var(--vp-c-brand-soft); color: var(--vp-c-brand-1);
}
.VPLocalSearch-result.selected mark { background-color: var(--vp-c-brand-1); color: var(--vp-c-neutral-inverse); }
.VPLocalSearch-empty { padding: 16px 12px; text-align: center; font-size: 14px; color: var(--vp-c-text-2); }
@media (min-width: 768px) {
  .VPLocalSearch-shell {
    align-self: flex-start; margin: 64px auto; width: min(640px, calc(100vw - 64px)); height: auto; max-height: min(calc(100vh - 128px), 720px);
    border-radius: 8px; box-shadow: var(--vp-shadow-4);
  }
}