/* /register steps 4, 7 and 9: the broker checklist, the one-block fee and the
   activation summary (mockups/journey: j-step4, j-step7, j-step9).
   Lead D builder, 2026-10-04. Loaded after register-journey.css. Applies in BOTH
   the standalone page and the embedded deck (/register?embed=1): the cards it
   styles exist in both, and main styled them in the embed too.
   Tokens only: no literal colours, no literal radii. */

/* ── Step 4 · the checklist ────────────────────────────────────────── */
.bsteps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bs {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-main);
    min-width: 0;
}
details.bs {
    display: block;
}
.bs-sum {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    min-height: 44px;
}
.bs-sum::-webkit-details-marker { display: none; }
.bn {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill, 999px);
    background: var(--bg-hover);
    color: var(--text-main);
    font-size: var(--type-meta, 13px);
    font-weight: 700;
}
.bs-t {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bs-t b,
.bs-t label {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.bs-t small,
.bs-body p,
.bs-more p {
    color: var(--text-sub);
    font-size: var(--type-meta, 13px);
    line-height: 1.5;
    margin: 0;
}
.bs-t small strong,
.bs-body p strong,
.bs-more p strong {
    color: var(--text-main);
}
.bs-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 2px 36px;
}
.bs-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
}
.bs-check { align-items: flex-start; }
.bs-more > summary {
    cursor: pointer;
    color: var(--cfin-accent-text, var(--accent));
    font-size: var(--type-meta, 13px);
    font-weight: 600;
    min-height: 32px;
    display: flex;
    align-items: center;
}
.bs-more[open] > summary { margin-bottom: 4px; }
.bs-more p + p { margin-top: 6px; }

/* The disclosure's summary and the info buttons share a 44px hit area. */
.bs .field-info { flex: 0 0 auto; }

/* Base currency: informational chips, wrapped, equal weight. */
.bs .bb-currencies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0;
}
.bs .bb-ccy {
    flex: 1 1 auto;
    min-width: 0;
}

/* The referral button: a full-width block with balanced text, so
   "Open Blueberry Markets with our link" wraps on two even lines at 390
   instead of orphaning a word; the text itself is unchanged. */
.bs .btn-referral {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 16px;
    min-height: 48px;
    text-align: center;
    box-sizing: border-box;
}
.bs .btn-referral .btn-referral-text {
    text-wrap: balance;
    min-width: 0;
}
.bs .btn-referral svg { flex: 0 0 auto; }

/* Robot Iris hand-over, inside the credentials disclosure. */
.bs .gs-iris-takeover {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}
.bs .gs-iris-takeover img { flex: 0 0 auto; }

@media (max-width: 480px) {
    .bs { padding: 12px; gap: 10px; }
    .bs-body { padding-left: 0; }
}

/* ── Step 7 · the fee, once ────────────────────────────────────────────
   The trial/monthly sentence is now the footnote of the fee block above it
   (no second box, no icon column), at the kit's footnote size. Fine print
   inside the block (basis, VAT, the no-data floor) is lifted from 11-12px to
   the same size. */
.trial-notice.fee-footnote {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-top: 8px;
}
.trial-notice.fee-footnote svg { display: none; }
.fee-footnote span,
.fee-fine {
    font-size: var(--type-meta, 13px);
    line-height: 1.5;
    color: var(--text-sub);
}
.fee-fine { display: inline; }
.fee-footnote .fee-fine { display: block; margin-top: 4px; }

/* ── Step 9 · what you are activating ───────────────────────────────── */
.act-summary {
    margin: 0 0 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-main);
    overflow: hidden;
}
.act-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 16px;
}
.act-row + .act-row {
    border-top: 1px solid var(--border-subtle);
}
.act-row dt {
    color: var(--text-sub);
    font-size: var(--type-body-sm, 14px);
}
.act-row dd {
    margin: 0;
    color: var(--text-main);
    font-size: var(--type-body-sm, 14px);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}