/* =========================================================================
 * Analysis interstitial for the redesigned funnel.
 * Loaded only on pages where the ACF "Enable analysis step" switch is on, and
 * scoped under body.cf-analysis, so the live funnel is untouched.
 * ========================================================================= */

/* while the analysis runs, no step card may show through (gvs already made the
 * next part active underneath) */
body.cf-analysis .gvs-form.cf-processing .gvs-form-part { display:none !important; }

body.cf-analysis .cf-proc {
  background:#fff; border:1px solid var(--bdr-s); border-radius:var(--rxl);
  box-shadow:var(--sh-md); padding:40px 28px 36px; margin-bottom:14px; text-align:center;
  animation:cfIn .25s ease;
}

/* spinner */
body.cf-analysis .cf-proc-spinner { position:relative; width:72px; height:72px; margin:0 auto 24px; }
body.cf-analysis .cf-proc-ring,
body.cf-analysis .cf-proc-ring2,
body.cf-analysis .cf-proc-ico { position:absolute; inset:0; width:72px; height:72px; border-radius:50%; }
body.cf-analysis .cf-proc-ring { border:3px solid var(--bdr); border-top-color:var(--red); animation:cfSpin 1s linear infinite; }
body.cf-analysis .cf-proc-ring2 { border:3px solid transparent; border-bottom-color:var(--navy); animation:cfSpin 1.4s linear infinite reverse; }
@keyframes cfSpin{to{transform:rotate(360deg)}}
body.cf-analysis .cf-proc-ico { background:var(--navy-xl); display:flex; align-items:center; justify-content:center; color:var(--navy); }

body.cf-analysis .cf-proc-title { font-size:19px; font-weight:700; color:var(--text); margin-bottom:6px; }
body.cf-analysis .cf-proc-sub { font-size:13.5px; color:var(--muted); line-height:1.6; max-width:340px; margin:0 auto 28px; }

/* checklist */
body.cf-analysis .cf-proc-checks { display:flex; flex-direction:column; max-width:340px; margin:0 auto 28px; text-align:left; }
body.cf-analysis .cf-proc-check {
  display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--bdr-s); font-size:13.5px; color:var(--hint); transition:color .3s;
}
body.cf-analysis .cf-proc-check:last-child { border-bottom:none; }
body.cf-analysis .cf-proc-check.done { color:var(--text); }
body.cf-analysis .cf-proc-check.active { color:var(--navy); font-weight:500; }
body.cf-analysis .cf-proc-check-ico {
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--bdr); background:#fff; transition:all .3s;
}
body.cf-analysis .cf-proc-check.active .cf-proc-check-ico { background:var(--red-l); border-color:var(--red); }
body.cf-analysis .cf-proc-check.done .cf-proc-check-ico { background:var(--green); border-color:var(--green); color:#fff; }
body.cf-analysis .cf-proc-check.done .cf-proc-check-ico svg { width:12px; height:12px; }
/* solid spinning ring for the check in progress */
body.cf-analysis .cf-spin {
  width:12px; height:12px; border-radius:50%; display:block;
  border:2px solid rgba(223,30,48,.25); border-top-color:var(--red);
  animation:cfSpin .7s linear infinite;
}

/* progress bar */
body.cf-analysis .cf-proc-bar-wrap { max-width:340px; margin:0 auto; }
body.cf-analysis .cf-proc-bar-track { height:5px; background:var(--bdr); border-radius:100px; overflow:hidden; margin-bottom:8px; }
body.cf-analysis .cf-proc-bar-fill {
  height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg, var(--navy), var(--red)); transition:width .6s ease;
}
body.cf-analysis .cf-proc-bar-label { font-size:12px; color:var(--hint); text-align:center; }

/* loading veil shown for a moment once the analysis is done */
body.cf-analysis .gvs-form { position:relative; }
body.cf-analysis .cf-veil {
  position:absolute; inset:0; z-index:500; border-radius:var(--rxl);
  background:rgba(7,4,4,.45);
  display:flex; align-items:center; justify-content:center;
  animation:cfFade .2s ease;
}
@keyframes cfFade{from{opacity:0}to{opacity:1}}
body.cf-analysis .cf-veil-spin {
  width:46px; height:46px; border-radius:50%; display:block;
  border:3px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:cfSpin .8s linear infinite;
}

@media (max-width:600px){
  body.cf-analysis .cf-proc { padding:32px 20px 28px; }
}