/* Pay blog — livelier infographic blocks (owner 02.11: «инфографику живее»). Loaded after pay-blog.css; colours only from
   the --ex- and --bx- variables so both themes work. Motion is short and one-off (bars grow, flow dashes move, status dot pulses) and is off
   under prefers-reduced-motion. Blocks: bx-kpis (key numbers with icons), bx-vs (comparison scoreboard), bx-race (time/size
   bars), bx-route (payment route diagram), bx-alert (service status), bx-time (timeline), bx-ring (percent ring). */

:root {
    --bx-bad: #b42318;
    --bx-warn: #a15c07;
    --bx-info: #1d4ed8;
    --bx-bad-bg: rgba(180, 35, 24, 0.08);
    --bx-warn-bg: rgba(161, 92, 7, 0.1);
    --bx-ok-bg: rgba(4, 120, 87, 0.09);
}

:root[data-ex-theme="dark"] {
    --bx-bad: #f87171;
    --bx-warn: #f5b84a;
    --bx-info: #8db4ff;
    --bx-bad-bg: rgba(248, 113, 113, 0.12);
    --bx-warn-bg: rgba(245, 184, 74, 0.12);
    --bx-ok-bg: rgba(34, 201, 139, 0.12);
}

.bx-bad {
    --c: var(--bx-bad);
}

.bx-warn {
    --c: var(--bx-warn);
}

.bx-info {
    --c: var(--bx-info);
}

.bx-prose .bx-fig svg {
    max-width: 100%;
}

.bx-ico {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c, var(--bx-sx)) 14%, transparent);
    color: var(--c, var(--bx-sx));
}

.bx-ico svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ——— Key numbers with icons ——— */

.bx-prose .bx-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 12px;
    margin: 1.5em 0;
    padding: 0;
    list-style: none;
}

.bx-prose .bx-kpis li + li {
    margin-top: 0;
}

.bx-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--bx-line);
    border-radius: 12px;
    background: var(--ex-surface);
    box-shadow: inset 0 3px 0 var(--c, var(--bx-sx));
}

.bx-kpi b {
    color: var(--ex-text-primary);
    font-size: 1.6rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.bx-kpi span {
    color: var(--ex-text);
    font-size: 0.85rem;
    line-height: 1.35;
}

/* ——— Scoreboard: criterion | competitor | SnapEX Pay, each value with a yes / no / partly mark ——— */

.bx-vs {
    display: grid;
    border: 1px solid var(--bx-line-2);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ex-surface);
}

.bx-vs__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.bx-vs__row + .bx-vs__row {
    border-top: 1px solid var(--bx-line);
}

.bx-vs__row > * {
    padding: 11px 14px;
    min-width: 0;
}

.bx-vs__head {
    background: var(--ex-surface-elevated);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bx-vs__head span:nth-child(2) {
    color: var(--bx-pm);
}

.bx-vs__head span:nth-child(3) {
    color: var(--bx-sx);
}

.bx-vs__head span:first-child {
    color: var(--ex-muted);
}

.bx-vs__crit {
    color: var(--ex-text-primary);
    font-weight: 600;
}

.bx-vs__v {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    color: var(--ex-text);
    font-size: 0.875rem;
    line-height: 1.4;
}

.bx-vs__v::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--m) center / 12px 12px no-repeat, var(--mc);
}

.bx-vs__v.is-yes {
    --mc: var(--bx-sx);
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bx-vs__v.is-no {
    --mc: var(--bx-bad);
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.3 3.3l5.4 5.4M8.7 3.3l-5.4 5.4' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bx-vs__v.is-mid {
    --mc: var(--bx-warn);
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

:root[data-ex-theme="dark"] .bx-vs__v.is-yes {
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230b0f14' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-ex-theme="dark"] .bx-vs__v.is-no {
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.3 3.3l5.4 5.4M8.7 3.3l-5.4 5.4' fill='none' stroke='%230b0f14' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

:root[data-ex-theme="dark"] .bx-vs__v.is-mid {
    --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%230b0f14' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bx-vs__v.is-win {
    background: var(--bx-ok-bg);
}

.bx-vs__v.is-win.bx-vs__pm {
    background: color-mix(in srgb, var(--bx-pm) 12%, transparent);
}

.bx-vs__score {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 14px;
    font-size: 0.8125rem;
    color: var(--ex-muted);
}

.bx-vs__score b {
    color: var(--ex-text-primary);
}

/* ——— Race: horizontal bars that grow on load (time to first payment, fees, minimums) ——— */

.bx-prose .bx-race {
    display: grid;
    gap: 14px;
}

.bx-race li {
    display: grid;
    gap: 6px;
}

.bx-race__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    color: var(--ex-text-primary);
    font-weight: 600;
    font-size: 0.9375rem;
}

.bx-race__top small {
    color: var(--ex-muted);
    font-weight: 500;
    font-size: 0.8125rem;
}

.bx-race__val {
    flex: 0 0 auto;
    color: var(--c);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bx-race__track {
    height: 12px;
    border-radius: 999px;
    background: var(--bx-line);
    overflow: hidden;
}

.bx-race__bar {
    display: block;
    width: var(--v);
    min-width: 6px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 65%, transparent), var(--c));
    transform-origin: left center;
    animation: bx-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

[dir="rtl"] .bx-race__bar {
    transform-origin: right center;
}

@keyframes bx-grow {
    from {
        transform: scaleX(0);
    }
}

/* ——— Route: payment path as connected nodes with a moving dashed line ——— */

.bx-prose .bx-route {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.bx-route__node {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--ex-text);
}

.bx-route__node b {
    display: block;
    color: var(--ex-text-primary);
    font-size: 0.875rem;
}

.bx-route__node .bx-ico {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ex-surface);
    box-shadow: 0 0 0 2px var(--c, var(--bx-sx)), 0 0 0 6px color-mix(in srgb, var(--c, var(--bx-sx)) 14%, transparent);
}

.bx-route__node + .bx-route__node::before {
    content: "";
    position: absolute;
    top: 27px;
    right: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 3px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--bx-sx) 0 8px, transparent 8px 14px);
    background-size: 28px 3px;
    animation: bx-dash 1.4s linear infinite;
}

