/* -----------------------------------------------------------------------------
 * File: css/components/backorder.css
 * Purpose: Make back-ordered items obvious in Cart/Checkout
 * - Row highlight + rounded outline
 * - Action/confirmed badges
 * - Style WooCommerce’s “Available on backorder” notice as a pill
 * -------------------------------------------------------------------------- */

/* Back-order cart highlighting */
.woocommerce-cart .cart_item.wbc-backorder,
.woocommerce-checkout .cart_item.wbc-backorder{
  outline:2px solid var(--brand-burnt);
  outline-offset:2px;
  /* fallback then color-mix accent */
  background:#fff;
  background: color-mix(in oklab, var(--brand-burnt) 8%, #fff);
  border-radius:12px;
}
.woocommerce-cart .cart_item.wbc-backorder-ack,
.woocommerce-checkout .cart_item.wbc-backorder-ack{
  outline:2px solid #2e7d32;
  background:#fff;
  background: color-mix(in oklab, #2e7d32 8%, #fff);
}

/* Theme badge injected by the theme (action required / confirmed) */
.wbc-bo-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  margin-top:6px;
  background: var(--brand-burnt);
  color:#fff;
}
.wbc-bo-badge.is-ack{ background:#2e7d32; }

/* Make the native Woo backorder message stand out in Cart/Checkout */
.woocommerce-cart .product-name .backorder_notification,
.woocommerce-cart p.stock.available-on-backorder,
.woocommerce-checkout .product-name .backorder_notification,
.woocommerce-checkout p.stock.available-on-backorder{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:9999px;
  background: var(--brand-burnt);
  color:#fff;
  border:0;
  font-weight:700;
  font-size:12px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:6px;
}

/* Little clock icon */
.woocommerce-cart .product-name .backorder_notification::before,
.woocommerce-cart p.stock.available-on-backorder::before,
.woocommerce-checkout .product-name .backorder_notification::before,
.woocommerce-checkout p.stock.available-on-backorder::before{
  content:"⏳";
  font-size:12px;
  line-height:1;
}