/* ==========================================================================
   Character Bazaar — /bazaar (system/pages/bazaar.php).

   Parchment tables (parchment.css, loaded before this sheet) for every frame
   and the navigation row; parchment keys for the controls; the site's green
   button for the one thing you press to act. Everything else is Tibia list
   rows in the theme's Verdana and colours. See docs/site-style-guide.md — this
   page follows the Highscores / Downloads idiom, and the Item Bazaar's
   ib-sprite exemption in mobile.css is reused for the equipment sprites.

   Two site-wide constraints:
   1. mobile.css forces 13px on every #ContentColumn div/span/a/p and
      width:auto/height:auto on every img, all !important. The media block at
      the foot disarms that inside .cb-shell and restates only what changes.
   2. basic.css's :focus { outline: dotted 1px } fires on mouse click; the
      mouse case is switched off and a gold ring drawn for the keyboard.
   ========================================================================== */
.cb-shell {
	--cb-ink: #5A2800;
	--cb-muted: #6b5b41;
	--cb-faint: #8a7a5c;
	--cb-gold: #a8873a;
	--cb-money: #4a3410;
	--cb-gain: #2c6b30;
	--cb-warn: #a56a00;
	--cb-urgent: #a8241f;
	--cb-key: linear-gradient(to bottom, #fdf6dc, #ecdcb6);
	--cb-key-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(90, 66, 26, .12), 0 1px 1px rgba(90, 66, 26, .22);
	--cb-field: #fcf7ea;
	--cb-field-shadow: inset 0 1px 3px rgba(90, 66, 26, .28);

	position: relative; margin: 0; padding: 0 2px;
	color: var(--cb-ink);
	font: 10pt/1.45 Verdana, Arial, sans-serif;
}
.cb-shell *, .cb-shell *::before, .cb-shell *::after { box-sizing: border-box; }
.cb-shell :focus:not(:focus-visible) { outline: none; }
.cb-shell :focus-visible { outline: 2px solid #d9b34e; outline-offset: 1px; }
.cb-shell a { color: #004294; font-weight: bold; text-decoration: none; }
.cb-shell a:hover { color: #0063DC; text-decoration: underline; }
.cb-shell h2 { margin: 0; }
.cb-quiet { color: var(--cb-faint); }

/* ── Navigation: Tibia list links, the open one brown behind the bullet ── */
.cb-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 5px 8px; background-color: #f1e0c6; }
.cb-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.cb-nav-links a { display: inline-block; padding: 3px 8px 3px 20px; color: #004294; font-size: 10pt; font-weight: bold; line-height: 18px; text-decoration: none; white-space: nowrap; }
.cb-nav-links a:hover { color: #0063DC; text-decoration: underline; }
.cb-nav-links a.is-current { color: var(--cb-ink); text-decoration: none; cursor: default; background: url(images/global/content/bullet.gif) no-repeat 4px center; }
.cb-count { color: #7a5a30; font-size: 8pt; font-weight: normal; font-variant-numeric: tabular-nums; }

/* ── Filters: parchment keys and fields in one Even row ─────────────────── */
.cb-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; padding: 8px 10px 10px; background-color: #d4c0a1; }
.cb-filter { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-filter > span:first-child { color: var(--cb-ink); font-size: 8pt; font-weight: bold; line-height: 1; }
.cb-filter-name { flex: 1 1 160px; }
.cb-range { display: flex; align-items: center; gap: 4px; }
.cb-range i { color: var(--cb-muted); font-style: normal; }
.cb-filter-actions { flex-direction: row; align-items: center; gap: 10px; align-self: flex-end; }

.cb-field {
	height: 28px; padding: 0 8px;
	border: 1px solid var(--cb-gold);
	background: var(--cb-field);
	box-shadow: var(--cb-field-shadow);
	color: var(--cb-ink); font: 10pt Verdana, Arial, sans-serif;
	outline: 0;
}
.cb-field:focus { box-shadow: var(--cb-field-shadow), 0 0 0 3px rgba(217, 179, 78, .35); }
.cb-field::placeholder { color: #a8987a; }
.cb-field-name { width: 100%; }
.cb-field-num { width: 74px; -moz-appearance: textfield; }
.cb-field-num::-webkit-outer-spin-button, .cb-field-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* appearance:none so the OS widget never shows; the caret is drawn inline. */
.cb-key {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	max-width: 100%; height: 28px; padding: 0 22px 0 9px;
	border: 1px solid var(--cb-gold);
	background-color: #f3e6c6;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%235A2800'/%3E%3C/svg%3E"), var(--cb-key);
	background-repeat: no-repeat, repeat;
	background-position: right 7px center, 0 0;
	box-shadow: var(--cb-key-shadow);
	color: var(--cb-ink); font: bold 9pt Verdana, Arial, sans-serif; cursor: pointer;
}
.cb-key:hover { border-color: #8a6f33; }
.cb-key option { background: #fdf8ec; color: var(--cb-ink); font-weight: normal; }
.cb-key-button { padding: 0 14px; background-image: var(--cb-key); }
.cb-key-button:active { background-image: linear-gradient(to bottom, #d9b34e, #f7e08c); box-shadow: inset 0 1px 3px rgba(90, 66, 26, .35); color: var(--cb-money); }
.cb-clear { font-size: 9pt; }

/* ── The green button: the site's sbutton_green in CSS ──────────────────── */
.cb-btn-green {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	height: 28px; padding: 0 14px;
	border: 1px solid #14210f;
	background: #3f6a26;
	background: linear-gradient(to bottom, #7aa54a 0%, #4b7a2c 46%, #33591f 54%, #2a4a1b 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 1px rgba(0, 0, 0, .35);
	color: #ffd18c !important; font: bold 11px/1 Verdana, Arial, sans-serif; white-space: nowrap;
	text-decoration: none !important; cursor: pointer;
	text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
}
.cb-btn-green:hover { background: linear-gradient(to bottom, #8cb85a 0%, #588c36 46%, #3d6826 54%, #325722 100%); color: #ffe0a8 !important; }
.cb-btn-green:active { box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45); }

/* ── One auction, one Tibia row ────────────────────────────────────────── */
.cb-list { list-style: none; margin: 0; padding: 0; }
.cb-auction { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.cb-auction.is-ended .cb-who, .cb-auction.is-ended .cb-price { opacity: .82; }

/* A portrait sits in a well, like a sprite in an inventory slot. */
.cb-portrait {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	width: 68px; height: 68px;
	border: 1px solid #8a6f33; background: #efe6cc;
	box-shadow: var(--cb-field-shadow);
	text-decoration: none !important;
}
.cb-portrait img { display: block; max-width: 64px; max-height: 64px; image-rendering: pixelated; }
.cb-portrait-big { width: 76px; height: 76px; }

.cb-who { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-name { font-size: 11pt; }
.cb-meta { color: var(--cb-muted); font-size: 8pt; }
.cb-relation { font-size: 8pt; font-weight: bold; color: var(--cb-muted); }
.cb-relation.is-seller { color: #7a5a30; }
.cb-relation.is-leading, .cb-relation.is-won { color: var(--cb-gain); }
.cb-relation.is-outbid { color: var(--cb-urgent); }

.cb-price { flex: 0 0 150px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.cb-price-caption { color: var(--cb-muted); font-size: 8pt; }
/* A list row's Buy Now: under the price, in the site's gain green. */
.cb-buynow-line { display: inline-flex; align-items: center; gap: 4px; color: var(--cb-gain); font-size: 8pt; font-weight: bold; white-space: nowrap; }
.cb-buynow-line .cb-amount { color: var(--cb-gain); }
.cb-amount { display: inline-flex; align-items: center; gap: 4px; color: var(--cb-money); font-weight: bold; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-amount-big { font-size: 15pt; line-height: 1.1; }
.cb-coin { width: 12px; height: 12px; image-rendering: pixelated; vertical-align: middle; }
.cb-bids { color: var(--cb-faint); font-size: 8pt; }

.cb-when { flex: 0 0 140px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.cb-clock { font-size: 9pt; font-weight: bold; color: var(--cb-muted); font-variant-numeric: tabular-nums; }
.cb-clock.is-soon { color: var(--cb-warn); }
.cb-clock.is-urgent { color: var(--cb-urgent); }
.cb-ended { font-size: 9pt; font-weight: bold; color: var(--cb-muted); }
.cb-ended-when { color: var(--cb-faint); font-size: 8pt; }

.cb-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; color: var(--cb-muted); font-size: 9pt; background-color: #f1e0c6; }
.cb-pager > span { min-width: 90px; }
.cb-pager > span:last-child { text-align: right; }
.cb-empty { padding: 12px 10px; color: var(--cb-muted); }
.cb-message { padding: 7px 10px; font-weight: bold; }
.cb-message.is-error { color: var(--cb-urgent); }
.cb-message.is-ok { color: var(--cb-gain); }

/* ── How a sale works: a numeral in the gutter, a title, one paragraph ───── */
.cb-steps { list-style: none; margin: 0; padding: 0; }
.cb-steps li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px 8px 12px; }
.cb-steps li > b { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border: 1px solid #8a6f33; background: #efe6cc; box-shadow: var(--cb-field-shadow); color: var(--cb-ink); font-size: 10pt; font-weight: bold; line-height: 20px; text-align: center; }
.cb-steps strong { display: block; font-size: 10pt; font-weight: bold; }
.cb-steps span { display: block; margin-top: 1px; color: var(--cb-muted); font-size: 9pt; line-height: 1.45; }

/* ── Detail: head, price band, bid row ─────────────────────────────────── */
.cb-head { display: flex; align-items: center; gap: 14px; padding: 10px; }
.cb-head-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-title { color: var(--cb-ink); font: bold 14pt/1.2 Verdana, Arial, sans-serif; }
.cb-state { color: var(--cb-muted); font-size: 9pt; font-weight: bold; }
.cb-state.is-live { color: var(--cb-gain); }

.cb-band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 10px 12px; }
.cb-band-price { display: flex; flex-direction: column; gap: 2px; }
.cb-band-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.cb-band-facts > div { display: flex; flex-direction: column; gap: 1px; }
.cb-band-facts dt { color: var(--cb-muted); font-size: 8pt; }
.cb-band-facts dd { margin: 0; color: var(--cb-ink); font-size: 9pt; font-weight: bold; font-variant-numeric: tabular-nums; }

.cb-bidrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px; }
.cb-bidform, .cb-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.cb-field-bid { width: 150px; font-weight: bold; }
.cb-btn-bid { height: 28px; padding: 0 20px; align-self: flex-end; }
.cb-note { color: var(--cb-muted); font-size: 9pt; align-self: center; }

/* ── Two tables side by side on a wide screen ──────────────────────────── */
.cb-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
.cb-columns > .pt-box, .cb-column > .pt-box:first-child { margin-top: 14px; }
.cb-column { min-width: 0; }

/* Facts: the character page's label/value rows. */
.cb-facts { width: 100%; border-collapse: collapse; }
.cb-facts td { padding: 4px 10px; color: var(--cb-ink); font-size: 10pt; line-height: 1.45; vertical-align: top; background: #f1e0c6; font-variant-numeric: tabular-nums; }
.cb-facts tr:nth-child(even) td { background: #d4c0a1; }
.cb-facts .cb-label { width: 46%; font-weight: bold; white-space: nowrap; }
.cb-bids-table .cb-label { width: 55%; }
.cb-bid-when { color: var(--cb-muted); font-size: 9pt; }

/* Equipment: the inventory grid, then the worn items by name. */
.cb-gear { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; padding: 10px; }
.cb-gear-grid { display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; flex: 0 0 auto; }
.cb-slot {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border: 1px solid #8a6f33; background: #efe6cc;
	box-shadow: var(--cb-field-shadow);
}
.cb-slot img { display: block; width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.cb-slot.is-empty img { opacity: .55; }
.cb-slot-feet { grid-column: 2; }
.cb-slot-count { position: absolute; right: 2px; bottom: 1px; color: var(--cb-ink); font-size: 8pt; font-weight: bold; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
.cb-noimg { width: 20px; height: 20px; border: 1px dashed #8a6f33; opacity: .6; }
.cb-gear-list { flex: 1 1 200px; list-style: none; margin: 0; padding: 0; font-size: 9pt; }
.cb-gear-list li { padding: 2px 0; }
.cb-gear-slot { display: inline-block; min-width: 82px; color: var(--cb-muted); font-size: 8pt; }
.cb-gear-none { color: var(--cb-muted); }

.cb-description { padding: 10px; white-space: normal; overflow-wrap: anywhere; }
.cb-back { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding: 0 4px; font-size: 10pt; }

/* ── Phones ─────────────────────────────────────────────────────────────── */
/* Buy Now: the same green button as a bid, one step louder, on its own row. */
.cb-buynow-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 10px 10px; }
.cb-btn-buynow { height: 32px; padding: 0 18px; font-size: 12px; }
.cb-buynow-price { color: var(--cb-money); font-weight: bold; }

/* Bao's Ledger: the tracks bought, one row each. A full-width box, because the
   effect line is prose and reads badly in a half-width column. */
.cb-single { grid-template-columns: minmax(0, 1fr); }
.cb-ledger-list { list-style: none; margin: 0; padding: 6px 10px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.cb-ledger-row {
	display: flex; flex-direction: column; gap: 1px;
	padding: 6px 8px;
	border: 1px solid #8a6f33; background: #efe6cc;
	box-shadow: var(--cb-field-shadow);
}
.cb-ledger-row.is-mastered { border-color: #6f8f3f; background: #e9edcb; }
.cb-ledger-name { color: var(--cb-ink); font-size: 9pt; }
.cb-ledger-rank { color: var(--cb-muted); font-size: 8pt; }
.cb-ledger-effect { color: var(--cb-gain); font-size: 8pt; font-weight: bold; }

/* Wardrobe: the outfits and mounts that transfer with the character.
   The art comes from the outfit image service at whatever size it likes, so
   every cell is a fixed box and the image is contained inside it -- and the
   images carry .ib-sprite, which is the exemption mobile.css already grants
   the Bazaar sprites from its blanket `#ContentColumn img { width:auto
   !important }` and `td img { max-height:34px !important }` rules. Without
   that class both rules match (this grid sits inside the content table) and
   one of them stretches the art. See the note above .cb-slot img. */
.cb-wardrobe .pt-inner { padding: 0; }
.cb-wardrobe-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px; margin: 0; padding: 10px; list-style: none;
}
.cb-wardrobe-cell {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 6px 3px 5px;
	border: 1px solid #8a6f33; background: #efe6cc;
	box-shadow: var(--cb-field-shadow);
	text-align: center;
}
.cb-wardrobe-cell.is-complete { border-color: #6f8f3f; background: #e9edcb; }
.cb-wardrobe-art {
	display: flex; align-items: flex-end; justify-content: center;
	width: 64px; height: 64px;
}
.cb-wardrobe-art img {
	display: block; max-width: 64px; max-height: 64px;
	image-rendering: pixelated; object-fit: contain;
}
/* Wrap rather than ellipsis: "Forest Warden" clipped to "Forest War..." in a
   78px cell, and an outfit name is the whole point of the cell. */
.cb-wardrobe-name {
	max-width: 100%; color: var(--cb-ink); font-size: 8pt; font-weight: bold;
	line-height: 1.2; overflow-wrap: anywhere;
}
.cb-wardrobe-note { margin-top: auto; padding-top: 2px; color: var(--cb-muted); font-size: 7.5pt; }

@media (max-width: 900px) {
	/* The caption note has no room beside a folded-width caption. */
	.cb-shell .pt-cap small { display: none; }
	#ContentColumn .cb-shell * { font-size: inherit !important; line-height: inherit !important; }
	#ContentColumn .cb-shell { font-size: 13px !important; line-height: 1.45 !important; }
	#ContentColumn .cb-nav-links a { font-size: 13px !important; line-height: 20px !important; padding: 6px 8px 6px 20px; }
	#ContentColumn .cb-meta, #ContentColumn .cb-relation, #ContentColumn .cb-price-caption, #ContentColumn .cb-bids,
	#ContentColumn .cb-ended-when, #ContentColumn .cb-count, #ContentColumn .cb-filter > span:first-child,
	#ContentColumn .cb-band-facts dt, #ContentColumn .cb-gear-slot, #ContentColumn .cb-steps span,
	#ContentColumn .cb-note, #ContentColumn .cb-bid-when { font-size: 11px !important; }
	#ContentColumn .cb-title { font-size: 17px !important; line-height: 1.2 !important; }
	#ContentColumn .cb-amount-big { font-size: 19px !important; line-height: 1.1 !important; }
	#ContentColumn .cb-btn-green { font-size: 12px !important; line-height: 1 !important; }
	.cb-field, .cb-key, .cb-btn-green, .cb-btn-bid { height: 34px; }
	.cb-filters { gap: 8px 10px; padding: 8px; }
	.cb-filter-name { flex-basis: 100%; }
	.cb-auction { flex-wrap: wrap; gap: 8px 10px; padding: 8px; }
	.cb-who { flex: 1 1 120px; }
	.cb-price { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; text-align: left; }
	.cb-when { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; }
	.cb-columns { grid-template-columns: minmax(0, 1fr); }
	.cb-facts .cb-label { width: 50%; }
	.cb-gear-list { flex-basis: 100%; }
	.cb-wardrobe-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; padding: 8px; }
	.cb-wardrobe-art { width: 52px; height: 52px; }
	.cb-wardrobe-art img { max-width: 52px; max-height: 52px; }
}