/*
 * COPIA DESTE TEMPLATE -- default
 *
 * Este arquivo vale so para este template. Editar aqui NAO afeta os outros.
 * A base fica em assets/css/webshop.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 - WebShop
 *
 * O que e do webshop e nao do market: o cartao de cupom e a grade dos botoes de
 * categoria. Antes o cupom era um bloco <style> DUPLICADO byte a byte dentro de
 * webshopfull.php e webshopsemi.php.
 *
 * MEDIDAS em px (e em para fonte), nunca rem: varios temas usam html { font-size: 62.5% }
 * e com rem toda medida sairia 37% menor.
 */

/* ------------------------------------------------- botoes de categoria ---- */

/* Era a grade do Bootstrap com vaos misturados: catorze categorias em col-md-2 e duas
 * (Amuletos/Rings e Pets/Outros, de rotulo mais longo) em col-md-3. Com justify-content
 * center e rotulo mais largo que a coluna, as linhas saiam desiguais -- medido no
 * whiteblue: quatro botoes na primeira linha, quatro na segunda e seis na terceira, com
 * o de "AMULETOS/RINGS" 31px mais largo que a propria coluna.
 *
 * Grade de verdade resolve os dois: coluna de largura igual para todos, quantas couberem
 * na largura que o template der, sem depender de ponto de quebra nenhum. */
.ne-ui .ws-categorias {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 6px;
	margin-bottom: 14px;
}

.ne-ui .ws-categorias form { margin: 0; }

/* O tema costuma por largura fixa em button (o whiteblue usa 160px). Dentro da grade o
 * botao tem que aceitar a largura da coluna. */
.ne-ui .ws-categorias .btn {
	width: 100%;
	min-width: 0;
	margin: 0;
	white-space: normal;
}

/* ------------------------------------------------------ cartao de cupom ---- */
.ws-cupom {
	max-width: 320px; margin: 14px auto 6px; padding: 12px 14px;
	background: var(--mk-soft, #fdfbf4); border: 1px dashed rgba(201, 162, 39, .5); border-radius: 10px;
	text-align: center;
}
.ws-cupom-titulo {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin-bottom: 8px;
	font-size: .72em; font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; color: #c9a227;
}
.ws-cupom-titulo span { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .7; }
.ws-cupom-campo .input-group-text { background: rgba(201, 162, 39, .14); border-color: rgba(201, 162, 39, .45); color: #c9a227; }
.ws-cupom-campo .form-control {
	border-color: rgba(201, 162, 39, .45); background: var(--mk-panel, #fff); color: var(--mk-ink, inherit);
	/* O admin grava o codigo em maiuscula; deixar o campo em maiuscula evita a
	   duvida de "digitei certo?" quando o jogador escreve em minuscula. */
	text-transform: uppercase; letter-spacing: .08em; font-weight: 700; text-align: center;
}
.ws-cupom-campo .form-control:focus { border-color: #c9a227; box-shadow: 0 0 0 3px rgba(201,162,39,.25); }
.ws-cupom-campo .form-control::placeholder { letter-spacing: .04em; font-weight: 400; color: var(--mk-mute, #b9a97f); }
.ws-cupom-campo .btn {
	background: rgba(201, 162, 39, .14); border: 1px solid rgba(201, 162, 39, .45); color: #c9a227;
	font-weight: 700; font-size: .72em; text-transform: uppercase; letter-spacing: .04em;
}
.ws-cupom-campo .btn:hover { background: rgba(201, 162, 39, .28); color: #e0b93a; }
.ws-cupom-nota { margin-top: 8px; font-size: .7em; line-height: 1.45; color: var(--mk-mute, #8b8b8b); }

/* Resultado da previa. Verde/vermelho de verdade e nao so uma borda: o jogador
   precisa distinguir "entrou" de "nao entrou" sem ler o texto. */
.ws-cupom-res { margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: .78em; line-height: 1.4; }
.ws-cupom-res.is-carregando { background: rgba(128, 128, 128, .12); color: var(--mk-mute, #777); }
.ws-cupom-res.is-erro { background: rgba(201, 48, 44, .13); border: 1px solid rgba(201, 48, 44, .35); color: #e06a66; }
.ws-cupom-res.is-ok   { background: rgba(61, 139, 80, .14); border: 1px solid rgba(61, 139, 80, .38); color: #5cc47a; }
.ws-cupom-total { font-size: .9em; }
.ws-cupom-total b { font-size: 1.15em; }
.ws-cupom-detalhe { margin-top: 2px; font-size: .7em; opacity: .85; }