/**
 * Respond - AP - B2B Wholesale: styling for B2BKing's price markup.
 *
 * Loaded on every front end page by includes/trade-pricing.php, because the
 * "inc. VAT" suffix reaches retail customers too, not only trade.
 *
 * B2BKing's "Show both B2B and B2C prices" setting prints, for trade customers:
 *
 *   <span class="b2bking_both_prices_text b2bking_retail_price_text">RRP: </span>
 *   <span class="b2bking_both_prices_price b2bking_retail_price_price">...</span>
 *   <span class="b2bking_both_prices_text b2bking_b2b_price_text">Trade: </span>
 *   <span class="b2bking_both_prices_price b2bking_b2b_price_price b2bking_b2b_price_id_<id>">...</span>
 *
 * includes/trade-pricing.php then wraps each caption and its price in a
 * respond-price-pill span, which is what the pill styling below hangs off.
 *
 * The trade price is targeted by b2bking_b2b_price_price, never by the
 * b2bking_b2b_price_id_<id> class beside it, which names a single product.
 *
 * Colours come from the theme's own variables (child-theme.css).
 */

/* The "RRP:" and "Trade:" captions. */
.price .b2bking_both_prices_text {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--dark);
}

/* "inc. VAT" / "ex. VAT", from B2BKing's VAT suffix setting. */
small.woocommerce-price-suffix {
    font-size: 0.8rem;
    color: var(--dark);
}

/**
 * Two pills, one per line:
 *
 *   RRP    an outlined pill: cream border, no fill
 *   Trade  a filled cream pill
 *
 * Each pill is one element, respond-price-pill, wrapped around a caption and
 * its price by respond_ap_b2b_wrap_price_pills() in includes/trade-pricing.php.
 * The box carries the border or fill and all four rounded corners, so when the
 * price does not fit beside its caption it wraps inside the pill and the pill
 * grows taller, rather than splitting in two.
 *
 * display: flex makes each pill block level, so each starts its own line, while
 * width: fit-content keeps it as narrow as its contents. max-width stops a long
 * price pushing it wider than the space it is in.
 */
.respond-price-pill {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 10px;
    border: solid 2px var(--cream);
    border-radius: 5px;
    margin: 0 0 5px;
}

.respond-price-pill--trade {
    background: var(--cream);
}

span.b2bking_both_prices_price.b2bking_retail_price_price {
    font-size: 1rem;
}

/* B2BKing ends the RRP price with a <br>, which inside a pill would only add an
   empty line. The pills already sit on lines of their own. */
.respond-price-pill br {
    display: none;
}

/* The figure in a listing price takes its size from the price around it. */
.woocommerce ul.products li.product a .price bdi {
    font-size: inherit;
}

/* A struck-through price inside the trade line, when the product is on sale. */
.b2bking_b2b_price_price del span.woocommerce-Price-amount.amount {
    font-size: 1rem;
}

/**
 * The theme's "From " before a variable product's price, on product pages,
 * hidden for trade customers. Printed by custom_format_price_range() in the
 * child theme's functions.php.
 *
 * respond-trade-customer is the body class includes/trade-pricing.php adds for
 * trade customers.
 */
.respond-trade-customer.single-product .summary .price .variable-label {
    display: none;
}

/**
 * The same "From " in product listings, hidden for anyone logged in, retail
 * customers included, not only trade. logged-in is WordPress's own body class.
 */
.logged-in.woocommerce ul.products li.product a .price .variable-label,
.logged-in .woocommerce ul.products li.product a .price .variable-label {
    display: none;
}

/* B2BKing's price sits inside an <ins>, which WooCommerce would underline. */
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
    text-decoration: none;
}

/**
 * The chosen variation's price, in a white rounded box of its own.
 *
 * Not B2BKing specific: this applies for every customer, retail included.
 */
.single-product .has-case.cart-form-outter form.cart .single_variation_wrap {
    display: block;
}

.woocommerce-variation-price {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 10px;
    display: block;
}