@keyframes bx-dash {
    to {
        background-position: 28px 0;
    }
}

.bx-route__node.bx-pm .bx-ico {
    color: var(--bx-pm);
}

/* ——— Status alert (service not available / be careful) with a pulsing dot ——— */

.bx-prose .bx-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin: 1.5em 0;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--c, var(--bx-bad)) 40%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--c, var(--bx-bad)) 8%, var(--ex-surface));
    color: var(--ex-text);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.bx-prose .bx-alert p {
    margin: 0;
}

.bx-prose .bx-alert p + p {
    margin-top: 6px;
}

.bx-alert__title {
    color: var(--ex-text-primary);
    font-weight: 700;
}

.bx-pulse {
    position: relative;
    width: 14px;
    height: 14px;
    margin: 5px 4px 0;
    border-radius: 50%;
    background: var(--c, var(--bx-bad));
}

.bx-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--c, var(--bx-bad));
    animation: bx-pulse 1.8s ease-out infinite;
}

@keyframes bx-pulse {
    from {
        transform: scale(1);
        opacity: 0.6;
    }

    to {
        transform: scale(2.8);
        opacity: 0;
    }
}

/* ——— Timeline (years / stages), vertical with coloured dots ——— */

.bx-prose .bx-time,
.bx-prose .bx-fig .bx-time {
    position: relative;
    display: grid;
    gap: 16px;
    padding-inline-start: 26px;
}

.bx-prose .bx-time::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline-start: 7px;
    width: 2px;
    background: linear-gradient(var(--bx-pm), var(--bx-line-2));
}

.bx-time li {
    position: relative;
    color: var(--ex-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

.bx-time li::before {
    content: "";
    position: absolute;
    top: 4px;
    inset-inline-start: -25px;
    width: 12px;
    height: 12px;
    border: 3px solid var(--ex-surface-elevated);
    border-radius: 50%;
    background: var(--c, var(--bx-pm));
    box-shadow: 0 0 0 1px var(--c, var(--bx-pm));
}

.bx-time__when {
    display: block;
    color: var(--c, var(--bx-pm));
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.bx-time b {
    color: var(--ex-text-primary);
}

/* ——— Percent rings (conic gradient), e.g. fee per payment ——— */

.bx-prose .bx-rings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 28px;
}

.bx-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 8.5rem;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--ex-text);
}

.bx-ring__dial {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--bx-line-2) 0);
    animation: bx-pop 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

.bx-ring__dial::before {
    content: attr(data-v);
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ex-surface-elevated);
    color: var(--ex-text-primary);
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.bx-ring b {
    color: var(--c);
}

@keyframes bx-pop {
    from {
        transform: scale(0.6) rotate(-40deg);
        opacity: 0;
    }
}

@media (max-width: 640px) {
    .bx-vs__row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bx-vs__crit {
        grid-column: 1 / -1;
        padding-bottom: 2px !important;
        font-size: 0.875rem;
    }

    .bx-vs__head span:first-child {
        display: none;
    }

    .bx-vs__row > * {
        padding: 9px 10px;
    }

    .bx-vs__v {
        font-size: 0.8125rem;
    }

    .bx-prose .bx-route {
        flex-direction: column;
        gap: 18px;
    }

    .bx-route__node {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        text-align: start;
    }

    .bx-route__node + .bx-route__node::before {
        top: -18px;
        right: auto;
        left: 28px;
        width: 3px;
        height: 18px;
        background: repeating-linear-gradient(180deg, var(--bx-sx) 0 6px, transparent 6px 10px);
        background-size: 3px 20px;
        animation-name: bx-dash-v;
    }

    .bx-prose .bx-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .bx-kpi {
        padding: 12px;
    }

    .bx-kpi b {
        font-size: 1.3rem;
    }
}

@keyframes bx-dash-v {
    to {
        background-position: 0 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bx-race__bar,
    .bx-route__node + .bx-route__node::before,
    .bx-pulse::after,
    .bx-ring__dial {
        animation: none;
    }
}