/**
 * Soofos funnel pages (FunnelKit checkout + thank-you), Calm Workspace.
 *
 * Loaded on wfacp_checkout / wffn_ty singulars (see functions.php). These
 * render on FunnelKit's blank canvas template, so this file owns the full
 * page chrome. Tokens only — no raw colors/px radii/shadows.
 */

body.single-wfacp_checkout,
body.single-wffn_ty {
    background: var(--page);
    font-family: var(--font);
    color: var(--ink);
    margin: 0;
}

.soofos-funnel {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
}

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

.soofos-funnel__hero {
    position: relative;
    background: var(--blue-fill);
    border-radius: 0 0 45% 45% / 0 0 42px 42px;
    padding: 28px 16px 44px;
    text-align: center;
}

.soofos-funnel__hero--ty {
    padding-bottom: 28px;
}

.soofos-funnel__logo-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-soft);
    padding: 10px 26px;
    margin-bottom: 18px;
}

.soofos-funnel__logo-pill img {
    display: block;
    height: 30px;
    width: auto;
}

.soofos-funnel__title {
    margin: 0 0 6px;
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
}

.soofos-funnel__subtitle {
    margin: 0;
    font-size: 17px;
    color: var(--muted);
}

/* ---------- Checkout card ---------- */

.soofos-funnel__card {
    width: min(1170px, calc(100% - 32px));
    margin: -20px auto 40px;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    padding: 28px;
    position: relative;
    z-index: 1;
}

.soofos-funnel__columns {
    gap: 32px;
}

/* Form first on mobile. */
@media (max-width: 781px) {
    .soofos-funnel__columns {
        display: flex;
        flex-direction: column;
    }

    .soofos-funnel__form {
        order: 1;
    }

    .soofos-funnel__aside {
        order: 2;
    }
}

/* ---------- Aside: benefits + reviews ---------- */

.soofos-funnel__aside-heading {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 12px;
}

.soofos-funnel__benefits,
.soofos-funnel__reviews {
    background: var(--blue-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card-sm);
    padding: 18px 20px;
    margin-top: 20px;
}

.soofos-funnel__benefit-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.soofos-funnel__benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--ink);
    padding: 6px 0;
}

.soofos-funnel__check {
    color: var(--green);
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 1px;
}

.soofos-funnel__score {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--ink);
}

.soofos-funnel__stars {
    display: inline-flex;
    color: var(--yellow);
}

.soofos-funnel__star svg {
    width: 17px;
    height: 17px;
}

.soofos-funnel__score-count {
    color: var(--muted-2);
}

.soofos-funnel__quote {
    margin: 0;
    padding: 12px 0 2px;
    border-top: 1px solid var(--card-border);
}

.soofos-funnel__quote:first-of-type {
    border-top: 0;
}

.soofos-funnel__quote figcaption {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 4px;
}

.soofos-funnel__quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

/* ---------- Checkout form (FunnelKit wfacp overrides) ---------- */

.soofos-funnel .wfacp_main_form .woocommerce input.input-text,
.soofos-funnel .wfacp_main_form .woocommerce select,
.soofos-funnel .wfacp_main_form input.input-text,
.soofos-funnel .wfacp_main_form select,
.soofos-funnel .wfacp_main_form .select2-container--default .select2-selection--single {
    min-height: 44px;
    border: 1px solid var(--input-border);
    border-radius: var(--r-btn);
    font-family: var(--font);
    color: var(--ink);
}

.soofos-funnel .wfacp_main_form input.input-text:focus,
.soofos-funnel .wfacp_main_form select:focus {
    border-color: var(--blue);
    outline: 2px solid var(--blue);
    outline-offset: 1px;
}

.soofos-funnel .wfacp_main_form h2,
.soofos-funnel .wfacp_main_form h3,
.soofos-funnel .wfacp_main_form .wfacp-section-title {
    font-family: var(--font);
    color: var(--ink);
}

.soofos-funnel .wfacp_main_form #place_order,
.soofos-funnel .wfacp_main_form button[type="submit"],
.soofos-funnel .wfacp_main_form .wfacp_next_btn_wrap button {
    width: 100%;
    background: var(--red);
    color: var(--white);
    border: 0;
    border-radius: var(--r-btn);
    font-family: var(--font);
    font-weight: 800;
    font-size: 16px;
    min-height: 52px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.soofos-funnel .wfacp_main_form #place_order:hover,
.soofos-funnel .wfacp_main_form button[type="submit"]:hover,
.soofos-funnel .wfacp_main_form .wfacp_next_btn_wrap button:hover {
    background: var(--red-hover);
}

.soofos-funnel .wfacp_main_form #place_order:focus-visible,
.soofos-funnel .wfacp_main_form button[type="submit"]:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* "(optional)" label suffixes are noise on a minimal form (ported from the
   retired FunnelKit global custom CSS when the legacy .nl rules were cleared).
   Heavy selector + !important: FunnelKit sets these inline-block from an
   #wfacp-e-form-scoped rule. */
body #wfacp-e-form .wfacp_main_form.woocommerce span.optional,
.soofos-funnel .wfacp_main_form span.optional {
    display: none !important;
}

/* The social-login variant of the login toggle duplicates the "Click here to
   login" link right under the native one — one entry point is enough
   (also ported from the retired global custom CSS). */
.soofos-funnel .woocommerce-form-login-toggle .js-show-social-login {
    display: none;
}

/* ---------- Trust row ---------- */

.soofos-funnel__trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 18px;
    color: var(--muted);
    font-size: 14px;
}

.soofos-funnel__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.soofos-funnel__trust-icon {
    display: inline-flex;
    color: var(--muted-2);
}

/* ---------- Thank-you page ---------- */

.soofos-funnel__ty-inner {
    width: min(760px, calc(100% - 32px));
    margin: 0 auto 40px;
    text-align: center;
}

.soofos-funnel__celebrate {
    font-size: 44px;
    line-height: 1;
    margin: 26px 0 8px;
}

.soofos-funnel__title--ty {
    font-size: 32px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 8px;
}

.soofos-funnel__name {
    color: var(--blue);
}

.soofos-funnel__ty-inner > .soofos-funnel__subtitle {
    margin-bottom: 26px;
}

.soofos-funnel__order {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-soft);
    padding: 24px 26px;
    text-align: left;
    margin-bottom: 26px;
}

.soofos-funnel__order h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 8px;
}

.soofos-funnel__order-intro {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 16px;
}

