/* /Layout/DocsLayout.razor.rz.scp.css */
/* Scoped to this layout: the documentation shares a document with the rest of the portal, so none of
   it may reach the admin or merchant pages. */
.docs-shell[b-gf8ijj9b85] {
    background: #f6f7fb;
    min-height: 100vh;
}

.docs-bar[b-gf8ijj9b85] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .7rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e3e7ef;
}

.docs-bar .brand[b-gf8ijj9b85] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #10172a;
    text-decoration: none;
    font-size: .95rem;
}

.docs-bar .brand strong[b-gf8ijj9b85] { font-weight: 700; }
.docs-bar .brand .sep[b-gf8ijj9b85] { color: #c3c8d4; margin: 0 .4rem; }
.docs-bar .brand .material-symbols-rounded[b-gf8ijj9b85] { font-size: 1.3rem; color: #1d4ed8; }

.docs-bar .links[b-gf8ijj9b85] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.docs-bar .links a[b-gf8ijj9b85] {
    padding: .35rem .7rem;
    border-radius: .5rem;
    color: #5a6478;
    text-decoration: none;
    font-size: .85rem;
}

.docs-bar .links a:hover[b-gf8ijj9b85] { background: #eef2ff; color: #1d4ed8; }

.docs-bar .links a.portal[b-gf8ijj9b85] {
    margin-left: .35rem;
    background: #1d4ed8;
    color: #fff;
}

.docs-bar .links a.portal:hover[b-gf8ijj9b85] { background: #1b43b8; color: #fff; }
/* /Pages/Docs/ApiDocs.razor.rz.scp.css */
/* The documentation's own styling, scoped to this component.
   It shares a document with the admin and merchant areas, so the generic selectors below (section,
   table, pre, button) must not escape this page — which is what CSS isolation guarantees. The custom
   properties sit on .layout and header.top rather than on :root for the same reason: a scoped
   :root would never match. */
header.top[b-6pakvdobfg],
.layout[b-6pakvdobfg] {
    --ink: #10172a;
    --muted: #5a6478;
    --line: #e3e7ef;
    --bg: #f6f7fb;
    --card: #fff;
    --brand: #1d4ed8;
    --brand-soft: #eef2ff;
    --ok: #0f7b4f;
    --ok-soft: #e7f6ee;
    --warn: #9a5b00;
    --warn-soft: #fdf3e2;
    --bad: #b42318;
    --bad-soft: #fdeceb;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    color: var(--ink);
    font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

code[b-6pakvdobfg], pre[b-6pakvdobfg], .mono[b-6pakvdobfg] { font-family: var(--mono); }
code[b-6pakvdobfg] { background: #eef1f6; padding: .1em .35em; border-radius: 4px; font-size: .9em; }
pre[b-6pakvdobfg] {
    background: #0f172a; color: #e2e8f0; padding: 16px 18px; border-radius: 10px; overflow: auto;
    font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
pre code[b-6pakvdobfg] { background: none; padding: 0; color: inherit; font-size: inherit; }
a[b-6pakvdobfg] { color: var(--brand); }

header.top[b-6pakvdobfg] { background: #0f172a; color: #fff; padding: 28px 24px; }
header.top .inner[b-6pakvdobfg] { max-width: 1180px; margin: 0 auto; }
header.top h1[b-6pakvdobfg] { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; color: #fff; }
header.top p[b-6pakvdobfg] { margin: 0; color: #9aa6bd; max-width: 70ch; }
header.top .pills[b-6pakvdobfg] { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
header.top .pills a[b-6pakvdobfg] {
    background: #1e293b; color: #e2e8f0; text-decoration: none;
    padding: 7px 13px; border-radius: 999px; font-size: 13px; border: 1px solid #334155;
}
header.top .pills a:hover[b-6pakvdobfg] { background: #273449; }

.layout[b-6pakvdobfg] {
    max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 250px 1fr;
    gap: 32px; padding: 28px 24px 80px;
}

nav.toc[b-6pakvdobfg] { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; }
nav.toc .group[b-6pakvdobfg] {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
    margin: 18px 0 6px; font-weight: 700;
}
nav.toc .group:first-child[b-6pakvdobfg] { margin-top: 0; }
nav.toc a[b-6pakvdobfg] {
    display: block; padding: 5px 10px; color: var(--ink); text-decoration: none;
    border-left: 2px solid transparent; font-size: 14px;
}
nav.toc a:hover[b-6pakvdobfg] { color: var(--brand); border-left-color: var(--line); }

section[b-6pakvdobfg] {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 24px 26px; margin-bottom: 20px; scroll-margin-top: 76px;
}
section > h2[b-6pakvdobfg] { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; }
.sectionno[b-6pakvdobfg] {
    margin: 0 0 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
    color: var(--brand); font-weight: 700;
}
h3[b-6pakvdobfg] { font-size: 15px; margin: 22px 0 8px; }

table[b-6pakvdobfg] { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
th[b-6pakvdobfg], td[b-6pakvdobfg] { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th[b-6pakvdobfg] { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.pillars[b-6pakvdobfg] { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0; }
.pillar[b-6pakvdobfg] { background: var(--brand-soft); border-radius: 10px; padding: 14px 16px; }
.pillar strong[b-6pakvdobfg] { display: block; margin-bottom: 4px; }
.pillar p[b-6pakvdobfg] { margin: 0; font-size: 13.5px; color: var(--muted); }

.flow[b-6pakvdobfg] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 16px 0 4px; }
.step[b-6pakvdobfg] { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.step span[b-6pakvdobfg] {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 6px;
}

.callout[b-6pakvdobfg] { display: flex; gap: 12px; border-radius: 10px; padding: 13px 15px; margin: 14px 0; font-size: 14px; }
.callout.warn[b-6pakvdobfg] { background: var(--warn-soft); border: 1px solid #f0dcb8; }
.callout.bad[b-6pakvdobfg] { background: var(--bad-soft); border: 1px solid #f5c6c2; }
.callout.ok[b-6pakvdobfg] { background: var(--ok-soft); border: 1px solid #bfe6d2; }
.callout b[b-6pakvdobfg] { display: block; }

.endpoint[b-6pakvdobfg] { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 14px 0; }
.endpoint > h3[b-6pakvdobfg] { margin-top: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.method[b-6pakvdobfg] { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; letter-spacing: .04em; }
.get[b-6pakvdobfg] { background: var(--ok-soft); color: var(--ok); }
.post[b-6pakvdobfg] { background: var(--brand-soft); color: var(--brand); }

label[b-6pakvdobfg] {
    display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); margin: 10px 0 4px; font-weight: 600;
}
input[b-6pakvdobfg], textarea[b-6pakvdobfg], select[b-6pakvdobfg] {
    width: 100%; padding: 9px 11px; border: 1px solid var(--line);
    border-radius: 8px; font: 13px/1.5 var(--mono); background: #fff; color: var(--ink);
}
textarea[b-6pakvdobfg] { min-height: 76px; resize: vertical; }
button[b-6pakvdobfg] {
    background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px;
    font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 14px;
}
button:hover[b-6pakvdobfg] { background: #1b43b8; }
.grid2[b-6pakvdobfg] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 900px) {
    .layout[b-6pakvdobfg] { grid-template-columns: 1fr; }
    nav.toc[b-6pakvdobfg] { position: static; max-height: none; }
    .grid2[b-6pakvdobfg] { grid-template-columns: 1fr; }
}