/**
 * CPQ chat cards — the interactive anchor card and compact status-line
 * rendered inside BuddyBoss Messages threads. Neutral card look consistent
 * with the theme's existing BuddyBoss-variable-driven cards; only the
 * status badge carries color.
 */

.cpq-card {
    background-color: var(--bb-content-background-color, #fff);
    border: 1px solid var(--bb-content-border-color, #e0e0e0);
    border-radius: var(--bb-block-radius-inner, 8px);
    padding: 12px 14px;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.4;
}

.cpq-card--unavailable {
    color: var(--bb-alternate-text-color, #666);
    font-style: italic;
}

.cpq-card__header {
    display: flex;
    /* Long status pills ("Accepted — awaiting payment") drop to their own
       right-aligned line on narrow cards instead of clipping. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.cpq-card__title {
    font-weight: 600;
    color: var(--bb-headings-color, #333);
}

.cpq-card__status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: auto;
    background: #eceff1;
    color: #546e7a;
}

.cpq-card__status--pending,
.cpq-card__status--countered {
    background: #e3f2fd;
    color: #1565c0;
}

.cpq-card__status--accepted,
.cpq-card__status--paid {
    background: #fff3cd;
    color: #856404;
}

.cpq-card__status--in_progress {
    background: #e0f2f1;
    color: #00695c;
}

.cpq-card__status--completed {
    background: #e8f5e9;
    color: var(--bb-success-color, #2e7d32);
}

.cpq-card__status--declined,
.cpq-card__status--cancelled,
.cpq-card__status--expired,
.cpq-card__status--refunded {
    background: #fdecea;
    color: #c62828;
}

.cpq-card__parties {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bb-body-text-color, #4e4e4e);
    margin-bottom: 6px;
}

.cpq-card__arrow {
    color: var(--bb-alternate-text-color, #999);
}

.cpq-card__amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--bb-headings-color, #333);
    margin-bottom: 6px;
}

.cpq-card__desc {
    color: var(--bb-body-text-color, #4e4e4e);
    margin-bottom: 8px;
    word-break: break-word;
}

.cpq-card__attachment {
    margin-top: 6px;
    font-size: 13px;
}

.cpq-card__attachment-label {
    color: var(--bb-alternate-text-color, #999);
    margin-right: 4px;
}

#buddypress .cpq-card a.cpq-card__attachment-link,
.cpq-card a.cpq-card__attachment-link {
    color: var(--bb-body-text-color, #4e4e4e);
    text-decoration: none;
}

#buddypress .cpq-card a.cpq-card__attachment-link:hover,
.cpq-card a.cpq-card__attachment-link:hover {
    text-decoration: underline;
}

.cpq-card__round {
    font-size: 12px;
    color: var(--bb-alternate-text-color, #999);
    margin-bottom: 8px;
}

.cpq-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/*
 * Buttons are compact outlined pills on the card background. The theme styles
 * buttons inside messages via #buddypress-prefixed selectors, so every rule is
 * declared twice: with the id prefix (wins inside BuddyBoss screens) and
 * without it (public offer page renders outside #buddypress).
 */
#buddypress .cpq-card button.cpq-card__btn,
#buddypress .cpq-card a.cpq-card__btn,
.cpq-card button.cpq-card__btn,
.cpq-card a.cpq-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    min-height: 0;
    height: auto;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
    border-radius: var(--bb-button-radius, 4px);
    border: 1px solid var(--bb-content-border-color, #d6d9dd);
    background: var(--bb-content-background-color, #fff);
    color: var(--bb-body-text-color, #4d5c6d);
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
}

#buddypress .cpq-card button.cpq-card__btn:hover:not(:disabled),
#buddypress .cpq-card a.cpq-card__btn:hover,
.cpq-card button.cpq-card__btn:hover:not(:disabled),
.cpq-card a.cpq-card__btn:hover {
    border-color: var(--bb-headings-color, #122b46);
    color: var(--bb-headings-color, #122b46);
    background: var(--bb-content-background-color, #fff);
}

/* Positive actions carry the brand color as an outline, filling on hover. */
#buddypress .cpq-card button.cpq-card__btn--accept,
#buddypress .cpq-card button.cpq-card__btn--pay,
#buddypress .cpq-card button.cpq-card__btn--start,
#buddypress .cpq-card button.cpq-card__btn--complete,
#buddypress .cpq-card button.cpq-card__btn--counter-send,
#buddypress .cpq-card a.cpq-card__btn--accept,
.cpq-card a.cpq-card__btn--accept,
.cpq-card button.cpq-card__btn--accept,
.cpq-card button.cpq-card__btn--pay,
.cpq-card button.cpq-card__btn--start,
.cpq-card button.cpq-card__btn--complete,
.cpq-card button.cpq-card__btn--counter-send {
    color: var(--bb-primary-button-background-regular, #ef5455);
    border-color: var(--bb-primary-button-background-regular, #ef5455);
    background: var(--bb-content-background-color, #fff);
}

#buddypress .cpq-card button.cpq-card__btn--accept:hover:not(:disabled),
#buddypress .cpq-card button.cpq-card__btn--pay:hover:not(:disabled),
#buddypress .cpq-card button.cpq-card__btn--start:hover:not(:disabled),
#buddypress .cpq-card button.cpq-card__btn--complete:hover:not(:disabled),
#buddypress .cpq-card button.cpq-card__btn--counter-send:hover:not(:disabled),
#buddypress .cpq-card a.cpq-card__btn--accept:hover,
.cpq-card a.cpq-card__btn--accept:hover,
.cpq-card button.cpq-card__btn--accept:hover:not(:disabled),
.cpq-card button.cpq-card__btn--pay:hover:not(:disabled),
.cpq-card button.cpq-card__btn--start:hover:not(:disabled),
.cpq-card button.cpq-card__btn--complete:hover:not(:disabled),
.cpq-card button.cpq-card__btn--counter-send:hover:not(:disabled) {
    background: var(--bb-primary-button-background-regular, #ef5455);
    border-color: var(--bb-primary-button-background-regular, #ef5455);
    color: #fff;
}

#buddypress .cpq-card button.cpq-card__btn:disabled,
.cpq-card button.cpq-card__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/*
 * Inline Yes/No confirmation — replaces window.confirm() so the question sits
 * inside the card/row itself (comfortable on touch screens). Also reused by
 * the My Offers panel's Revoke action.
 */
.cpq-card__confirm {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 13px;
    color: var(--bb-headings-color, #333);
}

.cpq-card__confirm-link {
    display: inline-block;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

#buddypress .cpq-card__confirm a.cpq-card__confirm-link--yes,
.cpq-card__confirm a.cpq-card__confirm-link--yes {
    color: var(--bb-primary-button-background-regular, #ef5455);
}

#buddypress .cpq-card__confirm a.cpq-card__confirm-link--no,
.cpq-card__confirm a.cpq-card__confirm-link--no {
    color: var(--bb-alternate-text-color, #666);
}

.cpq-card__confirm-link:hover {
    text-decoration: underline;
}

.cpq-card__inline-error {
    margin-top: 8px;
    font-size: 12px;
    color: #c62828;
}

.cpq-event {
    color: var(--bb-alternate-text-color, #666);
    font-size: 13px;
    font-style: italic;
    padding: 4px 0;
}

/**
 * Counter-offer inline form (M5) — replaces the anchor card's actions row
 * while the viewer is typing a counter-amount. Reuses .cpq-card__btn for its
 * Send/Cancel buttons.
 */

#buddypress .cpq-card form.cpq-card__counter-form,
.cpq-card form.cpq-card__counter-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/*
 * meowl-donate-style amount field: bold currency symbol + borderless input
 * sharing one underline, sized like the card's amount line. Doubled with the
 * #buddypress prefix to out-rank the theme's own input styling in messages.
 */
#buddypress .cpq-card .cpq-card__counter-field,
.cpq-card .cpq-card__counter-field,
#buddypress .cpq-pin .cpq-card__counter-field,
.cpq-pin .cpq-card__counter-field {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    border-bottom: 1.5px solid var(--bb-headings-color, #333);
    padding-bottom: 1px;
}

#buddypress .cpq-card .cpq-card__counter-form-currency,
.cpq-card .cpq-card__counter-form-currency,
#buddypress .cpq-pin .cpq-card__counter-form-currency,
.cpq-pin .cpq-card__counter-form-currency {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--bb-headings-color, #333);
    user-select: none;
}

#buddypress .cpq-card input.cpq-card__counter-form-input,
.cpq-card input.cpq-card__counter-form-input,
#buddypress .standard-form .cpq-pin input.cpq-card__counter-form-input,
.cpq-pin input.cpq-card__counter-form-input {
    width: 4ch; /* JS grows it with the value, capped by the digit limit */
    min-height: 0;
    height: auto;
    padding: 0 0 0 2px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--bb-headings-color, #333);
    transition: width 0.1s;
    -moz-appearance: textfield;
}

#buddypress .cpq-card input.cpq-card__counter-form-input::-webkit-outer-spin-button,
#buddypress .cpq-card input.cpq-card__counter-form-input::-webkit-inner-spin-button,
.cpq-card input.cpq-card__counter-form-input::-webkit-outer-spin-button,
.cpq-card input.cpq-card__counter-form-input::-webkit-inner-spin-button,
.cpq-pin input.cpq-card__counter-form-input::-webkit-outer-spin-button,
.cpq-pin input.cpq-card__counter-form-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/**
 * Create-offer modal (M5) — hidden overlay + centered dialog printed once in
 * the Messages page footer, opened by the 'Individual Request' toolbar
 * button. Card-like surface (same content-background/border/radius
 * variables as .cpq-card) so it stays visually consistent with the chat cards.
 */

.cpq-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

.cpq-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.cpq-modal__dialog {
    position: relative;
    z-index: 1;
    margin: 10vh auto 0;
    width: 90%;
    max-width: 420px;
    background-color: var(--bb-content-background-color, #fff);
    border: 1px solid var(--bb-content-border-color, #e0e0e0);
    border-radius: var(--bb-block-radius-inner, 8px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

/* Hairline dividers zone the dialog into header / body / footer, matching the
   theme's own modal anatomy (bb-model-header) — spacing alone reads as one
   undifferentiated column on a multi-field form. The negative side margins
   bleed the lines to the dialog edges (the dialog's own 20px padding). */
.cpq-modal__title {
    margin: 0 -20px 16px;
    padding: 0 20px 12px;
    border-bottom: 1px solid var(--bb-content-border-color, #e7e9ec);
    font-size: 16px;
    font-weight: 600;
    color: var(--bb-headings-color, #333);
}

#cpq-modal form.cpq-modal__form {
    margin: 0;
    padding: 0;
}

.cpq-modal__field {
    margin-bottom: 14px;
}

.cpq-modal__field--role {
    display: none;
}

.cpq-modal__field--role.is-visible {
    display: block;
}

#cpq-modal label.cpq-modal__label,
#cpq-modal span.cpq-modal__label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--bb-headings-color, #333);
}

/* ID-anchored so these out-rank the theme's #page-scoped input sizing. */
#cpq-modal input.cpq-modal__input,
#cpq-modal textarea.cpq-modal__input {
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 6px 10px;
    border: 1px solid var(--bb-content-border-color, #e0e0e0);
    border-radius: 6px;
    background: var(--bb-content-background-color, #fff);
    font-size: 13px;
    line-height: 1.4;
    color: var(--bb-body-text-color, #4e4e4e);
    box-shadow: none;
}

#cpq-modal input.cpq-modal__input:focus,
#cpq-modal textarea.cpq-modal__input:focus {
    border-color: var(--bb-headings-color, #333);
    outline: none;
}

#cpq-modal textarea.cpq-modal__input--description {
    resize: vertical;
    min-height: 64px;
}

/* Amount — same meowl-style underlined field as the in-card counter form. */
.cpq-modal__amount-row {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    border-bottom: 1.5px solid var(--bb-headings-color, #333);
    padding-bottom: 1px;
}

#cpq-modal .cpq-modal__currency {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--bb-headings-color, #333);
    user-select: none;
}

#cpq-modal input.cpq-modal__input--amount {
    width: 4ch; /* JS grows it with the value, capped by the digit limit */
    min-height: 0;
    height: auto;
    padding: 0 0 0 2px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--bb-headings-color, #333);
    transition: width 0.1s;
    -moz-appearance: textfield;
}

#cpq-modal input.cpq-modal__input--amount:focus {
    border: none;
    outline: none;
}

#cpq-modal input.cpq-modal__input--amount::placeholder {
    color: var(--bb-alternate-text-color, #c4c8cc);
}

/* Role — segmented control over the (visually hidden) native radios. */
.cpq-modal__segment {
    display: inline-flex;
    border: 1px solid var(--bb-content-border-color, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
}

.cpq-modal__segment-option {
    margin: 0;
}

.cpq-modal__segment-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cpq-modal__segment-option span {
    display: inline-block;
    padding: 5px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bb-body-text-color, #4e4e4e);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.cpq-modal__segment-option + .cpq-modal__segment-option span {
    border-left: 1px solid var(--bb-content-border-color, #e0e0e0);
}

.cpq-modal__segment-option input:checked + span {
    background: var(--bb-headings-color, #333);
    color: #fff;
}

.cpq-modal__segment-option:hover input:not(:checked) + span {
    border-color: var(--bb-alternate-text-color, #999);
}

.cpq-modal__segment-option input:focus-visible + span {
    outline: 2px solid var(--bb-primary-button-background-regular, #ef5455);
    outline-offset: -2px;
}

/* Attachment field — the native file input is visually hidden behind a
   full-width dropzone. Anchored to #cpq-modal: the theme's input[type="file"]
   display rule (0,1,1) outranks a lone class. */
#cpq-modal input.cpq-modal__attachment-input {
    display: none;
}

/* Full-width dropzone mirroring the plus-card's dashed language. */
#cpq-modal .cpq-modal__attachment-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    border: 2px dashed var(--bb-content-border-color, #e0e0e0);
    border-radius: var(--bb-block-radius-inner, 6px);
    color: var(--bb-alternate-text-color, #999);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

#cpq-modal .cpq-modal__attachment-drop:hover,
#cpq-modal .cpq-modal__attachment-drop.is-dragover {
    border-color: var(--bb-primary-button-background-regular, #ef5455);
    color: var(--bb-primary-button-background-regular, #ef5455);
}

/* Chosen-file state, rendered inside the dropzone once an upload succeeds. */
.cpq-modal__attachment-chosen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    color: var(--bb-body-text-color, #4e4e4e);
}

.cpq-modal__attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
    font-size: 13px;
}

/* ID-anchored to beat the theme's #page button sizing (padding/min-height). */
#cpq-modal button.cpq-modal__attachment-clear {
    padding: 0 4px;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--bb-alternate-text-color, #666);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

#cpq-modal button.cpq-modal__attachment-clear:hover {
    color: var(--bb-primary-button-background-regular, #ef5455);
}

/* Pinned offer strip above the composer: a single-row status bar for the
   thread's newest active offer with the viewer's quick actions as text links.
   Insets mirror the sibling .use-phone notice (20px). */
.cpq-pin {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 20px 0;
    padding: 8px 12px;
    background: var(--bb-content-background-color, #fff);
    border: 1px solid var(--bb-content-border-color, #e7e9ec);
    border-radius: var(--bb-block-radius-inner, 6px);
    font-size: 13px;
    color: var(--bb-body-text-color, #4e4e4e);
}

/* Row-1 sub-container: a non-wrapping flex line, so under width pressure its
   items shrink (the label name ellipses) instead of wrapping — the collapse
   toggle can never fall onto another line. */
.cpq-pin__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* The pill reuses .cpq-card__status, whose card-header margin-left:auto would
   push it right once the desc wraps to its own row on mobile. It also must
   never be the flex item that gives way — the label name is the designated
   shrinker. */
.cpq-pin .cpq-card__status {
    margin-left: 0;
    flex-shrink: 0;
}

.cpq-pin__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
}

.cpq-pin__label-amount {
    flex-shrink: 0;
    white-space: nowrap;
}

/* "1/2 ▸" cycle control — present only when several offers are active. */
#buddypress .cpq-pin a.cpq-pin__cycle,
.cpq-pin a.cpq-pin__cycle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--bb-alternate-text-color, #999);
    text-decoration: none;
    white-space: nowrap;
}

#buddypress .cpq-pin a.cpq-pin__cycle:hover,
.cpq-pin a.cpq-pin__cycle:hover {
    color: var(--bb-body-text-color, #4e4e4e);
    text-decoration: none;
}

.cpq-pin__cycle::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Collapse toggle exists only on mobile — desktop is a single row anyway. */
.cpq-pin__toggle {
    display: none;
}

.cpq-pin__desc {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bb-alternate-text-color, #999);
}

.cpq-pin__actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

#buddypress .cpq-pin a.cpq-pin__action,
.cpq-pin a.cpq-pin__action {
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-body-text-color, #4e4e4e);
    text-decoration: none;
    white-space: nowrap;
}

#buddypress .cpq-pin a.cpq-pin__action:hover,
.cpq-pin a.cpq-pin__action:hover {
    text-decoration: underline;
}

/* Positive actions carry the brand color; dismissive ones stay muted. */
#buddypress .cpq-pin a.cpq-pin__action--accept,
#buddypress .cpq-pin a.cpq-pin__action--pay,
#buddypress .cpq-pin a.cpq-pin__action--start,
#buddypress .cpq-pin a.cpq-pin__action--complete,
#buddypress .cpq-pin a.cpq-pin__action--send,
#buddypress .cpq-pin a.cpq-pin__action--yes,
.cpq-pin a.cpq-pin__action--accept,
.cpq-pin a.cpq-pin__action--pay,
.cpq-pin a.cpq-pin__action--start,
.cpq-pin a.cpq-pin__action--complete,
.cpq-pin a.cpq-pin__action--send,
.cpq-pin a.cpq-pin__action--yes {
    color: var(--bb-primary-button-background-regular, #ef5455);
}

#buddypress .cpq-pin a.cpq-pin__action--decline,
#buddypress .cpq-pin a.cpq-pin__action--cancel,
#buddypress .cpq-pin a.cpq-pin__action--no,
.cpq-pin a.cpq-pin__action--decline,
.cpq-pin a.cpq-pin__action--cancel,
.cpq-pin a.cpq-pin__action--no {
    color: var(--bb-alternate-text-color, #999);
}

/* Attachment quick-link — a plain icon, muted until hovered. */
#buddypress .cpq-pin a.cpq-pin__file,
.cpq-pin a.cpq-pin__file {
    display: inline-flex;
    align-items: center;
    color: var(--bb-alternate-text-color, #999);
}

#buddypress .cpq-pin a.cpq-pin__file:hover,
.cpq-pin a.cpq-pin__file:hover {
    color: var(--bb-primary-button-background-regular, #ef5455);
    text-decoration: none;
}

.cpq-pin__confirm-text,
.cpq-pin__note {
    color: var(--bb-alternate-text-color, #999);
    white-space: nowrap;
}

.cpq-pin__error {
    color: #c62828;
}

/* The strip's counter field is the same meowl-style underline, just smaller. */
.cpq-pin .cpq-card__counter-form-currency,
#buddypress .cpq-pin .cpq-card__counter-form-currency {
    font-size: 14px;
}

#buddypress .standard-form .cpq-pin input.cpq-card__counter-form-input,
.cpq-pin input.cpq-card__counter-form-input {
    font-size: 14px;
}

/* The theme's .standard-form input:focus ring/shadow must not reach the
   meowl-style underline field. */
#buddypress .standard-form .cpq-pin input.cpq-card__counter-form-input:focus,
.cpq-pin input.cpq-card__counter-form-input:focus {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
}

@media (max-width: 640px) {
    /* Tidy stacked layout, everything left-aligned:
       [status + amount] / [description] / [actions]. */
    .cpq-pin {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    /* The head row owns the full first line; desc/actions wrap below it.
       The collapse toggle is taken OUT of the flex flow into a reserved
       right inset, so no width pressure can ever displace or cover it —
       and overflow clips inside the border as the last-resort belt. */
    .cpq-pin__head {
        flex-basis: 100%;
        position: relative;
        padding-right: 34px;
        overflow: hidden;
    }

    /* The paperclip opens the description row; the desc keeps its flex-grow
       base (basis 0) so the pair shares one line and the desc alone still
       fills it when there is no file. */
    .cpq-pin__file {
        order: 2;
    }

    .cpq-pin__desc {
        order: 2;
    }

    .cpq-pin__actions {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    /* The cycle control keeps its leading position on mobile too — the first
       row's right edge belongs to the collapse toggle alone. */

    /* The label may give way so the first row never wraps and pushes the
       collapse toggle onto its own line — but only its NAME half ellipses;
       the amount is the part worth reading and never shrinks. */
    .cpq-pin__label {
        flex-shrink: 1;
        min-width: 0;
    }

    .cpq-pin__label-name {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Chevron in the head's reserved right inset folds the strip down to
       that row. Absolutely positioned: flex pressure cannot reach it. */
    #buddypress .cpq-pin a.cpq-pin__toggle,
    .cpq-pin a.cpq-pin__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 24px;
    }

    /* translateY comes BEFORE rotate so the optical nudge stays in screen
       coordinates: the V's stroke mass sits off-center in its box, so the up
       chevron is pushed down a touch and the down chevron up. */
    .cpq-pin__toggle::before {
        content: '';
        width: 8px;
        height: 8px;
        border-left: 2px solid var(--bb-alternate-text-color, #999);
        border-bottom: 2px solid var(--bb-alternate-text-color, #999);
        /* Expanded: chevron points up (tap to fold). */
        transform: translateY(2px) rotate(135deg);
        transition: transform 0.15s ease;
    }

    .cpq-pin--collapsed .cpq-pin__toggle::before {
        /* Collapsed: chevron points down (tap to unfold). */
        transform: translateY(-2px) rotate(-45deg);
    }

    /* The #buddypress twin outranks the base a.cpq-pin__file display rule,
       which would otherwise keep the paperclip visible in the folded strip. */
    .cpq-pin--collapsed .cpq-pin__desc,
    .cpq-pin--collapsed .cpq-pin__actions,
    .cpq-pin--collapsed .cpq-pin__file,
    #buddypress .cpq-pin--collapsed a.cpq-pin__file {
        display: none;
    }
}

/* In-flight state for any CPQ control group (forms, action rows, modal buttons):
   controls are disabled by JS, the pulse signals the pending request. */
.cpq-is-busy {
    pointer-events: none;
    animation: cpq-busy-pulse 1.2s ease-in-out infinite;
}

@keyframes cpq-busy-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* "Anyone with the link" explainer under the Send-to segment. */
#cpq-modal p.cpq-modal__hint {
    display: none;
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--bb-alternate-text-color, #888);
}

#cpq-modal p.cpq-modal__hint.is-visible {
    display: block;
}

.cpq-modal__error {
    margin: 0 0 10px;
    font-size: 12px;
    color: #c62828;
}

.cpq-modal__error:empty {
    display: none;
    margin: 0;
}

/* Field-level error slots — render right under the field they belong to. */
#cpq-modal .cpq-modal__field-error {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #c62828;
}

#cpq-modal .cpq-modal__field-error:empty {
    display: none;
    margin: 0;
}

.cpq-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 18px -20px 0;
    padding: 14px 20px 0;
    border-top: 1px solid var(--bb-content-border-color, #e7e9ec);
}

.cpq-modal button.cpq-modal__btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    min-height: 0;
    height: auto;
    border-radius: var(--bb-button-radius, 4px);
    border: 1px solid var(--bb-content-border-color, #e0e0e0);
    background: var(--bb-content-background-color, #fff);
    color: var(--bb-headings-color, #333);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.cpq-modal button.cpq-modal__btn--submit,
.cpq-modal button.cpq-modal__btn--copy {
    background: var(--bb-primary-button-background-regular, #ef5455);
    border-color: var(--bb-primary-button-background-regular, #ef5455);
    color: #fff;
}

.cpq-modal button.cpq-modal__btn:hover {
    border-color: var(--bb-alternate-text-color, #999);
}

.cpq-modal button.cpq-modal__btn--submit:hover,
.cpq-modal button.cpq-modal__btn--copy:hover {
    /* Not the theme hover var: it is blue on this site, and a red button
       must darken on hover, not change hue. */
    background: #e04344;
    border-color: #e04344;
}

/**
 * Services-tab plus-card (M7) — 'Create Individual Request' tile appended
 * to the owner's WooCommerce product grid on the Services tab.
 */

.cpq-plus-card {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* Element-qualified to out-rank the theme's global button styling. */
ul.products li.cpq-plus-card button.cpq-plus-card__button,
ul.products li.cpq-plus-card a.cpq-plus-card__button,
.cpq-plus-card .cpq-plus-card__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 240px;
    padding: 20px;
    background: transparent;
    border: 2px dashed var(--bb-content-border-color, #e0e0e0);
    border-radius: var(--bb-block-radius-inner, 8px);
    color: var(--bb-alternate-text-color, #888);
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

ul.products li.cpq-plus-card button.cpq-plus-card__button:hover,
ul.products li.cpq-plus-card a.cpq-plus-card__button:hover,
.cpq-plus-card .cpq-plus-card__button:hover {
    background: transparent;
    border-color: var(--bb-primary-button-background-regular, #ef5455);
    color: var(--bb-primary-button-background-regular, #ef5455);
}

/* Secondary line on the visitor/guest tile variants. */
.cpq-plus-card__hint {
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: var(--bb-alternate-text-color, #999);
}

.cpq-plus-card__icon {
    font-size: 34px;
    line-height: 1;
    font-weight: 300;
}

.cpq-plus-card__label {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/**
 * 'My Individual Requests' panel (M7) — owner-only offer list printed under
 * the Services tab's product grid.
 */

.cpq-my-offers {
    margin-top: 24px;
}

.cpq-my-offers__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--bb-headings-color, #333);
}

/* Panel header: title left, create action right; the button must stay visible
   in the empty state, which is where a first-time user always starts. */
.cpq-my-offers__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* Higher-specificity twin pair: the theme's h2 margin rule otherwise wins over
   the plain-class .cpq-my-offers__title rule above, leaving the title's
   visual center off from the button's despite align-items:center. */
#buddypress .cpq-my-offers__head .cpq-my-offers__title,
.cpq-my-offers__head h2.cpq-my-offers__title {
    margin: 0;
}

/* #buddypress-anchored so the theme's generic button styling loses, mirroring
   .cpq-my-offers__action below. */
#buddypress button.cpq-my-offers__create,
.cpq-my-offers__create {
    padding: 4px 10px;
    min-height: 0;
    border: 1px solid var(--bb-primary-button-background-regular, #ef5455);
    border-radius: var(--bb-button-radius, 4px);
    background: var(--bb-primary-button-background-regular, #ef5455);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

#buddypress button.cpq-my-offers__create:hover,
.cpq-my-offers__create:hover {
    /* Not the theme hover var: it is blue on this site, and a red button
       must darken on hover, not change hue. */
    background: #e04344;
    border-color: #e04344;
}

.cpq-my-offers__empty {
    color: var(--bb-alternate-text-color, #666);
    font-style: italic;
}

.cpq-my-offers__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cpq-my-offers__table th,
.cpq-my-offers__table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--bb-content-border-color, #e0e0e0);
}

.cpq-my-offers__table th {
    color: var(--bb-alternate-text-color, #666);
    font-weight: 600;
}

/* #buddypress-anchored so the theme's generic button styling (red fill,
   10px/20px padding, 15px font) and the Elementor kit button rule lose. */
#buddypress button.cpq-my-offers__action,
#buddypress a.cpq-my-offers__action,
.cpq-my-offers__action {
    display: inline-block;
    margin-right: 10px;
    padding: 4px 10px;
    min-height: 0;
    border: 1px solid var(--bb-content-border-color, #e0e0e0);
    border-radius: var(--bb-button-radius, 4px);
    background: var(--bb-content-background-color, #fff);
    color: var(--bb-headings-color, #333);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

#buddypress button.cpq-my-offers__action:hover,
#buddypress a.cpq-my-offers__action:hover,
.cpq-my-offers__action:hover {
    background: var(--bb-content-alternate-background-color, #f5f5f6);
    border-color: var(--bb-alternate-text-color, #9ca8b4);
    color: var(--bb-headings-color, #333);
}

#buddypress button.cpq-my-offers__action--revoke,
.cpq-my-offers__action--revoke {
    color: #c62828;
    border-color: #c62828;
}

/* Colored chips fill with their own color on hover. */
#buddypress button.cpq-my-offers__action--revoke:hover,
.cpq-my-offers__action--revoke:hover {
    background: #c62828;
    border-color: #c62828;
    color: #fff;
}

/* Execution-stage shortcut (Start work / Mark completed) — brand-accented
   like the chat card's executor buttons. */
#buddypress button.cpq-my-offers__action--transition,
.cpq-my-offers__action--transition {
    color: var(--bb-primary-button-background-regular, #ef5455);
    border-color: var(--bb-primary-button-background-regular, #ef5455);
}

#buddypress button.cpq-my-offers__action--transition:hover,
.cpq-my-offers__action--transition:hover {
    background: var(--bb-primary-button-background-regular, #ef5455);
    border-color: var(--bb-primary-button-background-regular, #ef5455);
    color: #fff;
}

.cpq-my-offers__error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #c62828;
}

/**
 * Profile-context modal blocks (M7) — recipient picker, public-link
 * checkbox and success state, shown only when the create-offer modal is
 * opened from the Services tab plus-card (cpq-profile.js toggles
 * .is-visible; cpq-messages.js never touches these).
 */

.cpq-modal__field--profile-fields {
    display: none;
}

.cpq-modal__field--profile-fields.is-visible {
    display: block;
}

.cpq-modal__recipient-picker {
    position: relative;
}

.cpq-modal__recipient-results {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bb-content-background-color, #fff);
    border: 1px solid var(--bb-content-border-color, #e0e0e0);
    border-radius: var(--bb-button-radius, 4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.cpq-modal__recipient-results:empty {
    display: none;
}

.cpq-modal__recipient-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

.cpq-modal__recipient-result:hover {
    background: var(--bb-content-alternate-background-color, #f5f5f5);
}

.cpq-modal__recipient-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.cpq-modal__recipient-name {
    font-size: 13px;
    color: var(--bb-body-text-color, #4e4e4e);
}

.cpq-modal__recipient-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--bb-content-border-color, #e0e0e0);
    border-radius: var(--bb-button-radius, 4px);
}

/* ID-anchored to beat the theme's #page button sizing (padding/min-height). */
#cpq-modal button.cpq-modal__recipient-clear {
    width: 22px;
    height: 22px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--bb-alternate-text-color, #666);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

#cpq-modal button.cpq-modal__recipient-clear:hover {
    background: var(--bb-content-alternate-background-color, #f5f5f5);
    color: var(--bb-headings-color, #333);
}

.cpq-modal__success {
    display: none;
}

.cpq-modal__success.is-visible {
    display: block;
}

.cpq-modal__success-text {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--bb-body-text-color, #4e4e4e);
}

.cpq-modal__success-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* Public offer landing ('/offer/{token}/') — partner hero + offer panel + CTA. */
.cpq-public-offer {
    padding: 48px 20px 64px;
}

.cpq-public-offer__container {
    max-width: 640px;
    margin: 0 auto;
}

.cpq-public-offer__hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.cpq-public-offer__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.cpq-public-offer__kicker {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bb-alternate-text-color, #888);
    margin-bottom: 2px;
}

#page .cpq-public-offer h1.cpq-public-offer__name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 28px;
    line-height: 1.2;
}

#page .cpq-public-offer h1.cpq-public-offer__name a {
    color: var(--bb-headings-color, #1e2132);
    text-decoration: none;
}

/* Mirrors the profile header's .bp-member-type pill (BuddyBoss member-type
   label: #009FFD, 6px radius) so the badge reads the same everywhere. */
.cpq-public-offer__badge {
    padding: 5px 15px;
    border-radius: 6px;
    background: #009ffd;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

/* A customer has no verified platform status (no rating, no skills), so the
   request pill keeps the Partner badge's geometry with a neutral fill instead
   of the BuddyBoss member-type blue. */
.cpq-public-offer__badge--request {
    background: var(--bb-content-alternate-background-color, #f0f2f5);
    color: var(--bb-headings-color, #4e4e4e);
}

.cpq-public-offer__headline {
    font-size: 15px;
    color: var(--bb-body-text-color, #4e4e4e);
    margin-bottom: 6px;
}

.cpq-public-offer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--bb-alternate-text-color, #888);
}

#page .cpq-public-offer a.cpq-public-offer__profile-link {
    color: var(--bb-alternate-text-color, #888);
    text-decoration: underline;
}

#page .cpq-public-offer a.cpq-public-offer__profile-link:hover {
    color: var(--bb-headings-color, #333);
}

.cpq-public-offer__panel {
    background: var(--bb-content-background-color, #fff);
    border: 1px solid var(--bb-content-border-color, #e7e9ec);
    border-radius: var(--bb-block-radius, 10px);
    padding: 24px 28px;
    margin-bottom: 16px;
}

.cpq-public-offer__panel--notice {
    text-align: center;
    font-size: 15px;
    color: var(--bb-body-text-color, #4e4e4e);
}

.cpq-public-offer__notice-title {
    font-size: 22px;
    margin: 0 0 8px;
}

.cpq-public-offer__notice-text {
    margin: 0 0 18px;
    color: var(--bb-alternate-text-color, #888);
}

.cpq-public-offer__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.cpq-public-offer__label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bb-alternate-text-color, #888);
}

.cpq-public-offer__amount {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bb-headings-color, #1e2132);
    margin-bottom: 10px;
}

.cpq-public-offer__desc {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bb-body-text-color, #4e4e4e);
}

.cpq-public-offer__validity {
    font-size: 13px;
    color: var(--bb-alternate-text-color, #888);
}

.cpq-public-offer__cta {
    text-align: center;
    margin: 22px 0 10px;
}

#page .cpq-public-offer a.cpq-public-offer__accept {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border-radius: var(--bb-button-radius, 6px);
    background: var(--bb-primary-button-background-regular, #ef5455);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: filter 0.15s;
}

#page .cpq-public-offer a.cpq-public-offer__accept:hover {
    filter: brightness(0.94);
    color: #fff;
}

.cpq-public-offer__signup {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--bb-body-text-color, #4e4e4e);
}

#page .cpq-public-offer .cpq-public-offer__signup a {
    color: var(--bb-primary-button-background-regular, #ef5455);
    text-decoration: underline;
}

.cpq-public-offer__trust {
    margin: 18px auto 0;
    max-width: 520px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: var(--bb-alternate-text-color, #999);
}

@media (max-width: 540px) {
    .cpq-public-offer__hero {
        flex-direction: column;
        text-align: center;
    }

    #page .cpq-public-offer h1.cpq-public-offer__name {
        justify-content: center;
        flex-wrap: wrap;
    }

    .cpq-public-offer__meta {
        justify-content: center;
    }
}

.cpq-modal__input--success-url {
    flex: 1;
}