@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Fragment+Mono:ital@0;1&display=swap');

/* ============================================================
   Swich brand system — sampled from swichnow.io
   blue #0137ef · teal #117595 · green #05d375 · ink #070707
   ============================================================ */
:root,
.light-mode,
.dark-mode,
body.light-mode,
body.dark-mode {
  --brand-ink: #070707;
  --brand-ink-2: #0b0c0f;
  --brand-panel: #0a0b0d;
  --brand-surface: #101216;
  --brand-surface-2: #15181e;
  --brand-border: rgba(255, 255, 255, 0.08);
  --brand-border-strong: rgba(255, 255, 255, 0.14);
  --brand-text: #fdfdfe;
  --brand-text-dim: #aab2bf;
  --brand-text-faint: #7b8291;

  --brand-blue: #0137ef;
  --brand-blue-bright: #4d8bff;
  --brand-teal: #117595;
  --brand-teal-bright: #22c3d6;
  --brand-green: #05d375;
  --brand-green-bright: #46e696;
  --brand-gradient: linear-gradient(135deg, var(--brand-green), var(--brand-teal) 50%, var(--brand-blue));

  /* fonts */
  --scalar-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  --scalar-font-code: 'Fragment Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;

  /* core */
  --scalar-color-1: var(--brand-text) !important;
  --scalar-color-2: var(--brand-text-dim) !important;
  --scalar-color-3: var(--brand-text-faint) !important;
  --scalar-color-accent: var(--brand-blue-bright) !important;

  --scalar-background-1: var(--brand-ink) !important;
  --scalar-background-2: var(--brand-ink-2) !important;
  --scalar-background-3: var(--brand-surface) !important;
  --scalar-background-accent: rgba(1, 55, 239, 0.16) !important;

  --scalar-border-color: var(--brand-border) !important;

  --scalar-link-color: var(--brand-teal-bright) !important;
  --scalar-link-color-hover: var(--brand-green-bright) !important;

  --scalar-button-1: var(--brand-blue) !important;
  --scalar-button-1-color: #ffffff !important;
  --scalar-button-1-hover: #1f52f5 !important;

  /* semantic / HTTP method colors */
  --scalar-color-green: var(--brand-green) !important;
  --scalar-color-blue: var(--brand-blue-bright) !important;

  /* header */
  --scalar-header-background-1: var(--brand-panel) !important;
  --scalar-header-color-1: var(--brand-text) !important;
  --scalar-header-color-2: var(--brand-text-dim) !important;
  --scalar-header-border-color: var(--brand-border) !important;
  --scalar-header-call-to-action-color: var(--brand-teal-bright) !important;

  /* sidebar — vibrant, high-contrast whites so the navigation reads crisply */
  --scalar-sidebar-background-1: var(--brand-panel) !important;
  --scalar-sidebar-border-color: var(--brand-border) !important;
  --scalar-sidebar-color-1: #eef1f6 !important;
  --scalar-sidebar-color-2: #c3c9d4 !important;
  --scalar-sidebar-color-active: #ffffff !important;
  --scalar-sidebar-item-hover-background: rgba(255, 255, 255, 0.05) !important;
  --scalar-sidebar-item-hover-color: #ffffff !important;
  --scalar-sidebar-item-active-background: rgba(1, 55, 239, 0.16) !important;
  --scalar-sidebar-search-background: var(--brand-surface) !important;
  --scalar-sidebar-search-border-color: var(--brand-border-strong) !important;
  --scalar-sidebar-search-color: #c3c9d4 !important;
  --scalar-sidebar-indent-border-active: var(--brand-teal-bright) !important;
}

