Hi Nicolas,

Thanks for getting in touch! I understand you'd like to customize the styling of the [b2bking_offers] shortcode output. I'll be happy to help with CSS modifications.

Could you please provide some more specific details about what kind of design changes you're looking to make? For example:
- Are you looking to change colors, spacing, fonts, etc?
- Any specific layout modifications you want to achieve?

Also, it would be very helpful if you could share a link to your website so I can take a look at the current implementation and provide more targeted CSS guidance.

Once you provide these details, I'll be able to suggest the exact CSS code needed for your desired changes.

Kind regards,
Stefan

Hi Nicolas,

It depends a lot on the specifics you need to achieve.

Here is some example CSS you can add:

/* Main container styling */
.b2bking_myaccount_individual_offer_container {
    background-color: #f5f8ff !important;
    border: 2px solid #3366cc !important;
    border-radius: 8px !important;
    padding: 15px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Top section styling */
.b2bking_myaccount_individual_offer_top {
    color: #3366cc !important;
    font-size: 18px !important;
    font-weight: bold !important;
    background-color: #e6eeff !important;
    padding: 10px !important;
    border-radius: 5px !important;
}

/* SVG icon modifications */
.b2bking_myaccount_individual_offer_top_icon path {
    fill: #3366cc !important;
}

/* Header line styling */
.b2bking_myaccount_individual_offer_header_line {
    background-color: #3366cc !important;
    color: white !important;
    padding: 8px !important;
    margin: 10px 0 !important;
}

.b2bking_myaccount_individual_offer_header_line_item {
    font-weight: 600 !important;
}

/* Element line styling */
.b2bking_myaccount_individual_offer_element_line {
    background-color: #ffffff !important;
    margin: 5px 0 !important;
    padding: 10px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
}

.b2bking_myaccount_individual_offer_element_line_item_name {
    color: #222222 !important;
    font-weight: 500 !important;
}

/* Price styling */
.woocommerce-Price-amount {
    color: #2ecc71 !important;
    font-weight: bold !important;
}

/* Bottom section styling */
.b2bking_myaccount_individual_offer_bottom_line {
    background-color: #f0f0f0 !important;
    padding: 15px !important;
    border-radius: 5px !important;
    margin-top: 15px !important;
}

/* Button styling */
.b2bking_myaccount_individual_offer_bottom_line_button {
    background-color: #3366cc !important;
    color: white !important;
    padding: 8px 15px !important;
    border-radius: 4px !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
}

.b2bking_myaccount_individual_offer_bottom_line_button:hover {
    background-color: #254d99 !important;
}

/* Button icons */
.b2bking_myaccount_individual_offer_bottom_line_button_icon path {
    fill: #ffffff !important;
}

/* Total price section */
.b2bking_myaccount_individual_offer_bottom_line_total {
    color: #222222 !important;
    font-size: 16px !important;
}

.b2bking_myaccount_individual_offer_bottom_line_total strong {
    color: #e74c3c !important;
}

This can be added to any area that supports CSS. A common place to add it is to Appearance -> Customize -> Extra CSS.

An offer will display like this after adding that:

The design possibilities with CSS are infinite so it really depends on the goals.

Kind regards,

Stefan