/* FunnelKit order-details internals */
.soofos-funnel__order .bwf-ord-wrap,
.soofos-funnel__order table {
    font-family: var(--font);
    color: var(--ink);
}

.soofos-funnel__order table td,
.soofos-funnel__order table th {
    border-color: var(--card-border);
}

/* ---------- CTAs ---------- */

.soofos-funnel__cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 4px 0 30px;
}

.soofos-funnel__cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 34px;
    background: var(--blue);
    color: var(--white);
    border-radius: var(--r-btn);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.soofos-funnel__cta-primary:hover {
    background: var(--blue-hover);
    color: var(--white);
}

.soofos-funnel__cta-primary:focus-visible,
.soofos-funnel__cta-secondary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.soofos-funnel__cta-secondary {
    color: var(--deep-blue);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.soofos-funnel__cta-secondary:hover {
    text-decoration: underline;
}

/* ---------- Recommendations / what's next ---------- */

.soofos-funnel__recs {
    text-align: center;
    margin-top: 6px;
}

.soofos-funnel__recs h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 4px;
}

.soofos-funnel__recs-intro {
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 18px;
}

.soofos-funnel__recs .soofos-recs-grid {
    text-align: left;
}

.soofos-funnel__next {
    background: var(--blue-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card-sm);
    padding: 20px 24px;
    text-align: left;
}

.soofos-funnel__next h2 {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px;
}

.soofos-funnel__next p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

/* ---------- Footer ---------- */

.soofos-funnel__footer {
    margin-top: auto;
    padding: 26px 16px 30px;
    text-align: center;
    font-size: 14px;
}

.soofos-funnel__footer-links {
    margin: 0 0 4px;
}

.soofos-funnel__footer-links a {
    color: var(--muted);
    text-decoration: none;
}

.soofos-funnel__footer-links a:hover {
    color: var(--deep-blue);
    text-decoration: underline;
}

.soofos-funnel__footer-copy {
    margin: 0;
    color: var(--faint);
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
    .soofos-funnel__title,
    .soofos-funnel__title--ty {
        font-size: 27px;
    }

    .soofos-funnel__subtitle {
        font-size: 15px;
    }

    .soofos-funnel__card {
        padding: 16px;
        margin-bottom: 28px;
    }

    .soofos-funnel__order {
        padding: 18px 16px;
    }
}

/* =========================================================================
 * Split checkout (v2 — "order pinned on navy"): navy order rail on the
 * left, single payment step on white on the right.
 * ========================================================================= */

.soofos-funnel--split {
    min-height: 100vh;
}

.soofos-funnel--split .soofos-split {
    display: flex;
    gap: 0;
    margin: 0;
    min-height: 100vh;
    align-items: stretch;
}

/* ---------- Navy order rail ---------- */

.soofos-split__aside {
    flex: 0 0 370px;
    box-sizing: border-box;
    background: var(--ink);
    color: var(--soofos-on-navy-soft);
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
}

.soofos-split__brand img {
    display: block;
    height: 26px;
    width: auto;
}

.soofos-split__eyebrow {
    font-size: 12px;
    font-weight: 800;
    color: var(--soofos-on-navy-muted);
    margin: 30px 0 12px;
}

/* Mini-cart re-skinned as the pinned order card. */
.soofos-funnel--split .wfacp-mini-cart-block {
    background: var(--soofos-on-navy-surface);
    border: 1px solid var(--soofos-on-navy-border);
    border-radius: var(--r-card-sm);
    padding: 14px 16px;
}

.soofos-funnel--split .wfacp-order-summary-label {
    /* The rail's "Your order" eyebrow is the heading. !important: FunnelKit's
       mini-cart JS re-shows the label with an inline style on cart refresh. */
    display: none !important;
}

.soofos-funnel--split .wfacp-mini-cart-block table {
    background: transparent;
    border: 0;
    margin: 0;
}

.soofos-funnel--split .wfacp-mini-cart-block td,
.soofos-funnel--split .wfacp-mini-cart-block th {
    background: transparent;
    border: 0;
    padding: 6px 2px;
}

.soofos-funnel--split .wfacp-mini-cart-block tr.cart_item td,
.soofos-funnel--split .wfacp-mini-cart-block .wfacp_mini_cart_item_title {
    color: var(--white);
}

.soofos-funnel--split .wfacp-mini-cart-block .product-image img {
    border-radius: var(--r-btn);
}

.soofos-funnel--split .wfacp-mini-cart-block .wfacp_quantity_selector,
.soofos-funnel--split .wfacp-mini-cart-block .wfacp-qty-ball {
    display: none; /* one course, quantity is noise; remove-link stays */
}

.soofos-funnel--split .wfacp-mini-cart-block a {
    color: var(--soofos-on-navy-muted);
}

.soofos-funnel--split .wfacp-mini-cart-block a:hover {
    color: var(--white);
}

.soofos-funnel--split .wfacp-mini-cart-block table.wfacp_mini_cart_reviews {
    border-top: 1px solid var(--soofos-on-navy-hairline);
    margin-top: 8px;
}

.soofos-funnel--split .wfacp-mini-cart-block table.wfacp_mini_cart_reviews th span,
.soofos-funnel--split .wfacp-mini-cart-block table.wfacp_mini_cart_reviews td,
.soofos-funnel--split .wfacp-mini-cart-block table.wfacp_mini_cart_reviews td span,
.soofos-funnel--split .wfacp-mini-cart-block table.wfacp_mini_cart_reviews td bdi {
    color: var(--soofos-on-navy-soft);
}

.soofos-funnel--split .wfacp-mini-cart-block tr.order-total th span,
.soofos-funnel--split .wfacp-mini-cart-block tr.order-total td,
.soofos-funnel--split .wfacp-mini-cart-block tr.order-total td span,
.soofos-funnel--split .wfacp-mini-cart-block tr.order-total td bdi {
    color: var(--white);
}

.soofos-funnel--split .wfacp-mini-cart-block tr.order-total small.includes_tax {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--soofos-on-navy-muted);
}

.soofos-funnel--split .wfacp-mini-cart-block tr.order-total small.includes_tax span {
    font-size: 12px;
    color: var(--soofos-on-navy-muted);
}

/* Trust items pinned to the rail's bottom. */
.soofos-split__trust {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--soofos-on-navy-hairline);
    font-size: 13px;
    font-weight: 700;
    color: var(--soofos-on-navy-muted);
}