html,
body.scalar-app {
  background: var(--brand-ink) !important;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

code, pre, kbd, samp {
  font-family: 'Fragment Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
}

/* Self-hosted: there is no hosted platform header, so collapse the reserved
   header band to 0 — this lets the sidebar and content start at the very top
   and the sidebar span the full page height. The Swich logo is injected into
   the top of the sidebar instead (see src/main.js). */
:root,
.light-mode,
.dark-mode {
  --scalar-header-height: 0px !important;
}

/* Official Swich logo lockup in the header — enlarged for prominence */
.scalar-app img[alt="logo"],
header img {
  height: 42px !important;
  width: auto !important;
}

/* ---- Clean intro heading ----
   Hide the "v2.0.0 / OpenAPI 3.1.1" badge row that sits directly above
   the document title, so the section starts cleanly with the H1. Scoped
   to the row immediately preceding the title wrapper so per-operation
   method/status badges are untouched. */
.section-content > .flex:has(> .badge):has(+ .section-header-wrapper) {
  display: none !important;
}

/* Hide the "Download OpenAPI Document" buttons (also disabled in config) */
.download-container {
  display: none !important;
}

/* ---- Remove the Server / Authentication / Client Libraries intro card
   so the introduction text spans the full content width ---- */
.section-column:has(.introduction-card),
.section-column:has(.sticky-cards) {
  display: none !important;
}
.section-columns {
  display: block !important;
}

/* Soft brand glow behind the intro, echoing swichnow.io */
.section-content:first-of-type::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 6%;
  width: 60%;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(1, 55, 239, 0.16), rgba(17, 117, 149, 0.08) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Primary buttons pick up the brand gradient */
.scalar-button.scalar-button-primary,
button.show-api-client-button {
  background: var(--brand-gradient) !important;
  color: #04140f !important;
  border: none !important;
}

/* Wrap long values (e.g. bearer tokens) in request/response code viewers
   instead of forcing horizontal scroll. Targets the CodeMirror-based
   viewer used for JSON bodies (request examples, live Send responses).
   CodeMirror sets an explicit inline pixel width on .cm-line/.cm-content
   when line-wrapping isn't enabled in its own config, which silently
   defeats a plain white-space override — so width/min-width/max-width
   have to be forced too, not just white-space. */
.cm-editor,
.cm-editor .cm-scroller,
.cm-editor .cm-content,
.cm-editor .cm-line {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.cm-editor .cm-line,
.cm-editor .cm-content {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.cm-editor .cm-scroller {
  overflow-x: hidden !important;
}

/* Some read-only viewers render as a plain <pre>/<code> pair rather than
   CodeMirror — wrap those too, without touching the header logo. */
main pre,
main pre code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* Sidebar section/folder headings (Getting Started, Pay In, Payout, Reference,
   and the nested channel folders like E-Wallet/1Bill) were rendering in a dim
   gray (--scalar-sidebar-color-2). Bring them up to a bright near-white so the
   navigation hierarchy reads clearly. */
.t-doc__sidebar .sidebar-heading,
.t-doc__sidebar .sidebar-group-item__folder.sidebar-heading,
.t-doc__sidebar .sidebar-indent-nested .sidebar-heading {
  color: #ffffff !important;
}

/* Remove the "Powered by Scalar" footer link (keep the dark-mode toggle
   next to it, which lives in the same footer row). */
.t-doc__sidebar a[href="https://www.scalar.com"] {
  display: none !important;
}

/* Drop the long response-level description paragraph that repeats below
   every status code's example body in the response viewer card (e.g. the
   generic "Bad Request — invalid values provided..." text). It ate up
   most of the card's height, crowding out the example selector that lets
   you page through the other example bodies documented under that code. */
.response-card .response-description {
  display: none !important;
}

/* All example bodies for the selected HTTP status code, rendered by
   example-count-hint.js into one fixed-height, scrollable box (in place of
   Scalar's single-example view + dropdown, only for codes that have more
   than one documented example). Same-size box regardless of how many
   examples a code carries — scroll inside it rather than growing the card. */
/* Scalar caps the response viewer card (.response-card) at a short
   max-height; lift that only for cards hosting our stacked box, and let
   the box itself be the fixed, consistent scroll boundary instead. */
.response-card:has(.stacked-examples) {
  max-height: none !important;
}

.stacked-examples {
  display: block;
  padding: 0 !important;
  max-height: 520px;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Make the scroll region obvious and comfortable. We style the WebKit/
     Chromium scrollbar so it is always visible and reserves its own gutter
     (a clear "there is more to see" affordance), and scrolls the box directly
     — no custom wheel handling needed, since the standalone reference does not
     hijack wheel. NOTE: the standard `scrollbar-width`/`scrollbar-color`
     properties are intentionally NOT set here — setting either makes Chromium
     ignore the `::-webkit-scrollbar` rules and fall back to a thin overlay bar
     that reserves no space. Firefox falls back to its default scrollbar. */
}

.stacked-examples::-webkit-scrollbar {
  width: 10px;
}

.stacked-examples::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.stacked-examples::-webkit-scrollbar-thumb {
  background: var(--brand-teal);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.stacked-examples::-webkit-scrollbar-thumb:hover {
  background: var(--brand-teal-bright);
  background-clip: padding-box;
}

.stacked-example {
  padding: 10px 12px;
  border-bottom: 1px solid var(--brand-border);
}

.stacked-example:last-child {
  border-bottom: none;
}

.stacked-example-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-dim);
  margin-bottom: 6px;
}

.stacked-example-pre {
  margin: 0;
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: var(--scalar-font-code);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--brand-text);
}

/* ============================================================
   Final polish — professional UI touches
   ============================================================ */

/* Brand-colored text selection */
::selection {
  background: rgba(1, 55, 239, 0.45);
  color: #ffffff;
}

/* Crisp, pure-white headings in the content column */
.section-header-wrapper h1,
.section-header,
main h1,
main h2 {
  color: #ffffff !important;
}

/* Sidebar: slightly roomier items + smooth hover, thin branded scrollbar */
.t-doc__sidebar .sidebar-heading {
  transition: background 0.15s ease, color 0.15s ease;
}

.t-doc__sidebar .sidebar-group {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

/* Active sidebar item gets a subtle brand-gradient edge for orientation */
.t-doc__sidebar .sidebar-heading.active_page {
  position: relative;
}

.t-doc__sidebar .sidebar-heading.active_page::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 2.5px;
  border-radius: 2px;
  background: var(--brand-gradient);
}

/* ============================================================
   Collapsible sidebar
   The toggle button is injected by src/main.js. Collapsing sets
   --scalar-sidebar-width to 0 (the component's own layout variable),
   so the content column re-flows to full width automatically.
   ============================================================ */
html.swich-sidebar-collapsed {
  --scalar-sidebar-width: 0px !important;
}

.t-doc__sidebar {
  transition: width 0.28s ease, min-width 0.28s ease;
  overflow: hidden !important;
}

/* Let long operation titles wrap to a second line instead of overflowing
   under the HTTP method badge. (This sidebar previously used
   white-space:nowrap for the collapse animation, which forced every label
   onto a single line and caused the overlap.) Scalar's own ScalarWrappingText
   already inserts sensible break points; we just allow wrapping and keep the
   method badge from being squeezed. */
.t-doc__sidebar .sidebar-heading {
  white-space: normal;
  align-items: flex-start;
}
.t-doc__sidebar .sidebar-heading-type {
  flex: none;
}

html.swich-sidebar-collapsed .t-doc__sidebar {
  border-right: none !important;
  pointer-events: none;
  white-space: nowrap; /* keep labels on one line only while sliding shut */
}

/* Fade the sidebar's contents out while it slides shut */
.t-doc__sidebar > * {
  transition: opacity 0.18s ease;
}

html.swich-sidebar-collapsed .t-doc__sidebar > * {
  opacity: 0;
}

/* The round toggle button riding the sidebar's right edge */
.swich-sidebar-toggle {
  position: fixed;
  top: 21px;
  left: calc(var(--scalar-sidebar-width, 288px) - 14px);
  z-index: 120;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border-strong);
  color: #dfe4ec;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  transition: left 0.28s ease, background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.swich-sidebar-toggle:hover {
  background: var(--brand-surface-2);
  color: #ffffff;
  border-color: var(--brand-teal-bright);
}

