/* Hero section – darker background with radial gradient */
.api-hero {
  padding-top: 80px;
  padding-bottom: 80px;
  background: radial-gradient(
      ellipse at 50% 0%,
      rgba(104, 87, 229, 0.2) 0%,
      transparent 60%
    ),
    var(--bs-body-bg-2);
}

/* Full-width sections with alternating backgrounds */
.api-section {
  padding-top: 60px;
  padding-bottom: 60px;
  background: var(--bs-body-bg);
}

.api-section-alt {
  background: var(--bs-body-bg-2);
}

.api-section-alt .card {
  background: var(--bs-body-bg);
}

@media (min-width: 768px) {
  .api-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* Hero pills – outlined style matching mockup */
.api-pill {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(154, 98, 230, 0.4);
  color: var(--accent-color);
  padding: 6px 18px;
  border-radius: 100px;
}

/* Data card icon boxes */
.api-icon-box {
  width: 44px;
  height: 44px;
  background: var(--primary-light);
  font-size: 18px;
}

[data-bs-theme="dark"] .api-icon-box {
  background: rgba(var(--bs-primary-rgb), 0.12);
}

/* Pricing table – contrast against alt-section background */
.api-section-alt .pricing-comparison-table {
  background: var(--bs-body-bg);
}

.api-section-alt .pricing-comparison-table tbody td {
  background-color: var(--bs-body-bg) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

/* Pricing table header row – subtle accent tint (overrides pricing.css !important) */
.api-section .pricing-comparison-table thead th,
.api-section-alt .pricing-comparison-table thead th {
  background-color: var(--primary-light) !important;
}

[data-bs-theme="dark"] .api-section .pricing-comparison-table thead th,
[data-bs-theme="dark"] .api-section-alt .pricing-comparison-table thead th {
  background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
}

/* Code example card – contrasts with the alt-section background */
.api-code-card {
  background: var(--bs-body-bg);
}

/* Code example tabs */
.api-code-tab {
  background: none;
  border: none;
  color: var(--bs-body-color);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.api-code-tab:hover {
  color: var(--bs-heading-color);
}

.api-code-tab.active {
  color: var(--bs-heading-color);
  border-bottom-color: var(--accent-color);
}

/* Code panels */
.api-code-panel {
  display: none;
}

.api-code-panel.active {
  display: block;
}

/* Code block */
.api-code-block {
  font-family: "Inter", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
  overflow-x: auto;
  background: var(--bs-body-bg);
  border-radius: 8px;
  padding: 16px;
}

.api-code-block .api-key {
  color: #9b30d9;
}

.api-code-block .api-string {
  color: #c2600a;
}

.api-code-block .api-number {
  color: #0284c7;
}

.api-code-block .api-method {
  color: #16a34a;
}

[data-bs-theme="dark"] .api-code-block .api-key {
  color: var(--accent-color-2);
}

[data-bs-theme="dark"] .api-code-block .api-string {
  color: var(--btc-color);
}

[data-bs-theme="dark"] .api-code-block .api-number {
  color: #7dd3fc;
}

[data-bs-theme="dark"] .api-code-block .api-method {
  color: #86efac;
}

.api-code-block .api-header {
  color: var(--bs-body-color);
}

/* Border-end only on lg+ for code panels */
@media (min-width: 992px) {
  .border-end-lg {
    border-right: 1px solid var(--bs-border-color) !important;
  }
}

/* Mobile pricing card headers – purple tint */
.api-section .d-md-none .card-header {
  background: var(--primary-light);
}

[data-bs-theme="dark"] .api-section .d-md-none .card-header {
  background: rgba(var(--bs-primary-rgb), 0.08);
}

/* Mobile pricing rows */
[data-bs-theme="dark"] .api-mobile-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Accent border for featured mobile card */
.border-accent {
  border-color: var(--accent-color) !important;
}

/* Step numbers */
.api-step-number {
  width: 48px;
  height: 48px;
  background: var(--gradient-primary);
  font-size: 1.2rem;
}

/* CTA accent card – matches .pro-banner gradient style */
.card.api-cta-card-accent {
  background: linear-gradient(
      135deg,
      rgba(104, 87, 229, 0.15),
      rgba(203, 108, 230, 0.15)
    ),
    var(--bs-body-bg-2);
  border: 1px solid rgba(154, 98, 230, 0.25);
}

/* Endpoint code tags */
.api-endpoint {
  color: var(--accent-color);
  background: rgba(154, 98, 230, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}