.soofos-split__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.soofos-split__trust-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.soofos-split__trust-icon svg {
    width: 16px;
    height: 16px;
}

/* ---------- White payment panel ---------- */

.soofos-split__main {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    background: var(--white);
    padding: 22px 44px 28px;
    display: flex;
    flex-direction: column;
}

.soofos-split__main > * {
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.soofos-split__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--page);
    margin-bottom: 24px;
}

.soofos-split__crumbs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--faint);
}

.soofos-split__crumb.is-current {
    color: var(--ink);
}

.soofos-split__crumb-sep {
    color: var(--faint);
}

.soofos-split__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: var(--green-ink);
}

/* Login notice ("Returning customer?") as a quiet info row. */
.soofos-funnel--split .wfacp_main_form .woocommerce-info,
.soofos-funnel--split .wfacp_main_form .woocommerce-form-login {
    background: var(--blue-tint);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card-sm);
    color: var(--ink);
    font-size: 14px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.soofos-funnel--split .wfacp_main_form .woocommerce-info a {
    color: var(--deep-blue);
    font-weight: 700;
}

/* Section headings + the "secure and encrypted" subline. */
.soofos-funnel--split .wfacp_main_form h2.wfacp_section_heading {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 4px;
}

.soofos-funnel--split .wfacp_main_form .wfacp-comm-title h4 {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-2);
    margin: 0 0 12px;
}

/* Payment methods as selectable cards (iDEAL-first ordering comes from Woo). */
.soofos-funnel--split .wfacp_main_form #payment ul.wc_payment_methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.soofos-funnel--split .wfacp_main_form #payment ul.wc_payment_methods > li {
    /* !important: FunnelKit's skin resets per-side borders on these lis. */
    border: 2px solid var(--card-border) !important;
    border-radius: var(--r-card-sm);
    background: var(--white);
    padding: 0;
    margin: 0;
    transition: border-color .15s ease;
}

.soofos-funnel--split .wfacp_main_form #payment ul.wc_payment_methods > li:has(> input:checked) {
    border-color: var(--blue) !important;
}

.soofos-funnel--split .wfacp_main_form #payment ul.wc_payment_methods > li > label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    cursor: pointer;
    margin: 0;
    width: auto;
}

.soofos-funnel--split .wfacp_main_form #payment ul.wc_payment_methods > li > input[type="radio"] {
    position: absolute;
    margin: 17px 0 0 16px;
    accent-color: var(--blue);
    width: 18px;
    height: 18px;
}

.soofos-funnel--split .wfacp_main_form #payment ul.wc_payment_methods > li > input[type="radio"] + label {
    padding-left: 46px;
}

.soofos-funnel--split .wfacp_main_form #payment ul.wc_payment_methods > li .payment_box {
    padding: 0 16px 13px 46px;
    margin: 0;
    background: transparent;
    font-size: 14px;
    color: var(--muted);
}

.soofos-funnel--split .wfacp_main_form #payment ul.wc_payment_methods > li .payment_box::before {
    display: none;
}

/* EU VAT compliance block (VAT number + residence self-certification).
   FunnelKit's modern-label skin hides radio labels — these are a tax
   compliance control and must stay readable when the plugin shows them. */
.soofos-funnel--split #woocommerce_eu_vat_compliance label.wfacp-form-control-label {
    /* FunnelKit's modern-label skin keeps labels at opacity 0 until a field
       floats them — these radios never float, so force them readable. */
    position: static !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transform: none;
    font-size: 14px;
    color: var(--ink);
    margin: 0 14px 6px 0;
}

.soofos-funnel--split #woocommerce_eu_vat_compliance .woocommerce-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
}

.soofos-funnel--split #woocommerce_eu_vat_compliance input.input-radio {
    accent-color: var(--blue);
    width: 16px;
    height: 16px;
    margin: 0;
}

.soofos-funnel--split #woocommerce_eu_vat_compliance .optional {
    display: none; /* every control here is contextual, "(optional)" is noise */
}

/* Legal footer inside the panel. */
.soofos-split__legal {
    margin-top: auto;
    padding-top: 26px;
    text-align: center;
    font-size: 13px;
    color: var(--faint);
}

.soofos-split__legal a {
    color: var(--muted-2);
    text-decoration: none;
}

.soofos-split__legal a:hover {
    color: var(--deep-blue);
    text-decoration: underline;
}

/* ---------- Split: mobile ---------- */

@media (max-width: 880px) {
    .soofos-funnel--split .soofos-split {
        flex-direction: column;
        min-height: 0;
    }

    .soofos-split__aside {
        position: static;
        height: auto;
        flex: 0 0 auto;
        width: 100%;
        padding: 18px 18px 16px;
    }

    .soofos-split__eyebrow {
        margin-top: 18px;
    }

    .soofos-split__trust {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 16px;
        margin-top: 16px;
    }

    .soofos-split__main {
        padding: 18px 16px 24px;
    }
}

/* =========================================================================
 * Thank-you v2 (done state): check, order line, start-learning CTA, streak.
 * ========================================================================= */

.soofos-funnel--ty-v2 {
    background: linear-gradient(180deg, var(--white) 0%, var(--page) 100%);
}

.soofos-funnel--ty-v2 .soofos-funnel__ty-inner {
    padding-top: 34px;
}

.soofos-funnel__ty-brand {
    margin-bottom: 30px;
}

.soofos-funnel__ty-brand img {
    display: inline-block;
    height: 26px;
    width: auto;
}

.soofos-funnel__ty-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green-fill);
    color: var(--green-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.soofos-funnel--ty-v2 .soofos-funnel__subtitle {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

.soofos-funnel__cta-row--ty {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 22px 0 8px;
}

.soofos-funnel__cta-icon {
    display: inline-flex;
    margin-right: 8px;
}

.soofos-funnel__streak {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--yellow-fill);
    color: var(--yellow-ink);
    border-radius: var(--r-card-sm);
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    margin: 4px 0 30px;
}

.soofos-funnel__streak-icon {
    display: inline-flex;
}

.soofos-funnel__streak-icon svg {
    width: 18px;
    height: 18px;
}


/* Checkout rail trust row (NRTO/ISO badges): the per-step header_css renders
 * this flex row nowrap, so real badge images overflow onto the caption once
 * they load. Wrap the row and give the caption its own line. */
.soofos-nl-trust {
    flex-wrap: wrap;
}

.soofos-nl-trust-badges {
    flex: 0 0 auto;
}

.soofos-nl-trust > .soofos-nl-trust-caption {
    flex-basis: 100%;
    margin-top: 0;
}


/* ---------- EU VAT self-certification radios ---------- */

/* Field rendered by WooCommerce EU VAT Compliance (wrapped by FunnelKit).
 * The per-step header_css floats the radio inputs AND their labels, which
 * collapses the label text to nothing in the logged-out variant: the buyer
 * sees two naked radio buttons with no idea what either one means.
 *
 * Defensive reset, scoped to the one field. `!important` throughout because
 * the funnel's inline CSS (printed by the step, so it can win on load order)
 * already uses it; the `body` prefix keeps us ahead of it on specificity
 * without reaching for anything heavier. */

body #vat_self_certify_field label,
body #vat_self_certify_field input[type="radio"] {
    float: none !important;
    vertical-align: middle !important;
}

