/* blocks_charge_failure_chart — scoped styles (Pencil frame "Charge failure
   chart — A3"). Plain CSS in px: the theme's root font-size is 10px, and
   WindPress only JIT-compiles utilities from the admin UI. */

.blocks-cfc {
    --cfc-ink: #130041;
    --cfc-primary: #29165e;
    --cfc-muted: #667280;
    --cfc-mid: #75797c;
    --cfc-border: #e0e0e5;
    --cfc-panel: #f7f8fb;
    --cfc-first: #a6e3b5;
    --cfc-recovered: #2e8b57;
    --cfc-insufficient: #f2876b;
    --cfc-paypal: #f6be55;
    --cfc-expired: #6b5aa6;
    --cfc-other: #b9bcc6;
    --cfc-stack-h: 420px;

    position: relative;
    container: cfc / inline-size;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px 0 56px;
    color: var(--cfc-ink);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
.blocks-cfc *,
.blocks-cfc *::before,
.blocks-cfc *::after {
    box-sizing: border-box;
}
.blocks-cfc p,
.blocks-cfc h1,
.blocks-cfc h2,
.blocks-cfc ul {
    margin: 0;
    padding: 0;
}
.blocks-cfc ul {
    list-style: none;
}
@media (min-width: 1024px) {
    .blocks-cfc {
        gap: 56px;
        padding: 56px 0 96px;
    }
}

.blocks-cfc.blocks-cfc--no-hero {
    padding-top: 0;
}

.cfc-fill--first { background-color: var(--cfc-first); }
.cfc-fill--recovered { background-color: var(--cfc-recovered); }
.cfc-fill--insufficient { background-color: var(--cfc-insufficient); }
.cfc-fill--paypal { background-color: var(--cfc-paypal); }
.cfc-fill--expired { background-color: var(--cfc-expired); }
.cfc-fill--other { background-color: var(--cfc-other); }

.cfc__swatch {
    flex: 0 0 auto;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ---- Hero ---- */

.cfc__hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cfc__eyebrow {
    color: #3c9a89;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
}
.cfc__h1 {
    max-width: 820px;
    color: var(--cfc-ink);
    font-weight: 900;
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -0.8px;
    text-wrap: balance;
}
.cfc__lead {
    max-width: 760px;
    color: var(--cfc-muted);
    font-size: 16px;
    line-height: 1.5;
}
@container cfc (min-width: 720px) {
    .cfc__hero { gap: 20px; }
    .cfc__eyebrow { font-size: 15px; }
    .cfc__h1 {
        font-size: 56px;
        line-height: 1.05;
        letter-spacing: -1.6px;
    }
    .cfc__lead { font-size: 20px; }
}

/* ---- Chart card ---- */

.cfc__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cfc__chart-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cfc__chart-title {
    color: var(--cfc-ink);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
}
.blocks-cfc .cfc__chart-sub a {
    color: var(--cfc-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.blocks-cfc .cfc__pledges {
    color: var(--cfc-primary);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cfc__chart-sub {
    color: var(--cfc-muted);
    font-size: 12px;
    line-height: 1.4;
}
@container cfc (min-width: 720px) {
    .cfc__card {
        gap: 28px;
    }
    .cfc__chart-head { gap: 16px; }
    .cfc__chart-title {
        font-size: 24px;
        letter-spacing: -0.4px;
    }
    .cfc__chart-sub { font-size: 14px; }
}

.cfc__legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cfc__legend-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cfc__legend-kind {
    color: var(--cfc-mid);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.cfc__legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.cfc__legend-items li {
    color: #484550;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.25;
}
.cfc__legend-items .cfc__swatch {
    position: relative;
    top: 1px;
    margin-right: 6px;
}

/* ---- Plot. One DOM, two layouts: rows below 1024px, columns above. ---- */

.cfc__plot {
    min-height: 330px;
}
.cfc__axis {
    display: none;
}
.cfc__bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cfc__bucket {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 8px;
}
.cfc__bucket-label {
    flex: 0 0 78px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.cfc__bucket-name {
    color: var(--cfc-ink);
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    white-space: nowrap;
}
.cfc__stack {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
}
.cfc__bucket.is-active .cfc__stack {
    height: 26px;
    box-shadow: 0 0 0 3px var(--cfc-primary);
}
.cfc__seg {
    flex: 0 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.cfc__seg-label {
    padding-left: 6px;
    color: #1f5e3a;
    font-weight: 700;
    font-size: 11px;
    line-height: 13px;
    white-space: nowrap;
}
.cfc-fill--recovered .cfc__seg-label {
    display: none;
}

.cfc__you {
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--cfc-primary);
    color: #fff;
    font-weight: 700;
    font-size: 9px;
    line-height: 11px;
    white-space: nowrap;
}
.cfc__you-rate {
    display: none;
}

.cfc__marker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
}
.cfc__marker-line {
    flex: 1 1 0;
    height: 0;
    border-top: 2px dashed var(--cfc-primary);
}
.cfc__marker-label {
    display: none;
}
.cfc__marker-short {
    color: var(--cfc-primary);
    font-weight: 700;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cfc__scale {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding: 0 6px 0 94px;
    color: var(--cfc-mid);
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
}

@container cfc (min-width: 720px) {
    .cfc__plot {
        --cfc-slot-h: 58px;
        display: flex;
        gap: 16px;
        min-height: 520px;
    }
    .cfc__axis {
        flex: 0 0 40px;
        position: relative;
        display: block;
        height: var(--cfc-stack-h);
        margin-top: calc(var(--cfc-slot-h) + 8px);
    }
    .cfc__axis span {
        position: absolute;
        right: 0;
        transform: translateY(-50%);
        color: var(--cfc-mid);
        font-weight: 500;
        font-size: 11px;
        line-height: 13px;
    }
    .cfc__scale {
        display: none;
    }
    .cfc__bars {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }
    .cfc__bucket {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 8px;
        padding: var(--cfc-slot-h) 4px 8px;
        border-radius: 0;
    }
    .cfc__bucket-label {
        flex: 0 0 auto;
        align-items: center;
        gap: 8px;
    }
    .cfc__bucket-name {
        font-size: 13px;
        line-height: 16px;
    }
    .cfc__stack,
    .cfc__bucket.is-active .cfc__stack {
        flex: 0 0 auto;
        flex-direction: column-reverse;
        height: var(--cfc-stack-h);
        margin-top: 8px;
        border-radius: 6px 6px 0 0;
    }
    .cfc__seg {
        align-items: flex-start;
        justify-content: center;
        min-height: 0;
    }
    .cfc__seg-label {
        padding: 8px 0 0;
        font-size: 13px;
        line-height: 16px;
    }
    .cfc-fill--recovered {
        align-items: center;
    }
    .cfc-fill--recovered .cfc__seg-label {
        display: block;
        padding: 0;
        color: #fff;
        font-size: 11px;
        line-height: 13px;
    }

    .cfc__you {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        padding: 5px 9px;
        border-radius: 6px;
        font-size: 11px;
        line-height: 13px;
    }
    .cfc__you::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -6px;
        border: 6px solid transparent;
        border-top-width: 0;
        border-bottom: 8px solid var(--cfc-primary);
    }
    .cfc__you-rate {
        display: block;
        color: #e7e3ff;
        font-weight: 500;
    }

    .cfc__marker {
        flex: 0 0 2px;
        position: relative;
        align-self: flex-start;
        height: calc(var(--cfc-slot-h) + 8px + var(--cfc-stack-h));
        padding: 0;
    }
    .cfc__marker-line {
        flex: 0 0 2px;
        height: 100%;
        border-top: 0;
        border-left: 2px dashed var(--cfc-primary);
    }
    .cfc__marker-label {
        position: absolute;
        top: 0;
        left: 8px;
        display: flex;
        flex-direction: column;
        gap: 1px;
        width: max-content;
        max-width: 96px;
        font-size: 11px;
        line-height: 13px;
    }
    .cfc__marker-label strong {
        color: var(--cfc-primary);
        font-weight: 700;
    }
    .cfc__marker-label span {
        color: var(--cfc-muted);
        font-weight: 500;
    }
    .cfc__marker-short {
        display: none;
    }
}

/* The table is the screen-reader and no-JS route to the same numbers. */
.cfc__tables {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.blocks-cfc.is-failed .cfc__tables {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow-x: auto;
    clip: auto;
    clip-path: none;
    white-space: normal;
}
.blocks-cfc.is-failed .cfc__plot,
.blocks-cfc.is-failed .cfc__personalise,
.blocks-cfc.is-failed .cfc__multiples {
    display: none;
}
.cfc__table {
    width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 13px;
}
.cfc__table caption {
    padding-bottom: 8px;
    font-weight: 700;
    text-align: left;
}
.cfc__table th,
.cfc__table td {
    padding: 6px 10px;
    border: 1px solid var(--cfc-border);
    text-align: right;
}
.cfc__table th:first-child {
    text-align: left;
}

/* ---- Personalise ---- */

.cfc__personalise {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.cfc__form {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}
.cfc__form-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cfc__form-head p {
    color: var(--cfc-muted);
    font-size: 13px;
}
.cfc__h2-small {
    color: var(--cfc-ink);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
}
.cfc__types {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.cfc__types legend,
.cfc__date > span {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    color: var(--cfc-ink);
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
}
.cfc__type-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cfc__type {
    position: relative;
    flex: 1 1 0;
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--cfc-border);
    border-radius: 8px;
    cursor: pointer;
}
.cfc__type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.cfc__type-dot {
    flex: 0 0 16px;
    height: 16px;
    margin-top: 1px;
    background: #fff;
    border: 1px solid var(--cfc-other);
    border-radius: 50%;
}
.cfc__type-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cfc__type-label {
    color: var(--cfc-ink);
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
}
.cfc__type-sub {
    color: var(--cfc-muted);
    font-size: 12px;
    line-height: 15px;
}
.cfc__type--charge-later { --cfc-type: #e6c333; --cfc-type-ink: #373806; }
.cfc__type--deposit-upfront { --cfc-type: #bc8fe0; --cfc-type-ink: #3e093e; }
.cfc__type:has(input:checked) {
    border-color: var(--cfc-type);
}
.cfc__type:has(input:checked) .cfc__type-dot {
    background: var(--cfc-type);
    border-color: var(--cfc-type);
    box-shadow: inset 0 0 0 3px #fff;
}
.cfc__type:has(input:checked) .cfc__type-label {
    color: var(--cfc-type-ink);
}
.cfc__type:has(input:focus-visible) {
    outline: 2px solid var(--cfc-primary);
    outline-offset: 2px;
}

.cfc__dates {
    display: flex;
    gap: 10px;
}
.cfc__date {
    flex: 1 1 0;
    min-width: 0;
    display: block;
}
.cfc__date > span {
    margin-bottom: 8px;
}
.cfc__date input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #c9cbd3;
    border-radius: 6px;
    color: var(--cfc-ink);
    font-family: inherit;
    font-weight: 500;
    font-size: 15px;
    line-height: 38px;
}
.cfc__date input:focus-visible {
    outline: 2px solid var(--cfc-primary);
    outline-offset: 1px;
}
.cfc__hint {
    margin-top: -6px;
    color: #804e04;
    font-weight: 500;
    font-size: 13px;
}

.cfc__result {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 18px;
    background:
        radial-gradient(130% 120% at 100% 0%, rgba(188, 90, 255, 0.25) 0%, rgba(188, 90, 255, 0) 100%),
        var(--cfc-ink);
    border-radius: 14px;
    color: #e7e3ff;
}
.cfc__result-eyebrow {
    color: #cfc8f5;
    font-weight: 700;
    font-size: 11px;
    line-height: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.cfc__result-big {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
}
.cfc__result-big strong {
    color: var(--cfc-first);
    font-weight: 900;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -1.5px;
}
.cfc__result-big span {
    color: #e7e3ff;
    font-weight: 600;
    font-size: 14px;
}
.cfc__result-prompt {
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}
.blocks-cfc .cfc__result-split {
    color: #e7e3ff;
    font-size: 14px;
    line-height: 1.5;
}
.cfc__why {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cfc__why-title {
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
}
.cfc__why ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cfc__why li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
}
.cfc__why-label {
    flex: 1 1 0;
}
.cfc__why-value {
    color: #fff;
    font-weight: 700;
}

@container cfc (min-width: 520px) {
    .cfc__type-options { flex-direction: row; }
    .cfc__type { max-width: 240px; }
    .cfc__dates { gap: 16px; }
}
@container cfc (min-width: 720px) {
    .cfc__personalise {
        gap: 24px;
    }
}
@container cfc (min-width: 1000px) {
    .cfc__personalise {
        flex-direction: row;
        gap: 32px;
        padding: 32px 40px;
        border-radius: 16px;
    }
    .cfc__form { gap: 24px; }
    .cfc__form-head p { font-size: 14px; }
    .cfc__h2-small {
        font-size: 22px;
        letter-spacing: -0.3px;
    }
    .cfc__result {
        flex: 0 0 400px;
        padding: 26px 28px;
    }
    .cfc__result-big strong { font-size: 52px; }
}

/* ---- Small multiples ---- */

.cfc__multiples {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cfc__multiples-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cfc__multiples-head p {
    color: var(--cfc-muted);
    font-size: 12px;
}
.cfc__h2 {
    color: var(--cfc-ink);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
}
.cfc__panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.cfc__panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    background: var(--cfc-panel);
    border-radius: 10px;
}
.cfc__panel-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--cfc-ink);
    font-weight: 700;
    font-size: 11px;
    line-height: 13px;
}
.cfc__panel-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
}
.cfc__panel-callout strong {
    color: var(--cfc-ink);
    font-weight: 900;
    font-size: 20px;
    line-height: 24px;
}
.cfc__panel-callout span {
    color: var(--cfc-mid);
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
}
.cfc__mini {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 56px;
}
.cfc__mini-slot {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    height: 100%;
}
.cfc__mini-bar {
    flex: 1 1 0;
    border-radius: 1px 1px 0 0;
}
.cfc__mini-bar.is-active {
    background: var(--cfc-primary);
}
.cfc__panel-ends {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 8px;
    color: var(--cfc-mid);
    font-weight: 500;
    font-size: 10px;
    line-height: 13px;
}
@container cfc (min-width: 720px) {
    .cfc__multiples { gap: 24px; }
    .cfc__multiples-head p { font-size: 14px; }
    .cfc__h2 {
        font-size: 26px;
        letter-spacing: -0.5px;
    }
    .cfc__panels {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
    .cfc__panel {
        gap: 14px;
        padding: 20px 20px 16px;
        border-radius: 12px;
    }
    .cfc__panel-label {
        gap: 6px;
        font-size: 14px;
        line-height: 17px;
    }
    .cfc__panel-callout { gap: 0 8px; }
    .cfc__panel-callout strong {
        font-size: 30px;
        line-height: 36px;
        letter-spacing: -0.8px;
    }
    .cfc__panel-callout span {
        font-size: 12px;
        line-height: 15px;
    }
    .cfc__mini {
        gap: 8px;
        height: 120px;
    }
    .cfc__mini-bar { border-radius: 2px 2px 0 0; }
    .cfc__panel-ends { font-size: 11px; }
}

/* ---- CTA ---- */

.cfc__cta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 20px;
    background:
        radial-gradient(600px 320px at 85% 0%, rgba(188, 90, 255, 0.33) 0%, rgba(188, 90, 255, 0) 100%),
        var(--cfc-primary);
    border-radius: 14px;
    overflow: hidden;
}
.cfc__cta-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.cfc__cta-eyebrow {
    color: #ffe256;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.cfc__cta-h2 {
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    text-wrap: balance;
}
.cfc__cta-body {
    color: #e7e3ff;
    font-size: 14px;
    line-height: 1.5;
}
.cfc__cta-body strong {
    color: #fff;
    font-weight: 700;
}
.cfc__cta-body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cfc__cta-body a:hover {
    color: #fff;
}
.cfc__cta-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.blocks-cfc .cfc__cta-button {
    display: block;
    padding: 14px 24px;
    background: #ffe256;
    border-radius: 5px;
    color: var(--cfc-ink);
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease;
}
.blocks-cfc .cfc__cta-button:hover,
.blocks-cfc .cfc__cta-button:focus-visible {
    background: #fff;
    color: var(--cfc-ink);
}
.cfc__cta-note {
    color: #cfc8f5;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
}
@container cfc (min-width: 720px) {
    .cfc__cta {
        gap: 28px;
        padding: 44px 48px;
        border-radius: 16px;
    }
    .cfc__cta-h2 {
        font-size: 30px;
        line-height: 1.15;
        letter-spacing: -0.6px;
    }
    .cfc__cta-body {
        max-width: 640px;
        font-size: 16px;
    }
    .cfc__cta-actions {
        align-items: flex-start;
    }
}

@container cfc (min-width: 1000px) {
    .cfc__plot { --cfc-slot-h: 44px; }
    .cfc__marker-label { max-width: 150px; }
}

/* ---- Tooltip ---- */

.cfc__tip {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 240px;
    padding: 8px 10px;
    background: var(--cfc-ink);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(19, 0, 65, 0.22);
    color: #e7e3ff;
    font-size: 12px;
    line-height: 1.35;
    pointer-events: none;
}
.cfc__tip[hidden] {
    display: none;
}
.cfc__tip strong {
    color: #fff;
    font-weight: 700;
}
.cfc__seg[data-tip]:hover,
.cfc__mini-slot:hover .cfc__mini-bar {
    filter: brightness(0.93);
}