/*
 * COPIA DESTE TEMPLATE -- default
 *
 * Este arquivo vale so para este template. Editar aqui NAO afeta os outros.
 * A base fica em assets/css/market.css; quando um template nao tem a sua copia, a injecao
 * carrega a base (e por isso que um template novo funciona sem copiar nada).
 *
 * Medidas em px e tamanho de fonte em em -- nunca rem: a raiz e do tema e varios
 * usam html { font-size: 62.5% }, o que faria toda medida sair 37% menor.
 */

/*
 * NewEngine CMS - Market
 * Folha unica do market (usercp/market/*). Antes cada view carregava o proprio
 * <style> inline, e todos escritos para fundo escuro (rgba(255,255,255,.05))
 * enquanto o #container do tema e claro (#eeeeee) -- ou seja, invisiveis.
 * Aqui a paleta e a do tema: painel branco, linha #e3e3e3, destaque --ColorTemplate.
 *
 * Tudo abaixo mora dentro de .market, o wrapper que modules/usercp/market.php abre.
 */

/* A paleta vale nos DOIS wrappers: .market (market, market de personagem, oficina)
 * e .ne-ui (o webshop, que nao abre .market). Enquanto morou so em .market, o
 * cartao de saldo do webshop caia no branco do fallback -- medido no koleos, um
 * retangulo branco no meio de um tema escuro. */
.ne-ui,
.market {
	/* Veu sobre o fundo do TEMA, nao cor chapada por cima dele: o painel escurece de
	   leve o que ja estiver atras, entao a caixa do market pega o tom (e a imagem de
	   fundo) de cada template em vez de impor a mesma cor nos dezoito. */
	--mk-line:   rgba(0, 0, 0, .14);
	--mk-line-2: rgba(0, 0, 0, .08);
	--mk-panel:  rgba(0, 0, 0, .035);
	--mk-soft:   rgba(0, 0, 0, .06);
	/* currentColor: o texto e o que o tema ja escolheu. */
	--mk-ink:    currentColor;
	--mk-mute:   rgba(0, 0, 0, .55);
	/* Segundo tom de texto: um pouco mais apagado que o do tema. */
	--mk-ink-2:  rgba(0, 0, 0, .72);
	--mk-accent: var(--ColorTemplate, #c0a062);
	color: inherit;
}

/* ---------------------------------------------------------------- menu ---- */

.market-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	padding: 5px;
	margin-bottom: 18px;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.market-nav a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 14px;
	border-radius: 6px;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	/* !important: override.css forca a:hover{color:inherit!important} */
	color: #6b6b6b !important;
	transition: background .18s ease, color .18s ease;
}
.market-nav a i { font-size: .95em; opacity: .85; }
.market-nav a:hover { background: var(--mk-soft); color: var(--mk-ink) !important; }
.market-nav a.active {
	background: var(--mk-accent);
	color: #fff !important;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.market-nav a.active i { opacity: 1; }
.market-nav .market-nav-badge {
	background: #d9534f;
	color: #fff;
	border-radius: 10px;
	padding: 1px 7px;
	font-size: .7em;
	line-height: 1.5;
}
.market-nav a.active .market-nav-badge { background: rgba(0,0,0,.35); }

/* ----------------------------------------------------------- saldos ---- */

.market-wallet {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.market-wallet-item {
	flex: 1 1 130px;
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-left: 3px solid var(--mk-accent);
	border-radius: 6px;
	padding: 8px 12px;
}
.market-wallet-item .mw-name {
	display: block;
	font-size: .68em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mk-mute);
}
.market-wallet-item .mw-value {
	display: block;
	font-size: 1.05em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- comprar x fazer oferta ---- */
/* Os dois em caixas separadas de proposito. Colados na mesma linha, o botao verde de
 * comprar fica ao lado do campo de oferta -- e compra nao tem desfazer. */

.market-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 18px;
}
.market-action {
	flex: 1 1 240px;
	background: var(--mk-soft);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	padding: 14px 16px;
}
.market-action .ma-title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mk-mute);
	margin-bottom: 8px;
}
.market-action .ma-price {
	font-size: 1.15em;
	font-weight: 700;
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}
.market-action .ma-note {
	font-size: .78em;
	line-height: 1.45;
	color: var(--mk-mute);
	margin-bottom: 10px;
}
.market-action-buy {
	border-color: #b7dfc4;
	background: #f3fbf5;
}
.market-action-buy .btn { min-width: 140px; }
.market-action-offer .input-group { max-width: 320px; }
/* "Sua oferta": ja existe oferta minha neste anuncio, o campo de nova oferta some. */
.market-action-mine {
	border-color: #e2cfa0;
	background: #fdf9ef;
}
.market-action-mine .ma-price { color: #8a6d1f; }

/* ------------------------------------------------------------ titulos ---- */

.market h4 {
	font-family: 'Cinzel', serif;
	font-size: 1.25em;
	letter-spacing: .02em;
	padding-bottom: 10px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--mk-line);
	position: relative;
}
.market h4::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 52px;
	height: 2px;
	background: var(--mk-accent);
}
.market h5 {
	font-size: 1em;
	font-weight: 700;
	color: var(--mk-ink-2);
	margin-bottom: 10px;
}

