/* ============================================================
   AfroTools API Documentation — Stripe-style two-panel layout
   ============================================================ */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body.api-docs-body{font-family:'DM Sans',system-ui,sans-serif;color:#1a1a2e;background:#F8FAFD;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- Layout Shell ---------- */
.api-docs-layout{display:flex;min-height:100vh;padding-top:62px}

/* ---------- Sidebar ---------- */
.api-sidebar{
  position:fixed;top:62px;left:0;bottom:0;
  width:260px;background:#0A1628;color:#CBD5E1;
  overflow-y:auto;overflow-x:hidden;
  padding:24px 0 40px;z-index:100;
  border-right:1px solid rgba(255,255,255,.06);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent;
  transition:transform .3s ease;
}
.api-sidebar::-webkit-scrollbar{width:5px}
.api-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:10px}

.api-sidebar__logo{display:flex;align-items:center;gap:10px;padding:0 20px 20px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px;text-decoration:none;color:#fff}
.api-sidebar__logo img{height:22px}
.api-sidebar__logo span{font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.api-sidebar__logo .badge{font-size:.55rem;font-weight:700;color:#007AFF;background:rgba(0,122,255,.18);padding:2px 7px;border-radius:100px;margin-left:4px}

/* Nav sections */
.api-nav{padding:0 12px}
.api-nav__section{margin-bottom:8px}
.api-nav__heading{font-size:.65rem;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.1em;padding:12px 8px 6px;user-select:none}
.api-nav__link{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:.8rem;color:#94A3B8;text-decoration:none;border-radius:8px;transition:all .15s;line-height:1.4}
.api-nav__link:hover{color:#fff;background:rgba(255,255,255,.06)}
.api-nav__link--active{color:#fff;background:rgba(0,122,255,.18);font-weight:600}
.api-nav__link .method-badge{font-size:.55rem;font-weight:800;padding:1px 5px;border-radius:4px;letter-spacing:.04em;font-family:'DM Sans',sans-serif;min-width:30px;text-align:center;flex-shrink:0}
.api-nav__link .method-badge--get{color:#22c55e;background:rgba(34,197,94,.12)}
.api-nav__link .method-badge--post{color:#3b82f6;background:rgba(59,130,246,.12)}
.api-nav__link .method-badge--put{color:#f59e0b;background:rgba(245,158,11,.12)}
.api-nav__link .method-badge--delete{color:#ef4444;background:rgba(239,68,68,.12)}

/* Sidebar search */
.api-sidebar__search{padding:0 14px 10px}
.api-sidebar__search input{width:100%;padding:7px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#CBD5E1;font-size:.78rem;font-family:inherit;outline:none;transition:border-color .2s}
.api-sidebar__search input::placeholder{color:rgba(255,255,255,.3)}
.api-sidebar__search input:focus{border-color:rgba(0,122,255,.5)}

/* ---------- Content Area ---------- */
.api-content{margin-left:260px;flex:1;min-width:0}

/* Two-panel section */
.api-two-panel{display:grid;grid-template-columns:1fr 1fr;min-height:auto}
.api-two-panel--wide-left{grid-template-columns:55% 45%}

.api-content__left{padding:48px 48px 48px 56px}
.api-content__right{background:#0A1628;color:#CBD5E1;padding:48px 40px;border-left:1px solid rgba(255,255,255,.06);position:relative}
.api-content__right::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.06)}

/* Full-width section (for hero, etc.) */
.api-full-width{padding:48px 56px}

/* ---------- Typography ---------- */
.api-docs-body h1{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);color:#111827;letter-spacing:-.03em;line-height:1.15;margin-bottom:12px}
.api-docs-body h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.4rem,3vw,1.9rem);color:#111827;letter-spacing:-.02em;margin-bottom:10px;padding-top:32px}
.api-docs-body h3{font-family:'DM Sans',sans-serif;font-size:1.05rem;font-weight:700;color:#111827;margin-bottom:8px;padding-top:20px}
.api-docs-body h4{font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:700;color:#374151;margin-bottom:6px;padding-top:12px}
.api-content__left p{font-size:.88rem;color:#4B5563;line-height:1.72;margin-bottom:16px}
.api-content__left a{color:#007AFF;text-decoration:none;font-weight:500}
.api-content__left a:hover{text-decoration:underline}

.api-subtitle{font-size:1rem;color:#6B7280;line-height:1.7;margin-bottom:24px;max-width:560px}

/* ---------- Endpoint Header ---------- */
.endpoint-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;padding:16px 20px;background:#F8FAFD;border:1.5px solid #E5E7EB;border-radius:12px}
.endpoint-method{display:inline-block;font-size:.7rem;font-weight:800;color:#fff;padding:4px 10px;border-radius:6px;letter-spacing:.04em;font-family:'DM Sans',sans-serif}
.endpoint-method--get{background:#22c55e}
.endpoint-method--post{background:#3b82f6}
.endpoint-method--put{background:#f59e0b}
.endpoint-method--delete{background:#ef4444}
.endpoint-url{font-family:'JetBrains Mono','Fira Code',monospace;font-size:.88rem;font-weight:600;color:#111827;word-break:break-all}

/* ---------- Parameter Table ---------- */
.param-table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:.82rem}
.param-table thead{background:#F8FAFD}
.param-table th{text-align:left;padding:10px 14px;font-weight:700;color:#374151;border-bottom:2px solid #E5E7EB;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.param-table td{padding:10px 14px;border-bottom:1px solid #F3F4F6;color:#4B5563;vertical-align:top}
.param-table tr:last-child td{border-bottom:none}
.param-name{font-family:'JetBrains Mono','Fira Code',monospace;font-weight:600;color:#111827;font-size:.82rem}
.param-type{font-size:.72rem;color:#6B7280;background:#F3F4F6;padding:1px 7px;border-radius:4px;font-family:'JetBrains Mono',monospace;display:inline-block}
.param-required{font-size:.65rem;font-weight:700;color:#ef4444;background:rgba(239,68,68,.08);padding:1px 6px;border-radius:4px;margin-left:6px}
.param-optional{font-size:.65rem;font-weight:700;color:#6B7280;background:#F3F4F6;padding:1px 6px;border-radius:4px;margin-left:6px}

/* ---------- Code Blocks ---------- */
.code-block-wrapper{margin:16px 0 24px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.code-tabs{display:flex;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto}
.code-tab{padding:8px 16px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.45);cursor:pointer;border:none;background:none;font-family:'DM Sans',sans-serif;white-space:nowrap;transition:all .15s;border-bottom:2px solid transparent}
.code-tab:hover{color:rgba(255,255,255,.7)}
.code-tab--active{color:#fff;border-bottom-color:#007AFF}
.code-panel{display:none;padding:20px;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.78rem;line-height:1.7;overflow-x:auto;background:#0D1B2A;color:#e4e8f1;white-space:pre}
.code-panel--active{display:block}

/* Inline code on left panel */
.api-content__left code{font-family:'JetBrains Mono','Fira Code',monospace;font-size:.82em;background:#F1F5F9;color:#1e293b;padding:2px 6px;border-radius:4px;font-weight:500}

/* Right-panel code block */
.code-example{background:#0D1B2A;border-radius:10px;padding:20px;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.78rem;line-height:1.7;overflow-x:auto;color:#e4e8f1;margin:16px 0;white-space:pre;border:1px solid rgba(255,255,255,.06)}
.code-example .c{color:#6B7280}
.code-example .s{color:#34d399}
.code-example .k{color:#60a5fa}
.code-example .n{color:#fbbf24}
.code-label{font-size:.65rem;font-weight:700;color:#007AFF;background:rgba(0,122,255,.12);padding:3px 10px;border-radius:6px;display:inline-block;margin-bottom:10px;font-family:'DM Sans',sans-serif}

/* ---------- Response JSON ---------- */
.response-block{margin:16px 0 24px}
.response-block .code-label{margin-bottom:10px}

/* ---------- Info / Warning / Note boxes ---------- */
.api-callout{padding:14px 18px;border-radius:10px;font-size:.82rem;line-height:1.65;margin:16px 0}
.api-callout--info{background:rgba(0,122,255,.06);border-left:3px solid #007AFF;color:#1e40af}
.api-callout--warning{background:rgba(245,158,11,.06);border-left:3px solid #f59e0b;color:#92400e}
.api-callout--success{background:rgba(34,197,94,.06);border-left:3px solid #22c55e;color:#166534}
.api-callout--danger{background:rgba(239,68,68,.06);border-left:3px solid #ef4444;color:#991b1b}
.api-callout code{font-size:.78em;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:3px}

/* ---------- Cards Grid (for overview pages) ---------- */
.api-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:24px 0}
.api-card{background:#fff;border:1.5px solid #E5E7EB;border-radius:14px;padding:24px 22px;transition:all .2s;text-decoration:none;color:inherit;display:block}
.api-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:#007AFF;text-decoration:none}
.api-card__icon{font-size:1.8rem;margin-bottom:10px}
.api-card__title{font-family:'DM Sans',sans-serif;font-size:1.05rem;font-weight:800;margin-bottom:6px;color:#111827}
.api-card__desc{font-size:.8rem;color:#6B7280;line-height:1.6}

/* ---------- Hero (for index page) ---------- */
.api-hero{background:linear-gradient(135deg,#0A1628 0%,#1a2a4a 100%);color:#fff;padding:80px 56px 64px;position:relative;overflow:hidden}
.api-hero::after{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(0,122,255,.08) 0%,transparent 70%);border-radius:50%}
.api-hero h1{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.03em;color:#fff;margin-bottom:14px;position:relative;z-index:1}
.api-hero p{font-size:1.05rem;color:rgba(255,255,255,.7);max-width:560px;line-height:1.7;margin-bottom:28px;position:relative;z-index:1}
.api-hero .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:#007AFF;background:rgba(0,122,255,.15);padding:5px 14px;border-radius:100px;margin-bottom:16px;position:relative;z-index:1}
.api-hero .badge span{width:7px;height:7px;background:#007AFF;border-radius:50%;display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.api-hero__actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;background:#007AFF;color:#fff;border:none;border-radius:10px;font-size:.88rem;font-weight:700;text-decoration:none;cursor:pointer;transition:background .2s}
.btn-primary:hover{background:#0063D1;text-decoration:none;color:#fff}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:10px;font-size:.88rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all .2s}
.btn-secondary:hover{background:rgba(255,255,255,.15);text-decoration:none;color:#fff}

/* ---------- Steps ---------- */
.api-steps{display:flex;gap:28px;margin:24px 0}
.api-step{flex:1;text-align:center;padding:20px}
.api-step__num{width:36px;height:36px;background:#007AFF;color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;margin-bottom:12px}
.api-step h3{font-size:.92rem;font-weight:700;margin-bottom:6px;padding:0}
.api-step p{font-size:.8rem;color:#6B7280;line-height:1.6}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}
.price-card{background:#fff;border:1.5px solid #E5E7EB;border-radius:16px;padding:28px 20px;text-align:center;transition:all .2s}
.price-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.06)}
.price-card--featured{border-color:#007AFF;position:relative}
.price-card--featured::before{content:'Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#007AFF;color:#fff;font-size:.65rem;font-weight:700;padding:4px 14px;border-radius:100px}
.price-card h3{font-size:1rem;font-weight:800;margin-bottom:4px;color:#111827;padding:0}
.price-card .price{font-family:'Instrument Serif',Georgia,serif;font-size:2rem;color:#007AFF;margin:12px 0 4px}
.price-card .price small{font-size:.8rem;color:#6B7280;font-family:'DM Sans',sans-serif}
.price-card .billing{font-size:.75rem;color:#9CA3AF;margin-bottom:16px}
.price-card ul{list-style:none;text-align:left;padding:0}
.price-card li{font-size:.78rem;color:#4B5563;padding:6px 0;border-top:1px solid #f3f4f6;line-height:1.5}
.price-card li::before{content:'\2713';color:#007AFF;font-weight:700;margin-right:8px}

/* ---------- Trust / Who section ---------- */
.api-trust{display:flex;gap:24px;flex-wrap:wrap;margin:20px 0}
.api-trust__item{flex:1;min-width:160px;text-align:center;padding:16px}
.api-trust__num{font-family:'Instrument Serif',serif;font-size:2rem;color:#007AFF;line-height:1}
.api-trust__label{font-size:.78rem;color:#6B7280;margin-top:4px}

/* ---------- Use cases grid ---------- */
.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0}
.use-case-card{background:#fff;border:1.5px solid #E5E7EB;border-radius:12px;padding:20px;transition:all .2s}
.use-case-card:hover{border-color:#007AFF}
.use-case-card h4{font-size:.88rem;font-weight:700;margin-bottom:6px;padding:0;color:#111827}
.use-case-card p{font-size:.78rem;color:#6B7280;line-height:1.6;margin:0}

/* ---------- API Explorer Widget ---------- */
.api-explorer{background:#fff;border:1.5px solid #E5E7EB;border-radius:14px;padding:24px;margin:24px 0}
.api-explorer h3{font-size:1rem;font-weight:700;margin-bottom:16px;padding:0;color:#111827}
.api-explorer__row{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.api-explorer__method{padding:8px 14px;font-size:.78rem;font-weight:700;background:#22c55e;color:#fff;border:none;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif}
.api-explorer__url{flex:1;padding:8px 14px;font-family:'JetBrains Mono',monospace;font-size:.82rem;border:1.5px solid #E5E7EB;border-radius:8px;min-width:200px;background:#F8FAFD;color:#111827}
.api-explorer__send{padding:8px 20px;background:#007AFF;color:#fff;border:none;border-radius:8px;font-weight:700;font-size:.82rem;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s}
.api-explorer__send:hover{background:#0063D1}
.api-explorer__key-row{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.api-explorer__key-row label{font-size:.78rem;font-weight:600;color:#374151;white-space:nowrap}
.api-explorer__key-row input{flex:1;padding:8px 14px;font-family:'JetBrains Mono',monospace;font-size:.82rem;border:1.5px solid #E5E7EB;border-radius:8px;background:#F8FAFD;color:#111827}
.api-explorer__output{background:#0A1628;border-radius:10px;padding:20px;font-family:'JetBrains Mono',monospace;font-size:.78rem;line-height:1.7;color:#e4e8f1;min-height:120px;overflow-x:auto;white-space:pre-wrap}

/* ---------- Changelog ---------- */
.changelog-entry{border-left:3px solid #007AFF;padding:0 0 32px 24px;margin-left:12px;position:relative}
.changelog-entry::before{content:'';position:absolute;left:-7px;top:4px;width:11px;height:11px;background:#007AFF;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px #007AFF}
.changelog-entry:last-child{border-left-color:transparent;padding-bottom:0}
.changelog-date{font-size:.72rem;font-weight:700;color:#007AFF;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.changelog-entry h3{font-size:.95rem;font-weight:700;padding:0;margin-bottom:6px;color:#111827}
.changelog-entry p,.changelog-entry ul{font-size:.82rem;color:#4B5563;line-height:1.65}
.changelog-entry ul{padding-left:18px;margin:6px 0}
.changelog-entry li{margin-bottom:4px}
.changelog-tag{display:inline-block;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:4px;margin-right:6px;text-transform:uppercase;letter-spacing:.04em}
.changelog-tag--new{color:#22c55e;background:rgba(34,197,94,.1)}
.changelog-tag--fix{color:#ef4444;background:rgba(239,68,68,.08)}
.changelog-tag--improve{color:#f59e0b;background:rgba(245,158,11,.08)}

/* ---------- Error Table ---------- */
.error-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.82rem}
.error-table th{text-align:left;padding:10px 14px;font-weight:700;color:#374151;border-bottom:2px solid #E5E7EB;font-size:.75rem}
.error-table td{padding:10px 14px;border-bottom:1px solid #F3F4F6;color:#4B5563;vertical-align:top}
.error-table .status-code{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.82rem}
.error-table .status-code--4xx{color:#f59e0b}
.error-table .status-code--5xx{color:#ef4444}

/* ---------- SDK cards ---------- */
.sdk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:20px 0}
.sdk-card{background:#fff;border:1.5px solid #E5E7EB;border-radius:12px;padding:20px;text-align:center;transition:all .2s}
.sdk-card:hover{border-color:#007AFF;transform:translateY(-2px)}
.sdk-card__icon{font-size:2rem;margin-bottom:8px}
.sdk-card__name{font-weight:700;font-size:.92rem;margin-bottom:4px;color:#111827}
.sdk-card__install{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:#6B7280;background:#F8FAFD;padding:6px 10px;border-radius:6px;margin-top:8px;display:inline-block}

/* ---------- Mobile sidebar toggle ---------- */
.api-sidebar-toggle{display:none;position:fixed;bottom:20px;right:20px;z-index:200;width:48px;height:48px;background:#007AFF;color:#fff;border:none;border-radius:50%;box-shadow:0 4px 16px rgba(0,122,255,.3);cursor:pointer;font-size:1.2rem;align-items:center;justify-content:center;transition:transform .2s}
.api-sidebar-toggle:hover{transform:scale(1.05)}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .api-two-panel,.api-two-panel--wide-left{grid-template-columns:1fr}
  .api-content__right{border-left:none;border-top:1px solid rgba(255,255,255,.06)}
}
@media(max-width:860px){
  .api-sidebar{transform:translateX(-100%)}
  .api-sidebar--open{transform:translateX(0)}
  .api-content{margin-left:0}
  .api-sidebar-toggle{display:flex}
  .api-content__left,.api-content__right{padding:32px 20px}
  .api-full-width{padding:32px 20px}
  .api-hero{padding:60px 20px 48px}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .api-steps{flex-direction:column;gap:16px}
}
@media(max-width:600px){
  .pricing-grid{grid-template-columns:1fr}
  .api-explorer__row{flex-direction:column}
  .endpoint-header{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------- Utility ---------- */
.api-divider{border:none;border-top:1px solid #E5E7EB;margin:32px 0}
.api-divider--dark{border-top-color:rgba(255,255,255,.08)}
.mt-0{margin-top:0!important}
.mb-0{margin-bottom:0!important}
.pt-0{padding-top:0!important}