/* =========================================================================
   SENDPK.COM — Missed Call Verification flow (shared component)
   -------------------------------------------------------------------------
   Styles for the markup in Conn/missed_call_flow.php. Loaded by both
   price.php and missed_call_verification.php, so nothing here is scoped to a
   page id and every class is namespaced .mcf-*. Colours come from theme.css
   tokens, so the component follows the site theme wherever it is dropped.

   Layout: five cards, read left to right. The column count steps down with
   the viewport, and the chevrons between cards only appear in the two
   layouts where the reading order is a straight line (5-across and stacked).
   In the 3- and 2-column layouts the numbered badges carry the order instead,
   because a chevron pointing right at the end of a row would be a lie.

   Every card's WORDING is on screen at all times. An earlier version faded
   whole steps in and out, which meant a screenshot could catch a card
   half-empty. Here only the demo props move — the digits being typed in step
   4 and the spinner turning into a tick in step 5 — while every label,
   heading and sentence stays put.
   ========================================================================= */

.mcf { margin: 1.5rem 0 0; }
.mcf-heading { font-size: 1.25rem; font-weight: 800; color: var(--wa-ink); margin: 0 0 .3rem; }
.mcf-lead { color: var(--wa-muted); font-size: .95rem; margin: 0 0 1.1rem; }

/* -------------------------------------------------------------------------
   "Nothing is sent" banner — the one misunderstanding worth pre-empting
   ---------------------------------------------------------------------- */
.mcf-nosms {
  display: flex; align-items: flex-start; gap: .8rem;
  background: #F4FBF7; border: 1px solid #C8EBD8; border-left: 4px solid var(--wa-green);
  border-radius: 14px; padding: 1rem 1.15rem; margin: 0 0 1.4rem;
}
.mcf-nosms-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  background: var(--wa-green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.mcf-nosms p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--wa-body); }
.mcf-nosms strong { color: var(--wa-ink); }
.mcf-nosms em { font-style: normal; font-weight: 700; color: var(--wa-teal); }

/* -------------------------------------------------------------------------
   The five steps
   ---------------------------------------------------------------------- */
.mcf-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.6rem .9rem;
  grid-template-columns: repeat(5, 1fr);
}
.mcf-step { position: relative; display: flex; }

.mcf-card {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  background: var(--wa-surface); border: 1px solid var(--wa-line); border-radius: 14px;
  padding: 1.5rem .9rem .9rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color .3s var(--wa-ease), box-shadow .3s var(--wa-ease);
}

/* Number badge, half outside the card so the sequence reads at a glance */
.mcf-num {
  position: absolute; top: -13px; left: .9rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--wa-green); color: #fff;
  font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--wa-surface);
  transition: transform .3s var(--wa-ease), background .3s var(--wa-ease);
}

.mcf-icon {
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: .5rem;
  background: var(--wa-page); border: 1px solid var(--wa-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--wa-teal); font-size: .85rem;
}
.mcf-label {
  font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--wa-muted); margin-bottom: .25rem;
}
.mcf-title {
  font-size: .92rem; font-weight: 700; line-height: 1.4; color: var(--wa-ink);
  margin: 0 0 .6rem;
}
.mcf-title em { font-style: normal; color: var(--wa-teal); text-decoration: underline; text-underline-offset: 2px; }

