/* =========================================================================
   SENDPK.COM — Voice Call API docs (voice_call_api.php)
   -------------------------------------------------------------------------
   SMALL add-on to assets/css/api-styles.css + missed-call-styles.css, which
   this page loads first and reuses for its whole layout (sidebar, cards,
   tables, code blocks, badges, FAQ, quick-start strip, HTTP pills). Only
   the pieces those two files do not have live here:

       .vc-hero-*     stat chips under the page title
       .vc-flow       5-step "How it works" strip with arrows
       .vc-life       call life cycle (pending -> initiated -> final)
       .vc-pulse      30-second pulse bar (billing + price calculator)
       .vc-tool       the two interactive tools (request builder, price
                      calculator): form grid, fields, result boxes, hints
       .vc-out-*      outcome money pills in the status table
       .vc-err-*      error-code search box + "no match" line

   Colours, radii and shadows come from the shared tokens in theme.css.
   Everything is scoped under #apiDocs so it cannot leak onto another page.
   The site CSP forbids style="" attributes, so every visual state the JS
   sets is a class defined here (never an inline style).
   ========================================================================= */

/* --- Hero stat chips ---------------------------------------------------- */
#apiDocs .vc-hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem; margin: 1.4rem 0 .4rem;
}
#apiDocs .vc-hero-stat {
  background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: var(--radius-card); padding: .9rem 1rem; box-shadow: var(--shadow-sm);
}
#apiDocs .vc-hero-stat strong { display: block; font-size: 1.25rem; color: var(--wa-ink); line-height: 1.2; letter-spacing: -.01em; }
#apiDocs .vc-hero-stat span { display: block; font-size: .8rem; color: var(--wa-muted); margin-top: .2rem; }
#apiDocs .vc-hero-stat i { color: var(--wa-teal); margin-right: .35rem; font-size: .95rem; }

/* --- How it works: 5 steps --------------------------------------------- */
#apiDocs .vc-flow {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .9rem; margin: 1.2rem 0 0; padding: 0; list-style: none;
}
#apiDocs .vc-flow li {
  position: relative; background: var(--wa-surface); border: 1px solid var(--wa-line);
  border-radius: var(--radius-card); padding: 1.1rem 1rem 1rem; box-shadow: var(--shadow-sm);
}
#apiDocs .vc-flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -.75rem; width: .6rem; height: .6rem;
  border-top: 2px solid var(--wa-green); border-right: 2px solid var(--wa-green);
  transform: translateY(-50%) rotate(45deg);
}
#apiDocs .vc-flow-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; margin-bottom: .6rem;
  background: rgba(34, 197, 94, .13); color: var(--wa-teal-dark); font-size: 1rem;
}
#apiDocs .vc-flow h3 { font-size: .92rem; font-weight: 700; margin: 0 0 .25rem; color: var(--wa-ink); }
#apiDocs .vc-flow p { margin: 0; font-size: .84rem; color: var(--wa-muted); line-height: 1.55; }
#apiDocs .vc-flow code { font-size: .78rem; }
#apiDocs .vc-flow-who {
  display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wa-muted); margin-bottom: .2rem;
}
@media (max-width: 1199.98px) {
  #apiDocs .vc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #apiDocs .vc-flow li::after { display: none; }
}
@media (max-width: 575.98px) {
  #apiDocs .vc-flow { grid-template-columns: minmax(0, 1fr); }
}

/* --- Call life cycle --------------------------------------------------- */
#apiDocs .vc-life {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  background: var(--wa-page); border: 1px solid var(--wa-line); border-radius: var(--radius-card);
  padding: 1rem 1.1rem; margin: 1rem 0 1.2rem;
}
#apiDocs .vc-life-state {
  display: inline-flex; flex-direction: column; gap: .1rem;
  background: var(--wa-surface); border: 1px solid var(--wa-line); border-radius: 12px;
  padding: .5rem .8rem; min-width: 120px;
}
#apiDocs .vc-life-state code { background: none !important; padding: 0 !important; font-weight: 700; font-size: .85rem; }
#apiDocs .vc-life-state span { font-size: .75rem; color: var(--wa-muted); }
#apiDocs .vc-life-ok { border-color: rgba(34, 197, 94, .55); }
#apiDocs .vc-life-bad { border-color: #f3c3bd; }
#apiDocs .vc-life-arrow { color: var(--wa-muted); font-size: .85rem; }
#apiDocs .vc-life-ends { display: inline-flex; flex-direction: column; gap: .45rem; }

