/* =========================================================================
   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
       .mc-tut-*      Android Guide step-by-step tutorial (numbered steps,
                      annotated screenshots, code/browser mock-ups with callouts)
       .mc-web-*      Website / iOS tutorial: small copies of the demo page's
       .mc-phone-*    card, and an iPhone "Recents" list

   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; }

/* =========================================================================
   ANDROID TUTORIAL — big numbered steps a beginner can follow one by one.
   Screenshots carry their own orange boxes/arrows (drawn into the image);
   the two mock-ups below use the same orange so it reads as one system.
   ========================================================================= */
#apiDocs .mc-tut-need {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  list-style: none; padding: 0; margin: .6rem 0 0;
}
#apiDocs .mc-tut-need li { color: var(--wa-body); font-size: .92rem; }
#apiDocs .mc-tut-need i { color: var(--wa-action); margin-right: .35rem; }

#apiDocs .mc-tut-part {
  display: flex; align-items: center; gap: .6rem;
  margin: 2rem 0 .9rem; font-size: 1.12rem; font-weight: 700; color: var(--wa-ink);
}
#apiDocs .mc-tut-part span {
  background: var(--wa-band); color: #fff; border-radius: 20px;
  padding: .2rem .75rem; font-size: .74rem; letter-spacing: .04em;
}

#apiDocs .mc-tut-step {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 1rem;
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: var(--radius-card); padding: 1.15rem 1.3rem; margin-bottom: 1rem;
}
#apiDocs .mc-tut-num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--wa-green); color: #fff; font-weight: 800; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
#apiDocs .mc-tut-body h3 { font-size: 1.05rem; font-weight: 700; margin: .6rem 0 .35rem; color: var(--wa-ink); }
#apiDocs .mc-tut-body p { margin: 0 0 .5rem; color: var(--wa-body); }
#apiDocs .mc-tut-body p:last-child { margin-bottom: 0; }

#apiDocs .mc-tut-shot { display: block; width: 100%; max-width: 560px; height: auto; margin-top: .7rem; }
/* Two pictures in a row made their labels too small to read, so they stack. */
#apiDocs .mc-tut-pair { display: grid; grid-template-columns: minmax(0, 560px); gap: .9rem; margin-top: .7rem; }
#apiDocs .mc-tut-pair .mc-tut-shot { margin-top: 0; }
#apiDocs .mc-tut-pair figure { margin: 0; }
#apiDocs .mc-tut-pair figcaption { font-size: .8rem; color: var(--wa-muted); text-align: center; margin-top: .25rem; }

/* Mock-ups: a file in a code editor, and a page in a browser */
#apiDocs .mc-tut-mock {
  max-width: 620px; margin-top: .7rem; border: 1px solid var(--wa-line);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
}
#apiDocs .mc-tut-mock-bar {
  display: flex; align-items: center; gap: .45rem; padding: .5rem .8rem;
  background: var(--wa-soft); border-bottom: 1px solid var(--wa-line);
  font-size: .8rem; color: var(--wa-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#apiDocs .mc-tut-mock-bar b { width: 10px; height: 10px; border-radius: 50%; background: #d7dcdf; flex: none; }
#apiDocs .mc-tut-mock-bar .mc-tut-url {
  flex: 1; min-width: 0; background: #fff; border-radius: 6px; padding: .15rem .55rem;
  overflow: hidden; text-overflow: ellipsis; color: var(--wa-body);
}
#apiDocs .mc-tut-mock pre {
  margin: 0; padding: .8rem 1rem; background: #fff; color: var(--wa-ink);
  font-size: .82rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#apiDocs .mc-tut-mock .mc-tut-dim { color: var(--wa-muted); }
#apiDocs .mc-tut-mark {
  display: inline-block; outline: 3px solid #EA580C; outline-offset: 2px;
  border-radius: 4px; background: rgba(234, 88, 12, .08);
}
#apiDocs .mc-tut-callout {
  display: inline-flex; align-items: center; gap: .45rem; margin: .45rem 0 .2rem;
  background: #EA580C; color: #fff; border-radius: 10px; padding: .3rem .7rem;
  font-family: var(--font-sans, system-ui, sans-serif); font-size: .84rem; font-weight: 700; line-height: 1.3; white-space: normal;
}
#apiDocs .mc-tut-callout em {
  font-style: normal; background: #fff; color: #EA580C; border-radius: 50%;
  width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center; justify-content: center; flex: none;
}

