/*
 * Enhanced conversions walkthrough (cb/ec-walkthrough). assets/js/scripts.js
 * sets data-step (1, 2, 3) on .ecw and is-on on each row as it arrives; with
 * no script (or reduced motion) everything shows at once.
 */
.ecw { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr) 0 minmax(0, 1fr); border: 1px solid rgba(20, 30, 45, .07); border-radius: 1.5rem; background: #fff; box-shadow: 0 40px 70px -30px rgba(20, 45, 70, .35), 0 12px 24px -12px rgba(20, 45, 70, .14); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: #1d2327; }
.ecw p { margin: 0; }
.ecw svg { display: block; width: 100%; height: 100%; }

/* Panels, split by thin lines. The one that's working gets a mint bar on top. */
.ecw-pane { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 24px; }
.ecw-pane + .ecw-arrow + .ecw-pane { border-left: 1px solid #eceef1; }
.ecw-pane::before { content: ""; position: absolute; top: -1px; left: 26px; right: 26px; height: 3px; border-radius: 0 0 3px 3px; background: #43cea2; transform: scaleX(0); transform-origin: left; transition: transform .5s ease; }
.ecw[data-step="1"] .ecw-pane--capture::before,
.ecw[data-step="2"] .ecw-pane--hash::before,
.ecw[data-step="3"] .ecw-pane--match::before { transform: scaleX(1); }

.ecw-head { display: flex; align-items: center; gap: 10px; min-height: 28px; font-size: 14px; font-weight: 600; }
.ecw-num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eceef1; color: #646970; font-size: 13px; font-weight: 700; transition: background .3s ease, color .3s ease; }
.ecw-sub { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: #e7f7f0; color: #1f8a63; font-size: 11.5px; font-weight: 600; }
/* The logos are wordmarks (they include the platform name). */
.ecw-logo { width: auto; max-width: 110px; height: 22px; object-fit: contain; object-position: left center; transition: opacity .3s ease; }

/* A step's number turns brand blue once it has started. */
.ecw:not([data-step]) .ecw-num,
.ecw[data-step="1"] .ecw-pane--capture .ecw-num,
.ecw[data-step="2"] :is(.ecw-pane--capture, .ecw-pane--hash) .ecw-num,
.ecw[data-step="3"] .ecw-num { background: var(--wp--preset--color--primary, #1b5a9b); color: #fff; }

/* Customer details and their hashes */
.ecw-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid #eceef1; border-radius: 8px; }
.ecw-row + .ecw-row { margin-top: 6px; }
.ecw-k { flex: none; font-size: 12.5px; font-weight: 600; }
.ecw-v { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #50575e; transition: opacity .3s ease; }
.ecw-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #1f8a63; }
.ecw-foot { margin-top: auto !important; font-size: 12px; color: #8c8f94; }

/* Arrows sit on the lines between panels and fill in as the data passes. */
.ecw-arrow { position: relative; z-index: 1; align-self: center; justify-self: center; display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border: 1px solid #dcdfe3; border-radius: 50%; background: #fff; color: #8c8f94; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.ecw:not([data-step]) .ecw-arrow,
.ecw[data-step="2"] .ecw-arrow--1,
.ecw[data-step="3"] .ecw-arrow { border-color: #43cea2; background: #43cea2; color: #fff; }

/* The match: an ad click on one device, the purchase days later on another. */
.ecw-steps { position: relative; display: flex; flex-direction: column; gap: 14px; }
/* The line joins the centers of the two icon boxes: 1px border + 10px padding + half the
   36px box down, and 1px border + 12px padding - 6px pull + half the box across. */
.ecw-steps::before { content: ""; position: absolute; top: 29px; bottom: 29px; left: 24px; width: 2px; background: #43cea2; transform: scaleY(0); transform-origin: top; transition: transform .5s ease; }
.ecw-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #eceef1; border-radius: 10px; background: #fff; }
.ecw-device { position: relative; z-index: 1; flex: none; width: 36px; height: 36px; margin-left: -6px; padding: 8px; box-sizing: border-box; border-radius: 8px; background: #f3f5f7; color: #50575e; }
.ecw-what { display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 600; }
.ecw-what small { font-size: 11.5px; font-weight: 400; color: #8c8f94; }
.ecw-matched { display: flex; align-items: center; gap: 9px; margin-top: auto !important; padding: 10px 12px; border-radius: 10px; background: #e7f7f0; color: #1f8a63; font-size: 13px; font-weight: 600; }
.ecw-tick { flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #43cea2; color: #fff; }

/* Animated states. Rows wait faded until the script turns them on. */
.ecw[data-step] .ecw-row,
.ecw[data-step] .ecw-step--buy,
.ecw[data-step] .ecw-matched { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.ecw[data-step] .ecw-pane--hash .ecw-row,
.ecw[data-step] .ecw-pane--capture .ecw-row { opacity: .35; transform: none; }
.ecw[data-step] .ecw-row.is-on,
.ecw[data-step] .ecw-step--buy.is-on,
.ecw[data-step] .ecw-matched.is-on { opacity: 1; transform: none; }
.ecw[data-step] .ecw-pane--hash .ecw-row:not(.is-on) .ecw-v { opacity: 0; }
.ecw:not([data-step]) .ecw-steps::before,
.ecw .ecw-steps.is-linked::before { transform: scaleY(1); }
.ecw.is-swap .ecw-logo { opacity: 0; }

/* Phones: panels stack, arrows point down. */
@media (max-width: 781px) {
	.ecw { grid-template-columns: minmax(0, 1fr); }
	.ecw-pane + .ecw-arrow + .ecw-pane { border-left: 0; border-top: 1px solid #eceef1; }
	.ecw-arrow { grid-row: auto; margin: -15px 0; transform: rotate(90deg); }
	.ecw-pane { padding: 22px 20px 20px; }
	.ecw-pane::before { left: 20px; right: 20px; }
}