/* Billtrust API Docs — balanced hybrid chrome
   Mimic targets:
   - Plaid: calm white canvas, product cards, monochrome body, one brand accent
   - Stripe: technical density in code, restrained chrome, clear hierarchy
   - Billtrust: logo + green as accent (not a full green wash)

   Help Center continuity (ARC-16817): Tahoma, page-title green + underline.
*/

:root > * {
  /* Brand */
  --bt-green: #006E53;          /* primary accent / titles */
  --bt-green-logo: #028758;     /* logo leaf + title underline */
  --bt-green-bright: #38B270;   /* logo leaf bright — sparse accent only */
  --bt-ink: #001821;            /* dark chrome / strong text */
  --bt-body: #45494C;           /* body copy */
  --bt-muted: #59636e;
  --bt-border: #d0d7de;
  --bt-canvas: #f6f8fa;
  --bt-card: #ffffff;

  /* Match page canvas so Material sticky nav titles / sidebars are not pure white */
  --md-default-bg-color: #f6f8fa;
  --md-default-bg-color--light: #f6f8fa;
  --md-default-bg-color--lighter: #eef1f5;
  --md-default-bg-color--lightest: #ffffff;

  /* Material primary = ink header (Stripe-like restraint), green is accent */
  --md-primary-fg-color: #001821;
  --md-primary-fg-color--light: #334155;
  --md-primary-fg-color--dark: #000d12;
  --md-accent-fg-color: #006E53;
  --md-accent-fg-color--transparent: rgba(0, 110, 83, 0.10);
  --md-typeset-a-color: #006E53;
  --md-typeset-color: #45494C;
  --md-default-fg-color: #45494C;
  --md-default-fg-color--light: #45494C;
  --md-text-font: "Tahoma", "Segoe UI", sans-serif;
  --md-code-font: "Consolas", "Monaco", "Courier New", monospace;

  /* Code highlight — Plaid dark panels (default on docs site) */
  --md-code-fg-color: #e8eef7;
  --md-code-bg-color: #040444;
  --md-code-hl-color: rgba(125, 211, 252, 0.12);
  --md-code-hl-number-color: #fbbf24;
  --md-code-hl-special-color: #e9d5ff;
  --md-code-hl-function-color: #e9d5ff;
  --md-code-hl-constant-color: #fb7185;
  --md-code-hl-keyword-color: #fb7185;
  --md-code-hl-string-color: #86efac;
  --md-code-hl-name-color: #e8eef7;
  --md-code-hl-operator-color: #cbd5e1;
  --md-code-hl-punctuation-color: #cbd5e1;
  --md-code-hl-comment-color: #94a3b8;
  --md-code-hl-generic-color: #e8eef7;
  --md-code-hl-variable-color: #7dd3fc;

  --bt-heading-color: #006E53;
  --bt-heading-underline: #028758;
}

html { font-size: 100%; }

.md-grid { max-width: 1440px; }

body {
  font-family: var(--md-text-font);
  font-weight: 400;
  font-size: 16px;
  color: var(--bt-body);
  letter-spacing: normal;
  background: var(--bt-canvas);
}

/* ─── Header: dark ink + thin green accent (not a green wall) ─── */
.md-header,
.md-header--shadow {
  background-color: var(--bt-ink) !important;
  box-shadow: none !important;
  border-bottom: 3px solid var(--bt-green-logo);
}
.md-header__topic,
.md-header__topic:first-child,
.md-header__title,
.md-header__button {
  font-weight: 400;
  color: #fff !important;
}
.md-header__button.md-logo {
  padding: 0.35rem 0.5rem;
  margin: 0.1rem;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.25rem; /* ~36px — readable wordmark in ink header */
  width: auto;
  max-height: 36px;
}
/* Drawer logo (light sidebar) — same scale */
.md-nav__button.md-logo img,
.md-nav__button.md-logo svg {
  height: 2.25rem;
  width: auto;
  max-height: 36px;
}

/* Portal links in header */
.md-header__bt-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.md-header__bt-links a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 7px;
  font-family: Tahoma, "Segoe UI", sans-serif;
}
.md-header__bt-links a:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

