/* =========================================================================
   SENDPK.COM — Missed Call Verification docs (missed_call_verification.php)
   -------------------------------------------------------------------------
   SMALL add-on to assets/css/api-styles.css, which this page loads first and
   reuses for its whole layout (sidebar, cards, tables, code blocks, badges,
   FAQ). Only the few pieces api.php does not have live here:

       .mc-quick      6-step "Quick Start" strip
       .mc-soon       "Coming Soon" platform-guide cards
       .mc-http       HTTP status pill in the error-code table
       .mc-free       green FREE badge used in the billing section

   The step-by-step "How It Works" flow used to live here as .mc-demo. It is
   now a shared component (Conn/missed_call_flow.php +
   assets/css/missed-call-flow.css) because price.php shows it too.

   Colours, radii and shadows come from the shared tokens in theme.css —
   nothing here redefines a global rule, and everything is scoped under
   #apiDocs so it cannot leak onto another page.
   ========================================================================= */

/* =========================================================================
   SECTION RHYTHM — this page's sections are shorter than api.php's, so the
   shared 3.2rem + 3.2rem (padding + margin) around each divider left a big
   empty band. Tightened HERE only: api-styles.css is shared with api.php
   and is not touched. The last block in a section also drops its own
   bottom margin, so the space before the divider is not counted twice.
   ========================================================================= */
#apiDocs section.api-doc-section { padding-bottom: 1.8rem; margin-bottom: 1.8rem; }
#apiDocs section.api-doc-section > *:last-child { margin-bottom: 0; }

/* =========================================================================
   QUICK START — numbered strip at the top of the page
   ========================================================================= */
#apiDocs .mc-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
#apiDocs .mc-quick-step {
  background: var(--wa-surface);
  border: 1px solid var(--wa-line);
  border-radius: var(--radius-card);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
#apiDocs .mc-quick-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-bottom: .5rem;
  border-radius: 50%;
  background: rgba(34, 197, 94, .15); color: var(--wa-teal-dark);
  font-size: .8rem; font-weight: 700;
}
#apiDocs .mc-quick-step p { margin: 0; font-size: .9rem; color: var(--wa-body); }
#apiDocs .mc-quick-step code { font-size: .82rem; word-break: break-all; }

/* =========================================================================
   PLATFORM GUIDES — "Coming Soon" cards
   ========================================================================= */
#apiDocs .mc-soon {
  display: inline-block; margin-bottom: .6rem;
  background: var(--wa-soft); color: var(--wa-muted);
  border-radius: 20px; padding: .18rem .7rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}
#apiDocs .mc-soon-card {
  border: 1px dashed var(--wa-line);
  border-radius: var(--radius-card);
  background: var(--wa-page);
  padding: 1.1rem 1.25rem;
  margin-top: 1rem;
}
#apiDocs .mc-soon-card p:last-child { margin-bottom: 0; }

/* =========================================================================
   SMALL PILLS — HTTP status in the error table, FREE badge in billing
   ========================================================================= */
#apiDocs .mc-http {
  display: inline-block; min-width: 34px; text-align: center;
  background: var(--wa-soft); color: var(--wa-body);
  border-radius: 6px; padding: .12rem .4rem;
  font-size: .74rem; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#apiDocs .mc-http-4xx { background: #fdecea; color: #c0392b; }
#apiDocs .mc-http-5xx { background: #fff4e5; color: #b45309; }
#apiDocs .mc-free {
  display: inline-block; background: rgba(34, 197, 94, .15); color: var(--wa-teal-dark);
  border-radius: 20px; padding: .15rem .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}

/* Key/value line used by the billing + limits cards */
#apiDocs .mc-line {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: baseline; padding: .45rem 0;
  border-bottom: 1px solid var(--wa-line);
}
#apiDocs .mc-line:last-child { border-bottom: 0; }
#apiDocs .mc-line strong { color: var(--wa-ink); font-size: .92rem; }
#apiDocs .mc-line span { color: var(--wa-muted); font-size: .88rem; }