/* Per-option labels sit inline next to their radio, and must be able to wrap
 * onto a second line instead of being clipped to zero width. */
body #vat_self_certify_field label {
    display: inline-block !important;
    width: auto !important;
    max-width: calc(100% - 2em) !important;
    margin-left: 0.5em !important;
    color: var(--ink) !important;
    font-size: 14px;
    line-height: 1.45;
}

/* The first label is the question itself (a full sentence), not a choice —
 * it belongs on its own line above the options. Higher specificity than the
 * per-option rule above, so it wins regardless of source order. */
body #vat_self_certify_field > label.wfacp-form-control-label:first-child,
body #vat_self_certify_field > label:first-child {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    color: var(--ink) !important;
    font-weight: 600;
    line-height: 1.45;
}

body #vat_self_certify_field input[type="radio"] {
    width: auto !important;
    margin: 0 !important;
}

/* One option per row, with breathing space between them. */
body #vat_self_certify_field p,
body #vat_self_certify_field .wfacp-form-control-wrapper > span,
body #vat_self_certify_field .woocommerce-input-wrapper > span {
    display: block;
    margin-bottom: 6px;
}


/* =========================================================================
 * Funnel 70 ".nl" checkout + thank-you — mobile pass r1 (lane M11).
 *
 * Steps 833887 (/start/plus-checkout/), 835640 (FunnelKit global checkout,
 * served on /checkout/) and 833892 (/thank-you/plus-thank-you/). Markup is
 * the step post_content (soofos-nl-*), base styling the per-step custom CSS
 * (printed after this file). Every rule here carries a `body .soofos-funnel`
 * prefix so it wins on specificity without touching the step CSS; FunnelKit
 * form internals need `#wfacp-e-form` + `!important` because the plugin's own
 * skin rules already use both.
 * ========================================================================= */

/* The global checkout renders on page 2152 (no single-wfacp_checkout body
   class): give it the same page canvas as the funnel singulars. */
body.woocommerce-checkout:has(.soofos-funnel) {
    background: var(--page);
    font-family: var(--font);
    color: var(--ink);
    margin: 0;
}

/* M11-2: Mulish everywhere in the FunnelKit form (FunnelKit sets block
   fonts from its own font settings). The select2 dropdown is appended to
   <body>, outside the funnel wrapper. */
body .soofos-funnel .wfacp_main_form,
body .soofos-funnel .wfacp_main_form :is(h1, h2, h3, h4, p, span, a, label, input, select, textarea, button, td, th, small, strong, .select2-selection, .select2-selection__rendered),
body:has(.soofos-funnel) .select2-dropdown :is(input, li, span) {
    font-family: var(--font) !important;
}

/* M11-1: the single-column track was `1fr` (= minmax(auto, 1fr)), so it grew
   to the form's min-content and the card's overflow:hidden clipped prices
   and fields at 360/390. */
body .soofos-funnel :is(.soofos-nl-main, .soofos-nl-rail) {
    min-width: 0;
}

@media (max-width: 900px) {
    body .soofos-funnel .soofos-nl-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* M11-4: side gutter for the floating card between 601px and the card's
   max-width (the step CSS only adds one at <=600). */
@media (min-width: 601px) {
    body .soofos-funnel .soofos-nl-card {
        box-sizing: border-box;
        width: min(1020px, calc(100% - 48px));
    }
}

/* M11-4: the collapsible "Show Order Summary" bar duplicates the full
   summary in the form once the layout has two columns. */
@media (min-width: 901px) {
    body .soofos-funnel #wfacp-e-form .wfacp_collapsible_order_summary_wrap {
        display: none !important;
    }
}

/* M11-4: the country select gets its own full row (no half-width gap). */
body .soofos-funnel #wfacp-e-form :is(#shipping_country_field, #billing_country_field) {
    width: 100% !important;
    max-width: 100%;
    flex: 0 0 100%;
    clear: both;
}

/* M11-4: an odd last plan card (Lifetime) spans the 2-column grid. */
body .soofos-funnel .soofos-nl-plans-grid > .soofos-nl-plan:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* M11-3: the "Returning customer? Log in" link (a.showlogin, toggles
   WooCommerce's login form) is meaningless to a logged-in learner. */
body.logged-in .soofos-funnel .soofos-nl-login {
    display: none;
}

/* M11-6: thank-you opened without an order (reload, history, shared link):
   FunnelKit fills the shortcodes with preview data ("John", "#0",
   john.doe@example.com). Hide every line that carries that data and let the
   "Order not found" notice + "Start learning" carry the page. */
body .soofos-funnel--ty-nl:has(.wfty-order-details-block > p.woocommerce-notice:only-child) :is(.soofos-nl-ty-greet, .soofos-nl-ty-sub, .soofos-nl-order-intro, .soofos-nl-streak) {
    display: none;
}

body .soofos-funnel--ty-nl .wfty-order-details-block > p.woocommerce-notice:only-child {
    margin: 0;
    padding: 12px 16px;
    background: var(--amber-fill);
    color: var(--amber-text);
    border-radius: var(--r-card-sm);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

/* M11-7: the success mark + streak icon (outline SVGs in the step content). */
body .soofos-funnel .soofos-nl-ty-check svg {
    width: 34px;
    height: 34px;
}

body .soofos-funnel .soofos-nl-streak-icon svg {
    width: 18px;
    height: 18px;
}

/* M11-9: contrast. TY name and login accent use --deep-blue text; captions,
   payment note and footer move to --muted. Step pills and the TY primary CTA
   keep the brand --blue fill (Klaas, PR #141 audit A01). */
body .soofos-funnel .soofos-nl-section-step {
    background: var(--blue);
}

body .soofos-funnel :is(.soofos-nl-login span, .soofos-nl-ty-name) {
    color: var(--deep-blue);
}

body .soofos-funnel .soofos-nl-cta-primary {
    background: var(--blue);
    box-shadow: var(--shadow-soft);
}

body .soofos-funnel .soofos-nl-cta-primary:hover {
    background: var(--ink);
    box-shadow: var(--shadow-soft);
}

body .soofos-funnel :is(.soofos-nl-trust-caption, .soofos-nl-footer-links a, .soofos-nl-footer-copy) {
    color: var(--muted);
}

body .soofos-funnel #wfacp-e-form .wfacp-payment-dec {
    color: var(--muted) !important;
}

/* FunnelKit paints secondary form text --muted on its grey / tinted panels
   (4.43-4.49:1). Lift those few spots to AA. */
body .soofos-funnel #wfacp-e-form :is(.wfacp_summary_link span, .wfacp_show_price_wrap, .wfacp_show_price_wrap *, .wfacp_cart_mb_fragment_price *) {
    color: var(--deep-blue) !important;
}