/* Tabs under header: same ink, no second green slab */
.md-tabs {
  background-color: var(--bt-ink) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.md-tabs__link {
  color: rgba(255, 255, 255, 0.75);
  opacity: 1;
}
.md-tabs__link:hover,
.md-tabs__link--active,
.md-tabs__link:focus {
  color: #fff;
}
.md-tabs__link--active {
  border-bottom: 2px solid var(--bt-green-bright);
}

.md-search__form {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

/* ─── Content (Plaid calm) ─── */
.md-main { background: var(--bt-canvas); }
.md-content { background: transparent; }

/* Sidebars + sticky nav titles ("Table of contents", site name) — no white slabs */
.md-sidebar,
.md-sidebar--primary,
.md-sidebar--secondary,
.md-sidebar__scrollwrap,
.md-sidebar__inner {
  background: transparent !important;
  background-color: transparent !important;
}
.md-nav,
.md-nav--primary,
.md-nav--secondary,
.md-nav__list {
  background: transparent !important;
  background-color: transparent !important;
}
.md-nav__title,
.md-nav__title[for="__drawer"],
.md-nav__title[for="__toc"],
label.md-nav__title {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #1A1A1A !important;
}
/* Material sometimes paints the nested drawer header with primary/white */
.md-nav--primary .md-nav__title,
.md-nav--secondary .md-nav__title {
  background: transparent !important;
  box-shadow: none !important;
}

.md-typeset {
  font-family: var(--md-text-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.667;
  color: var(--bt-body);
  letter-spacing: 0.25px;
}
.md-typeset p,
.md-typeset li,
.md-typeset dd,
.md-typeset dt {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.25px;
}

/*
 * Content tables — site-wide (homepage Gateways, Overview, Connect,
 * headers, product parameter/status tables, etc.)
 *
 * Material ships `.md-typeset table:not([class]) { font-size: .64rem }`
 * (~10px). Override with !important so every page inherits body-scale type.
 */
.md-typeset table:not([class]),
.md-typeset .md-typeset__table table {
  font-size: 16px !important;
  line-height: 1.5 !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--bt-border);
  border: none !important;
  display: table !important;
  width: 100% !important;
  max-width: 100%;
  background: #fff;
}
.md-typeset table:not([class]) th,
.md-typeset .md-typeset__table table th {
  font-family: Tahoma, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  color: var(--bt-muted) !important;
  background: #eef1f5 !important;
  padding: 0.85em 1.1em !important;
  border-bottom: 1px solid var(--bt-border) !important;
  border-top: none !important;
  vertical-align: middle !important;
  min-width: 0;
}
.md-typeset table:not([class]) td,
.md-typeset .md-typeset__table table td {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--bt-body) !important;
  padding: 0.95em 1.1em !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--bt-border) !important;
}
.md-typeset table:not([class]) td:first-child,
.md-typeset table:not([class]) th:first-child,
.md-typeset .md-typeset__table table td:first-child,
.md-typeset .md-typeset__table table th:first-child {
  padding-left: 1.25em !important;
}
.md-typeset table:not([class]) td strong,
.md-typeset .md-typeset__table table td strong {
  color: #1A1A1A !important;
  font-weight: 600 !important;
}
/* Inline code in tables (hosts, field names, status codes) */
.md-typeset table:not([class]) :not(pre) > code,
.md-typeset table:not([class]) td code,
.md-typeset table:not([class]) th code,
.md-typeset .md-typeset__table table :not(pre) > code,
.md-typeset .md-typeset__table table td code,
.md-typeset .md-typeset__table table th code {
  font-size: 14px !important;
  padding: 0.28em 0.55em !important;
  line-height: 1.4 !important;
  word-break: break-word;
}
/* Scroll wrapper Material injects on wide tables */
.md-typeset .md-typeset__table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.75em 0 1.25em;
  padding: 0 !important;
  overflow-x: auto;
}

/*
 * Page title — Help Center signature (the main green moment in content)
 */
.md-typeset > :is(h1, h2, h3, h4, h5, h6) {
  color: var(--bt-heading-color);
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  border-bottom: 3px solid var(--bt-heading-underline);
  padding: 0 0 15px 0;
  margin: 30px 0;
}
.md-typeset > :is(h1, h2, h3, h4, h5, h6) .headerlink {
  color: var(--bt-heading-underline);
  font-size: 16px;
  vertical-align: middle;
}

/* Section headings after title — ink, not green */
.md-typeset > :is(h1, h2, h3, h4, h5, h6) ~ :is(h1, h2, h3, h4, h5, h6) {
  color: #1A1A1A;
  font-family: Tahoma, "Segoe UI", sans-serif;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  border-bottom: none;
  padding: 0;
  margin: 1.6em 0 0.64em;
}
.md-typeset > :is(h1, h2, h3, h4, h5, h6) ~ h2 { font-size: 28px; font-weight: 600; }
.md-typeset > :is(h1, h2, h3, h4, h5, h6) ~ h3 { font-size: 20px; font-weight: 600; }
.md-typeset > :is(h1, h2, h3, h4, h5, h6) ~ h4 { font-size: 18px; font-weight: 400; }
.md-typeset > :is(h1, h2, h3, h4, h5, h6) ~ h5 { font-size: 16px; font-weight: 400; }
.md-typeset > :is(h1, h2, h3, h4, h5, h6) ~ h6 { font-size: 14px; font-weight: 400; color: #45494C; }

.md-typeset :where(h2, h3) {
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.md-typeset :where(h4, h5, h6) {
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* Sidebar — monochrome like Plaid; green only on active */
.md-nav,
.md-nav__list,
.md-nav__item,
.md-nav__link,
.md-nav__title,
.md-nav--primary .md-nav__link,
.md-nav--secondary .md-nav__link,
label.md-nav__link {
  font-family: Tahoma, "Segoe UI", sans-serif;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.25px;
  color: #1A1A1A;
}
.md-nav__title {
  font-weight: 600;
  color: #1A1A1A;
}
.md-nav__item--section > .md-nav__link {
  font-weight: 600;
  color: #1A1A1A;
}
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  font-weight: 600;
  color: var(--bt-green) !important;
}

/* Links — green accent, not neon */
.md-typeset a {
  color: var(--bt-green);
}
.md-typeset a:hover {
  color: #004C51;
}
.md-typeset .headerlink {
  color: var(--bt-green-logo);
}

/* ─── Code blocks — Plaid dark style (single surface) ───
   Plaid CodeBlockV2 dark: header/body #040444 → #012e3c, radius 16px,
   copy 24×24 transparent white icon.
*/
.md-typeset .highlight {
  position: relative !important;
  background: linear-gradient(180deg, #040444 0%, #012e3c 100%) !important;
  border: 1px solid #1a2a4a !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin: 1.1em 0 !important;
  overflow: visible !important;
}

/* Inner pre: no second border */
.md-typeset .highlight > pre,
.md-typeset pre.bt-code-pre {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 1rem 2.6rem 1rem 1rem !important;
  overflow: auto !important;
  color: #e8eef7 !important;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}

/* Bare pre without .highlight */
.md-typeset > pre,
.md-typeset li > pre,
.md-typeset p + pre {
  position: relative !important;
  background: linear-gradient(180deg, #040444 0%, #012e3c 100%) !important;
  border: 1px solid #1a2a4a !important;
  border-radius: 12px !important;
  padding: 1rem 2.6rem 1rem 1rem !important;
  overflow: auto !important;
  color: #e8eef7 !important;
}

.md-typeset pre > code,
.md-typeset .highlight code {
  background: transparent !important;
  color: #e8eef7 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: "SF Mono", ui-monospace, Inconsolata, Consolas, Monaco, monospace !important;
  font-size: 0.84em !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* Inline chips stay light (page body) */
.md-typeset :not(pre) > code {
  background: #eef1f5 !important;
  color: #1f2328 !important;
  border: 1px solid #d0d7de !important;
  border-radius: 4px;
  padding: 0.12em 0.4em;
  font-size: 0.88em;
  font-weight: 500;
  font-family: "SF Mono", ui-monospace, Inconsolata, Consolas, Monaco, monospace;
}

/* Pygments tokens — bright on Plaid navy (high contrast) */
.md-typeset .highlight .c,
.md-typeset .highlight .ch,
.md-typeset .highlight .cm,
.md-typeset .highlight .c1,
.md-typeset .highlight .cs,
.md-typeset .highlight .cp { color: #94a3b8 !important; font-style: italic; }
.md-typeset .highlight .k,
.md-typeset .highlight .kc,
.md-typeset .highlight .kd,
.md-typeset .highlight .kn,
.md-typeset .highlight .kp,
.md-typeset .highlight .kr,
.md-typeset .highlight .kt { color: #fb7185 !important; font-weight: 600; }
.md-typeset .highlight .n,
.md-typeset .highlight .na,
.md-typeset .highlight .nb,
.md-typeset .highlight .nc,
.md-typeset .highlight .no,
.md-typeset .highlight .nd,
.md-typeset .highlight .ni,
.md-typeset .highlight .ne,
.md-typeset .highlight .nf,
.md-typeset .highlight .nl,
.md-typeset .highlight .nn,
.md-typeset .highlight .nx,
.md-typeset .highlight .py,
.md-typeset .highlight .nt,
.md-typeset .highlight .nv { color: #7dd3fc !important; }
.md-typeset .highlight .o,
.md-typeset .highlight .ow,
.md-typeset .highlight .p { color: #cbd5e1 !important; }
.md-typeset .highlight .s,
.md-typeset .highlight .sb,
.md-typeset .highlight .sc,
.md-typeset .highlight .sd,
.md-typeset .highlight .s2,
.md-typeset .highlight .se,
.md-typeset .highlight .sh,
.md-typeset .highlight .si,
.md-typeset .highlight .sx,
.md-typeset .highlight .sr,
.md-typeset .highlight .s1,
.md-typeset .highlight .ss { color: #86efac !important; }
.md-typeset .highlight .m,
.md-typeset .highlight .mb,
.md-typeset .highlight .mf,
.md-typeset .highlight .mh,
.md-typeset .highlight .mi,
.md-typeset .highlight .mo,
.md-typeset .highlight .il { color: #fbbf24 !important; font-weight: 600; }
.md-typeset .highlight .w { color: #e8eef7 !important; }
.md-typeset .highlight .err { color: #fb7185 !important; background: transparent !important; }
.md-typeset .highlight .nt { color: #7dd3fc !important; font-weight: 600; }
.md-typeset .highlight .kc { color: #fb7185 !important; }

/* Copy — Plaid dark header style: 24px, light icon, subtle hover */
.bt-code-host { position: relative !important; }
button.bt-copy {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  border: none !important;
  background: transparent !important;
  color: #ffffff !important;
  cursor: pointer;
  opacity: 0.85 !important;
  visibility: visible !important;
  box-shadow: none !important;
  transition: opacity .15s, background-color .15s;
}
button.bt-copy:hover,
button.bt-copy:focus {
  opacity: 1 !important;
  background: #3b3b3b !important;
  color: #fff !important;
  outline: none;
}
button.bt-copy--ok {
  opacity: 1 !important;
  background: rgba(56, 178, 112, 0.35) !important;
  color: #86efac !important;
}
button.bt-copy svg {
  display: block;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.md-typeset .md-clipboard { display: none !important; }


/* ─── Homepage action + product cards (Plaid-style) ─── */
.bt-action-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 1.5rem 0 2rem;
}
.bt-product-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0.75rem 0 1.5rem;
}
a.bt-action-card,
a.bt-product-card {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  background: #ffffff !important;
  border: 1px solid #d0d7de !important;
  border-radius: 12px !important;
  padding: 18px 18px 16px !important;
  text-decoration: none !important;
  color: #1f2328 !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  min-width: 0;
}
a.bt-product-card {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px !important;
}
a.bt-action-card:hover,
a.bt-product-card:hover {
  border-color: #b7e0c8 !important;
  box-shadow: 0 8px 24px rgba(0, 24, 32, 0.06) !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}
/* Reset Material heading/link styles inside cards */
a.bt-action-card h3,
a.bt-product-card h4,
.md-typeset a.bt-action-card h3,
.md-typeset a.bt-product-card h4 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  color: #001821 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
}
a.bt-action-card p,
a.bt-product-card p,
.md-typeset a.bt-action-card p,
.md-typeset a.bt-product-card p {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: #59636e !important;
  letter-spacing: normal !important;
  flex: 1;
}
.bt-ic,
.bt-pic {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid !important;
  place-items: center;
  margin: 0 0 4px 0 !important;
  background: #f6f8fa;
  color: #001821;
  font-size: 16px;
  flex-shrink: 0;
  border: 1px solid #d0d7de;
  padding: 0 !important;
}
.bt-pic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.bt-go,
.md-typeset a.bt-action-card .bt-go {
  margin-top: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #006E53 !important;
  border: none !important;
  padding: 0 !important;
  display: inline-block;
}
/* Don't style card anchors as green body links */
.md-typeset a.bt-action-card,
.md-typeset a.bt-product-card {
  color: inherit !important;
}

@media (max-width: 960px) {
  .bt-action-row,
  .bt-product-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .bt-action-row,
  .bt-product-grid { grid-template-columns: 1fr; }
}

/* Product lane badges on home cards */
.bt-lane {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--bt-border);
  color: var(--bt-muted);
  background: var(--bt-canvas);
}
.bt-lane-external {
  border-color: #b7e0c8;
  color: #006E53;
  background: #eef8f2;
}
.bt-lane-platform {
  border-color: #d0d7de;
  color: #001821;
  background: #eef1f5;
}
