/* Modified 7/19/26 */
/**
 *
 * Ultimate Shop extension for the phpBB Forum Software package.
 *
 * Classic phpBB look: relies on prosilver's panels, tables and buttons.
 *
 * @copyright (c) phpBB Limited <https://www.phpbb.com>, phpBB.nl <https://www.phpbbextnl.be>, SpIdErPiGgY
 * @license GNU General Public License, version 2 (GPL-2.0)
 *
 */

/* Keep the submit input and cancel link centred on the same baseline. */
.shop-buy-confirm .submit-buttons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.shop-buy-confirm .submit-buttons > input[type="submit"],
.shop-buy-confirm .submit-buttons > a.button {
	float: none;
	margin: 0;
	vertical-align: middle;
}

/* Wallet summary line under the header */
.shop-wallet {
	margin: 0;
}

.shop-wallet dt {
	float: left;
	width: auto;
	font-weight: bold;
}

.shop-wallet dd {
	margin-left: 0;
}

/* Category / type filter bar */
.shop-filterbar {
	margin-bottom: 12px;
}

.shop-filter-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.shop-filter-row + .shop-filter-row {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(128, 128, 128, 0.35);
}

.shop-filter-label {
	flex: 0 0 90px;
	font-weight: bold;
	font-size: 1.1em;
}

.shop-filter-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.1em;
}

.shop-filter-links li {
	max-width: 100%;
}

.shop-filter-links a {
	display: block;
	padding: 3px 6px;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 2px;
	overflow-wrap: anywhere;
}

.shop-filter-links a:hover,
.shop-filter-links a:focus-visible,
.shop-filter-links a.is-active {
	border-color: currentColor;
	background-color: rgba(128, 128, 128, 0.15);
}

.shop-filter-links a.is-active {
	font-weight: bold;
}

.shop-stock-form {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.shop-stock-form label {
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

/* Inventory on the left, pagination on the right, just below search. */
.shop-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.shop-actions .pagination {
	float: none;
	margin-left: auto;
}

.shop-inventory-button {
	font-weight: bold;
}

.shop-row-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

/* Ultra Light's hover image is shorter than long shop descriptions.
   Stretch it vertically instead of exposing its blue fallback below it.
   Other themes without a hover image keep their existing hover colour. */
.shop-list ul.topiclist li.row:hover {
	background-size: auto 100%;
}

/* Item list rows */
.shop-row .shop-row-image {
	float: left;
	margin-right: 10px;
}

.shop-row .shop-row-image img {
	width: 60px;
	height: 60px;
	object-fit: contain;
	border: 2px solid transparent;
	border-radius: 3px;
	background-color: transparent;
	padding: 0;
	box-sizing: border-box;
}

/* Detail page: rarity text follows the rarity border colours; the
   category/type line is bold and inherits the theme colour instead of grey. */
.shop-detail-rarity.rarity-common-text { color: #c8c8c8; }
.shop-detail-rarity.rarity-rare-text { color: #2d84ff; }
.shop-detail-rarity.rarity-epic-text { color: #964cff; }
.shop-detail-rarity.rarity-legendary-text { color: #ffb52b; }

.shop-row.rarity-common .shop-row-image img {
	border-color: #c8c8c8;
}

.shop-row.rarity-rare .shop-row-image img {
	border-color: #2d84ff;
}

.shop-row.rarity-epic .shop-row-image img {
	border-color: #964cff;
}

.shop-row.rarity-legendary .shop-row-image img {
	border-color: #ffb52b;
}

.shop-row .shop-row-desc,
.shop-row .shop-row-meta {
	color: inherit;
	font-size: 1em;
	font-weight: bold;
}

.shop-soldout-note,
.shop-protected-note {
	color: #9c2727;
	font-size: 1.1em;
}

.shop-equipped-note {
	color: #8b5a00;
}

.shop-points-name {
	font-size: 1em;
	font-weight: normal;
}

/* Gift controls: button stacked above the inputs, no fieldset legend. */
.shop-gift-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	margin: 6px 0 0;
	border: 0;
	padding: 0;
}

.shop-gift-row .inputbox {
	margin: 0;
	max-width: 100%;
}

/* Upgrade ingredient counts */
.shop-ingredient.ok {
	color: #0b8a4b;
}

.shop-ingredient.missing {
	color: #b03030;
}

/* Item detail page */
.shop-detail-layout {
	display: table;
	width: 100%;
}

.shop-detail-image {
	display: table-cell;
	width: 260px;
	vertical-align: top;
	padding-right: 20px;
}

.shop-detail-image img {
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
	background-color: transparent;
	border: 2px solid transparent;
	border-radius: 3px;
	padding: 0;
	box-sizing: border-box;
}

.shop-detail-panel.rarity-common .shop-detail-image img {
	border-color: #c8c8c8;
}

.shop-detail-panel.rarity-rare .shop-detail-image img {
	border-color: #2d84ff;
}

.shop-detail-panel.rarity-epic .shop-detail-image img {
	border-color: #964cff;
}

.shop-detail-panel.rarity-legendary .shop-detail-image img {
	border-color: #ffb52b;
}

.shop-detail-info {
	display: table-cell;
	vertical-align: top;
}

.shop-detail-title {
	margin-bottom: 2px;
}

.shop-detail-rarity {
	font-size: 0.7em;
	font-weight: bold;
}

.shop-detail-meta {
	margin-top: 0;
	color: #ffffff;
	font-weight: bold;
}

.shop-detail-stats {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 4px 12px;
	margin: 0 0 12px;
}

.shop-detail-stats dt,
.shop-detail-stats dd {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
}

.shop-detail-stats dt {
	font-weight: bold;
}

/* Profile showcase (memberlist) and post mini-profile
   These classes are used by the event templates and must be kept. */
.shop-profile-panel-heading {
	margin-bottom: 10px;
}

.shop-profile-panel-heading h3 {
	margin-bottom: 4px;
}

.shop-profile-panel-heading p {
	margin: 0;
}

.shop-profile-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 12px;
}

/* Follow profile typography, not the board's heading/link defaults.
   Profile Styler's explicit !important font and colour rules still win. */
.shop-profile-panel .shop-profile-panel-heading h3,
.shop-profile-panel .shop-profile-panel-heading p,
.shop-profile-panel .shop-profile-panel-heading .button,
.shop-profile-panel .shop-profile-card,
.shop-profile-panel .shop-profile-card span {
	font-family: inherit;
}

.shop-profile-panel a.shop-profile-card,
.shop-profile-panel .shop-profile-card span {
	color: inherit;
}

.shop-profile-card {
	display: flex;
	flex-direction: column;
	flex: 0 1 180px;
	min-width: 0;
	text-align: center;
	text-decoration: none !important;
	color: inherit;
}

.shop-profile-card img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: contain;
	border-radius: 3px;
	background-color: transparent;
	border: 2px solid transparent;
	padding: 0;
	box-sizing: border-box;
}

.shop-profile-card.rarity-rare img {
	border-color: #2d84ff;
}

.shop-profile-card.rarity-epic img {
	border-color: #964cff;
}

.shop-profile-card.rarity-legendary img {
	border-color: #ffb52b;
}

.shop-profile-card span {
	margin-top: 5px;
	overflow-wrap: anywhere;
}

.profile-virtualshop {
	margin-top: 4px;
}

.profile-shop-equipped {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 4px;
}

/* 60px is as large as three of these fit on one line in the postbit column:
   3 x 60 plus two 4px gaps is 188px. Going larger wraps the third onto its
   own row. Keep this in step with shop_postbit_max_slots. */
.profile-shop-equipped-item {
	display: inline-flex;
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	padding: 0;
	box-sizing: border-box;
	border: 2px solid transparent;
	border-radius: 3px;
	background-color: transparent;
	overflow: hidden;
}

.profile-shop-equipped-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
	padding: 0;
}

.profile-shop-equipped-item.rarity-rare {
	border-color: #2d84ff;
}

.profile-shop-equipped-item.rarity-epic {
	border-color: #964cff;
}

.profile-shop-equipped-item.rarity-legendary {
	border-color: #ffb52b;
}

.postprofile .profile-shop-equipped {
	max-width: 220px;
}

/* Alignment & width fixes: topic-list resets + scoped search bar
   --------------------------------------------------------------------------- */

.shop-list ul.topiclist > li.header {
	height: auto;
	min-height: 28px;
}

/* Reset phpBB's float/negative-margin and equal-height padding tricks for
   BOTH headers and rows. Keep these rules restricted to shop lists. */
.shop-list ul.topiclist > li > dl {
	display: table;
	width: 100%;
	table-layout: fixed;
	margin: 0;
}

.shop-list ul.topiclist > li > dl > dt,
.shop-list ul.topiclist > li > dl > dd {
	display: table-cell;
	float: none;
	vertical-align: middle;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.shop-list ul.topiclist > li > dl > dt {
	width: auto;
	text-align: left;
}

.shop-list ul.topiclist dt .list-inner {
	margin: 0;
	padding: 0;
}

.shop-list ul.topiclist > li > dl > dd.shop-col-price,
.shop-list ul.topiclist > li > dl > dd.shop-col-stock {
	width: 110px;
	text-align: center;
}

.shop-list ul.topiclist > li > dl > dd.shop-col-action {
	width: 150px;
	text-align: center;
}

/* More specific than the topiclist .list-inner reset above: keep the
   thumbnail gutter on both desktop and mobile, including inventory rows. */
.shop-list ul.topiclist > li.shop-row > dl > dt .list-inner {
	position: relative;
	min-height: 60px;
	padding-left: 72px;
}

.shop-list .shop-row .shop-row-image {
	position: absolute;
	left: 0;
	top: 0;
	float: none;
	margin: 0;
}

.shop-list .shop-col-action form + form {
	margin-top: 5px;
}

/* Compact inventory cells only; leave the shop catalogue unchanged. */
.shop-inventory-list ul.topiclist > li.shop-row > dl > dt,
.shop-inventory-list ul.topiclist > li.shop-row > dl > dd {
	padding-top: 5px;
	padding-bottom: 5px;
}

/* The gift form provides its own 3px gap, so drop the text cell's
   5px bottom padding above it and pull the form up to the text. */
.shop-inventory-list ul.topiclist > li.shop-row > dl > dt {
	padding-bottom: 0;
}

.shop-list .shop-col-action .button {
	max-width: 100%;
	white-space: normal;
}

/* Full-width search, with the button beside the input rather than below it. */
.shop-searchbar {
	margin: 10px 0;
}

.shop-searchbar fieldset {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.shop-searchbar .inputbox {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	min-width: 0;
	height: 32px;
	margin: 0;
	box-sizing: border-box;
}

/* Placeholder ink for the one field in this extension that uses a placeholder.
 *
 * Every style on this board predates the standard selector. They ship only
 * `:-moz-placeholder` -- which Firefox dropped in 2013, so it matches nothing
 * anywhere -- and `::-webkit-input-placeholder`. ultra_light's webkit rule
 * paints #c6d5e4, a colour chosen for the dark .action-bar input.search box;
 * the generic .inputbox was later given a light #c0cedf background and the
 * placeholder colour was never revisited. That leaves 1.07:1 contrast --
 * effectively invisible -- for Chrome, Edge and Safari on the default style,
 * while Firefox matches neither rule, falls back to the UA's own 54% ink and
 * looks fine. Hence a bug only some people could see.
 *
 * Inheriting the input's own ink is what keeps this right under prosilver,
 * ultra_light and darcula at once rather than hardcoding a colour correct for
 * one of them. Two classes outrank the style's single-class webkit rule, which
 * WebKit and Blink treat as the same pseudo-element for cascading purposes.
 */
.shop-searchbar .inputbox::placeholder {
	color: inherit;
	opacity: 0.8;
}

.shop-searchbar .button {
	flex: 0 0 auto;
	height: 32px;
	box-sizing: border-box;
}

@media (max-width: 700px) {
	.shop-filter-row {
		flex-direction: column;
		gap: 4px;
	}

	.shop-filter-label {
		flex-basis: auto;
	}

	/* phpBB hides header cells with !important at this breakpoint. */
	.shop-list ul.topiclist > li.header dd {
		display: block !important;
	}

	.shop-list ul.topiclist > li > dl {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.shop-list ul.topiclist > li > dl > dt {
		grid-column: 1 / -1;
	}

	.shop-list ul.topiclist > li > dl > dt,
	.shop-list ul.topiclist > li > dl > dd.shop-col-price,
	.shop-list ul.topiclist > li > dl > dd.shop-col-stock,
	.shop-list ul.topiclist > li > dl > dd.shop-col-action {
		display: block;
		width: auto;
		min-width: 0;
	}

	.shop-gift-row {
		margin: 6px 0 0;
	}

	.shop-detail-layout,
	.shop-detail-image,
	.shop-detail-info {
		display: block;
		width: auto;
	}

	.shop-detail-image {
		max-width: 260px;
		padding: 0;
		margin-bottom: 12px;
	}

	.shop-detail-stats {
		grid-template-columns: fit-content(45%) minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------
   Ultimate Shop additions
   Screens with no Virtual Shop counterpart, plus the features it
   did not have. Built from the same prosilver primitives so they
   sit alongside the ported rules rather than fighting them.
   ------------------------------------------------------------------ */

/* Sub-navigation: an action-bar of buttons, not a tab strip. */
.shop-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
}

.shop-nav .button.shop-nav-active {
	font-weight: bold;
	box-shadow: inset 0 -2px 0 rgba(128, 128, 128, 0.55);
}

/* Inline tags on a row: sale / new / featured / limited. */
.shop-tag {
	display: inline-block;
	padding: 1px 5px;
	margin-left: 4px;
	border: 1px solid rgba(128, 128, 128, 0.45);
	border-radius: 2px;
	font-size: 0.85em;
	font-weight: bold;
	vertical-align: middle;
	white-space: nowrap;
}

.shop-tag-new { border-color: #3fa34d; color: #3fa34d; }
.shop-tag-sale { border-color: #d9534f; color: #d9534f; }
.shop-tag-featured { border-color: #ffb52b; color: #ffb52b; }
.shop-tag-limited { border-color: #964cff; color: #964cff; }

/* Rarity colour comes from the database, so it is applied inline; the
   rarity-* class is still emitted for style-level overrides. */
.shop-rarity-text {
	font-weight: bold;
}

/* Limited items */
.shop-limited-note {
	margin-top: 6px;
	font-size: 0.95em;
	opacity: 0.85;
}

.shop-limited-closed {
	margin: 8px 0;
	padding: 8px;
	border: 1px solid rgba(150, 76, 255, 0.5);
	border-radius: 2px;
	font-weight: bold;
}

.shop-row-noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	opacity: 0.45;
}

/* Generic list used by the marketplace, leaderboard, wishlist and gift
   history: same topiclist skeleton as the shop itself. */
.shop-table-list .shop-col-narrow {
	width: 90px;
	text-align: center;
}

.shop-table-list .shop-col-wide {
	width: 160px;
	text-align: center;
}

.shop-meta-line {
	display: block;
	font-size: 0.95em;
	opacity: 0.8;
}

.shop-inline-form {
	display: inline-block;
	margin: 0;
}

.shop-inline-form input[type="number"] {
	width: 4em;
}

/* Profile showcase gallery */
.shop-profile-panel-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}


/* Equipped items next to a post */

@media (max-width: 700px) {
	.shop-nav {
		gap: 3px;
	}

	.shop-filter-row {
		flex-direction: column;
		align-items: stretch;
	}

	.shop-col-price,
	.shop-col-stock,
	.shop-col-action {
		text-align: left;
	}
}

/* Leaderboard: three side-by-side boards that stack on narrow screens. */
.shop-board-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
}

.shop-board-column {
	margin: 0;
}

.shop-rank {
	display: inline-block;
	min-width: 1.8em;
	font-weight: bold;
	opacity: 0.7;
}

/* ------------------------------------------------------------------
   Inventory rows carry far more controls than a catalogue row: equip,
   showcase, gift, list-for-sale, download, plus a sell form with its
   own quantity box. The catalogue's 150px action column crushes them
   together, so this page gets its own wider layout.
   ------------------------------------------------------------------ */
.shop-inventory-list ul.topiclist > li > dl > dd.shop-col-stock {
	width: 80px;
}

.shop-inventory-list ul.topiclist > li > dl > dd.shop-col-action {
	width: 300px;
	text-align: right;
}

.shop-inventory-list .shop-row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: flex-end;
	margin-bottom: 4px;
}

.shop-inventory-list .shop-row-actions .button,
.shop-inventory-list .shop-row-actions .shop-inline-form {
	margin: 0;
}

/* Keep the sell controls on one line and clear of the buttons above. */
.shop-inventory-list .shop-sell-form {
	display: flex;
	gap: 4px;
	align-items: center;
	justify-content: flex-end;
	margin-top: 4px;
}

.shop-inventory-list .shop-sell-form input[type="number"] {
	width: 4.5em;
}

/* Listings shown on an item's own page. */
.shop-item-market {
	margin-top: 12px;
}

.shop-owned-flag {
	display: inline-block;
	margin-left: 6px;
	padding: 0 5px;
	border: 1px solid #3fa34d;
	border-radius: 2px;
	color: #3fa34d;
	font-weight: bold;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.shop-inventory-list ul.topiclist > li > dl > dd.shop-col-action,
	.shop-inventory-list ul.topiclist > li > dl > dd.shop-col-stock {
		width: auto;
		text-align: left;
	}

	.shop-inventory-list .shop-row-actions,
	.shop-inventory-list .shop-sell-form {
		justify-content: flex-start;
	}
}

/* Cheapest member listing, shown under the shop price on the index. */
.shop-market-price {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.9em;
	white-space: nowrap;
}

.shop-list .shop-col-action .shop-inline-form {
	display: inline-block;
	margin: 0;
}

.shop-list .shop-row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	align-items: center;
}

/* ------------------------------------------------------------------
   Form-control buttons (input/button) do not inherit the document font
   the way an <a class="button"> does, so a submit button sitting next
   to a link button renders smaller and in a different face. Force them
   to match inside the shop's action areas.
   ------------------------------------------------------------------ */
.shop-list .shop-col-action input.button,
.shop-list .shop-col-action button.button,
.shop-row-actions input.button,
.shop-row-actions button.button,
.shop-detail-actions input.button,
.shop-detail-actions button.button,
.shop-inline-form input.button,
.shop-inline-form button.button {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	padding: 2px 8px;
	vertical-align: middle;
	box-sizing: border-box;
}

/* Match the height of the neighbouring link buttons exactly. */
.shop-row-actions > .button,
.shop-row-actions .shop-inline-form > .button {
	min-height: 23px;
}

.shop-row-actions a.button {
	display: inline-flex;
	align-items: center;
}

/* ------------------------------------------------------------------
   Item detail: action buttons
   The buy form, marketplace link and wishlist form are separate
   blocks, so without this they stack at differing offsets and look
   ragged. Lay them out on one baseline.
   ------------------------------------------------------------------ */
.shop-detail-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
}

.shop-detail-actions form,
.shop-detail-actions > .button {
	margin: 0;
}

.shop-detail-actions .shop-inline-form {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Notes and warnings sit on their own line, full width, rather than
   being squeezed in beside the buttons. */
.shop-detail-actions > p {
	flex: 0 0 100%;
	margin: 4px 0 0;
}

/* Seller avatars in the item page's listing table. */
.shop-seller-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 32px;
}

.shop-seller-avatar img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 2px;
	vertical-align: middle;
}

/* The listing table has no item thumbnail, so drop the gutter the
   catalogue rows reserve for one. */
.shop-item-market ul.topiclist > li > dl > dt .list-inner {
	padding-left: 0;
	min-height: 0;
}

/* Form action rows (submit + cancel).
   prosilver renders an <input> button and an <a> button with different
   line boxes, so side by side they sit at different heights. Flex with
   align-items: center puts them on one baseline regardless of element. */
.shop-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	text-align: left;
}

.shop-form-actions > input.button,
.shop-form-actions > button.button,
.shop-form-actions > a.button {
	float: none;
	margin: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	padding: 2px 10px;
	vertical-align: middle;
	box-sizing: border-box;
}

/* The showcase button changes its label when the item is showcased. Pinning a
   minimum width stops a showcased row wrapping its actions onto a different
   number of lines from an unshowcased one, which made the column jitter as you
   toggled items. */
.shop-inventory-list .shop-row-actions .shop-showcase-toggle {
	min-width: 96px;
	text-align: center;
}

/* The accept-bid control sits inline in a sentence listing the bids, so it
   must not break the line the way a block form would. */
.shop-accept-bid {
	display: inline-block;
	margin: 0 0 0 4px;
	vertical-align: middle;
}