.swich-sidebar-toggle svg {
  width: 14px;
  height: 14px;
  transition: transform 0.28s ease;
}

/* When collapsed, park the button at the left edge and flip the chevron */
html.swich-sidebar-collapsed .swich-sidebar-toggle {
  left: 10px;
}

html.swich-sidebar-collapsed .swich-sidebar-toggle svg {
  transform: rotate(180deg);
}

/* Hide the toggle on small screens where Scalar switches to its own
   mobile drawer navigation */
@media (max-width: 1000px) {
  .swich-sidebar-toggle {
    display: none;
  }
}

/* "Register on Sandbox" — fixed top-right link-button, injected by src/main.js */
.swich-register-btn {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 130;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--brand-gradient);
  color: #04140f !important;
  font-family: var(--scalar-font);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(1, 55, 239, 0.28), 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.swich-register-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(1, 55, 239, 0.38), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.swich-register-btn:active {
  transform: translateY(0);
}

@media (max-width: 640px) {
  .swich-register-btn {
    top: 10px;
    right: 10px;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }
}

/* ============================================================
   Sidebar section headers (x-tagGroups: Getting Started / Pay In / Payout)
   Tagged with .swich-group-row by src/main.js. Rendered as bold, upper-case,
   divided section labels so the top-level sections are clearly separated from
   the tag folders nested under them — and made collapsible.
   ============================================================ */
.t-doc__sidebar .swich-group-row {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--brand-border-strong) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--brand-teal-bright) !important;
}

/* The first section (Getting Started) sits right under the logo — no divider
   needed above it. */
.t-doc__sidebar .swich-group-row:first-child,
.t-doc__sidebar .swich-logo-header + .swich-group-row {
  margin-top: 6px !important;
  border-top: none !important;
}

.swich-group-row.swich-group-collapsible {
  cursor: pointer;
  user-select: none;
}

.swich-group-row.swich-group-collapsible:hover {
  color: var(--brand-green-bright) !important;
}

/* Collapse chevron riding at the end of the section header */
.swich-group-chevron {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.2s ease;
}
.swich-group-chevron svg {
  width: 13px;
  height: 13px;
}
.swich-group-row.swich-group-collapsed .swich-group-chevron {
  transform: rotate(-90deg);
}

/* Hidden section body when collapsed */
.swich-group-hidden {
  display: none !important;
}