/* MercanPay API docs (shared by /documentation and the merchant Integration page) */
.urlhelp{display:grid;gap:10px;margin-top:6px}
.urlhelp div{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card-2)}
.urlhelp svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:2px}
.urlhelp p>b:first-child{display:block;font-size:13.5px}
.urlhelp span{font-size:12.5px;color:var(--muted)}
/* ── integration docs ── */
.docs{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
.docs>*,.docs-flat{min-width:0}
.docnav{max-width:100%;min-width:0}
.docnav{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow)}
.docnav .t{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:6px 10px 8px}
.docnav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);transition:color .2s,background .2s;position:relative}
.docnav button:hover{color:var(--fg);background:var(--soft)}
.docnav button.on{color:var(--accent);background:var(--accent-soft)}
.docnav button.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--grad)}
.docnav svg{width:15px;height:15px;flex:none}
.docsec{scroll-margin-top:100px}
.docsec+.docsec{margin-top:18px}
.docsec h3{font-size:16px}
.docsec h4{margin:20px 0 8px;font-size:13.5px}
.lead2{color:var(--muted);margin:-4px 0 14px;font-size:13.5px;line-height:1.65}
.docsec p.small{line-height:1.6}
.endpoint{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--card-2);border:1px solid var(--line);margin:8px 0;flex-wrap:wrap}
.endpoint code{font-family:ui-monospace,"JetBrains Mono",Consolas,monospace;font-size:13px;font-weight:600}
.endpoint span.d{margin-left:auto;color:var(--muted);font-size:12.5px}
.verb{font:800 10.5px/1 ui-monospace,Consolas,monospace;padding:5px 8px;border-radius:7px;letter-spacing:.05em;min-width:52px;text-align:center}
.verb.get{background:var(--info-soft);color:var(--info)}.verb.post{background:var(--ok-soft);color:var(--ok)}.verb.put{background:var(--warn-soft);color:var(--warn)}.verb.delete{background:var(--bad-soft);color:var(--bad)}
.ptable{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:10px}
.ptable table{font-size:13px}
.ptable th{font-size:11px}
.ptable td{padding:10px 14px;vertical-align:top;line-height:1.55}
.ptable td:first-child{white-space:nowrap}
.icode{font-family:ui-monospace,"JetBrains Mono",Consolas,monospace;background:var(--soft);border:1px solid var(--line-2);padding:1px 6px;border-radius:6px;font-size:12px;white-space:nowrap}
.req{color:var(--bad);font-size:10.5px;font-weight:800;margin-left:6px;text-transform:uppercase;letter-spacing:.04em}
.ty{color:var(--muted);font-size:12px;font-family:ui-monospace,Consolas,monospace;white-space:nowrap}
.codebox{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card-2);margin-top:12px}
.codebox .cbar{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-bottom:1px solid var(--line);background:var(--card)}
.codebox .cbar .lbl{font-size:11.5px;font-weight:700;color:var(--muted);margin-right:auto;padding-left:4px}
.codebox .cbar .tabs{margin-right:auto}
.codebox pre.code{border:0;border-radius:0;margin:0;max-height:460px;background:transparent;animation:fadeIn .25s}
.codebox .cbcopy.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step3{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card-2);position:relative;overflow:hidden}
.step3 .n{width:30px;height:30px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:10px}
.step3 b{display:block;margin-bottom:4px}.step3 span{font-size:12.5px;color:var(--muted);line-height:1.55;display:block}
.step3 .btn{margin-top:10px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.facts>div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card-2);min-width:0}
.facts span{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.facts b{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;font-family:ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retry{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.retry span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--line-2);animation:fadeUp .4s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
.retry svg{width:13px;height:13px;color:var(--muted)}
.retry span.end{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.checklist2{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:9px}
.checklist2 li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55}
.checklist2 li svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:1px}
@media (max-width:1100px){.docs{grid-template-columns:1fr}.docnav{top:0;z-index:4;flex-direction:row;overflow-x:auto;padding:6px}.docnav .t{display:none}.docnav button{white-space:nowrap}.docnav button.on::before{display:none}}
@media (max-width:760px){.steps3,.facts{grid-template-columns:1fr}}
/* ── floating table of contents (merchant panel) ── */
.doctoc-wrap{position:sticky;top:88px;z-index:6;display:flex;justify-content:center;margin:0 0 18px;pointer-events:none}
.doctoc{position:relative;pointer-events:auto}
.toc-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border:1px solid var(--line);box-shadow:0 12px 34px -16px rgba(15,18,34,.45),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent);font-size:13px;font-weight:600;color:var(--muted);transition:border-color .25s,box-shadow .25s,transform .2s var(--ease);max-width:min(520px,86vw)}
.toc-btn:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px)}
.toc-btn.open{border-color:var(--accent);box-shadow:0 16px 40px -16px var(--accent),0 0 0 4px var(--accent-ring)}
.toc-ring{width:22px;height:22px;transform:rotate(-90deg);flex:none}
.toc-ring circle{fill:none;stroke-width:3;stroke:var(--line)}
.toc-ring circle.p{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .15s linear}
.toc-sep{width:1px;height:16px;background:var(--line);flex:none}
.toc-btn b{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-btn b.swap{animation:tocSwap .35s var(--ease)}
@keyframes tocSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.toc-chev{display:grid;place-items:center;transition:transform .3s var(--ease)}
.toc-chev svg{width:15px;height:15px}
.toc-btn.open .toc-chev{transform:rotate(180deg)}
.toc-panel{position:absolute;top:calc(100% + 10px);left:50%;width:min(380px,90vw);transform-origin:50% 0;translate:-50% 0;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:8px;animation:tocIn .32s cubic-bezier(.2,.9,.3,1.15) both}
.toc-panel.out{animation:tocOut .18s ease-in both}
@keyframes tocIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tocOut{to{opacity:0;transform:translateY(-6px) scale(.97)}}
.toc-h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:8px 10px 6px}
.toc-list{display:flex;flex-direction:column;gap:2px;max-height:min(60vh,460px);overflow:auto}
.toc-list button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;font-size:13.5px;font-weight:600;color:var(--fg-2);transition:background .2s,color .2s;animation:fadeUp .35s var(--ease) both;animation-delay:calc(var(--i) * 25ms)}
.toc-list button em{font-style:normal;font:700 11px/1 ui-monospace,Consolas,monospace;color:var(--muted);width:20px}
.toc-list button svg{width:16px;height:16px;color:var(--muted);flex:none}
.toc-list button:hover{background:var(--soft)}
.toc-list button.on{background:var(--accent-soft);color:var(--accent)}
.toc-list button.on svg,.toc-list button.on em{color:var(--accent)}
@media (max-width:860px){.doctoc-wrap{top:10px}.toc-l,.toc-sep{display:none}}