/* ------------------------------------------------------------ filtros ---- */

.market-filters {
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	margin-bottom: 18px;
	overflow: hidden;
}
.market-filters > summary {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	padding: 12px 15px;
	font-weight: 700;
	font-size: .82em;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mk-ink-2);
	list-style: none;
	user-select: none;
}
.market-filters > summary::-webkit-details-marker { display: none; }
.market-filters > summary:hover { background: var(--mk-soft); }
.market-filters > summary .mkf-caret { margin-left: auto; transition: transform .2s ease; }
.market-filters[open] > summary { border-bottom: 1px solid var(--mk-line); }
.market-filters[open] > summary .mkf-caret { transform: rotate(180deg); }
.market-filters .mkf-count {
	background: var(--mk-accent);
	color: #fff;
	border-radius: 10px;
	padding: 1px 8px;
	font-size: .7em;
}
.market-filters .mkf-body { padding: 15px; }
.market-filters .form-label {
	font-size: .74em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--mk-mute);
	margin-bottom: 3px;
}
.market-filters .mkf-flags {
	background: var(--mk-soft);
	border: 1px solid var(--mk-line-2);
	border-radius: 6px;
	padding: 10px 12px;
	height: 100%;
}
.market-filters .mkf-actions {
	border-top: 1px solid var(--mk-line-2);
	padding: 12px 15px;
	background: var(--mk-soft);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* -------------------------------------------------------------- cards ---- */
/* Grade + card compartilhados por view=browse e view=vault. O visual segue o
 * card do webshop (usercp/webshopfull): nome em cima, faixa com o fundo do bau
 * atras do icone, corpo e rodape. */

.market-grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
	margin-top: 12px;
}
.market-card {
	display: flex;
	flex-direction: column;
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.market-card:hover {
	transform: translateY(-3px);
	border-color: var(--mk-accent);
	box-shadow: 0 8px 20px rgba(0,0,0,.14);
}
.market-card-head {
	padding: 9px 8px 7px;
	text-align: center;
	font-size: .78em;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: #b02a37;
	min-height: 3.1em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.market-card-head .mk-plus { color: #1a7f37; }
.market-card-img {
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* mesmo fundo de bau que o webshop usa */
	background: url('../../../img/webshop/32x32.gif') repeat center center;
	border-top: 1px solid var(--mk-line-2);
	border-bottom: 1px solid var(--mk-line-2);
}
.market-card-img img {
	max-height: 84px;
	max-width: 90%;
	width: auto;
	height: auto;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.market-card-body { padding: 9px 8px; text-align: center; }
.market-card-badges { min-height: 21px; margin-bottom: 5px; }
.market-card-badges .badge { margin: 1px; font-size: .65em; }
.market-card-price { font-weight: 700; font-size: .92em; color: var(--mk-ink); }
.market-card-price .mk-coin { display: block; font-size: .72em; font-weight: 500; color: var(--mk-mute); }
.market-card-note { font-size: .75em; color: var(--mk-mute); margin-top: 4px; }
.market-card-foot {
	margin-top: auto;
	padding: 9px 8px;
	background: var(--mk-soft);
	border-top: 1px solid var(--mk-line-2);
	text-align: center;
}
.market-card-foot .btn { width: 100%; }
.market-card-foot form { display: block; margin-bottom: 4px; }

/* Formulario "Anunciar de novo" (view=vault) dentro do rodape do card. */
.mvc-relist { margin-top: 4px; text-align: left; }
.mvc-relist > summary { cursor: pointer; text-align: center; list-style: none; }
.mvc-relist > summary::-webkit-details-marker { display: none; }
.mvc-relist .card { border-color: var(--mk-line); }
.mvc-relist .card-body { padding: 9px; }

/* ---------------------------------------------------------------- bau ---- */
/* Slots de 32x32 sem gap: a grade recebe o proprio 32x32.gif em repeat, entao
 * cada celula cai exatamente em cima de um quadrado do fundo. Mexer no tamanho
 * do slot sem trocar a imagem desalinha os dois. */

.market-chest {
	width: max-content;
	margin: 18px auto 0;
	padding: 14px;
	background: linear-gradient(180deg, #2c2219 0%, #171210 100%);
	border: 1px solid #5c4728;
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
}
.market-chest-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Cinzel', serif;
	font-size: .8em;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #e6d3a3;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(230,211,163,.2);
}
.market-chest-foot {
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid rgba(230,211,163,.2);
	font-size: .72em;
	text-align: center;
	color: #9a8867;
}
.market-grid {
	display: grid;
	grid-template-columns: repeat(8, 32px);
	grid-auto-rows: 32px;
	gap: 0;
	width: 256px;
	background: url('../../../img/webshop/32x32.gif') repeat top left;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
}
/* Celula ocupada fica esmaecida (clareada) como no bau do jogo: o quadrado do item
 * destaca do fundo escuro antes mesmo de olhar o icone. */
.market-slot-item {
	background: rgba(255,255,255,.10);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.market-slot-item a {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	transition: box-shadow .12s ease, background .12s ease;
}
.market-slot-item a:hover {
	background: rgba(255,214,120,.20);
	box-shadow: inset 0 0 0 1px rgba(255,214,120,.85);
}
.market-slot-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* ------------------------------------------------------ item (detalhe) ---- */

.market-item-box {
	display: flex;
	flex-wrap: wrap;
	margin-top: 12px;
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	overflow: hidden;
}
.market-item-art {
	flex: 0 0 210px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: url('../../../img/webshop/32x32.gif') repeat center center;
	border-right: 1px solid var(--mk-line-2);
}
.market-item-icon {
	max-width: 128px;
	max-height: 128px;
	width: auto;
	height: auto;
	filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.market-item-main { flex: 1; min-width: 280px; padding: 18px 20px; }
.market-item-main h4 { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; }
.market-item-main h4::after { display: none; }
.market-item-fields {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 18px;
	margin: 14px 0;
}
.market-item-fields dt {
	font-size: .72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--mk-mute);
	align-self: center;
}
.market-item-fields dd { margin: 0; align-self: center; }
.market-fee-breakdown,
#market-fee-box {
	margin-top: 12px;
	padding: 12px 14px;
	background: var(--mk-soft);
	border: 1px solid var(--mk-line-2);
	border-left: 3px solid var(--mk-accent);
	border-radius: 6px;
	max-width: 340px;
	font-size: .85em;
	line-height: 1.6;
}
.market-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	font-size: .78em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ------------------------------------------------------------ anunciar ---- */

.market-sell-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: flex-start;
}
/* .item-box (generateStyledItemInfo) e' width:100%, entao precisa de coluna propria. */
.market-sell-preview { flex: 0 0 240px; max-width: 240px; }
.market-sell-form {
	flex: 1;
	min-width: 280px;
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	padding: 16px 18px;
}

/* ------------------------------------------------- destaques na home ---- */

.market-home { margin-bottom: 24px; }
.market-home-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.market-home-head h4 {
	display: flex;
	align-items: center;
	gap: 9px;
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.market-home-head h4::after { display: none; }
/* Carrossel: uma faixa horizontal em vez de grade, pra nao empurrar a noticia mais
 * recente pra baixo da dobra. A rolagem e' nativa (overflow-x); as setas so chamam
 * scrollBy(). */
.market-home-slider {
	position: relative;
	border-top: 2px solid var(--mk-line);
	padding-top: 14px;
	margin-top: 10px;
}
.market-home-track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximate;
	/* Barra escondida: as setas ja dizem que rola, e a barra sob os cards enfeia o
	 * bloco. Rolar com dedo/trackpad/teclado continua funcionando. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}
.market-home-track::-webkit-scrollbar { display: none; }

.market-hcard {
	flex: 0 0 148px;
	scroll-snap-align: start;
	display: block;
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	/* !important: override.css forca a:hover{color:inherit!important} */
	color: var(--mk-ink) !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.market-hcard:hover {
	transform: translateY(-3px);
	border-color: var(--mk-accent);
	box-shadow: 0 8px 18px rgba(0,0,0,.14);
	color: var(--mk-ink) !important;
}
.market-hcard .mhc-img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 78px;
	background: url('../../../img/webshop/32x32.gif') repeat center center;
	border-bottom: 1px solid var(--mk-line-2);
}
.market-hcard .mhc-img img {
	max-height: 64px;
	max-width: 86%;
	width: auto;
	height: auto;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.market-hcard .mhc-name {
	display: block;
	padding: 8px 8px 2px;
	font-size: .72em;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	color: #b02a37;
	/* Duas linhas no maximo: nome longo nao pode esticar so um card e desalinhar a
	 * faixa inteira. O que passar disso e' cortado com reticencias. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}
.market-hcard .mhc-name .mk-plus { color: #1a7f37; }
.market-hcard .mhc-price {
	display: block;
	padding: 0 8px 10px;
	font-size: .82em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.market-hcard .mhc-price .mk-coin {
	display: block;
	font-size: .68em;
	font-weight: 500;
	color: var(--mk-mute);
}

.mhs-seta {
	position: absolute;
	top: calc(50% + 7px);          /* +7 compensa o padding-top da faixa */
	transform: translateY(-50%);
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--mk-line);
	border-radius: 50%;
	background: var(--mk-panel);
	color: var(--mk-ink-2);
	font-size: .8em;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
	transition: background .15s ease, color .15s ease;
}
.mhs-seta:hover { background: var(--mk-accent); border-color: var(--mk-accent); color: #fff; }
.mhs-prev { left: -12px; }
.mhs-next { right: -12px; }

/* ----------------------------------------------------------------- zen ---- */

.market-zen-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}
.market-zen-card {
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-left: 3px solid var(--mk-line);
	border-radius: 8px;
	padding: 14px 16px;
}
.market-zen-card.mzc-strong { border-left-color: var(--mk-accent); }
.market-zen-card .mzc-label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: .72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mk-mute);
}
.market-zen-card .mzc-value {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.3;
	margin: 4px 0 2px;
	font-variant-numeric: tabular-nums;
}
.market-zen-card .mzc-note { font-size: .75em; color: var(--mk-mute); }

.market-zen-forms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}
.market-zen-form {
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	padding: 15px 16px;
}
.market-zen-form h5 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 10px;
}

/* Regua de porcentagem + MAX. */
.mzf-regua { margin-top: 10px; }
.mzf-regua .mzf-range {
	width: 100%;
	margin: 0;
	accent-color: var(--mk-accent);   /* pinta trilho e polegar sem reescrever o controle */
	cursor: pointer;
}
.mzf-regua-pe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}
.mzf-regua .mzf-pct {
	font-size: .78em;
	font-weight: 700;
	color: var(--mk-mute);
	font-variant-numeric: tabular-nums;
	min-width: 3em;
}
.mzf-regua .mzf-max {
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 2px 12px;
}

/* ---------------------------------------------------- tabelas / listas ---- */

.market .table-responsive {
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	margin-bottom: 16px;
}
.market .table { margin-bottom: 0; }
.market .table > thead > tr > th {
	background: var(--mk-soft);
	font-size: .72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mk-mute);
	border-bottom: 1px solid var(--mk-line) !important;
	white-space: nowrap;
}
.market .table > tbody > tr > td {
	vertical-align: middle;
	border-top: 1px solid var(--mk-line-2) !important;
}
.market .table > tbody > tr:hover > td { background: var(--mk-soft); }

.market-mine-item,
.market-hist-item {
	display: flex;
	align-items: center;
	gap: 10px;
}
.market-mine-item img,
.market-hist-item img,
.market-offer-group-head img,
.market-my-offer > img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	background: url('../../../img/webshop/32x32.gif') repeat center center;
	border: 1px solid var(--mk-line);
	border-radius: 4px;
	padding: 2px;
	flex: none;
}
.market-mine-fee,
.market-hist-fee,
.market-offer-fee { font-size: .82em; line-height: 1.4; }
.market-offer-fee { min-width: 180px; }
.market-mine-fee .neg,
.market-hist-fee .neg,
.market-offer-fee .neg { color: var(--mk-mute); }

.market-mine-actions form { display: inline-block; margin: 2px 4px 2px 0; }
.market-mine-edit { margin-top: 6px; }
.market-mine-edit > summary { cursor: pointer; font-size: .82em; color: var(--mk-accent); }
.market-mine-edit .card { border-color: var(--mk-line); }
.market-mine-edit .card-body { padding: 10px; }

.market-hist-block,
.market-rank-block,
.market-offers-section { margin-bottom: 32px; }
.market-rank-pos { color: var(--mk-mute); width: 2.5em; font-weight: 700; }

/* ------------------------------------------------------------- ofertas ---- */

.market-offer-group {
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 14px;
}
.market-offer-group-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--mk-line);
}
.market-offer-row,
.market-my-offer {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 10px 0;
	border-top: 1px solid var(--mk-line-2);
}
.market-offer-row:first-child,
.market-my-offer:first-child { border-top: none; }
.market-offer-actions form { display: inline-block; margin-right: 6px; }

/* Filtro de periodo dos extratos (ofertas, historico, zen). Discreto de proposito:
 * e um recorte, nao a acao principal da tela. */
.market-periodo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px;
	margin-bottom: 12px;
	font-size: .74em;
}
.market-periodo .mp-rotulo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 6px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mk-mute);
}
.market-periodo a {
	padding: 3px 10px;
	border: 1px solid transparent;
	border-radius: 20px;
	color: var(--mk-mute) !important;   /* override.css forca a:hover{color:inherit} */
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.market-periodo a:hover {
	background: var(--mk-soft);
	border-color: var(--mk-line);
	color: var(--mk-ink) !important;
}
.market-periodo a.active {
	background: var(--mk-accent);
	border-color: var(--mk-accent);
	color: #fff !important;
	font-weight: 700;
}

/* Filtro de status de "Minhas ofertas". */
.market-offer-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	background: var(--mk-panel);
	border: 1px solid var(--mk-line);
	border-radius: 8px;
	padding: 5px;
	margin-bottom: 12px;
}
.market-offer-filter a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: .74em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
	color: #6b6b6b !important;   /* override.css forca a:hover{color:inherit!important} */
	transition: background .15s ease, color .15s ease;
}
.market-offer-filter a:hover { background: var(--mk-soft); color: var(--mk-ink) !important; }
.market-offer-filter a.active { background: var(--mk-accent); color: #fff !important; }
.market-offer-filter .mof-count {
	background: rgba(0,0,0,.08);
	border-radius: 10px;
	padding: 0 7px;
	font-size: .7em;
}
.market-offer-filter a.active .mof-count { background: rgba(0,0,0,.28); }

/* ---------------------------------------------------------- paginacao ---- */

.market .pagination { margin-top: 18px; }
.market .page-link { color: var(--mk-ink); }
.market .page-item.active .page-link {
	background: var(--mk-accent);
	border-color: var(--mk-accent);
	color: #fff;
}

/* ------------------------------------------------------------- avisos ---- */
/* Os .alert do Bootstrap dentro do market: mais discretos que o bloco pastel padrao,
 * mas SEM perder a cor -- fundo tingido, texto e barra lateral na cor da severidade.
 *
 * A primeira versao disto pintava so a barra lateral e deixava o fundo branco em todas
 * as variantes. Ficou bonito e errado: um erro ("sua carteira nao comporta o valor")
 * ficava com a mesma cara de um aviso informativo, e o jogador nao percebia que a acao
 * tinha FALHADO. Severidade e informacao, nao decoracao -- se so a barra distingue, nao
 * distingue. */

/* Os avisos valem nos dois wrappers: o webshop abre so .ne-ui e, sem isto, caia no
 * alert do Bootstrap 3 -- medido no koleos, a caixa "IMPORTANTE" saia azul claro
 * num tema escuro.
 *
 * TINTA TRANSLUCIDA em vez de cor fixa: o mesmo valor serve sobre painel claro e
 * sobre painel escuro, porque o que aparece atras e o --mk-panel do tema. Com o
 * #f1f8fd de antes, nem dentro do market a paleta escura conseguia virar o aviso. */
.ne-ui .alert,
.market .alert {
	border: 1px solid var(--mk-line);
	border-left-width: 4px;
	border-radius: 8px;
	font-size: .88em;
	padding: 12px 15px;
	background: var(--mk-panel);
	color: inherit;
}
.ne-ui .alert-danger,
.market .alert-danger {
	background: rgba(201, 48, 44, .12);
	border-color: rgba(201, 48, 44, .32);
	border-left-color: #c9302c;
}
.ne-ui .alert-success,
.market .alert-success {
	background: rgba(61, 139, 80, .12);
	border-color: rgba(61, 139, 80, .32);
	border-left-color: #3d8b50;
}
.ne-ui .alert-warning,
.market .alert-warning {
	background: rgba(201, 143, 34, .13);
	border-color: rgba(201, 143, 34, .34);
	border-left-color: #c98f22;
}
.ne-ui .alert-info,
.market .alert-info {
	background: rgba(61, 135, 189, .12);
	border-color: rgba(61, 135, 189, .32);
	border-left-color: #3d87bd;
}
.ne-ui .alert-secondary,
.market .alert-secondary {
	background: var(--mk-soft);
	border-color: var(--mk-line);
	border-left-color: #b6b6b6;
	color: var(--mk-ink-2);
}
/* Link dentro do aviso herda a cor da severidade -- azul de link num bloco vermelho
 * quebra a leitura. !important: override.css forca a:hover{color:inherit!important}. */
.ne-ui .alert a,
.market .alert a { color: inherit !important; text-decoration: underline; font-weight: 700; }

/* ------------------------------------------------- modal de confirmacao ---- */

.market-confirm .modal-content {
	border: 1px solid var(--mk-line, #e3e3e3);
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.market-confirm .modal-header {
	border-bottom: 1px solid var(--mk-line-2, #f0f0f0);
	padding: 14px 18px;
}
.market-confirm .modal-title {
	font-family: 'Cinzel', serif;
	font-size: 1em;
	letter-spacing: .02em;
}
.market-confirm .modal-body {
	padding: 18px;
	font-size: .92em;
	line-height: 1.55;
	color: #333;
}
/* pre-line: a mensagem vem do atributo data-mk-confirm com quebra de linha de verdade;
 * sem isto as duas frases virariam um paragrafo unico. */
.market-confirm .modal-body p { margin: 0; white-space: pre-line; }
.market-confirm .modal-footer {
	border-top: 1px solid var(--mk-line-2, #f0f0f0);
	padding: 12px 18px;
}

/* ------------------------------------------------------------- vazios ---- */

.market-empty {
	background: var(--mk-panel);
	border: 1px dashed #cfcfcf;
	border-radius: 8px;
	padding: 30px 20px;
	text-align: center;
	color: var(--mk-mute);
}
.market-empty i { font-size: 2em; display: block; margin-bottom: 10px; opacity: .4; }
.market-empty a { font-weight: 700; }

/* =========================================================================
 * WebShop -- item em destaque
 * A ORDEM vem do SQL (ObtainItems); isto aqui e so o rotulo visual.
 * Fica nesta folha porque "Minhas compras" do webshop tambem reusa .market.
 * ========================================================================= */
.webshop-destaque {
	position: relative;
	border-color: #d4a017 !important;
	box-shadow: 0 0 0 1px rgba(212,160,23,.35), 0 6px 18px rgba(0,0,0,.12);
}
.webshop-destaque-tag {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #d4a017;
	color: #fff;
	border-radius: 10px;
	padding: 1px 8px;
	font-size: .62em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* =========================================================================
 * "Seu anúncio" -- o próprio anúncio aparece na vitrine e na home (ver
 * Market::browse). Sem a etiqueta o vendedor não distingue o item dele dos
 * outros e tenta comprar o próprio anúncio.
 *
 * FAIXA no topo do card, não pastilha flutuante: como pastilha ela cobria o nome
 * do item no card da vitrine (o nome fica no topo lá) e tapava a arte no card da
 * home. Faixa não sobrepõe nada e some junto com o card.
 * ========================================================================= */
.market-card-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: var(--mk-accent, #c0a062);
	color: #fff;
	padding: 3px 6px;
	font-size: .6em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.4;
}
.market-card-meu, .market-hcard-meu {
	border-color: var(--mk-accent);
	box-shadow: 0 0 0 1px rgba(192,160,98,.25);
}