/* --- 30-second pulse bar ------------------------------------------------ */
#apiDocs .vc-pulse { display: flex; gap: 4px; margin: .5rem 0 .35rem; flex-wrap: wrap; }
#apiDocs .vc-pulse-seg {
  position: relative; flex: 0 0 auto; width: 64px; height: 26px; border-radius: 7px;
  background: var(--wa-soft); overflow: hidden; border: 1px solid var(--wa-line);
}
#apiDocs .vc-pulse-fill { position: absolute; inset: 0 auto 0 0; background: var(--wa-green); }
#apiDocs .vc-pulse-seg span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: var(--wa-ink);
}
/* Fill widths in 10% steps: the CSP forbids style="width:..", so the JS (and
   the PHP for the static examples) picks one of these classes. */
#apiDocs .vc-w0 { width: 0; }   #apiDocs .vc-w10 { width: 10%; } #apiDocs .vc-w20 { width: 20%; }
#apiDocs .vc-w30 { width: 30%; } #apiDocs .vc-w40 { width: 40%; } #apiDocs .vc-w50 { width: 50%; }
#apiDocs .vc-w60 { width: 60%; } #apiDocs .vc-w70 { width: 70%; } #apiDocs .vc-w80 { width: 80%; }
#apiDocs .vc-w90 { width: 90%; } #apiDocs .vc-w100 { width: 100%; }
#apiDocs .vc-pulse-legend { font-size: .78rem; color: var(--wa-muted); }

/* --- Interactive tools -------------------------------------------------- */
#apiDocs .vc-tool {
  background: var(--wa-surface); border: 1px solid var(--wa-line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md); padding: 1.4rem; margin-top: 1rem;
}
#apiDocs .vc-tool-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
#apiDocs .vc-tool-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
#apiDocs .vc-tool-head .vc-live {
  margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wa-teal-dark); background: rgba(34, 197, 94, .13); border-radius: 20px; padding: .2rem .6rem;
}
#apiDocs .vc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
#apiDocs .vc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#apiDocs .vc-span-2 { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
  #apiDocs .vc-grid, #apiDocs .vc-grid-3 { grid-template-columns: minmax(0, 1fr); }
}
#apiDocs .vc-field label { display: block; font-size: .78rem; font-weight: 700; color: var(--wa-ink); margin-bottom: .3rem; }
#apiDocs .vc-field label small { font-weight: 500; color: var(--wa-muted); }
#apiDocs .vc-field input[type="text"],
#apiDocs .vc-field input[type="number"],
#apiDocs .vc-field input[type="url"] {
  width: 100%; border: 1px solid var(--wa-line); border-radius: 10px; padding: .5rem .75rem;
  font-size: .88rem; background: var(--wa-page); color: var(--wa-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
#apiDocs .vc-field input:focus {
  outline: none; border-color: var(--wa-green); background: #fff; box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
}
#apiDocs .vc-field input.vc-bad { border-color: #e57368; background: #fff8f7; }
#apiDocs .vc-field input[type="range"] { width: 100%; accent-color: var(--wa-action); }
#apiDocs .vc-field-row { display: flex; gap: .5rem; }
#apiDocs .vc-field-row input { flex: 1; min-width: 0; }
#apiDocs .vc-btn-sm {
  flex-shrink: 0; border: 1px solid var(--wa-line); background: #fff; color: var(--wa-body);
  border-radius: 10px; padding: .45rem .75rem; font-size: .78rem; font-weight: 600; cursor: pointer;
}
#apiDocs .vc-btn-sm:hover { border-color: var(--wa-green); color: var(--wa-teal-dark); }

