/**
 * Collect — the little that is Collect's own on a customer page.
 *
 * The heading, the figures, the filters, the lists, the cards, the facts
 * list and the empty states all come from the shared portal shell now, so
 * these pages match every other portal page and follow any change made
 * there.
 *
 * WHAT IS LEFT, AND WHY IT CANNOT BE SHARED
 * ---------------------------------------------------------------------
 *  - the two balance rows on a statement, which are not entries but the
 *    line the entries are counted from and the line they add up to;
 *  - the row of controls on a subscription, which is a set of separate
 *    little forms sitting side by side — something no other page has.
 *
 * Namespaces: cpx-* (the money pages) and csx-* (subscriptions). No
 * !important, and not one colour decided here.
 */

/* ── A statement's opening and closing lines ─────────────────────────── */
/* Said in bold rather than in a colour: these are the same two lines on
   every statement, and a colour would have to mean something. */
.cpx-row-opening td,
.cpx-row-closing td { font-weight: 700; }

.cpx-period { margin-bottom: 16px; }

/* ── A subscription's controls ───────────────────────────────────────── */
/* Each is its own little form, side by side, wrapping onto the next line
   rather than being squeezed. */
.csx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.csx-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.csx-pick {
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    border-radius: 10px;
}
.csx-btn {
    min-height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    border: 1px solid var(--pd-cd-card-border, var(--at-color-border, #c1c7cf));
    border-radius: 10px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
}
.csx-btn:hover,
.csx-btn:focus { border-color: var(--at-color-ring, var(--at-color-primary, #2563eb)); }

/* The state of the subscription, said at the top of its own section. */
.csx-state { margin: 8px 0 0; }

/* Something owed. The shell paints the panel; this only lays the button
   out beside the words rather than under them. */
.csx-owed { flex-wrap: wrap; align-items: center; }
.csx-pay {
    margin-left: auto;
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
    border-radius: 10px;
    font-weight: 600;
}

/* Stopping a subscription: its own block, with room to answer two
   questions, rather than one more control in a row. */
.csx-stop-when { margin-top: 14px; }
.csx-stop-btn { margin-top: 14px; }

/* The save step, shown when somebody starts to cancel and their reason has
   an offer attached. Spacing only — the shell paints all of it. */
.csx-offer { margin: 16px 0; }
.csx-offer-form { display: inline-block; }
.csx-offer-out {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pd-cd-card-border, var(--at-color-border, #c1c7cf));
}