/* CTA Procedures – Frontend v1.7.5 */
:root {
  --cp-blue:   #1598F5;
  --cp-blue2:  #0d6fd1;
  --cp-ink:    #142033;
  --cp-muted:  #667085;
  --cp-line:   #d9e0e8;
  --cp-soft:   #f5f8fb;
}

/* ── App wrapper ──────────────────────────────────── */
.cta-proc-app {
  max-width: 760px;
  margin: 0 auto 32px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--cp-ink);
  background: #fff;
  box-shadow: 0 2px 24px rgba(0,0,0,.09);
  border-radius: 16px;
  overflow: hidden;
}
.cta-proc-app *,
.cta-proc-app *::before,
.cta-proc-app *::after {
  box-sizing: border-box;
}

/* ── Card head: step counter + title ─────────────── */
.cta-proc-card-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--cp-line);
}
.cta-proc-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--cp-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.cta-proc-step-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  color: var(--cp-ink);
}

/* ── Illustration (scalable) ──────────────────────── */
.cta-proc-visual {
  position: relative;
  margin: 16px 18px 8px;
}
.cta-proc-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* Overlay sits exactly over the image */
.cta-proc-annos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Box annotation ───────────────────────────────── */
.cta-proc-anno-box {
  position: absolute;
  border-width: clamp(2px, 0.35vw, 3px);
  border-style: solid;
  border-color: var(--cp-blue); /* color overridden inline by JS */
  background: rgba(21, 152, 245, 0.12); /* light fill — overridden inline by JS */
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 0 0 2px rgba(21, 152, 245, 0.22); /* outer ring; also overridden inline */
}
/* Number badge — inside the box, top-left corner */
.cta-proc-anno-n {
  position: absolute;
  top:  5px;
  left: 5px;
  background: var(--cp-blue); /* color overridden inline by JS */
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 4px;
  min-width: 18px;
  text-align: center;
}

/* ── Number (pin) annotation ──────────────────────── */
.cta-proc-anno-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--cp-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ── Step transition — crossfade on navigation ────── */
/*
 * When .is-transitioning is added to the card, the three content
 * zones fade to opacity 0 (180 ms). The JS swaps step content
 * while they are invisible, then removes the class so they fade
 * back in. Height changes happen in the invisible window, so the
 * card never appears to "jump".
 */
.cta-proc-card-head,
.cta-proc-visual,
.cta-proc-text {
  transition: opacity 0.18s ease;
}
.cta-proc-card.is-transitioning .cta-proc-card-head,
.cta-proc-card.is-transitioning .cta-proc-visual,
.cta-proc-card.is-transitioning .cta-proc-text {
  opacity: 0;
}

/* ── Instruction text ─────────────────────────────── */
.cta-proc-text {
  padding: 12px 18px 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cp-ink);
  min-height: 80px; /* prevent collapse on very short steps */
}
.cta-proc-text p            { margin: 0 0 8px; }
.cta-proc-text p:last-child { margin-bottom: 0; }
.cta-proc-text ul,
.cta-proc-text ol           { margin: 0 0 8px; padding-left: 20px; }
/* Inline images (e.g. menu button icons) */
.cta-proc-text img,
.cta-proc-text .cpa-inline-img {
  display: inline;
  height: 1.6em;
  width: auto;
  max-width: 120px;
  vertical-align: middle;
  border-radius: 3px;
  object-fit: contain;
}

/* ── Navigation ───────────────────────────────────── */
.cta-proc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--cp-line);
  background: var(--cp-soft);
}
.cta-proc-nav-count {
  font-size: 13px;
  color: var(--cp-muted);
  font-weight: 600;
}
.cta-proc-btn {
  background: var(--cp-blue);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  line-height: 1.3;
}
.cta-proc-btn:hover:not(:disabled) {
  background: var(--cp-blue2);
}
.cta-proc-btn:disabled {
  background: #c8d4e0;
  color: var(--cp-muted);
  cursor: default;
}

/* ── Error state ──────────────────────────────────── */
.cta-proc-err {
  color: #c00;
  font-style: italic;
  padding: 12px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 520px) {
  .cta-proc-step-title { font-size: 17px; }
  .cta-proc-btn        { padding: 8px 14px; font-size: 13px; }
}

/* ── Elementor compatibility ──────────────────────── */
.elementor-widget-shortcode,
.elementor-widget-shortcode > .elementor-widget-container {
  overflow: visible !important;
}