/* ClickShop theme for the Scalar API reference (theme: 'none'). */

:root {
  --cs-red: #d61f33;
  --cs-header-h: 56px;
  --scalar-custom-header-height: var(--cs-header-h);
  --scalar-font: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --scalar-font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --scalar-radius: 6px;
  --scalar-radius-lg: 10px;
  --scalar-radius-xl: 14px;
}

.light-mode {
  --scalar-color-1: #15151a;
  --scalar-color-2: #4f4f5a;
  --scalar-color-3: #85858f;
  --scalar-color-accent: #c81a2c;
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f7f7f9;
  --scalar-background-3: #eeeef2;
  --scalar-background-accent: #fdecee;
  --scalar-border-color: #e7e7ec;
  --scalar-color-green: #13804b;
  --scalar-color-red: #c81a2c;
  --scalar-color-yellow: #a35d00;
  --scalar-color-blue: #1f5fbf;
  --scalar-color-orange: #b4540a;
  --scalar-color-purple: #6b3fc4;
  --scalar-button-1: #15151a;
  --scalar-button-1-color: #ffffff;
  --scalar-button-1-hover: #2c2c34;

  --scalar-sidebar-background-1: #fafafb;
  --scalar-sidebar-color-1: #15151a;
  --scalar-sidebar-color-2: #55555f;
  --scalar-sidebar-border-color: #ececf0;
  --scalar-sidebar-item-hover-background: #f0f0f3;
  --scalar-sidebar-item-hover-color: #15151a;
  --scalar-sidebar-item-active-background: #fdecee;
  --scalar-sidebar-color-active: #c81a2c;
  --scalar-sidebar-search-background: #ffffff;
  --scalar-sidebar-search-border-color: #e3e3e8;
  --scalar-sidebar-search-color: #85858f;

  --cs-header-bg: rgba(255, 255, 255, 0.86);
}

.dark-mode {
  --scalar-color-1: #f2f2f5;
  --scalar-color-2: #a9a9b4;
  --scalar-color-3: #73737e;
  --scalar-color-accent: #ff5466;
  --scalar-background-1: #0e0e11;
  --scalar-background-2: #16161b;
  --scalar-background-3: #212128;
  --scalar-background-accent: #3a1218;
  --scalar-border-color: #26262e;
  --scalar-color-green: #3fcf8e;
  --scalar-color-red: #ff5466;
  --scalar-color-yellow: #f5b544;
  --scalar-color-blue: #6ea8ff;
  --scalar-color-orange: #ff9a52;
  --scalar-color-purple: #b39bff;
  --scalar-button-1: #f2f2f5;
  --scalar-button-1-color: #0e0e11;
  --scalar-button-1-hover: #d9d9df;

  --scalar-sidebar-background-1: #0b0b0e;
  --scalar-sidebar-color-1: #f2f2f5;
  --scalar-sidebar-color-2: #9a9aa5;
  --scalar-sidebar-border-color: #1f1f26;
  --scalar-sidebar-item-hover-background: #18181e;
  --scalar-sidebar-item-hover-color: #f2f2f5;
  --scalar-sidebar-item-active-background: #2a0f14;
  --scalar-sidebar-color-active: #ff6b7b;
  --scalar-sidebar-search-background: #16161b;
  --scalar-sidebar-search-border-color: #26262e;
  --scalar-sidebar-search-color: #73737e;

  --cs-header-bg: rgba(14, 14, 17, 0.82);
}

html,
body {
  margin: 0;
  background: var(--scalar-background-1, #fff);
  font-family: var(--scalar-font);
}

/* ---------- Top bar ---------- */

.cs-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--cs-header-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--cs-header-bg, #fff);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--scalar-border-color, #e7e7ec);
}

.cs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--scalar-color-1);
  min-width: 0;
}
.cs-brand img {
  border-radius: 50%;
  flex: none;
}
.cs-brand-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.cs-brand-product {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--scalar-color-accent);
  background: var(--scalar-background-accent);
  white-space: nowrap;
}

.cs-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cs-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--scalar-color-2);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.cs-nav a:hover {
  color: var(--scalar-color-1);
  background: var(--scalar-background-2);
}
.cs-nav .cs-nav-spec {
  color: var(--scalar-color-1);
  border: 1px solid var(--scalar-border-color);
  margin-left: 6px;
}

@media (max-width: 720px) {
  .cs-nav a:not(.cs-nav-spec) {
    display: none;
  }
  .cs-header {
    padding: 0 16px;
  }
}

/* ---------- Scalar tweaks ---------- */

/* No third-party branding. */
.darklight-reference .darklight-reference-promo,
a[href*='scalar.com'],
a[href*='apidocumentation.com'] {
  display: none !important;
}

.scalar-app .markdown h1 {
  letter-spacing: -0.02em;
}
.scalar-app .markdown table {
  font-size: 0.92em;
  table-layout: auto;
}
.scalar-app .markdown table td,
.scalar-app .markdown table th {
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}
.scalar-app .markdown table th {
  white-space: nowrap;
}
/* Scalar hides empty header cells, which shifts the header row out of line. */
.scalar-app .markdown table th:empty {
  display: table-cell;
}
.scalar-app .markdown code {
  font-size: 0.88em;
}
.scalar-app .markdown input[type='checkbox'] {
  accent-color: var(--scalar-color-accent);
}

/* Webhooks are called by ClickShop, so there's nothing to "test" from here. */
section[id*='/webhook/'] .show-api-client-button {
  display: none !important;
}

.scalar-app code,
.scalar-app pre,
.scalar-app .cm-content {
  font-variant-ligatures: none;
}

/* Arabic product names inside examples render with a matching font. */
.scalar-app :lang(ar) {
  font-family: 'IBM Plex Sans Arabic', var(--scalar-font);
}