body .soofos-funnel #wfacp-e-form :is(#product_switching_field .wfacp_product_subs_details, #product_switching_field .wfacp_product_subs_details *, .wfacp_order_summary tr.cart-subtotal :is(th, td), .wfacp_order_summary tr.cart-subtotal :is(th, td) *, .woocommerce-privacy-policy-text p) {
    color: var(--ink) !important;
}

body .soofos-funnel .soofos-nl-footer-copy {
    font-size: 14px;
}

/* M11-10: visible keyboard focus. Links/buttons get a deep-blue ring (white
   on the navy hero); inputs get a 2px ring instead of FunnelKit's 0.6px
   tint. The closed FunnelKit / order-bump quick-view panels are
   overflow:auto scrollers that otherwise take a Tab stop. */
body .soofos-funnel :is(a, button, summary, [tabindex]):focus-visible,
body .soofos-funnel #wfacp-e-form :is(a, button, #place_order):focus-visible,
body .soofos-funnel #wfacp-e-form input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--deep-blue) !important;
    outline-offset: 2px;
}

body .soofos-funnel .soofos-nl-hero a:focus-visible {
    outline-color: var(--white) !important;
}

body .soofos-funnel #wfacp-e-form .wfacp_main_form :is(input.input-text, input[type="email"], input[type="tel"], input[type="text"], input[type="password"], input[type="number"], select, textarea):focus,
body .soofos-funnel #wfacp-e-form .select2-container--focus .select2-selection,
body .soofos-funnel #wfacp-e-form .select2-container--open .select2-selection {
    outline: 2px solid var(--deep-blue) !important;
    outline-offset: 1px;
}

:is(.wfacp_qv-panel, .wfob_qv-panel):not(.wfacp_qv-panel-active, .wfob_qv-panel-active) {
    visibility: hidden;
}

/* M11-11: the NRTO / ISO badges stay visible next to the shield caption
   (Klaas, PR #141 audit A26). WooCommerce's placeholder product thumbnail
   (and its empty frame) is hidden. */
body .soofos-funnel .soofos-nl-trust > .soofos-nl-trust-caption {
    flex: 1 1 auto;
    margin: 0;
}

body .soofos-funnel #wfacp-e-form .product-image:has(img.woocommerce-placeholder),
body .soofos-funnel img.woocommerce-placeholder {
    display: none !important;
}

body .soofos-funnel #wfacp-e-form tr.cart_item:has(img.woocommerce-placeholder) .product-name {
    padding-left: 0 !important;
}

/* M11-12: order summary. "Recurring totals" was printed as a heading row
   and again as the total's label: keep the labelled total row. On phones the
   totals stack (label above amount) instead of wrapping into a narrow
   right-hand column. */
body .soofos-funnel #wfacp-e-form tr.recurring-totals {
    display: none;
}

body .soofos-funnel #wfacp-e-form .wfacp_order_summary :is(.includes_tax .amount, .subscription-price .amount) {
    white-space: nowrap;
}

@media (max-width: 600px) {
    body .soofos-funnel #wfacp-e-form .wfacp_order_summary tfoot tr.recurring-total > :is(th, td) {
        display: block;
        width: auto !important;
        text-align: left !important;
    }

    body .soofos-funnel #wfacp-e-form .wfacp_order_summary tfoot tr.recurring-total > th {
        padding-bottom: 2px !important;
    }

    body .soofos-funnel #wfacp-e-form .wfacp_order_summary tfoot tr.recurring-total > td {
        padding-top: 0 !important;
        padding-left: 0 !important;
    }
}

/* M11-12 + M11-16: no quantity stepper on a plan ("Your Products" product
   switcher and the mini-cart). The quantity stays readable: it shows as
   "× n" whenever it is above 1 and is hidden (with the "Qty" header) when
   every line is a single item. */
body .soofos-funnel #wfacp-e-form :is(#product_switching_field, .wfacp_mini_cart_items) .value-button {
    display: none !important;
}

body .soofos-funnel #wfacp-e-form #product_switching_field .wfacp_product_row:has(input.wfacp_product_switcher_quantity[value="1"]) .wfacp_product_quantity_container,
body .soofos-funnel #wfacp-e-form #product_switching_field:not(:has(input.wfacp_product_switcher_quantity:not([value="1"]))) .wfacp-product-switch-title .product-quantity {
    display: none !important;
}

body .soofos-funnel #wfacp-e-form #product_switching_field .wfacp_product_price_container {
    flex: 0 0 auto !important;
    margin-left: auto;
    white-space: nowrap;
}

body .soofos-funnel #wfacp-e-form #product_switching_field .wfacp_product_sec_start {
    flex: 0 0 auto !important;
    max-width: none !important;
    padding-right: 10px;
}

body .soofos-funnel #wfacp-e-form #product_switching_field .wfacp_qty_wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-weight: 800;
    color: var(--ink);
}

body .soofos-funnel #wfacp-e-form #product_switching_field .wfacp_qty_wrap::before {
    content: "\00D7";
}

body .soofos-funnel #wfacp-e-form #product_switching_field .wfacp_qty_wrap input[type="number"] {
    width: 4ch !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 800;
    color: var(--ink);
    text-align: left;
    pointer-events: none;
    -moz-appearance: textfield;
}