/* A mark around a whole block (a field, a button, a result) */
#apiDocs .mc-tut-mark.is-block { display: block; }

/* =========================================================================
   WEBSITE / iOS TUTORIAL — a small copy of the demo page (index.html in
   sendpk-missed-call-web-demo.zip) inside the browser mock-up, so each step
   shows exactly what the user will see. Colours match index.html on purpose.
   ========================================================================= */
#apiDocs .mc-web-page { background: #F4F7F6; padding: 1rem; }
#apiDocs .mc-web-card {
  max-width: 360px; margin: 0 auto; background: #fff; border: 1px solid #E3E8E7;
  border-radius: 14px; padding: 1rem 1.1rem; font-size: .88rem; color: #111B21;
}
#apiDocs .mc-web-card h5 { margin: 0; font-size: 1.02rem; font-weight: 700; color: #075E54; }
#apiDocs .mc-web-sub { margin: .1rem 0 .7rem; color: #5F6B69; font-size: .78rem; }
#apiDocs .mc-web-step {
  display: inline-block; background: #075E54; color: #fff; border-radius: 20px;
  padding: .05rem .5rem; font-size: .65rem; font-weight: 700; margin-bottom: .4rem;
}
#apiDocs .mc-web-label { font-weight: 700; margin: .2rem 0 .25rem; }
#apiDocs .mc-web-input {
  display: block; border: 1px solid #C9D2D0; border-radius: 8px;
  padding: .45rem .6rem; font-size: .95rem; background: #fff;
}
#apiDocs .mc-web-input.pin {
  text-align: center; letter-spacing: .5em; font-size: 1.3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#apiDocs .mc-web-btn {
  display: block; text-align: center; background: #075E54; color: #fff;
  border-radius: 999px; padding: .5rem; font-weight: 700; margin-top: .3rem;
}
#apiDocs .mc-web-hint { color: #5F6B69; font-size: .78rem; margin: .3rem 0 0; }
#apiDocs .mc-web-example {
  background: #FFF4EC; border: 1px dashed #EA580C; border-radius: 8px;
  padding: .45rem .6rem; font-size: .78rem; margin: .5rem 0 .6rem; line-height: 1.5;
}
#apiDocs .mc-web-example b { color: #EA580C; }
#apiDocs .mc-web-done { text-align: center; }
#apiDocs .mc-web-done .mc-tut-mark { padding: .4rem 0; }
#apiDocs .mc-web-tick {
  display: block; width: 44px; height: 44px; line-height: 44px; border-radius: 50%;
  margin: 0 auto .4rem; background: #1B7F3B; color: #fff; font-size: 1.4rem;
}
#apiDocs .mc-web-done strong { display: block; color: #1B7F3B; font-size: 1.05rem; }
#apiDocs .mc-web-card .mc-tut-callout { margin: .45rem 0 .5rem; font-size: .78rem; }

/* iPhone "Recents" list: where the user finds the number that called */
#apiDocs .mc-phone {
  max-width: 320px; margin-top: .7rem; background: #fff;
  border: 8px solid #1d1d1f; border-radius: 30px; padding: .9rem .9rem 1rem;
  box-shadow: var(--shadow-sm); font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
#apiDocs .mc-phone-title { font-weight: 800; font-size: 1.35rem; color: #111; margin-bottom: .3rem; }
#apiDocs .mc-phone-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0; border-bottom: 1px solid #ececef; font-size: .98rem; color: #111;
}
#apiDocs .mc-phone-row small { display: block; color: #8a8a8e; font-size: .75rem; }
#apiDocs .mc-phone-row.missed .mc-phone-num { color: #FF3B30; }
#apiDocs .mc-phone-time { color: #8a8a8e; font-size: .8rem; }
#apiDocs .mc-phone .mc-tut-callout { font-size: .8rem; }

@media (max-width: 575.98px) {
  #apiDocs .mc-tut-step { grid-template-columns: 1fr; padding: 1rem; }
  #apiDocs .mc-tut-num { width: 38px; height: 38px; font-size: 1.05rem; }
}