/* ============================================================
   TRIMERA CHAR BAZAAR (charbazaar.php, bazaar_*.php, admin_bazaar.php)
   Loaded by layout/overall/header.php on those pages only. Built from the
   prototype (02-prototipo/Char Bazaar.dc.html) on the site's own palette:
   #720000 titles, #f1e0c6 / #d4c0a1 parchment, #505050 table heads, the three
   dark panels #3b3b3b / #2a2a2a / #555 / #1e1e1e, Verdana 10px #c0c0c0.
   ============================================================ */

.bz-intro { margin: 0 0 10px; }
.bz-small { font-size: 10px; color: #7d5a38; }
.bz-muted { font-size: 11px; color: #7d5a38; }
.bz-green { color: #118a22; font-weight: 700; }
.bz-red { color: #c54242; font-weight: 700; }

/* ---- filter bar (list) ---- */
.bz-filter {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: #f1e0c6; border: 1px solid #d4c0a1; padding: 8px 10px; margin-bottom: 10px;
}
.bz-filter b { font-size: 11px; }
.bz-filter .bz-spacer { flex: 1; }
.bz-tab {
  display: inline-block; padding: 3px 10px; font-size: 11px; font-weight: 700;
  border: 1px solid #7d5a38; border-radius: 3px; background: #fff; color: #5a2800 !important;
  text-decoration: none !important;
}
.bz-tab.on { background: #720000; color: #fff !important; }

/* ---- the list ---- */
table.tibia.bz-list td { vertical-align: middle; }
table.tibia.bz-list td.bz-outfit-cell { width: 44px; text-align: center; padding: 3px; }
#content table.tibia.bz-list td.bz-outfit-cell img {
  display: block; width: 36px; height: 36px; margin: 0 auto; object-fit: contain; image-rendering: pixelated;
}
.bz-name { color: #720000; font-weight: 700; }
.bz-sub { display: block; font-size: 10px; color: #7d5a38; }
.bz-skull-badge {
  display: inline-block; margin-top: 2px; font-size: 9px; font-weight: 700; color: #fff;
  background: #b3121b; border-radius: 3px; padding: 0 5px;
}
.bz-price { font-weight: 700; color: #118a22; white-space: nowrap; }
.bz-view {
  display: inline-block; background: #2e5f94 url(../images/button-bg.jpg); border-radius: 7px;
  border-top: 1px solid #848484; border-bottom: 1px solid #424242; color: #fff !important;
  font-size: 10px; font-weight: 700; padding: 4px 14px; text-decoration: none !important; white-space: nowrap;
}
.bz-count { font-size: 11px; color: #7d5a38; margin: 6px 0 16px; }
.bz-empty { text-align: center; padding: 14px !important; }

/* Narrow screens: every listing becomes a card (spec §9.11.8). */
@media (max-width: 600px) {
  table.tibia.bz-list, table.tibia.bz-list tbody { display: block; background: transparent; }
  table.tibia.bz-list tr.bz-head { display: none; }
  table.tibia.bz-list tr {
    display: grid; grid-template-columns: 44px 1fr auto; gap: 2px 8px; align-items: center;
    background: #f1e0c6; border: 1px solid #d4c0a1; margin-bottom: 6px; padding: 6px;
  }
  table.tibia.bz-list tr td { background: transparent !important; padding: 0 !important; }
  table.tibia.bz-list td.bz-outfit-cell { grid-row: 1 / span 3; }
  table.tibia.bz-list td.bz-c-name { grid-column: 2 / 4; }
  table.tibia.bz-list td.bz-c-level::before { content: "Level "; color: #7d5a38; }
  table.tibia.bz-list td.bz-c-ends::before { content: "Ends in "; color: #7d5a38; }
  table.tibia.bz-list td.bz-c-view { grid-column: 3; grid-row: 3; text-align: right; }
  table.tibia.bz-list td.bz-c-price { grid-column: 3; grid-row: 2; text-align: right; }
}

/* ---- the listing page ---- */
/* the two columns stretch to one height, so the price box and the equipment container end on the same line */
.bz-detail { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.bz-detail-left > .bz-pricebox, .bz-detail-right > .bz-panels { flex-grow: 1; }
.bz-detail-left { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bz-detail-right { flex: 0 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
table.tibia.bz-sheet { margin-bottom: 0; }
table.tibia.bz-sheet td:first-child { width: 130px; font-weight: 700; }
.bz-notice {
  background: #f1e0c6; border: 1px solid #d4c0a1; padding: 10px 12px; font-size: 11px; color: #7d5a38;
}
/* every bazaar table header is centred, numbers included (th.num is right-aligned site-wide) */
table.tibia.bz-table th { text-align: center !important; }
/* My listings and its receipts: values centred too, the character name stays left */
table.tibia.bz-center td { text-align: center !important; }
table.tibia.bz-center td.bz-c-char { text-align: left !important; }

/* #content ul (aldeia.css) sets margin-left 22px and padding 0: beat it, or the bullets fall outside the box */
#content ul.bz-notice { margin: 0; padding: 10px 12px 10px 30px; list-style: disc outside; }
#content ul.bz-notice li { margin: 2px 0; }

/* the beige block with the three dark panels */
.bz-panels {
  background: #f1e0c6; border: 1px solid #d4c0a1; padding: 12px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: center;
}
.bz-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bz-panel > b { font-size: 11px; color: #720000; }

.bz-eq {
  display: grid; grid-template-columns: repeat(3, 40px); gap: 3px; padding: 6px;
  background: #3b3b3b; border: 1px solid #1e1e1e; border-radius: 3px;
}
.bz-slot {
  position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: #2a2a2a; border: 1px solid #555; box-shadow: inset 1px 1px 0 #1a1a1a; box-sizing: border-box;
}
.bz-slot.bz-none { background: transparent; border-color: transparent; box-shadow: none; }
/* An empty slot: the game's own empty-slot picture (client data/images/game/slots, 34 px). */
.bz-slot.bz-slot-empty { background-color: #2a2a2a; background-position: center; background-repeat: no-repeat; background-size: 34px 34px; }
/* An item whose picture did not load is still there: a mark, never an empty slot. */
.bz-slot.bz-noimg::after, .bz-bag-slot.bz-noimg::after { content: "?"; color: #c0c0c0; font-weight: 700; font-size: 14px; }
#content .bz-slot img, #content .bz-bag-slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.bz-qty {
  position: absolute; right: 2px; bottom: 0; font-size: 9px; font-weight: 700; color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.bz-skills {
  width: 186px; box-sizing: border-box; display: flex; flex-direction: column; padding: 6px 8px;
  background: #3b3b3b; border: 1px solid #1e1e1e; border-radius: 3px;
  font-family: Verdana, Tahoma, sans-serif; font-size: 10px; color: #c0c0c0;
}
.bz-skill { display: flex; flex-direction: column; gap: 1px; padding: 1px 0; }
.bz-skill.bz-gap { padding-top: 6px; }
.bz-skill-row { display: flex; justify-content: space-between; gap: 6px; }
.bz-skill-row b { color: #e8e8e8; }
.bz-bar { height: 3px; background: #1c1c1c; border: 1px solid #111; }
.bz-bar span { display: block; height: 100%; background: #c03030; }
.bz-bar.bz-magic span { background: #3070d0; }

.bz-bag { display: flex; flex-direction: column; background: #3b3b3b; border: 1px solid #1e1e1e; border-radius: 3px; }
.bz-bag-title {
  display: flex; align-items: center; gap: 5px; padding: 2px 6px;
  background: linear-gradient(180deg, #5a5a5a, #404040); border-bottom: 1px solid #1e1e1e;
}
#content .bz-bag-title img { width: 16px; height: 16px; image-rendering: pixelated; }
.bz-bag-title span { font-size: 10px; color: #e0e0e0; flex: 1; }
.bz-bag-title small { font-size: 9px; color: #9a9a9a; }
.bz-bag-grid { display: grid; grid-template-columns: repeat(4, 36px); gap: 2px; padding: 5px; }
.bz-bag-slot {
  position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: #2a2a2a; border: 1px solid #555; box-shadow: inset 1px 1px 0 #1a1a1a; box-sizing: border-box;
}

/* the price box */
.bz-pricebox {
  background: #fff8e6; border: 2px solid #720000; border-radius: 4px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.bz-pricebox .bz-price-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bz-pricebox .bz-price-line b { font-size: 11px; }
.bz-price-big { font-size: 22px; font-weight: 700; color: #118a22; }
#content ul.bz-paynote { margin: 0; padding-left: 16px; font-size: 10px; color: #7d5a38; }
#content ul.bz-paynote li { margin: 1px 0; }
/* the box's last line, pinned to its bottom edge */
.bz-pricebox .bz-ends { margin-top: auto; text-align: center; font-size: 11px; font-weight: 700; color: #5a2800; }
.bz-skull {
  display: flex; flex-direction: column; gap: 6px; background: #fff; border-left: 10px solid #b3121b;
  border-bottom: 1px solid #604949; padding: 6px 10px; font-size: 11px; color: #333;
}
.bz-skull b { color: #b3121b; }
.bz-skull label { display: flex; gap: 6px; align-items: center; font-weight: 700; cursor: pointer; }
.bz-block-msg {
  background: #fff; border-left: 10px solid #e07c7c; border-bottom: 1px solid #604949;
  padding: 4px 10px; font-weight: 700; font-size: 11px; color: #333;
}
.bz-pay { display: flex; flex-direction: column; gap: 6px; }
.bz-btn-pix, .bz-btn-list {
  display: block; text-align: center; padding: 8px 20px; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, #4fae3d 0%, #2e8022 55%, #206317 100%); border: 1px solid #12400f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.35);
  color: #fff !important; font-family: martelregular, sans-serif; font-size: 14px; letter-spacing: 1px;
  text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.65); text-decoration: none !important;
}
.bz-btn-list { display: inline-block; }
.bz-btn-pix[disabled], .bz-btn-card[disabled], .bz-btn-list[disabled] { opacity: .5; cursor: not-allowed; }
.bz-btn-card {
  display: block; text-align: center; padding: 7px; border-radius: 7px; cursor: pointer;
  background: #2e5f94 url(../images/button-bg.jpg); border: none; border-top: 1px solid #848484;
  border-bottom: 1px solid #424242; color: #fff !important; font-size: 11px; font-weight: 700;
  text-decoration: none !important; font-family: Verdana, Tahoma, sans-serif;
}

/* ---- confirmation modals (layout doc §4) ---- */
.bz-modal-box {
  width: 100%; max-width: 400px; background: #f1e0c6; border: 2px solid #720000; border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.6); display: flex; flex-direction: column; max-height: 92vh; overflow: auto;
}
.bz-modal-title { background: #720000; color: #fff; font-family: martelregular, serif; font-size: 15px; padding: 8px 12px; }
.bz-modal-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 11px; color: #5a2800; margin: 0; }
.bz-modal-body p { margin: 0; }
.bz-modal-body label { font-weight: 700; font-size: 11px; }
.bz-modal-body input[type=text] { width: 100%; box-sizing: border-box; min-width: 0 !important; }
.bz-modal-body .bz-check { display: flex; gap: 6px; align-items: flex-start; font-weight: 400; }
.bz-turnstile { min-height: 65px; }

/* the listing's Spells modal: wider, two columns of groups on a desktop, one on a phone; only the list scrolls */
.bz-modal-box.bz-wide { max-width: 560px; }
.bz-sp-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-weight: 700; }
.bz-sp-tabs { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
button.bz-tab { cursor: pointer; font-family: Verdana, Tahoma, sans-serif; padding: 1px 8px; font-size: 10px; }
.bz-sp-scroll { max-height: min(60vh, 460px); overflow-y: auto; background: #fff8e6; border: 1px solid #d4c0a1; }
.bz-sp-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; padding: 10px; }
#content .bz-sp-group h4 {
  margin: 0 0 3px; padding-bottom: 2px; border-bottom: 1px solid #d4c0a1;
  font-size: 10px; color: #720000; text-transform: uppercase; letter-spacing: .06em;
}
#content .bz-sp-group ul { list-style: none; margin: 0; padding: 0; }
.bz-sp { display: grid; grid-template-columns: 12px 1fr auto; gap: 6px; align-items: baseline; padding: 1px 0; }
.bz-sp-mk { font-weight: 700; color: #118a22; }
.bz-sp-nm { font-weight: 700; color: #5a2800; }
.bz-sp-nm small { font-weight: 400; color: #7d5a38; margin-left: 4px; }
.bz-sp-wd { font-style: italic; color: #7d5a38; font-size: 10px; white-space: nowrap; }
.bz-sp.off .bz-sp-mk { color: #b39b7c; }
.bz-sp.off .bz-sp-nm, .bz-sp.off .bz-sp-wd { color: #a8916f; font-weight: 400; }
.bz-sp[hidden], .bz-sp-group[hidden], .bz-sp-none[hidden] { display: none; }
#content .bz-sp-none { margin: 0; padding: 10px; }
#content .bz-sp-foot { font-size: 10px; color: #7d5a38; }
.bz-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.bz-btn {
  display: inline-block; padding: 5px 14px; border-radius: 7px; border: none; cursor: pointer;
  color: #fff !important; font-size: 10px; font-weight: 700; font-family: Verdana, Tahoma, sans-serif;
  text-decoration: none !important;
}
.bz-btn-back { background: #7d5a38; }
.bz-btn-green { background: #2e8022; }
.bz-btn-blue { background: #2e5f94; }
.bz-btn-red { background: #8b2a1f; }
.bz-btn-mp { background: #009ee3; }
.bz-btn-brown { background: #7d5a38; }
.bz-btn-dark { background: #1e1e1e; }

/* ---- sell ---- */
.bz-sell { display: flex; flex-direction: column; gap: 14px; max-width: 660px; }
.bz-step { display: flex; flex-direction: column; gap: 6px; }
#content .bz-step h3 { margin: 0; color: #720000; font-size: 13px; }
.bz-box {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #f1e0c6;
  border: 1px solid #d4c0a1; padding: 10px 12px;
}
.bz-box > span { flex: 1 1 280px; font-size: 11px; }
.bz-methods { display: flex; flex-direction: column; background: #f1e0c6; border: 1px solid #d4c0a1; }
.bz-method { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid #d4c0a1; cursor: pointer; font-weight: 400; }
.bz-method input { margin-top: 2px; }
.bz-method-body { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.bz-method-kind { color: #7d5a38; }
.bz-method-acc { font-size: 11px; }
.bz-method-off { cursor: default; }
.bz-method-off b, .bz-method-off .bz-method-kind { opacity: .6; }
.bz-methods-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; }
.bz-sell-rest { display: flex; flex-direction: column; gap: 14px; }
.bz-received { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px 12px;
  background: #f1e0c6; border: 1px solid #d4c0a1; font-size: 12px; }
.bz-received > b { color: #720000; }
.bz-received-row { display: flex; flex-direction: column; gap: 2px; color: #7d5a38; }
.bz-received-ok { color: #118a22; font-weight: 700; }
.bz-received-row a, .bz-received-row code { font-weight: 400; font-size: 11px; word-break: break-all; overflow-wrap: anywhere; }
.bz-pending { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #f1e0c6; border: 1px solid #d4c0a1; border-left: 4px solid #2f5b8f; padding: 10px 14px; margin: 0 0 14px; }
.bz-pending-text { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.bz-pending-text b { color: #2f5b8f; font-size: 13px; }
.bz-pending .bz-btn { margin-left: auto; }
.bz-sell-rest.bz-locked { opacity: .45; pointer-events: none; user-select: none; }
table.tibia.bz-choose td.bz-radio { width: 28px; text-align: center; }
table.tibia.bz-choose tr.bz-chosen td { background: #fff !important; }
.bz-ok { color: #118a22; font-weight: 700; }
.bz-no { color: #c54242; font-weight: 700; }
.bz-sum { max-width: none; }
.bz-sum .bz-fee { color: #c54242; }
.bz-sum .bz-you { font-size: 14px; color: #118a22; }
.bz-confirm-box {
  background: #fff8e6; border: 2px solid #720000; border-radius: 4px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px; font-size: 11px;
}
.bz-confirm-box b { color: #720000; }
.bz-list-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- my listings ---- */
.bz-st-active { color: #1a5fb4; font-weight: 700; }
.bz-st-sold { color: #118a22; font-weight: 700; }
.bz-st-ended { color: #7d5a38; font-weight: 700; }
.bz-st-cancelled { color: #c54242; font-weight: 700; }

/* ---- staff review (admin_bazaar.php) ---- */
.bz-evidence { font-size: 10px; color: #5a2800; max-width: 360px; }
.bz-evidence b { color: #720000; }

/* ---- checkout ---- */
.bz-checkout { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.bz-paypanel {
  flex: 1 1 300px; background: #f1e0c6; border: 1px solid #d4c0a1; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center;
}
.bz-paypanel > b { color: #720000; font-size: 13px; }
.bz-qr { width: 190px; height: 190px; background: #fff; border: 1px solid #7d5a38; padding: 6px; box-sizing: border-box; }
#content .bz-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.bz-copy { display: flex; gap: 6px; width: 100%; max-width: 340px; }
.bz-copy input {
  flex: 1; min-width: 0 !important; background: #fff; border: 1px solid #7d5a38; padding: 4px 6px;
  font-size: 10px; color: #333;
}
.bz-copy-main { display: none; width: 100%; max-width: 340px; box-sizing: border-box; }
.bz-order { flex: 0 1 300px; }
table.tibia.bz-order-table td:last-child { text-align: right; font-weight: 700; }
/* On a phone the QR is for someone else's screen: copying the code is the way. */
@media (max-width: 600px) {
  .bz-copy-main { display: block; order: -1; }
  .bz-qr { width: 150px; height: 150px; }
}

/* ---- done ---- */
table.tibia.bz-what { max-width: 520px; }
table.tibia.bz-what td:last-child { text-align: right; font-weight: 700; }
.bz-support { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- staff ---- */
table.tibia.bz-admin td { font-size: 11px; }
.bz-admin-actions form { display: inline-block; margin: 0 4px 4px 0; }
.bz-admin-actions input[type=text] { min-width: 120px !important; }
pre.bz-json { white-space: pre-wrap; word-break: break-word; font-size: 10px; margin: 0; max-width: 420px; }

/* Dev simulation: the Pix layout stays, the answers sit under it (round 4c). */
.bz-qr-sim { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; font-weight: 700; color: #720000; background: repeating-linear-gradient(45deg, #fff, #fff 8px, #f1e0c6 8px, #f1e0c6 16px); }
.bz-sim-box { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed #720000; }
.bz-btn-sim { all: unset; cursor: pointer; padding: 6px 14px; border: 1px dashed #720000; border-radius: 5px; font-size: 10px; font-weight: 700; color: #720000; background: #fff8e6; text-align: center; }

/* ---- USDC/USDT on Polygon (feature-trimera-bazaar-crypto) ---- */
/* The same green button as Pix. */
.bz-btn-crypto {
  display: block; text-align: center; padding: 8px 20px; border-radius: 7px; cursor: pointer;
  background: linear-gradient(180deg, #4fae3d 0%, #2e8022 55%, #206317 100%); border: 1px solid #12400f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.35);
  color: #fff !important; font-family: martelregular, sans-serif; font-size: 14px; letter-spacing: 1px;
  text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.65); text-decoration: none !important;
}
.bz-btn-crypto[disabled] { opacity: .5; cursor: not-allowed; }
.bz-steps { display: flex; gap: 6px; font-size: 10px; font-weight: 700; }
.bz-steps span { padding: 2px 8px; border-radius: 8px; border: 1px solid #d4c0a1; color: #7d5a38; background: #fff8e6; }
.bz-steps span.on { background: #720000; border-color: #720000; color: #fff; }
.bz-steps span.done { background: #2e8022; border-color: #2e8022; color: #fff; }
.bz-crypto-amount { font-family: Verdana, Tahoma, sans-serif; font-weight: 700; font-size: 24px; color: #5a2800; letter-spacing: .5px; text-align: center; align-self: center; }
.bz-exchange { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #5a2800; background: #fff6e6; border: 1px solid #d4c0a1; padding: 6px 10px; max-width: 360px; text-align: left; }
.bz-exchange b { color: #2f5b8f; }
.bz-exchange-warn { font-weight: 700; color: #a33100; margin-top: 2px; }
.bz-exchange-seller { display: block; margin-top: 4px; color: #a33100; }
.bz-methods-tag { display: block; font-size: 10px; font-weight: 700; color: #2f5b8f; white-space: nowrap; }
.bz-methods-line { font-size: 12px; color: #5a2800; margin-top: 2px; }
.bz-methods-line b { color: #2f5b8f; }
.bz-crypto-ok { font-size: 11px; font-weight: 700; color: #118a22; }
#content ul.bz-crypto-warn { margin: 0; padding-left: 16px; text-align: left; font-size: 10px; color: #5a2800; max-width: 360px; }
#content ul.bz-crypto-warn li { margin: 2px 0; }
.bz-qr svg { width: 100%; height: 100%; display: block; }
.bz-btn-crypto .bz-slash { font-family: Verdana, sans-serif; margin: 0 1px; }