body .soofos-funnel #wfacp-e-form #product_switching_field .wfacp_qty_wrap input[type="number"]::-webkit-inner-spin-button,
body .soofos-funnel #wfacp-e-form #product_switching_field .wfacp_qty_wrap input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body .soofos-funnel #wfacp-e-form .wfacp_mini_cart_items .wfacp_quantity_selector {
    display: none !important;
}

body .soofos-funnel #wfacp-e-form .wfacp_mini_cart_items tr.cart_item:not(:has(.wfacp_quantity_selector input[value="1"])) strong.product-quantity,
body .soofos-funnel #wfacp-e-form:has(input.wfacp_product_switcher_quantity:not([value="1"]), .wfacp_mini_cart_items .wfacp_quantity_selector input:not([value="1"])) .woocommerce-checkout-review-order-table tr.cart_item:has(img.woocommerce-placeholder) strong.product-quantity {
    display: inline !important;
    margin-left: 4px;
    font-weight: 800;
    color: var(--ink);
}

/* M11-13: tap targets of at least 44px (help, login, summary toggle,
   coupon + terms links, checkbox rows, footer links). */
body .soofos-funnel :is(.soofos-nl-help, .soofos-nl-login, .soofos-nl-footer-links a),
body .soofos-funnel #wfacp-e-form .wfacp_summary_link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

body .soofos-funnel .soofos-nl-help {
    top: 16px;
}

body .soofos-funnel #wfacp-e-form :is(.wfacp_showcoupon, .woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions-link) {
    display: inline-block;
    padding: 13px 0;
    cursor: pointer;
}

body .soofos-funnel #wfacp-e-form .wfacp_main_form label.checkbox {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-left: 0 !important;
    cursor: pointer;
}

body .soofos-funnel #wfacp-e-form .wfacp_main_form label.checkbox input[type="checkbox"] {
    position: static !important;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    accent-color: var(--deep-blue);
}

/* M11-14: green is for success only. The "Best value" plan and the
   benefit / feature checks are brand-blue. */
body .soofos-funnel .soofos-nl-plan--best {
    border-color: var(--blue);
    background: var(--blue-tint);
}

body .soofos-funnel .soofos-nl-plan-badge {
    background: var(--blue);
    font-size: 13px;
}

body .soofos-funnel :is(.soofos-nl-benefit-icon, .soofos-nl-trust-icon, .soofos-nl-plan-features li svg) {
    color: var(--deep-blue);
}

/* M11-15: thank-you recommendations. Logged-out visitors get no cards, so
   the column would be a heading with nothing under it: drop the column and
   let the order column take the full width. The "Plan" / "Start" section
   headings are flattened to plain headings with a muted eyebrow so they no
   longer read as buttons. */
body .soofos-funnel .soofos-nl-ty-col--recs:not(:has(.soofos-recs-grid)) {
    display: none;
}

body .soofos-funnel .soofos-nl-ty-grid:not(:has(.soofos-recs-grid)) {
    grid-template-columns: minmax(0, 1fr);
}

body .soofos-funnel .soofos-nl-ty-grid:not(:has(.soofos-recs-grid)) .soofos-nl-ty-col--order {
    border-right: 0;
}

/* Reproduced with an active Plus member (qa-plus): the recommendation
   cards print the course price (€39,00) on the page that confirms unlimited
   access. Everyone reaching this thank-you just bought a plan, so the price
   row is dropped here (the card itself, title, meta and link stay). */
body .soofos-funnel--ty-nl .soofos-nl-ty-col--recs .course-card__price {
    display: none !important;
}

body .soofos-funnel .soofos-nl-ty-col .soofos-nl-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

body .soofos-funnel .soofos-nl-ty-col .soofos-nl-section-step {
    padding: 0;
    background: none;
    color: var(--muted);
    border-radius: 0;
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    body .soofos-funnel :is(.soofos-nl-cta-primary, .soofos-nl-plan, #place_order) {
        transition: none;
    }
}

/* =========================================================================
 * Funnel 70 checkout + thank-you — round-1 decisions (lane checkout-b).
 *
 * R1-D23  /start/plus-checkout/ (833887): plans are Step 1 above the form.
 *         Plus Monthly is FunnelKit's default product; a plan card links to
 *         FunnelKit's `?aero-default=<n>` and lands on #soofos-checkout-details.
 *         The chosen card is the product FunnelKit's switcher marks selected
 *         (fieldset.wfacp-selected-product[data-id]), so the mark follows
 *         the cart, also after an AJAX refresh.
 * R1-D24  <=900px: the form (with the price) before the marketing rail.
 * R1-D25  Business-only rows (soofos-commerce DigitalCartFields): company
 *         name + the EU VAT plugin's VAT number, shown while
 *         "I'm buying as a business" is ticked.
 * R1-D26  Thank-you (833892): with a real order the step prints
 *         confirmation.php ([soofos_checkout_confirmation]); its
 *         course-specific button replaces the generic CTA + streak line.
 * ========================================================================= */

/* R1-D23: the anchor target keeps a little air above the heading. */
body .soofos-funnel #soofos-checkout-details {
    scroll-margin-top: 16px;
}

/* R1-D23: the chosen plan. One pair per plan product in the step content. */
body .soofos-funnel:has(.wfacp-selected-product[data-id="762454"]) .soofos-nl-plan[data-product-id="762454"],
body .soofos-funnel:has(.wfacp-selected-product[data-id="762594"]) .soofos-nl-plan[data-product-id="762594"],
body .soofos-funnel:has(.wfacp-selected-product[data-id="762961"]) .soofos-nl-plan[data-product-id="762961"],
body .soofos-funnel:has(.wfacp-selected-product[data-id="762962"]) .soofos-nl-plan[data-product-id="762962"],
body .soofos-funnel:has(.wfacp-selected-product[data-id="762595"]) .soofos-nl-plan[data-product-id="762595"] {
    border-color: var(--deep-blue);
    box-shadow: 0 0 0 1px var(--deep-blue);
}

