/* ==========================================================================
   STRIPE-STYLE MODERN DOCS DESIGN
   Applies to ALL documentation pages
   ========================================================================== */

:root {
  --docs-max-width: 760px;
  --docs-sidebar-width: 380px;

  --docs-text: #f5f5f7;
  --docs-muted: #c2c2c7;
  --docs-border: rgba(255, 255, 255, 0.08);
  --docs-card: #111216;
  --docs-highlight: #4c8dff;
  --docs-highlight-soft: rgba(76, 141, 255, 0.25);

  --docs-radius: 12px;
  --docs-radius-lg: 18px;

  --code-bg: #0b0c0e;
  --code-border: rgba(255, 255, 255, 0.08);
  --code-shadow: 0 0 25px rgba(76, 141, 255, 0.12);
}

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */
.docs-layout {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

@media (max-width: 1100px) {
  .docs-layout {
    flex-direction: column;
  }
}


/* ==========================================================================
   LEFT COLUMN (Copy)
   ========================================================================== */
.docs-copy {
  color: var(--docs-text);
  max-width: var(--docs-max-width);
}

.docs-copy h1 {
  font-size: 2.6rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
}

.docs-copy h2 {
  margin-top: 2.2rem;
  margin-bottom: 0.7rem;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.docs-copy p {
  margin-bottom: 1.15rem;
  line-height: 1.65;
  color: var(--docs-muted);
  font-size: 1.02rem;
}

.docs-copy ul.hero-list {
  margin: 0.6rem 0 1.6rem;
  padding-left: 1.1rem;
}

.docs-copy ul.hero-list li {
  margin-bottom: 0.6rem;
  color: var(--docs-text);
  line-height: 1.55;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.docs-copy table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--docs-card);
  border: 1px solid var(--docs-border);
  border-radius: var(--docs-radius);
  overflow: hidden;
}

.docs-copy table thead {
  background: rgba(255, 255, 255, 0.04);
}

.docs-copy table th,
.docs-copy table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--docs-border);
  font-size: 0.93rem;
  color: var(--docs-text);
}

.docs-copy table tbody tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   RIGHT COLUMN (Modern Code Panel)
   ========================================================================== */
.docs-code {
  max-width: 460px; /* was 520px — adjust as needed */
  padding: 1.6rem 1.6rem; /* less padding = more space */
}

/* Code block inner padding */
.code-block {
  padding: 1.1rem 1.25rem; /* slightly tighter */
  font-size: 0.88rem;       /* smaller but readable */
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .docs-code {
    position: relative;
    top: 0;
  }
}

/* ==========================================================================
   TABS (Stripe Style)
   ========================================================================== */
.tabs {
  padding: 3px; 
}

.tab {
  padding: 0.45rem 0;
  font-size: 0.86rem;
}

.tab:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tab.active {
  background: var(--docs-highlight);
  color: #000;
  font-weight: 600;
}

/* ==========================================================================
   CODE BLOCKS
   ========================================================================== */
.code-block-wrapper {
  width: 100%;
}

.code-block {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--docs-radius-lg);
  padding: 1.4rem 1.6rem;
  font-size: 0.95rem;
  line-height: 1.55;
  box-shadow: var(--code-shadow);
  overflow-x: auto;
  white-space: pre;
  color: var(--docs-text);
  font-family: "JetBrains Mono", monospace;
}

.code-block code {
  color: var(--docs-text);
}

/* Pretty scrollbars */
.code-block::-webkit-scrollbar {
  height: 8px;
}
.code-block::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}
/* ======================================================================
   MOBILE TABLE SCROLL FIX (Request Body tables)
   ====================================================================== */
@media (max-width: 820px) {
  /* Wrap tables into a horizontal scroll container */
  .docs-copy table {
    display: block;
    width: 100%;
    overflow-x: auto;     /* allow horizontal scroll on mobile */
    overflow-y: hidden;
    border-radius: var(--docs-radius);
  }

  /* Ensure table keeps its natural column width */
  .docs-copy thead,
  .docs-copy tbody,
  .docs-copy tr {
    width: max-content;
    min-width: 100%;
  }

  /* Prevent columns from wrapping into tall rows */
  .docs-copy th,
  .docs-copy td {
    white-space: nowrap;
  }
}