/* ===== API DOCS STYLES ===== */

/* Hero enhancements */
.api-hero { padding-bottom: 60px; }
.api-hero-badges { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.api-badge {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85); padding: 6px 16px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 600; font-family: 'JetBrains Mono', monospace;
  backdrop-filter: blur(4px);
}
.badge-version { background: rgba(22,181,233,0.25); border-color: rgba(22,181,233,0.4); color: #6dd5ff; }

/* Layout: sidebar + content */
.api-layout {
  display: flex; max-width: 1280px; margin: 0 auto; min-height: 80vh;
}

/* Sidebar */
.api-sidebar {
  width: 280px; flex-shrink: 0; position: sticky; top: 80px;
  height: calc(100vh - 80px); overflow-y: auto; border-right: 1px solid var(--line);
  background: #fbfcfe; scrollbar-width: thin;
}
.api-sidebar-inner { padding: 32px 24px; }
.api-sidebar h3 { font-size: 0.9rem; font-weight: 800; color: var(--ink); margin-bottom: 16px; font-family: 'Outfit', sans-serif; }
.api-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.api-sidebar-nav a {
  display: block; padding: 8px 14px; border-radius: 8px; font-size: 0.82rem;
  color: var(--muted); text-decoration: none; transition: all 200ms ease; font-weight: 500;
}
.api-sidebar-nav a:hover { background: rgba(22,181,233,0.06); color: var(--brand); }
.api-sidebar-nav a.active {
  background: linear-gradient(135deg, rgba(22,181,233,0.1), rgba(241,158,56,0.06));
  color: var(--brand); font-weight: 700;
  border-left: 3px solid var(--brand); padding-left: 11px;
}
.api-nav-group { margin-top: 16px; }
.api-nav-label {
  display: block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink); padding: 8px 14px 4px; opacity: 0.5;
}

/* Content */
.api-content {
  flex: 1; padding: 48px clamp(24px, 4vw, 56px); max-width: 900px;
}

/* Section */
.api-section { margin-bottom: 56px; scroll-margin-top: 100px; }
.api-section h2 { font-size: 1.6rem; font-weight: 800; color: var(--ink); font-family: 'Outfit', sans-serif; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.api-section h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 24px 0 12px; }
.api-section p { color: var(--muted); line-height: 1.8; margin-bottom: 14px; font-size: 0.92rem; }
.api-section ul, .api-section ol { color: var(--muted); line-height: 1.8; padding-left: 24px; margin-bottom: 16px; }
.api-section li { margin-bottom: 6px; font-size: 0.92rem; }
.api-section code { font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; background: rgba(22,181,233,0.08); padding: 2px 7px; border-radius: 5px; color: #0a5a7c; }

/* Divider */
.api-section-divider {
  display: flex; align-items: center; gap: 16px; margin: 48px 0 24px;
}
.api-section-divider::before, .api-section-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}
.api-section-divider span {
  font-size: 0.85rem; font-weight: 800; color: var(--ink); font-family: 'Outfit', sans-serif;
  white-space: nowrap;
}

/* Endpoint header */
.api-endpoint-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding: 14px 20px; background: #f8fafc; border: 1px solid var(--line);
  border-radius: 12px;
}
.method-badge {
  font-size: 0.72rem; font-weight: 800; padding: 5px 12px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.04em;
}
.method-get { background: #dcfce7; color: #166534; }
.method-post { background: #dbeafe; color: #1e40af; }
.method-put { background: #fef3c7; color: #92400e; }
.method-delete { background: #fee2e2; color: #991b1b; }
.endpoint-path {
  font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; font-weight: 600;
  color: var(--ink); background: none !important; padding: 0 !important;
}

/* Code blocks */
.code-block {
  background: #1a1e2e; border-radius: 12px; overflow: hidden; margin: 16px 0;
  border: 1px solid rgba(255,255,255,0.06);
}
.code-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.code-lang { font-size: 0.72rem; font-weight: 700; color: #6dd5ff; text-transform: uppercase; letter-spacing: 0.05em; font-family: 'JetBrains Mono', monospace; }
.code-copy {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6); padding: 4px 12px; border-radius: 6px;
  font-size: 0.72rem; cursor: pointer; transition: all 200ms ease;
}
.code-copy:hover { background: rgba(255,255,255,0.15); color: #fff; }
.code-block pre {
  padding: 18px; margin: 0; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.code-block code {
  font-family: 'JetBrains Mono', monospace; font-size: 0.82rem;
  line-height: 1.7; color: #e2e8f0; background: none !important; padding: 0 !important;
}

/* Tables */
.api-table {
  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.85rem;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
}
.api-table thead { background: #f1f5f9; }
.api-table th {
  text-align: left; padding: 12px 16px; font-weight: 700; color: var(--ink);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.api-table td { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); }
.api-table code { font-size: 0.78rem; }

/* Badges inside tables */
.badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; }
.badge-free { background: #dcfce7; color: #166534; }
.badge-pro { background: #dbeafe; color: #1e40af; }
.badge-enterprise { background: #fef3c7; color: #92400e; }

/* Callouts */
.api-callout {
  display: flex; gap: 16px; padding: 20px; border-radius: 12px; margin: 20px 0;
  border-left: 4px solid;
}
.api-callout p { margin: 4px 0 0; font-size: 0.88rem; }
.api-callout strong { display: block; margin-bottom: 2px; }
.callout-icon { font-size: 1.5rem; flex-shrink: 0; }
.callout-info { background: rgba(22,181,233,0.06); border-color: var(--brand); }
.callout-warning { background: rgba(241,158,56,0.06); border-color: var(--orange); }

/* Contact section */
.api-contact-section .dev-info-box { margin-top: 0; }

/* Mobile */
@media (max-width: 860px) {
  .api-layout { flex-direction: column; }
  .api-sidebar {
    width: 100%; position: fixed; top: 0; left: -100%; z-index: 90;
    height: 100vh; border-right: none; background: #fff;
    transition: left 300ms ease; box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  .api-sidebar.is-open { left: 0; }
  .api-content { padding: 32px 20px; }
  .api-endpoint-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 540px) {
  .api-hero-badges { flex-wrap: wrap; }
  .api-table { font-size: 0.78rem; }
  .api-table th, .api-table td { padding: 8px 10px; }
  .code-block pre { padding: 12px; }
  .code-block code { font-size: 0.75rem; }
}