/* ============================================================
   TRADE BAZAR -- game items (tradebazaar.php, ?item=,
   tradebazaar_checkout.php, bazaar_items_mine.php, bazaar_payout.php and
   admin_tradebazaar.php). The prototype's "On the site" tab: the
   character bazaar's classes (bazaar.css, loaded first), plus these.
   ============================================================ */
table.tibia.ib-list td.ib-c-img { width: 46px; text-align: center; padding: 4px; }
#content table.tibia.ib-list td.ib-c-img img { display: block; width: 32px; height: 32px; margin: 0 auto; image-rendering: pixelated; }
table.tibia.ib-list td.ib-c-seller { width: 96px; font-size: 11px; }
table.tibia.ib-list td.bz-c-price { width: 120px; }
table.tibia.ib-list td.bz-c-ends { width: 70px; font-size: 11px; }
.ib-search input[type=text] { width: 150px; box-sizing: border-box; padding: 3px 6px; border: 1px solid #7d5a38; border-radius: 3px; font: 11px Verdana, sans-serif; background: #fffaf0; color: #5a2800; }
.ib-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ib-head .bz-name { font-size: 12px; }
/* The listing page: the item column gets the room for two 176 px windows side by side, as in the prototype. */
.ib-detail .bz-detail-left { flex: 1 1 384px; }
.ib-detail .bz-detail-right { flex: 0 1 280px; }
.ib-bags { display: grid; grid-template-columns: repeat(auto-fill, 176px); justify-content: center; align-items: start; gap: 8px; }
.ib-bag { width: 176px; box-sizing: border-box; }
.ib-bag .bz-bag-grid { grid-template-columns: repeat(4, 36px); justify-content: center; }
.ib-bag .bz-bag-grid.ib-one { grid-template-columns: 36px; }
.ib-bag .bz-bag-slot.ib-sub { border-color: #7aa0c8; }
.ib-total { margin: 8px 0 0; font-size: 11px; color: #5a2800; font-weight: 700; text-align: center; }
.ib-deliver { background: #f1e0c6; border: 1px solid #d4c0a1; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.ib-char { display: flex; gap: 6px; align-items: flex-start; padding: 6px 8px; border: 1px solid #d4c0a1; border-radius: 3px; cursor: pointer; }
.ib-char:has(input:checked) { background: #fff6dc; border-color: #720000; }
.ib-char small { display: block; font-size: 10px; color: #7d5a38; }
.ib-line { font-weight: 700; color: #2e5f94; }
.ib-howto { margin-bottom: 10px; }
.ib-st { display: block; }
.ib-st-active { color: #118a22; }
.ib-st-sold, .ib-st-delivered, .ib-st-released, .ib-st-paid_out { color: #2e5f94; }
.ib-st-ended, .ib-st-returned { color: #7d5a38; }
.ib-st-cancelled, .ib-st-reversed, .ib-st-rolled_back, .ib-st-held { color: #a02020; }
@media (max-width: 600px) {
  table.tibia.ib-list td.ib-c-img { grid-row: 1 / span 3; }
  table.tibia.ib-list td.ib-c-seller { grid-column: 2 / 4; width: auto; }
  .ib-search input[type=text] { width: 100%; }
}

/* The heading's crumb, right-aligned as in the prototype. */
.ib-heading .ib-crumb { float: right; margin: 34px 6px 0 0; font-size: 11px; color: #7d5a38; }
/* Rookgaard characters are listed and can not be picked. */
.ib-char.ib-rook { opacity: .55; cursor: not-allowed; }
.ib-char.ib-rook small { color: #a02020; }
.ib-checkout-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }