/* ============================================================================
   Item Bazaar
   ----------------------------------------------------------------------------
   Scoped stylesheet for the Item Bazaar. Loaded from system/pages/item-bazaar.php
   via the `head_end` placeholder, which puts it after basic.css AND mobile.css --
   so it wins on source order at equal specificity and needs no !important and no
   #ContentColumn prefixes. That is the whole point of it existing: the Bazaar's
   rules used to live inside mobile.css, where every one of them needed an ID
   prefix and an !important to survive that file's blanket type scale.

   Written mobile-first. The unprefixed rules ARE the phone layout; the media
   queries only add capability as the viewport earns it. That ordering is what
   keeps a phone from being served a shrunk-down desktop.

   Depends on the document being in standards mode (templates/backpackot/index.php
   sets the DOCTYPE). box-sizing and the percentage/flex maths below assume it.
   ========================================================================== */

.ib-page {
	/* Surfaces. The card is warm parchment against the theme's green stone;
	   the gold-bronze frame is the site's own chrome, not a new colour. */
	--ib-parchment: linear-gradient(180deg, #fbf4e2 0%, #f3e7cd 100%);
	--ib-frame: #9c7c43;
	--ib-frame-soft: #ddc99b;
	--ib-stone: #4a6b32;
	--ib-stone-ink: #f7e7b8;

	/* Ink. Four weights, no more -- anything needing a fifth is a sign the
	   card is carrying information it should not. */
	--ib-ink: #3d3018;
	--ib-ink-soft: #6b5b3c;
	--ib-ink-faint: #8a7a5c;
	--ib-gain: #2c6b30;

	/* Spacing scale. Everything below picks from these; no loose numbers. */
	--ib-1: 4px;
	--ib-2: 7px;
	--ib-3: 11px;
	--ib-4: 16px;
	--ib-5: 22px;

	/* Minimum comfortable touch target. Apple and Google both land near 44px;
	   the old 24px bid buttons were half a thumb. */
	--ib-tap: 44px;
}

/* ---------------------------------------------------------------- intro copy */
.ib-intro {
	margin: 0 0 var(--ib-3);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ib-ink-soft);
}

/* ---------------------------------------------------------------- filters
   On a phone this is the first thing between a player and the listings, so it
   stays two selects wide and never grows a third column it has no room for.
   auto-fit would collapse it to one column at 390px and push the first card a
   whole screen down. */
.ib-filterbar {
	background: rgba(255, 252, 244, .55);
	border: 1px solid var(--ib-frame-soft);
	border-radius: 5px;
	padding: var(--ib-3);
	margin-bottom: var(--ib-4);
}

.ib-filters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ib-2) var(--ib-3);
	align-items: end;
}

.ib-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.ib-field > span {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #5a4326;
	opacity: .85;
}

.ib-field select {
	width: 100%;
	max-width: 100%;
	min-height: 34px;
	padding: 4px 6px;
	font-size: 13px;
	border: 1px solid var(--ib-frame);
	border-radius: 4px;
	background: #fdf8ec;
	color: #33240f;
}

/* The action row spans both columns rather than sitting in one of them --
   a half-width Apply next to a stray checkbox reads as an afterthought. */
.ib-field-actions {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--ib-3);
	flex-wrap: wrap;
	margin-top: var(--ib-1);
}

.ib-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
	min-height: var(--ib-tap);
}
.ib-check input { margin: 0; width: 17px; height: 17px; }

.ib-filter-buttons { display: flex; align-items: center; gap: var(--ib-3); }

.ib-filterbtn {
	min-height: 38px;
	padding: 0 var(--ib-5);
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
	color: var(--ib-stone-ink);
	background: #3f5f36;
	border: 1px solid var(--ib-frame);
	border-radius: 4px;
}
.ib-filterbtn:hover { background: #4c7241; }

.ib-clearbtn {
	font-size: 12px;
	color: #5a4326;
	text-decoration: underline;
	white-space: nowrap;
	padding: var(--ib-2) 0;
}

/* ---------------------------------------------------------------- the grid
   ONE card per row on a phone. The previous layout put two 170px cards side by
   side, which is how the sprite ended up at 48px and the tier word at 8px --
   legible on a desk, not at arm's length on a train. A single column buys back
   enough width to show the item at a size worth looking at. */
.ib-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ib-3);
	align-items: stretch;
}

/* ---------------------------------------------------------------- the card */
.ib-card {
	min-width: 0;
	box-sizing: border-box;
	padding: 0;
	display: flex;
	flex-direction: column;
	background: var(--ib-parchment);
	border: 2px solid var(--ib-frame);
	border-radius: 5px;
	box-shadow: 0 3px 8px rgba(20, 40, 15, .35), inset 0 0 0 1px #e8d9b4;
	overflow: hidden;
}

/* Green stone caption -- the same asset the site's own panel titles use. */
.ib-cap {
	background: url(images/content/title-background-green.gif) repeat-x center;
	background-color: var(--ib-stone);
	border-bottom: 2px solid var(--ib-frame);
	color: var(--ib-stone-ink);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .3px;
	text-transform: uppercase;
	padding: var(--ib-1) var(--ib-2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ib-2);
	white-space: nowrap;
}
.ib-cap > span:first-child { opacity: .72; font-weight: normal; }
.ib-cap-time { color: #ffe9a8; }

/* The body is a flex column so the blocks inside can be REORDERED without
   touching the template. Source order is stats-then-bonuses because that is
   how the item description reads; but a buyer is shopping for the rarity roll,
   not for the base armour value every copy of the item shares. So bonuses come
   first visually and the base stats sit underneath as supporting detail. */
.ib-body {
	padding: var(--ib-3);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--ib-2);
}
.ib-card-head { order: 1; }
.ib-bonuses   { order: 2; }
.ib-stats     { order: 3; }
.ib-foot      { order: 4; }

/* ---- hero: sprite + identity ---- */
.ib-card-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ib-card-img {
	width: 104px;
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* The sprite's glow carries the rarity and has to land before the tier word is
   read. Three chained halos in the tier hue -- hot core, mid bloom, wide
   falloff -- compounding into one aura because each filter is cast from the
   previous layer's silhouette. --ib-glow scales every radius at once so the
   ladder climbs in loudness as well as hue; at 0 the radii collapse and the
   halos hide behind the sprite's own pixels, leaving just the grounded drop.
   Colour vars are bare "r,g,b" so one value can serve four alphas. */
.ib-card-img img {
	width: 96px;
	height: 96px;
	/* object-fit is armour, not decoration. Every sprite is a 64x64 square, so
	   this changes nothing today -- but the bug it prevents already happened
	   once: a stray "max-height: 34px !important" elsewhere clamped ONE
	   dimension while the width held, and the sprite rendered 96x34. A
	   one-dimension clamp against width+height STRETCHES; with object-fit the
	   worst case is letterboxing, which looks like a sizing choice rather than
	   a rendering fault. Cheap insurance against a rule nobody remembers. */
	object-fit: contain;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	filter:
		drop-shadow(0 0 calc(1.6px * var(--ib-glow, 0)) rgba(var(--ib-halo, 40, 60, 25), .60))
		drop-shadow(0 0 calc(7px   * var(--ib-glow, 0)) rgba(var(--ib-halo, 40, 60, 25), .45))
		drop-shadow(0 0 calc(16px  * var(--ib-glow, 0)) rgba(var(--ib-halo, 40, 60, 25), .26))
		drop-shadow(0 4px 6px rgba(var(--ib-drop, 40, 60, 25), .55));
}

.ib-noimg {
	width: 88px;
	height: 88px;
	border: 2px dashed #bda874;
	background: #eadfc0;
	border-radius: 5px;
}

.ib-card-title { margin-top: var(--ib-1); line-height: 1.25; }

.ib-tier {
	display: block;
	font-weight: bold;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .8px;
}

.ib-name {
	display: block;
	font-weight: bold;
	color: var(--ib-ink);
	font-size: 17px;
	line-height: 1.2;
}

.ib-class {
	display: inline-block;
	margin-top: var(--ib-1);
	padding: 2px 10px;
	background: var(--ib-stone);
	color: var(--ib-stone-ink);
	border: 1px solid var(--ib-frame);
	border-radius: 10px;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* ---- bonuses: the buy signal ---- */
.ib-bonuses {
	margin: 0;
	padding-top: var(--ib-2);
	border-top: 1px solid var(--ib-frame-soft);
	font-size: 13px;
	text-align: center;
}
.ib-bonus {
	color: var(--ib-gain);
	font-weight: bold;
	padding: 1px 0;
	line-height: 1.35;
}
.ib-note  { color: #7a6a4c; font-style: italic; font-size: 12px; }
.ib-empty { color: var(--ib-ink-faint); font-style: italic; font-size: 12px; }

/* ---- base stats: supporting detail, deliberately quiet ---- */
.ib-stats {
	margin: 0;
	padding-top: var(--ib-2);
	border-top: 1px solid var(--ib-frame-soft);
	font-size: 12px;
	color: var(--ib-ink-soft);
}
.ib-stats div { display: flex; justify-content: space-between; padding: 1px 0; }

/* ---- price + actions ---- */
.ib-foot {
	margin-top: auto;
	padding-top: var(--ib-2);
	border-top: 1px solid var(--ib-frame-soft);
	font-size: 12px;
}

/* Everything else on the card is centred, so a price pinned left read as
   misaligned. Stacked and centred: the amount leads, the bid count sits
   under it as the smaller supporting fact. */
.ib-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	margin-bottom: var(--ib-2);
}
.ib-amount { display: inline-flex; align-items: center; gap: 6px; }
.ib-price b { font-size: 19px; color: var(--ib-ink); line-height: 1.1; }
.ib-coin { width: 14px; height: 14px; image-rendering: pixelated; vertical-align: middle; }
.ib-bidcount { font-size: 11px; color: #7a6a4c; }

.ib-actions { text-align: center; }

.ib-bidrow { display: flex; gap: var(--ib-2); align-items: stretch; margin-bottom: var(--ib-2); }

.ib-bidinput {
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 8px;
	/* 16px keeps iOS Safari from zooming the page when the field is focused --
	   anything smaller and tapping "bid" throws the layout sideways. */
	font-size: 16px;
	font-weight: bold;
	color: #2f2515;
	border: 1px solid #7c6a49;
	border-radius: 3px;
	background: #fffaf0;
	text-align: right;
}

/* The sbutton sprites are a fixed 135x25 with bevelled end caps, so repeating
   them tiles the caps and produces visible seams. border-image 9-slices
   instead: the 10px ends are preserved and only the middle stretches, which is
   what lets one sprite serve both a narrow Bid and a full-width Buy Now. */
.ib-sbtn, .ib-buybtn, .ib-cancelbtn {
	cursor: pointer;
	min-height: 34px;
	color: #fff;
	font-weight: bold;
	font-size: 13px;
	letter-spacing: .3px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .55);
	background: transparent;
	border-style: solid;
	border-width: 0 10px;
	border-image-slice: 0 10 0 10 fill;
	border-image-width: 0 10px 0 10px;
	border-image-repeat: stretch;
}
.ib-sbtn   { flex: 0 0 auto; padding: 0 var(--ib-4); border-image-source: url(images/global/buttons/sbutton.gif); }
.ib-buybtn { display: block; width: 100%; padding: 0; border-image-source: url(images/global/buttons/sbutton_green.gif); }

/* Cancelling is a seller's escape hatch, not a headline action: the red sprite
   marks it destructive, the narrower width keeps it from competing with Bid
   and Buy Now on the cards around it. */
.ib-cancelbtn {
	padding: 0 var(--ib-4);
	margin-top: var(--ib-1);
	font-size: 12px;
	border-image-source: url(images/global/buttons/sbutton_red.gif);
}

.ib-sbtn:hover, .ib-buybtn:hover, .ib-cancelbtn:hover { filter: brightness(1.14); }
.ib-sbtn:active, .ib-buybtn:active, .ib-cancelbtn:active { filter: brightness(0.94); }

/* One notice for the whole page instead of the same sentence repeated on every
   card. Fifteen copies of "Log in to bid or buy" is not information, it is
   texture. */
.ib-loginnote {
	margin: 0 0 var(--ib-3);
	padding: var(--ib-2) var(--ib-3);
	background: rgba(255, 252, 244, .72);
	border: 1px solid var(--ib-frame-soft);
	border-left: 3px solid var(--ib-stone);
	border-radius: 4px;
	font-size: 13px;
	color: var(--ib-ink-soft);
}

/* ============================================================ wider viewports
   Everything above is the phone. These only add columns and tighten the type
   once there is room for them to be an improvement rather than a compromise. */

@media screen and (min-width: 560px) {
	.ib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ib-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ib-field-actions { grid-column: 1 / -1; }
}

@media screen and (min-width: 860px) {
	.ib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ib-filters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

	/* Pointer input: the 44px thumb targets can come back down to something
	   proportionate once a cursor is doing the aiming. */
	.ib-card { min-height: 330px; }
	.ib-card-img { width: 92px; height: 92px; }
	.ib-card-img img { width: 84px; height: 84px; }
	.ib-noimg { width: 76px; height: 76px; }
	.ib-name { font-size: 15px; }
	.ib-tier { font-size: 11px; }
	.ib-class { font-size: 9px; padding: 1px 9px; }
	.ib-bonuses { font-size: 11px; }
	.ib-stats { font-size: 10px; }
	.ib-price b { font-size: 16px; }
	.ib-check { min-height: 0; }
	.ib-field select { min-height: 0; padding: 3px 4px; font-size: 12px; }
	.ib-sbtn, .ib-buybtn { min-height: 25px; font-size: 12px; }
	.ib-bidinput { font-size: 13px; padding: 4px 6px; }
}

/* ---------------------------------------------------------------- pager
   Appended after the media queries deliberately: these are layout-invariant
   and reading them next to the grid rules would suggest they change with it. */
.ib-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ib-3);
	margin-top: var(--ib-4);
	padding: var(--ib-2) var(--ib-3);
	background: rgba(255, 252, 244, .55);
	border: 1px solid var(--ib-frame-soft);
	border-radius: 5px;
	font-size: 13px;
	color: var(--ib-ink-soft);
}
/* The count is the only part that must never wrap; the arrows can shrink. */
.ib-pager-count { text-align: center; white-space: nowrap; }
.ib-pager-side { flex: 1 1 0; min-width: 0; }
.ib-pager-next { text-align: right; }
.ib-pager a { font-weight: bold; padding: var(--ib-1) 0; display: inline-block; }