body .soofos-funnel:has(.wfacp-selected-product[data-id="762454"]) .soofos-nl-plan[data-product-id="762454"] .soofos-nl-plan-selected,
body .soofos-funnel:has(.wfacp-selected-product[data-id="762594"]) .soofos-nl-plan[data-product-id="762594"] .soofos-nl-plan-selected,
body .soofos-funnel:has(.wfacp-selected-product[data-id="762961"]) .soofos-nl-plan[data-product-id="762961"] .soofos-nl-plan-selected,
body .soofos-funnel:has(.wfacp-selected-product[data-id="762962"]) .soofos-nl-plan[data-product-id="762962"] .soofos-nl-plan-selected,
body .soofos-funnel:has(.wfacp-selected-product[data-id="762595"]) .soofos-nl-plan[data-product-id="762595"] .soofos-nl-plan-selected {
    display: inline-flex;
}

body .soofos-funnel .soofos-nl-plan-selected {
    align-self: flex-start;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    background: var(--blue);
    color: var(--white);
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
}

body .soofos-funnel .soofos-nl-plan-selected svg {
    width: 14px;
    height: 14px;
}

/* R1-D23: the plan grid is the picker; FunnelKit's "Your Products" list
   keeps only the chosen plan (the order line with its price). */
body .soofos-funnel--plus #wfacp-e-form .wfacp_product_row:not(.wfacp-selected-product) {
    display: none !important;
}

body .soofos-funnel--plus #wfacp-e-form .wfacp_product_row input.wfacp_switcher_checkbox {
    display: none !important;
}

/* R1-D24: phones and tablet portrait — what you buy and what it costs
   first; screenshot, benefits, badges and reviews after the form. */
@media (max-width: 900px) {
    body .soofos-funnel .soofos-nl-grid > .soofos-nl-main {
        order: -1;
    }

    body .soofos-funnel .soofos-nl-grid > .soofos-nl-rail {
        border-bottom: 0;
        border-top: 1px solid var(--card-border);
    }
}

/* R1-D25: company name + VAT number only for business buyers. The VAT
   plugin's residence self-certification (#woocommerce_eu_vat_compliance_self_certify)
   stays under the plugin's own control. */
body .soofos-funnel #wfacp-e-form:not(:has(#billing_soofos_business:checked)) :is(.soofos-business-field, #woocommerce_eu_vat_compliance_vat_number) {
    display: none !important;
}

/* The EU VAT block now renders in the form (FunnelKit's compatibility
   field): keep it inside the column, and show the self-certification labels
   that FunnelKit's floating-label skin fades to opacity 0 (radios only make
   sense with their country names). */
body .soofos-funnel #wfacp-e-form :is(.wfacp_woocommerce_eu_vat_compliance, #woocommerce_eu_vat_compliance, #woocommerce_eu_vat_compliance .form-row) {
    float: none !important;
    clear: both;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
}

body .soofos-funnel #wfacp-e-form #vat_self_certify_field label {
    position: static !important;
    opacity: 1 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
}

/* One country choice per row: radio + its label, the label a 44px-high
   tap target. */
body .soofos-funnel #wfacp-e-form #vat_self_certify_field .woocommerce-input-wrapper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
}

body .soofos-funnel #wfacp-e-form #vat_self_certify_field label.radio {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    max-width: none !important;
    margin: 0 !important;
}

/* R1-D26: real order — confirmation.php's start button, streak and account
   note replace the step's generic "Start learning" + streak line. */
body .soofos-funnel--ty-nl:not(.soofos-funnel--ty-b2b) .soofos-nl-ty-top:has(.soofos-confirmation-start) :is(.soofos-nl-cta-row, .soofos-nl-streak) {
    display: none;
}

/* F3 — B2B thank-you (833891): the manager's next step stays "Go to manager
   dashboard" + "invite your team"; a learner's course button and lesson
   streak don't fit a team purchase, so only the confirmation's account /
   password note and payment line show. */
body .soofos-funnel--ty-b2b .soofos-checkout-confirmation p:is(.soofos-confirmation-cta, .soofos-confirmation-streak) {
    display: none;
}

/* Nothing left to show (existing manager, pay-on-invoice / €0 order: no
   account note, no payment-provider line) → no empty card. */
body .soofos-funnel--ty-b2b .soofos-checkout-confirmation:not(:has(.soofos-confirmation-account, .soofos-confirmation-security)) {
    display: none;
}

/* F3 — lifetime thank-you (726374, older soofos-funnel__ markup, no streak
   line): the confirmation's start button replaces the step's generic
   "Browse all courses"; "Go to my account" stays. */
body .soofos-funnel--ty:has(.soofos-funnel__ty-inner .soofos-confirmation-start) .soofos-funnel__cta-primary {
    display: none;
}

body .soofos-funnel--ty .soofos-funnel__ty-inner .soofos-checkout-confirmation {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    margin: 16px auto 24px;
    text-align: left;
}

body .soofos-funnel--ty .soofos-funnel__ty-inner .soofos-checkout-confirmation p {
    text-align: left;
}

body .soofos-funnel--ty-nl .soofos-nl-ty-top .soofos-checkout-confirmation {
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    margin: 16px auto 0;
    text-align: left;
}

/* The pay button is a purchase button: brand --red fill, --red-hover on
   hover (Klaas, PR #141 audit A02). The checkout-form
   block prints its own button colour inline
   (`.wfacp-checkout-form-block.wfacp-plNNNNNN #wfacp-e-form
   .wfacp_main_form.woocommerce #payment button#place_order`, 3 IDs), and the
   step header_css a --red hover glow, so this needs the same IDs plus
   !important. Focus ring: the M11-10 rule above (deep-blue, 2px offset). */
body .soofos-funnel #wfacp-e-form .wfacp_main_form #payment #place_order,
body .soofos-funnel #wfacp-e-form .wfacp_main_form #place_order {
    background: var(--red) !important;
    color: var(--white) !important;
    box-shadow: var(--soofos-shadow-red-cta) !important;
}

body .soofos-funnel #wfacp-e-form .wfacp_main_form #payment #place_order:hover,
body .soofos-funnel #wfacp-e-form .wfacp_main_form #place_order:hover {
    background: var(--red-hover) !important;
    box-shadow: var(--soofos-shadow-red-cta) !important;
}

/* F5: a digital business purchase also asks the billing address. Those
   rows sit under the company name, one per line like the country. */
body .soofos-funnel #wfacp-e-form .soofos-business-address {
    width: 100% !important;
    max-width: 100%;
    flex: 0 0 100%;
    clear: both;
}