/* Segmented switch (template_id / audio_url) */
#apiDocs .vc-seg { display: inline-flex; background: var(--wa-soft); border-radius: 11px; padding: 3px; gap: 3px; flex-wrap: wrap; }
#apiDocs .vc-seg label {
  margin: 0; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--wa-body);
  padding: .35rem .8rem; border-radius: 9px;
}
#apiDocs .vc-seg input { position: absolute; opacity: 0; pointer-events: none; }
#apiDocs .vc-seg input:checked + span { color: var(--wa-ink); }
#apiDocs .vc-seg label.vc-on { background: #fff; box-shadow: var(--shadow-sm); color: var(--wa-ink); }
#apiDocs .vc-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 600; color: var(--wa-ink); cursor: pointer; }
#apiDocs .vc-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--wa-action); }
#apiDocs .vc-hide { display: none !important; }
#apiDocs .vc-sub { border-left: 2px solid var(--wa-line); padding-left: 1rem; }

/* Hints under the builder (browser-side quick checks) */
#apiDocs .vc-hints { list-style: none; margin: 1rem 0 0; padding: 0; }
#apiDocs .vc-hints li { display: flex; gap: .5rem; align-items: baseline; font-size: .84rem; padding: .25rem 0; color: var(--wa-body); }
#apiDocs .vc-hints li i { flex-shrink: 0; }
#apiDocs .vc-hint-ok i { color: var(--wa-action); }
#apiDocs .vc-hint-bad { color: #b3261e !important; }
#apiDocs .vc-hint-bad i { color: #d93025; }
#apiDocs .vc-hint-info i { color: var(--wa-muted); }

/* Price calculator results */
#apiDocs .vc-result {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem;
}
@media (max-width: 575.98px) { #apiDocs .vc-result { grid-template-columns: minmax(0, 1fr); } }
#apiDocs .vc-result div { background: var(--wa-page); border: 1px solid var(--wa-line); border-radius: 12px; padding: .75rem .9rem; }
#apiDocs .vc-result strong { display: block; font-size: 1.35rem; color: var(--wa-ink); letter-spacing: -.01em; line-height: 1.25; }
#apiDocs .vc-result span { font-size: .76rem; color: var(--wa-muted); }
#apiDocs .vc-calc-note { font-size: .84rem; margin: .9rem 0 0; color: var(--wa-body); }
#apiDocs .vc-calc-note.vc-hint-bad { font-weight: 600; }

/* --- Outcome money pills ------------------------------------------------ */
#apiDocs .vc-out { display: inline-block; border-radius: 20px; padding: .12rem .55rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
#apiDocs .vc-out-kept { background: #e7f3ff; color: #0b63c5; }
#apiDocs .vc-out-back { background: rgba(34, 197, 94, .15); color: var(--wa-teal-dark); }
#apiDocs .vc-out-dep { background: #fff4e5; color: #b45309; }

/* --- Error search ------------------------------------------------------- */
#apiDocs .vc-err-search { position: relative; max-width: 420px; margin: .4rem 0 1rem; }
#apiDocs .vc-err-search input {
  width: 100%; border: 1px solid var(--wa-line); border-radius: 10px; padding: .55rem .8rem .55rem 2.2rem;
  font-size: .88rem; background: var(--wa-page); color: var(--wa-ink);
}
#apiDocs .vc-err-search input:focus { outline: none; border-color: var(--wa-green); background: #fff; box-shadow: 0 0 0 3px rgba(34, 197, 94, .15); }
#apiDocs .vc-err-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--wa-muted); font-size: .8rem; }
#apiDocs .vc-err-none { font-size: .88rem; color: var(--wa-muted); padding: .8rem; }
#apiDocs tr.vc-err-group td {
  background: var(--wa-page); font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--wa-muted); padding: .45rem .8rem;
}

/* Small "fixed test value" box in Webhook Security */
#apiDocs .vc-vector .mc-line span { word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }