/* ---------------------------------------------------------------------------
 * Estilos das seções customizadas do Fimot (Library -> Server Info).
 *
 * Existe para que o markup gerado em system/templates/serverinfo.customs.html.twig
 * não precise carregar style="..." em cada elemento: eram 357 cards com estilo
 * inline, o que tornava qualquer ajuste de espaçamento uma edição em massa e fazia
 * um card divergir do outro.
 *
 * A paleta segue o template tibiacom (basic.css): marrom #5A2800 no texto de
 * destaque, bege #F1E0C6 no fundo de conteúdo e #B8A38E nas bordas.
 * ------------------------------------------------------------------------- */

/* --- Acordeão ------------------------------------------------------------ */

/* Nível 1: Addons / Mounts. */
.fimot-acc1 {
	margin-top: 10px;
	padding: 4px 8px;
	background: #5A2800;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}

/* Nível 2: vocação ou tier. */
.fimot-acc2 {
	margin-top: 6px;
	padding: 3px 8px;
	background: #C0A080;
	color: #3D1C00;
	cursor: pointer;
}

.fimot-acc1:hover,
.fimot-acc2:hover {
	filter: brightness(1.08);
}

/* Corpo de um acordeão; começa escondido e o CollapseTable() revela. */
.fimot-acc-body {
	display: none;
	padding: 6px 0;
}

.fimot-nota {
	font-size: 11px;
	margin: 0 0 6px;
}

/* --- Grade de cards ------------------------------------------------------ */

/* table-layout fixed garante as 3 colunas: com inline-block, o padding e a borda
   do card somam fora da largura declarada e só cabiam dois por linha. */
.fimot-grid {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
}

.fimot-grid > tbody > tr > td {
	width: 33.33%;
	vertical-align: top;
	padding: 3px;
}

/* --- Card ---------------------------------------------------------------- */

.fimot-card {
	border: 1px solid #B8A38E;
	background: #F1E0C6;
}

.fimot-card-title {
	background: #C0A080;
	color: #3D1C00;
	padding: 2px 6px;
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fimot-card table {
	width: 100%;
	border-collapse: collapse;
}

/* Célula da sprite: largura fixa para todos os cards alinharem igual. */
.fimot-card td.fimot-sprite {
	width: 72px;
	padding: 4px;
	text-align: center;
	vertical-align: middle;
}

.fimot-card td.fimot-sprite img {
	width: 64px;
	height: 64px;
}

.fimot-card td.fimot-info {
	padding: 4px 6px 4px 0;
	font-size: 10px;
	vertical-align: middle;
	line-height: 1.35em;
}

.fimot-price {
	color: #5A2800;
}

/* --- Lista de bônus ------------------------------------------------------ */

/* Uma linha por bônus, como o client mostra (o desc do servidor usa "|" como
   separador de linha, não de item em sequência). */
.fimot-bonus {
	margin: 3px 0 0;
	padding-left: 13px;
	color: #2a5d00;
	list-style-type: square;
}

.fimot-bonus li {
	margin: 0;
	padding: 0;
}

/* Resumo de bônus por vocação, no topo de um tier de mount. */
.fimot-voc-resumo {
	width: 100%;
	margin-bottom: 6px;
	font-size: 10px;
}

.fimot-voc-titulo {
	padding-bottom: 3px;
	color: #5A2800;
	border-bottom: 1px solid #B8A38E;
}

.fimot-voc-resumo td {
	width: 33.33%;
	vertical-align: top;
	padding-right: 6px;
}

/* --- Faixa de sprites de item (tokens, prêmios, set packs) ---------------- */

.fimot-item {
	display: inline-block;
	width: 72px;
	margin: 3px 2px;
	text-align: center;
	vertical-align: top;
}

.fimot-item-img {
	height: 34px;
	line-height: 34px;
}

.fimot-item-img img {
	max-height: 32px;
	vertical-align: middle;
}

.fimot-item span {
	font-size: 10px;
}