/* =========================================================================
 * Checkout tidy — Joris feedback O1 option A ("the .com checkout, tidied").
 *
 * Every wfacp_checkout step (835640 /checkout/, 833599, 833887 Plus,
 * 833889 B2B, 726372 lifetime). Markup + FunnelKit settings come from
 * scripts/funnelkit/checkout-steps.php: form column first, trust column
 * (rating, benefits, NRTO/ISO, one review) second, a payment-assurance row
 * under the pay button. Here: a light, shorter header band; form left and
 * trust right (stacked under the form below 900px); compact section
 * headings; the order-bump slot; tight 390px spacing. Same `body
 * .soofos-funnel` prefix as the layers above (the step header_css prints
 * after this file).
 * ========================================================================= */

/* Light header band: pale brand tint, dark logo + ink text, less height. */
body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-hero {
    background: var(--blue-fill);
    color: var(--ink);
    padding: 22px 24px 112px;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-logo {
    margin-bottom: 10px;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-logo img {
    height: 40px;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) :is(.soofos-nl-h1, .soofos-nl-b2b-mark-text) {
    color: var(--ink);
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-h1 {
    font-size: 30px;
    margin-bottom: 6px;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-sub {
    color: var(--muted);
    opacity: 1;
    font-size: 15px;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-help,
body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-help-icon,
body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-help:hover {
    color: var(--deep-blue);
    opacity: 1;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-hero a:focus-visible {
    outline-color: var(--deep-blue) !important;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-card {
    margin-top: -84px;
    box-shadow: var(--shadow-card);
}

/* Form left, trust right. */
body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-main {
    padding: 28px 40px 32px;
    gap: 16px;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rail {
    border-right: 0;
    border-left: 1px solid var(--card-border);
    padding: 32px 28px;
    gap: 22px;
}

/* Plan picker heading (Plus): a plain section heading, no tinted box. */
body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-main .soofos-nl-section {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 18px;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-anchor {
    display: block;
    height: 0;
    scroll-margin-top: 16px;
}

/* FunnelKit's section headings ("Your details", "Order summary",
   "Payment") are the step headings now. */
body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfacp-e-form .wfacp_section_heading.wfacp_section_title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--ink) !important;
    margin-bottom: 4px !important;
}

/* Text under the pay button: plain small print, no grey slab. */
body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfacp-e-form .wfacp-payment-dec {
    background: none !important;
    padding: 2px 0 0 !important;
    font-size: 13px !important;
    text-align: center;
}

/* "Returning customer? Log in" sits right above the first heading. */
body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-login {
    margin-bottom: -16px;
    font-size: 14px;
}

/* Tighter vertical rhythm around the pay button (FunnelKit stacks a 16px
   wrapper padding on the button's own 14px top margin). */
body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfacp-e-form .wfacp-order-place-btn-wrap {
    padding-top: 4px !important;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfacp-e-form .woocommerce-terms-and-conditions-wrapper {
    margin-top: 12px !important;
}

/* Plus: the plan cards are the product choice. FunnelKit's "Your products"
   switcher stays in the DOM (the cards read its selected row) but is not
   shown a second time. */
body .soofos-funnel--plus #wfacp-e-form .wfacp-section:has(#product_switching_field) {
    display: none !important;
}

/* Payment assurance row under the pay button. */
body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-assure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    margin: -4px 0 0;
    padding: 0;
    list-style: none;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-assure li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-assure svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--deep-blue);
}

/* Rating box (rail top). */
body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rating {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card-sm);
    text-align: center;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rating p {
    margin: 0;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rating-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--star);
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rating-stars svg {
    width: 20px;
    height: 20px;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rating-score {
    font-size: 15px;
    color: var(--ink);
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rating-score strong {
    font-size: 20px;
    font-weight: 900;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rating-score span {
    color: var(--muted);
    font-weight: 600;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rating-source {
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rail-title {
    font-size: 16px;
    margin: 0 0 -8px;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-trust-badges img {
    height: 40px;
}

/* FunnelKit order bump (wfob), when one is configured for a step (none is
   on .com yet; the cart lane decides the offers). A calm dashed brand-blue
   card in the form, the add button a purchase red, the remove state quiet.
   Class names from funnel-builder-pro/modules/order-bumps/skins (layout_3
   and the shared template-parts); `#wfob_wrap` matches the skins' own
   inline-CSS specificity. */
body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfob_wrap .wfob_wrapper .wfob_bump {
    border: 2px dashed var(--blue) !important;
    border-radius: var(--r-card-sm) !important;
    background: var(--blue-tint) !important;
    box-shadow: none !important;
    font-family: var(--font) !important;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfob_wrap .wfob_wrapper :is(.wfob_l3_c_head, .wfob_pro_txt_wrap strong, .wfob_price) {
    color: var(--ink) !important;
    font-family: var(--font) !important;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfob_wrap .wfob_wrapper .wfob_description_wrap {
    color: var(--muted) !important;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfob_wrap .wfob_wrapper .wfob_btn_add:not(.wfob_btn_remove) {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: var(--white) !important;
    border-radius: var(--r-btn) !important;
    min-height: 44px;
    font-weight: 800 !important;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfob_wrap .wfob_wrapper .wfob_btn_add:not(.wfob_btn_remove):hover {
    background: var(--red-hover) !important;
    border-color: var(--red-hover) !important;
}

body .soofos-funnel--checkout:has(.soofos-nl-assure) #wfob_wrap .wfob_wrapper .wfob_btn_remove {
    background: var(--white) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--muted) !important;
    border-radius: var(--r-btn) !important;
    min-height: 44px;
}

/* Tablet / phone: one column, form first, trust after it. */
@media (max-width: 900px) {
    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rail {
        border-left: 0;
        border-top: 1px solid var(--card-border);
    }

    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-main {
        padding: 24px 28px 28px;
    }
}

@media (max-width: 600px) {
    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-hero {
        padding: 16px 16px 64px;
    }

    /* Icon-only on phones so it never collides with a centred logo / the
       wider B2B mark; the link text stays its accessible name. */
    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-help {
        top: 4px;
        right: 4px;
        justify-content: center;
        min-width: 44px;
        gap: 0;
        font-size: 0;
    }

    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-logo img {
        height: 34px;
    }

    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-h1 {
        font-size: 24px;
    }

    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-sub {
        font-size: 14px;
    }

    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-card {
        margin: -48px 12px 20px;
    }

    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-main {
        padding: 20px 16px 24px;
    }

    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-rail {
        padding: 22px 16px;
        gap: 18px;
    }

    body .soofos-funnel--checkout:has(.soofos-nl-assure) .soofos-nl-assure {
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }
}