/* The quieter, developer-facing half of each card */
.mcf-detail { margin-top: auto; display: flex; flex-direction: column; gap: .35rem; }
.mcf-code, .mcf-json {
  display: block; font-size: .7rem; line-height: 1.45; word-break: break-word;
  border-radius: 7px; padding: .3rem .45rem;
}
.mcf-code { background: var(--wa-teal-dark); color: #fff; font-weight: 600; }
.mcf-json { background: var(--wa-page); border: 1px solid var(--wa-line); color: var(--wa-body); }
.mcf-note { font-size: .74rem; line-height: 1.5; color: var(--wa-muted); }

/* Step 3 — a missed-call notification, the thing the user actually sees */
.mcf-phone {
  display: block; border-radius: 11px; padding: .6rem .5rem; text-align: center;
  background: linear-gradient(160deg, var(--wa-teal-dark), var(--wa-band));
  color: #fff;
}
.mcf-phone-top { display: block; font-size: .64rem; opacity: .85; margin-bottom: .15rem; }
/* nowrap + the tighter size keep "+1 513-613-7973" on a single line even in
   the narrowest 5-across column; it used to break before the highlighted
   digits and read as two separate numbers. */
.mcf-phone-num {
  display: block; white-space: nowrap;
  font-size: .8rem; font-weight: 700; letter-spacing: -.01em;
}
.mcf-phone-num b { color: #7BE3A6; }
.mcf-phone-hint { display: block; font-size: .62rem; opacity: .85; margin-top: .2rem; }

/* Step 4 — four empty input boxes that never move, and the digits that get
   typed into them. The box is the <b>, the digit is the <span> inside it. */
.mcf-pin { display: flex; gap: .3rem; }
.mcf-pin b {
  flex: 1; text-align: center; padding: .3rem 0; border-radius: 7px;
  background: var(--wa-page); border: 1px solid var(--wa-line);
  color: var(--wa-teal-dark); font-size: .9rem; font-weight: 800;
  transition: background .25s var(--wa-ease), border-color .25s var(--wa-ease);
}
.mcf-pin b span { display: block; }

/* Step 5 — the result. A centred tick with a small burst around it, the
   verdict, then the number. The whole block is one element so it can be
   swapped with the spinner without either ever showing at the same time. */
.mcf-ok {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .12rem; padding: .5rem .35rem;
  background: #E9F8EF; border: 1px solid #C8EBD8; border-radius: 9px;
}
.mcf-ok-mark { position: relative; display: block; line-height: 1; margin-bottom: .1rem; }
.mcf-ok-mark > .fa-circle-check { font-size: 1.45rem; color: var(--wa-green); }
.mcf-ok b  { font-size: .76rem; font-weight: 800; color: #1F7A4C; }
.mcf-ok em { font-style: normal; font-size: .66rem; font-weight: 700; color: var(--wa-teal-dark); }

/* The little congratulation sparks. They live inside .mcf-ok, so they are
   hidden along with it while the spinner is running. */
.mcf-spark { position: absolute; font-size: .4rem; color: var(--wa-green); opacity: 0; }
.mcf-spark-1 { top: -2px; left: -9px; }
.mcf-spark-2 { top: -4px; right: -8px; }
.mcf-spark-3 { bottom: 0; right: -11px; }

/* Chevron between cards, sitting in the grid gap */
.mcf-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -.72rem;
  width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid var(--wa-line); border-top: 2px solid var(--wa-line);
  transform: rotate(45deg);
}

.mcf-foot {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: 1.4rem 0 0; font-size: .85rem; line-height: 1.6; color: var(--wa-body);
  background: var(--wa-page); border: 1px dashed var(--wa-line); border-radius: 12px;
  padding: .85rem 1rem;
}
.mcf-foot i { color: var(--wa-teal); margin-top: .2rem; flex-shrink: 0; }

/* =========================================================================
   THE ANIMATION
   -------------------------------------------------------------------------
   One clock: every animation on this component runs for exactly 15s and
   repeats, so they can never drift apart no matter how long the page is
   open. Each one only "does something" inside its own 3s slice:

       step 1   0.0 -  3.0s   request travels, target number lights up
       step 2   3.0 -  6.0s   the handset rings
       step 3   6.0 -  9.0s   caller ID shakes in, last 4 digits pulse
       step 4   9.0 - 12.0s   the four digits are typed, one at a time
       step 5  12.0 - 15.0s   spinner, then the verified tick

   Elements that must be INVISIBLE before their turn use
   animation-fill-mode: backwards, which holds the 0% keyframe during the
   delay. That is what makes the digits in step 4 look typed rather than
   already there, and it also means a first-time visitor sees the flow from
   the beginning instead of mid-way through.

   Text is never animated away - only accents, so a screenshot taken at any
   moment still shows every card's full wording.
   ========================================================================= */
.mcf-card, .mcf-num, .mcf-wire-dot, .mcf-target, .mcf-ring, .mcf-shake,
.mcf-last4, .mcf-pin b, .mcf-pin b span, .mcf-checking, .mcf-ok {
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

/* ---- the active card lifts and zooms slightly ------------------------- */
@keyframes mcf-walk {
  0%, 18% {
    border-color: var(--wa-green);
    box-shadow: 0 10px 24px rgba(11, 122, 67, .16);
    transform: scale(1.035);
  }
  24%, 100% {
    border-color: var(--wa-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transform: scale(1);
  }
}
@keyframes mcf-walk-num {
  0%, 18%   { transform: scale(1.2); background: var(--wa-teal); }
  24%, 100% { transform: scale(1); background: var(--wa-green); }
}
.mcf-card { animation-name: mcf-walk; }
.mcf-num  { animation-name: mcf-walk-num; }

/* The lifted card must sit above its neighbours while it is scaled up. */
@keyframes mcf-lift { 0%, 24% { z-index: 2; } 25%, 100% { z-index: 1; } }
.mcf-step { z-index: 1; animation: mcf-lift 15s infinite; }

.mcf-step:nth-child(1) .mcf-card, .mcf-step:nth-child(1) .mcf-num, .mcf-step:nth-child(1) { animation-delay: 0s; }
.mcf-step:nth-child(2) .mcf-card, .mcf-step:nth-child(2) .mcf-num, .mcf-step:nth-child(2) { animation-delay: 3s; }
.mcf-step:nth-child(3) .mcf-card, .mcf-step:nth-child(3) .mcf-num, .mcf-step:nth-child(3) { animation-delay: 6s; }
.mcf-step:nth-child(4) .mcf-card, .mcf-step:nth-child(4) .mcf-num, .mcf-step:nth-child(4) { animation-delay: 9s; }
.mcf-step:nth-child(5) .mcf-card, .mcf-step:nth-child(5) .mcf-num, .mcf-step:nth-child(5) { animation-delay: 12s; }

/* ---- STEP 1 - the request leaves your server ------------------------- */
.mcf-wire {
  display: block; position: relative; height: 2px; margin: .1rem 0;
  background: var(--wa-line); border-radius: 2px; overflow: hidden;
}
.mcf-wire-dot {
  position: absolute; top: -2px; left: 0;
  width: 6px; height: 6px; border-radius: 50%; background: var(--wa-green);
  animation-name: mcf-travel; animation-delay: .35s;
}
@keyframes mcf-travel {
  0%       { left: 0; opacity: 0; }
  2%       { opacity: 1; }
  11%      { left: calc(100% - 6px); opacity: 1; }
  13%, 100% { left: calc(100% - 6px); opacity: 0; }
}
/* The number we are about to call. It is the whole point of step 1, so it
   is a proper field with a label rather than a fragment of JSON. */
.mcf-target-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--wa-muted);
}
.mcf-target {
  display: block; text-align: center; white-space: nowrap;
  border-radius: 7px; padding: .35rem .3rem;
  background: var(--wa-page); border: 1px solid var(--wa-line);
  color: var(--wa-teal-dark); font-size: .84rem; font-weight: 800;
  letter-spacing: -.01em;
}
@keyframes mcf-target-on {
  0%        { background: var(--wa-page); border-color: var(--wa-line); }
  3%, 14%   { background: rgba(34, 197, 94, .18); border-color: var(--wa-green); }
  18%, 100% { background: var(--wa-page); border-color: var(--wa-line); }
}
.mcf-target { animation-name: mcf-target-on; animation-delay: 1.3s; }

/* ---- STEP 2 - a handset that actually rings -------------------------- */
.mcf-ring {
  position: relative; align-self: center;
  width: 42px; height: 42px; border-radius: 50%; margin: .15rem 0 .45rem;
  background: var(--wa-green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  animation-name: mcf-shake; animation-delay: 3s;
}
.mcf-ring::before, .mcf-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wa-green);
  animation: mcf-pulse 15s infinite backwards;
}
.mcf-ring::before { animation-delay: 3s; }
.mcf-ring::after  { animation-delay: 3.6s; }
@keyframes mcf-pulse {
  0%       { transform: scale(1); opacity: .75; }
  13%      { transform: scale(2); opacity: 0; }
  14%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes mcf-shake {
  0%, 20%                  { transform: rotate(0); }
  2%, 6%, 10%              { transform: rotate(-13deg); }
  4%, 8%, 12%              { transform: rotate(13deg); }
  14%, 100%                { transform: rotate(0); }
}
.mcf-shake { display: inline-block; animation-name: mcf-shake; animation-delay: 6s; }

/* ---- STEP 3 - the last four digits are the point --------------------- */
@keyframes mcf-last4 {
  0%, 2%    { background: transparent; transform: scale(1); }
  6%, 13%   { background: rgba(123, 227, 166, .3); transform: scale(1.09); }
  17%, 100% { background: transparent; transform: scale(1); }
}
.mcf-last4 {
  display: inline-block; border-radius: 4px; padding: 0 2px;
  animation-name: mcf-last4; animation-delay: 6s;
}

/* ---- STEP 4 - typed in, one digit at a time -------------------------- */
/* The digit drops into a box that was already sitting there empty. */
@keyframes mcf-type {
  0%       { opacity: 0; transform: translateY(5px) scale(.8); }
  2%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* and the box itself fills in behind it */
@keyframes mcf-slot {
  0%       { background: var(--wa-page); border-color: var(--wa-line); }
  2%, 100% { background: rgba(34, 197, 94, .12); border-color: #C8EBD8; }
}
.mcf-pin b { animation-name: mcf-slot; }
.mcf-pin b span { animation-name: mcf-type; }
.mcf-pin b:nth-of-type(1), .mcf-pin b:nth-of-type(1) span { animation-delay: 9.25s; }
.mcf-pin b:nth-of-type(2), .mcf-pin b:nth-of-type(2) span { animation-delay: 9.65s; }
.mcf-pin b:nth-of-type(3), .mcf-pin b:nth-of-type(3) span { animation-delay: 10.05s; }
.mcf-pin b:nth-of-type(4), .mcf-pin b:nth-of-type(4) span { animation-delay: 10.45s; }


/* ---- STEP 5 - checking, then verified -------------------------------- */
/* Both states share one grid cell so the card never changes height. */
.mcf-result { display: grid; }
.mcf-checking, .mcf-ok { grid-area: 1 / 1; }

.mcf-checking {
  display: flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 700; color: var(--wa-muted);
  background: var(--wa-page); border: 1px solid var(--wa-line);
  border-radius: 7px; padding: .3rem .45rem;
  animation-name: mcf-checking; animation-delay: 12s;
}
.mcf-checking i { animation: mcf-spin 1s linear infinite; }
@keyframes mcf-spin { to { transform: rotate(360deg); } }
/* 0% must be hidden, not shown: fill-mode backwards holds the 0% frame for
   the whole 12s before this step's turn, so starting at opacity 1 would leave
   "Checking..." sitting on screen from the moment the page loads. */
@keyframes mcf-checking {
  0%         { opacity: 0; }
  1%, 8%     { opacity: 1; }
  10%, 100%  { opacity: 0; }
}

.mcf-ok { animation-name: mcf-verified; animation-delay: 13.2s; }
@keyframes mcf-verified {
  0%       { opacity: 0; transform: scale(.9); }
  1.5%     { opacity: 1; transform: scale(1.06); }
  3%, 100% { opacity: 1; transform: scale(1); }
}

/* Sparks fly out once, just after the tick lands. */
.mcf-spark {
  animation-name: mcf-spark; animation-duration: 15s;
  animation-iteration-count: infinite; animation-fill-mode: backwards;
}
.mcf-spark-1 { animation-delay: 13.35s; }
.mcf-spark-2 { animation-delay: 13.45s; }
.mcf-spark-3 { animation-delay: 13.55s; }
@keyframes mcf-spark {
  0%        { opacity: 0; transform: scale(.4); }
  1%        { opacity: 1; transform: scale(1.15); }
  3%        { opacity: .9; transform: scale(1); }
  5%, 100%  { opacity: 0; transform: scale(.6); }
}

@media (prefers-reduced-motion: reduce) {
  .mcf-card, .mcf-num, .mcf-step, .mcf-wire-dot, .mcf-target, .mcf-ring,
  .mcf-ring::before, .mcf-ring::after, .mcf-shake, .mcf-last4, .mcf-pin b,
  .mcf-checking, .mcf-ok, .mcf-checking i, .mcf-pin b span, .mcf-spark {
    animation: none;
  }
  /* No animation means no fill-mode, so put the filled state back by hand. */
  .mcf-pin b { background: rgba(34, 197, 94, .12); border-color: #C8EBD8; }
  /* With no animation the two states would stack, so show only the result. */
  .mcf-checking { opacity: 0; }
}

/* -------------------------------------------------------------------------
   RESPONSIVE — chevrons only where the order is a straight line
   ---------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .mcf-steps { grid-template-columns: repeat(3, 1fr); }
  .mcf-step:not(:last-child)::after { display: none; }
}
@media (max-width: 849.98px) {
  .mcf-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .mcf-steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .mcf-card { padding: 1.4rem 1rem 1rem; }
  /* Stacked again, so the chevron comes back — rotated to point downwards */
  .mcf-step:not(:last-child)::after {
    display: block; top: auto; bottom: -1.1rem; right: auto; left: 50%;
    margin: 0 0 0 -4px; transform: rotate(135deg);
  }
  .mcf-nosms { padding: .9rem 1rem; }
  .mcf-title { font-size: .95rem; }
}