.globaltoc li > a {
  box-sizing: border-box;
  display: block;
  overflow-wrap: anywhere;
  padding-right: 1.75rem;
}

.globaltoc li > button {
  z-index: 1;
}

/* ============================================================
   Sidebar TOC links — explicit theme-aware colours.

   Shibuya's default TOC text colour can disappear in dark mode
   (insufficient contrast against the dark sidebar background).
   This block sets explicit colours for both themes:

     1. Inactive items: muted but readable
     2. Hover:          brand color (pop on interaction)
     3. Active item:    brand color + bold (current page / scroll
                        section)

   Affects both:
     - .globaltoc — left sidebar (page-level TOC)
     - .localtoc  — right sidebar (page section TOC)

   Shibuya marks the current page with class="current" on the <li>
   and <a>; the right-side localtoc gets class="active" via
   scroll-spy JS.
   ============================================================ */

/* Selectors below mirror Shibuya's own patterns
   (`.globaltoc > ul a:hover`, `.localtoc > ul li > a:hover`,
   `.globaltoc > ul a.current`, etc.) so they win the cascade by
   matching specificity AND being loaded after the theme CSS. */

/* Inactive items — muted but readable in both themes */
.globaltoc > ul a,
.localtoc > ul li > a {
  color: rgba(15, 23, 42, 0.72);
}

html.dark .globaltoc > ul a,
html.dark .localtoc > ul li > a {
  color: rgba(245, 247, 250, 0.72);
}

/* Hover — brand colour. Specificity matches Shibuya rule so source
   order wins without !important. */
.globaltoc > ul a:hover,
.localtoc > ul li > a:hover {
  color: #272b36;
}

html.dark .globaltoc > ul a:hover,
html.dark .localtoc > ul li > a:hover {
  color: #474f63;
}

/* Active / current — brand colour + bold */
.globaltoc > ul a.current,
.localtoc > ul li.active > a {
  color: #272b36;
  font-weight: 600;
}

html.dark .globaltoc > ul a.current,
html.dark .localtoc > ul li.active > a {
  color: #474f63;
}

/* Vertical bar indicator next to the current page.

   Shibuya draws a `border-left` on `.toctree-l2.current` using its
   own `--sy-c-link` (neutral blue). We override to the WL brand
   colour so the indicator matches the rest of the active styling. */
.globaltoc li.toctree-l2.current,
.globaltoc li.toctree-l3.current,
.globaltoc li.toctree-l4.current,
.globaltoc li.toctree-l5.current {
  border-color: #272b36;
}

html.dark .globaltoc li.toctree-l2.current,
html.dark .globaltoc li.toctree-l3.current,
html.dark .globaltoc li.toctree-l4.current,
html.dark .globaltoc li.toctree-l5.current {
  border-color: #474f63;
}

.localtoc li {
  position: relative;
}

.localtoc li > ul {
  display: none;
}

.localtoc li._expand > ul {
  display: block;
}

.localtoc li._collapse > ul {
  display: none;
}

.localtoc li._expand > a,
.localtoc li._collapse > a {
  display: block;
  padding-right: 1.1rem;
}

.localtoc li > button.localtoc-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  top: 0.2rem;
  right: 0;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

.localtoc li > button.localtoc-toggle:hover {
  background-color: var(--sy-c-surface);
}

.localtoc li > button.localtoc-toggle > i {
  transition: transform 0.2s;
  transform: rotate(0);
}

.localtoc li._expand > button.localtoc-toggle > i {
  transform: rotate(90deg);
}

.yue a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-border-strong, currentColor);
  transition: color 160ms ease, text-decoration-thickness 160ms ease,
              text-decoration-color 160ms ease;
}

.yue a:hover {
  color: #272b36;
  text-decoration-thickness: 2px;
  text-decoration-color: #272b36;
}

html.dark .yue a:hover {
  color: #474f63;
  text-decoration-color: #474f63;
}

/* Plugins summary table (source_integration/plugins.rst): remove the link
   underline for every link in the table (platform names, GitHub, Live demo).
   The theme draws it as a `border-bottom`, so clear that (and text-decoration
   for good measure) — with icons and cell layout the links read clearly.
   The underline returns on hover to signal the links are clickable. */
.yue table.plugins-table a {
  text-decoration: none;
  border-bottom: none;
}
.yue table.plugins-table a:hover {
  border-bottom: 1px solid currentColor;
}

/* Headings inside content shouldn't carry the underline even
   though they are links (Shibuya wraps section headers in <a>
   for anchor permalinks). */
.yue h1 a,
.yue h2 a,
.yue h3 a,
.yue h4 a,
.yue h5 a,
.yue h6 a {
  text-decoration: none;
}

/* ============================================================
   Inline literal code — brand-coloured background tint.

   Targets RST `` ``literal`` `` markup which Sphinx renders as
   <code class="docutils literal notranslate">. Selector excludes
   <pre><code> code blocks (those don't carry the .literal class
   and are handled by Pygments syntax highlighter).

   Strategy: keep the text in default body colour for readability,
   tint the background and border with brand colour so inline code
   visually pops as "this is technical / a name / an identifier"
   without overwhelming the page with coloured text.

   Visible on: API parameter names, command names, field labels
   like ``Turnover`` from manager/dashboard.rst, etc.
   ============================================================ */

.yue code.literal {
  background-color: color-mix(in srgb, #111111 8%, transparent);
  border: 1px solid color-mix(in srgb, #111111 18%, transparent);
}

html.dark .yue code.literal {
  background-color: color-mix(in srgb, #474f63 12%, transparent);
  border-color: color-mix(in srgb, #474f63 22%, transparent);
}

/* ============================================================
   Custom RST roles: :ex: and :code:
   Defined via `.. role:: ex` and `.. role:: code` in source RST.
   Sphinx renders them as <span class="ex"> and <span class="code">.
   Both have dark-mode variants via Shibuya's `html.dark` class.
   ============================================================ */

/* :ex: — example / placeholder values.
   Used in API docs for URLs, IDs, sample parameter values.
   Italic + crimson tint signals "this is an example, replace it". */
.ex {
  display: inline;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--sy-f-mono, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
  font-size: 0.875em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  word-break: keep-all;
  background-color: rgba(199, 37, 78, 0.08);
  color: rgb(199, 37, 78);
}
html.dark .ex {
  background-color: rgba(255, 121, 152, 0.14);
  color: rgb(255, 152, 174);
}

/* :code: — alternate inline-code styling.
   Neutral tint + subtle border. Used for short literal snippets like
   HTTP methods ("HTTPS POST"), command names, header values. */
.code {
  display: inline;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--sy-f-mono, ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
  font-size: 0.875em;
  line-height: 1.4;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background-color: rgba(0, 0, 0, 0.04);
  color: inherit;
  white-space: nowrap;
  word-break: keep-all;
}
html.dark .code {
  border-color: rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.06);
}

/* Allow wrapping inside tables — long URLs / values shouldn't overflow cells. */
table .ex,
table .code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ============================================================
   Request Builder + Postman Collection widgets
   Tuned to match Shibuya's clean look: subtle backgrounds, soft
   borders, brand color used sparingly (focus rings, button fill,
   tab underline). No solid bars, no ALL CAPS, no harsh contrasts.
   ============================================================ */

/* ---- Postman Run button container ---- */
.postman-run-button {
  display: block;
  margin: 1rem 0 1.5rem;
  text-align: left;
}

.yue .openapi-reference-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 135px;
  height: 32px;
  padding: 0;
  font-size: 0.8125em;
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
  background-color: #111111;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.yue .openapi-reference-button:hover {
  background-color: #474f63;
  box-shadow: 0 2px 6px rgba(46, 141, 230, 0.22);
  color: #fff;
  text-decoration: none;
}
html.dark .yue .openapi-reference-button:hover {
  color: #fff;
  text-decoration-color: #fff;
}
.yue .openapi-reference-button:active {
  background-color: #272b36;
  color: #fff;
}
.yue .openapi-reference-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 141, 230, 0.25);
  color: #fff;
}
.openapi-reference-button svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ---- Request Builder tables ---- */
table.api-content,
table.api-content-value,
table.api-content-wrong {
  width: 100%;
  margin: 0.75rem 0 1.5rem;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  font-size: 0.9em;
}
html.dark table.api-content,
html.dark table.api-content-value,
html.dark table.api-content-wrong {
  border-color: rgba(255, 255, 255, 0.10);
}

table.api-content-value {
  font-family: var(--sy-f-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  word-break: break-word;
}

/* Row label cells (parameter names like "purpose", "merchant_control") —
   styled like inline-code chips: subtle brand tint, monospace, no caps. */
.api-content th,
.api-content-value th,
.api-content-wrong th {
  padding: 6px 12px;
  text-align: left;
  font-family: var(--sy-f-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.4;
  color: #272b36;
  background-color: rgba(46, 141, 230, 0.05);
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
html.dark .api-content th,
html.dark .api-content-value th,
html.dark .api-content-wrong th {
  color: rgb(108, 187, 247);
  background-color: rgba(76, 170, 246, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  border-right-color: rgba(255, 255, 255, 0.06);
}

/* Data cells */
.api-content td,
.api-content-value td,
.api-content-wrong td {
  padding: 4px 12px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
  background: transparent;
  line-height: 1.4;
}
.api-content td p,
.api-content-value td p,
.api-content-wrong td p {
  margin: 0;
  line-height: 1.4;
}
html.dark .api-content td,
html.dark .api-content-value td,
html.dark .api-content-wrong td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.api-content tr:last-child > *,
.api-content-value tr:last-child > *,
.api-content-wrong tr:last-child > * {
  border-bottom: none;
}

/* Highlighted "invalid example" rows (legacy api-content-wrong behavior) */
table.api-content-wrong tbody tr:nth-child(9) td,
table.api-content-wrong tbody tr:nth-child(17) td,
table.api-content-wrong tbody tr:nth-child(18) td,
table.api-content-wrong tbody tr:nth-child(25) td,
table.api-content-wrong tbody tr:nth-child(27) td,
table.api-content-wrong tbody tr:nth-child(35) td {
  background-color: rgba(199, 37, 78, 0.04);
}
html.dark table.api-content-wrong tbody tr:nth-child(9) td,
html.dark table.api-content-wrong tbody tr:nth-child(17) td,
html.dark table.api-content-wrong tbody tr:nth-child(18) td,
html.dark table.api-content-wrong tbody tr:nth-child(25) td,
html.dark table.api-content-wrong tbody tr:nth-child(27) td,
html.dark table.api-content-wrong tbody tr:nth-child(35) td {
  background-color: rgba(255, 121, 152, 0.07);
}

/* Inputs inside builder — always have a visible border so the "box" size
   stays consistent regardless of focus/mcell state. */
.api-content input,
input.debug-field,
.debug-field {
  width: 100%;
  padding: 5px 10px;
  font-size: 0.9em;
  font-family: var(--sy-f-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-weight: 400;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  background-color: transparent;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
html.dark .api-content input,
html.dark input.debug-field,
html.dark .debug-field {
  border-color: rgba(255, 255, 255, 0.10);
}
.api-content input::placeholder,
input.debug-field::placeholder,
.debug-field::placeholder {
  color: rgba(0, 0, 0, 0.35);
  font-style: normal;
}
html.dark .api-content input::placeholder,
html.dark input.debug-field::placeholder,
html.dark .debug-field::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.api-content input:hover,
input.debug-field:hover,
.debug-field:hover {
  border-color: rgba(0, 0, 0, 0.15);
}
html.dark .api-content input:hover,
html.dark input.debug-field:hover,
html.dark .debug-field:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.api-content input:focus,
input.debug-field:focus,
.debug-field:focus {
  outline: none;
  border-color: #111111;
  background-color: transparent;
  box-shadow: 0 0 0 3px rgba(46, 141, 230, 0.15);
}

/* mcell highlight — paint the INPUT itself, not the surrounding td.
   This keeps the highlighted box the same visual size as a focused input. */
.mcell {
  background-color: transparent !important;
}
.mcell .debug-field,
.mcell input,
td.mcell .debug-field,
td.mcell input {
  background-color: rgba(199, 37, 78, 0.05);
  border-color: rgba(199, 37, 78, 0.18);
}
html.dark .mcell .debug-field,
html.dark .mcell input,
html.dark td.mcell .debug-field,
html.dark td.mcell input {
  background-color: rgba(255, 121, 152, 0.08);
  border-color: rgba(255, 121, 152, 0.22);
}
/* If a focus happens inside an mcell, keep the brand-color focus chrome on top */
.mcell .debug-field:focus,
.mcell input:focus,
td.mcell .debug-field:focus,
td.mcell input:focus {
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(46, 141, 230, 0.15);
}

/* mcell on text-only cells (no input) — keep the original td-level tint */
td.mcell:not(:has(input)):not(:has(.debug-field)) {
  background-color: rgba(199, 37, 78, 0.04) !important;
}
html.dark td.mcell:not(:has(input)):not(:has(.debug-field)) {
  background-color: rgba(255, 121, 152, 0.07) !important;
}

/* Section sub-headers like "String to sign", "Signature" —
   rendered as a quiet accent block with left brand-color stripe
   instead of a full-width solid bar. */
.th-padding {
  display: block;
  margin: 1rem 0 0.5rem;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.875em;
  color: #272b36;
  background-color: rgba(46, 141, 230, 0.05);
  border-radius: 6px;
  border-left: 3px solid #111111;
  text-transform: none;
  letter-spacing: 0;
}
html.dark .th-padding {
  color: rgb(108, 187, 247);
  background-color: rgba(76, 170, 246, 0.08);
}

/* When .th-padding is used as a TABLE CELL class (legacy markup like
   `<th class="th-padding">credit_card_number</th>`), reset the block-style
   accent — the table cell already has its own background/border setup. */
.api-content th.th-padding,
.api-content-value th.th-padding,
.api-content-wrong th.th-padding {
  display: table-cell;
  margin: 0;
  padding: 6px 12px;
  border-left: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  background-color: rgba(46, 141, 230, 0.05);
  vertical-align: middle;
}
html.dark .api-content th.th-padding,
html.dark .api-content-value th.th-padding,
html.dark .api-content-wrong th.th-padding {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  border-right-color: rgba(255, 255, 255, 0.06);
  background-color: rgba(76, 170, 246, 0.08);
}

/* Body cells (TD) align to top — when a row has an input plus a helper
   line (e.g. "Generated by Merchant's server..."), the input stays
   anchored at the top instead of shifting down. */
.api-content td,
.api-content-value td,
.api-content-wrong td {
  vertical-align: top;
}
/* Label cells (TH, left column) vertically centered, so a short label
   sits in the middle of a tall multi-line row. */
.api-content th,
.api-content-value th,
.api-content-wrong th {
  vertical-align: middle;
}

/* `.debug-field` is sometimes applied to NON-input elements (e.g.
   `<nobr class="debug-field">credit_card_number</nobr>` used as a label).
   When it's not an input, strip all input-like chrome — render as plain text. */
nobr.debug-field,
span.debug-field,
label.debug-field,
.debug-field:not(input):not(textarea):not(select) {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  transition: none;
}

/* Legacy Request_Debug HTML has inline `style="width: 5%"` on small
   action buttons (e.g. "Generate", "i" hint). Force them to size to
   their content despite the inline style. */
.api-content input[type="button"].debug-button,
.api-content input[type="button"].doc-button,
input[type="button"].debug-button,
input[type="button"].doc-button {
  width: auto !important;
  min-width: max-content;
}

/* .nbinfo paragraphs sometimes wrap action buttons (Generate). Don't let
   them inherit the centered-paragraph styling that pulls buttons off-grid. */
.api-content .nbinfo,
.api-content-value .nbinfo,
.api-content-wrong .nbinfo {
  display: block;
  margin: 4px 0 0;
}

/* ---- Buttons ---- */
.doc-button,
input.debug-button,
.debug-button {
  display: inline-block;
  padding: 8px 16px;
  margin: 4px 2px;
  font-size: 0.875em;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  background-color: #111111;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  width: auto;
  text-transform: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.doc-button:hover,
input.debug-button:hover,
.debug-button:hover {
  background-color: #474f63;
  box-shadow: 0 2px 6px rgba(46, 141, 230, 0.22);
}
.doc-button:active,
input.debug-button:active,
.debug-button:active {
  background-color: #272b36;
}
.doc-button:focus-visible,
input.debug-button:focus-visible,
.debug-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 141, 230, 0.25);
}

/* ---- Environment / option selects ---- */
.doc-select {
  margin: 8px 4px;
  padding: 6px 32px 6px 10px;
  font-size: 0.9em;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background-color: transparent;
  color: inherit;
  height: 34px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23384350' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html.dark .doc-select {
  border-color: rgba(255, 255, 255, 0.16);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23d8e1ed' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.doc-select:focus {
  outline: none;
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(46, 141, 230, 0.15);
}

/* ---- URL preview block ---- */
.api-url-result {
  display: block;
  max-width: 100%;
  margin: 0.75rem 0;
  padding: 12px 14px;
  font-family: var(--sy-f-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.875em;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
html.dark .api-url-result {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Info / hint text ---- */
.nbinfo,
p.nbinfo,
td.nbinfo {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  color: #272b36;
  font-weight: 500;
  font-size: 0.8em;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}
html.dark .nbinfo,
html.dark p.nbinfo,
html.dark td.nbinfo {
  color: rgb(108, 187, 247);
}

/* ---- Error message banner ---- */
.errorinfo {
  display: none;
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: 6px;
  background-color: rgba(239, 68, 68, 0.08);
  color: rgb(185, 28, 28);
  font-size: 0.875em;
  line-height: 1.5;
  border-left: 3px solid rgb(239, 68, 68);
}
html.dark .errorinfo {
  background-color: rgba(248, 113, 113, 0.12);
  color: rgb(252, 165, 165);
  border-left-color: rgb(248, 113, 113);
}

/* ============================================================
   Language picker tabs (cURL / PHP / Ruby / Java) — underline style
   ============================================================ */
.nav.nav-tabs {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
html.dark .nav.nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
.nav.nav-tabs > li {
  margin: 0;
  list-style: none;
}
.nav.nav-tabs > li > a {
  display: block;
  padding: 8px 16px;
  font-size: 0.875em;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
html.dark .nav.nav-tabs > li > a {
  color: rgba(255, 255, 255, 0.55);
}
.nav.nav-tabs > li > a:hover {
  color: #272b36;
  text-decoration: none;
}
html.dark .nav.nav-tabs > li > a:hover {
  color: rgb(108, 187, 247);
}
.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li.active > a:hover {
  color: #111111;
  background-color: transparent;
  border-bottom-color: #111111;
  cursor: default;
}

/* Tab content panel — single visual container that merges with the inner
   <pre> code block. Uses Shibuya's --code-block-background variable so the
   tab-content and the pre look like one continuous surface. */
.tab-content {
  margin: 0 0 1.5rem 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  background-color: var(--code-block-background, rgba(0, 0, 0, 0.04));
}
html.dark .tab-content {
  border-color: rgba(255, 255, 255, 0.10);
}

/* Copy button + other action inputs at the top of each tab pane:
   give them margin so they don't stick to the tab-content edge. */
.tab-content > .tab-pane > .doc-button,
.tab-content > .tab-pane > .debug-button,
.tab-content > .tab-pane > input[type="button"] {
  margin: 12px 12px 4px;
}

/* Inner Pygments/Shibuya wrappers — strip their bg/border so the
   tab-content's bg shows through as a single continuous surface. */
.tab-content .highlight,
.tab-content .highlight-text,
.tab-content [class^="highlight-"] {
  background: transparent;
  border: none;
}
.tab-content .highlight > pre,
.tab-content pre {
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  /* keep Shibuya's pre padding (1rem) — provides the text-to-border gap */

  /* Wrap long lines so Request Builder cURL/PHP/Ruby/Java snippets don't
     overflow horizontally. Without these rules a long `curl --data "..."`
     with many query params extends past the visible area and the reader
     can't see the full command without horizontal scrolling.

       white-space: pre-wrap  — keep original newlines + indentation, but
                                wrap on the right edge when a line is too long
       overflow-wrap: anywhere — break inside unbreakable tokens (URLs,
                                base64 blobs, query strings without spaces)
                                wherever needed to fit. Modern equivalent of
                                `word-break: break-all` but smarter — only
                                breaks if no better breakpoint is available. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html.light .highlight .err,
html.dark .highlight .err {
  border: none !important;
}

/* ============================================================
   highlight.js theme override (loaded by Request_Debug.html via
   `js/highlight/styles/default.css`). The default theme hardcodes
   `.hljs { background: #f0f0f0; color: black }` which creates a
   light "island" on dark mode. Override to inherit container bg,
   and provide dark-mode token colors so syntax stays readable.
   ============================================================ */
.tab-content .hljs,
.tab-content pre.hljs,
.tab-content code.hljs,
.hljs {
  background: transparent !important;
  color: inherit;
}

/* Light mode: keep highlight.js's default.css token colors (designed for
   light bg) — they work fine on `--code-block-background`. */

/* Dark mode: re-color tokens for readability on dark surface */
html.dark .tab-content .hljs,
html.dark .hljs {
  color: rgba(255, 255, 255, 0.86);
}
html.dark .hljs-comment,
html.dark .hljs-quote,
html.dark .hljs-meta {
  color: rgba(255, 255, 255, 0.42);
  font-style: italic;
}
html.dark .hljs-keyword,
html.dark .hljs-selector-tag,
html.dark .hljs-type,
html.dark .hljs-symbol,
html.dark .hljs-bullet {
  color: #c084fc;            /* purple */
}
html.dark .hljs-built_in,
html.dark .hljs-attribute,
html.dark .hljs-name,
html.dark .hljs-tag {
  color: #60a5fa;            /* blue */
}
html.dark .hljs-literal,
html.dark .hljs-number,
html.dark .hljs-variable,
html.dark .hljs-template-variable {
  color: #fb923c;            /* orange */
}
html.dark .hljs-string,
html.dark .hljs-doctag,
html.dark .hljs-regexp,
html.dark .hljs-link,
html.dark .hljs-addition {
  color: #86efac;            /* green */
}
html.dark .hljs-title,
html.dark .hljs-section,
html.dark .hljs-selector-id,
html.dark .hljs-function .hljs-title {
  color: #fbbf24;            /* yellow */
}
html.dark .hljs-subst {
  color: rgba(255, 255, 255, 0.86);
}
html.dark .hljs-deletion {
  color: #fb7185;            /* rose */
  background: rgba(239, 68, 68, 0.12);
}
html.dark .hljs-addition {
  background: rgba(16, 185, 129, 0.12);
}
html.dark .hljs-emphasis { font-style: italic; }
html.dark .hljs-strong { font-weight: 700; }
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .tab-pane.active,
.tab-content > .active {
  display: block;
}
.tab-content > .tab-pane.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.tab-content > .tab-pane.fade.in,
.tab-content > .tab-pane.fade.active {
  opacity: 1;
}

/* ============================================================
   Marketing footer (Solutions / Products / Business Type)
   Rendered after Shibuya's site-foot when YAML `footer: True`.
   Adapted from the legacy sphinx_rtd_theme footer block, modernized
   for Shibuya: subtle dividers, dark-mode aware, fluid responsive.
   ============================================================ */
.footer {
  width: 100%;
  margin: 24px 0 0;
  padding: 32px 0 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  color: inherit;
  font-size: 0.95em;
  line-height: 1.5;
}
html.dark .footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.footer-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-logo {
  display: inline-block;
  width: 169px;
  height: 47px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.footer-logo:hover {
  opacity: 1;
}

/* Theme-aware logo switching — Shibuya sets html.light / html.dark via
   localStorage._theme. Default-show the light variant so the markup is
   readable in unstyled / pre-JS state. */
.footer-logo--dark { display: none; }
html.dark .footer-logo--light { display: none; }
html.dark .footer-logo--dark  { display: inline-block; }

.footer-item {
  flex: 1 1 180px;
  min-width: 140px;
}
.footer-item:first-child {
  flex: 0 0 auto;
  min-width: 0;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-title {
  margin-bottom: 12px;
  font-size: 0.95em;
  font-weight: 600;
  color: inherit;
  letter-spacing: 0;
}

.footer-link {
  margin-bottom: 8px;
  list-style: none;
  font-size: 0.875em;
}
.footer-link a {
  color: rgba(0, 0, 0, 0.62);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-link a:hover {
  color: #272b36;
}
html.dark .footer-link a {
  color: rgba(255, 255, 255, 0.55);
}
html.dark .footer-link a:hover {
  color: rgb(108, 187, 247);
}

/* Copyright row — small print, separated by `|` dividers */
.footer-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 16px;
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 16px 24px 0;
  list-style: none;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
html.dark .footer-copy {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.footer-copy-item {
  display: inline-flex;
  align-items: center;
  font-size: 0.8em;
  color: rgba(0, 0, 0, 0.55);
  list-style: none;
}
html.dark .footer-copy-item {
  color: rgba(255, 255, 255, 0.5);
}
.footer-copy-item:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-left: 16px;
  background-color: rgba(0, 0, 0, 0.18);
}
html.dark .footer-copy-item:not(:last-child)::after {
  background-color: rgba(255, 255, 255, 0.18);
}
.footer-copy-item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-copy-item a:hover {
  color: #272b36;
}
html.dark .footer-copy-item a:hover {
  color: rgb(108, 187, 247);
}

/* Mobile / tablet: stack columns, left-align copyright */
@media (max-width: 1024px) {
  .footer-flex {
    flex-direction: column;
    gap: 24px;
    padding: 0 16px;
  }
  .footer-item {
    flex: 1 1 auto;
    min-width: 0;
  }
  .footer-item:first-child {
    margin-bottom: 8px;
  }
  .footer-copy {
    justify-content: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 16px 16px 0;
  }
  .footer-copy-item:not(:last-child)::after {
    display: none;
  }
}

/* ============================================================
   Cross-link admonition — "See also" / "См. также" block at the
   end of doc pages that points to a related marketing page on
   payneteasy.com (EN canonical) or payneteasy.ru (RU canonical).

   Rendered only on canonical sites via sphinx.ext.ifconfig
   gates in the .rst sources (see internal_linking.md).

   Visual: quiet accent block — subtle background tint with
   brand-color left border, no shouting.
   ============================================================ */
.admonition.related-cross-link {
  position: relative;
  margin: 4rem 0 1rem;
  padding: 12px 16px;
  background-color: rgba(46, 141, 230, 0.05);
  border-left: 3px solid #111111;
  border-radius: 6px;
}

.admonition.related-cross-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
html.dark .admonition.related-cross-link::before {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.admonition.related-cross-link .admonition-title {
  font-size: 0.85em;
  font-weight: 600;
  color: #272b36;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px;
}

.admonition.related-cross-link p {
  margin: 0;
}

.admonition.related-cross-link a {
  color: #272b36;
  font-weight: 500;
}

html.dark .admonition.related-cross-link {
  background-color: rgba(76, 170, 246, 0.08);
}

html.dark .admonition.related-cross-link .admonition-title,
html.dark .admonition.related-cross-link a {
  color: rgb(108, 187, 247);
}

/* ============================================================
   Search jump-to-match flash.

   custom.js adds .search-target to the element a search result
   points at (a restriction-name cell, heading, paragraph, …) right
   after scrolling it into view. A short flash draws the eye to the
   exact hit; it fades out on its own and the class is then removed.
   ============================================================ */
.search-target {
  border-radius: 4px;
  animation: search-target-flash 2.2s ease-out 1;
}

@keyframes search-target-flash {
  0%,
  35% {
    background-color: rgba(255, 165, 0, 0.35);
    box-shadow: 0 0 0 4px rgba(255, 165, 0, 0.35);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 4px transparent;
  }
}

html.dark .search-target {
  animation-name: search-target-flash-dark;
}

@keyframes search-target-flash-dark {
  0%,
  35% {
    background-color: rgba(255, 165, 0, 0.28);
    box-shadow: 0 0 0 4px rgba(255, 165, 0, 0.28);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 4px transparent;
  }
}