/**
 * Melhoria visual/ergonômica do volante de aposta individual (jogo simples),
 * compartilhado por TODAS as loterias (Lotofácil, Lotofácil da Independência,
 * Mega-Sena, Mega da Virada, Quina, Quina de São João, Dupla Sena, Dupla de
 * Páscoa, Timemania, Lotomania, Dia de Sorte, Super Sete, +Milionária).
 *
 * Carregado 1x em krypitonite/src/Util/HTMLUtil.php::headDefault(), DEPOIS do
 * CSS legado (main.min.css/responsive.min.css) — só sobrepõe visual via
 * seletores universais já usados pelo HTML/JS existentes (.dezena,
 * #form-fazer-aposta, [id^="numeros-aposta-left-"], .btnPalpitar,
 * .btn-surpresinha, .add-jogo, .btn-finalizar, .btnLimpar-dezenas), sem
 * renomear nada de que o JS dependa.
 */

/* ---------- Cards do volante (números | surpresinha/total) ---------- */
[id^="numeros-aposta-left-"],
#form-fazer-aposta {
	background: #fff !important;
	border: 1px solid #ececec !important;
	border-radius: 16px !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07) !important;
	padding: 22px 18px !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	box-sizing: border-box;
}

[id^="numeros-aposta-left-"] h5,
#form-fazer-aposta h5 {
	font-weight: 700 !important;
	color: #2a2a2a !important;
	letter-spacing: 0.02em;
}

[class^="m-"],
[class*=" m-"] {
	border-bottom: 1px solid #eee !important;
	margin-bottom: 10px;
	padding-bottom: 10px !important;
}

/* ---------- Botões de dezena (grade de números) ---------- */
.dezena {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	margin: 4px !important;
	border-radius: 10px !important;
	border: 2px solid #e2e2e2 !important;
	background: #fafafa !important;
	color: #444 !important;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.dezena:hover {
	border-color: #aaa !important;
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.dezena[class*="selecionada"] {
	border-color: transparent !important;
	color: #fff !important;
	transform: scale(1.06);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22) !important;
}

/* Cor de destaque por loteria (a classe "*-selecionada" já é aplicada pelo JS
   existente; aqui só garantimos o background, que faltava para várias loterias). */
.dezena.dezenas-mg-selecionada { background-color: #0e8b46 !important; }
.dezena.dezenas-lf-selecionada { background-color: #931b85 !important; }
.dezena.dezenas-qn-selecionada { background-color: #3d3671 !important; }
.dezena.dezenas-lm-selecionada { background-color: #f37b12 !important; }
.dezena.dezenas-ds-selecionada { background-color: #8c2810 !important; }
.dezena.dezenas-tm-selecionada { background-color: #f5cf4a !important; color: #333 !important; }
.dezena.dezenas-dst-selecionada,
.dezena.dezenas-st-selecionada { background-color: #ba9652 !important; }
.dezena.dezenas-ss-selecionada { background-color: #45bc6c !important; }
.dezena.dezenas-mm-selecionada { background-color: #2E3078 !important; }

.posicao-dezenas {
	font-size: 14px !important;
}

/* ---------- Contadores (total de dezenas / valor total) ---------- */
.dezenas-selecionadas {
	font-size: 1.3em;
}

.valor-total {
	font-size: 1.35em;
	color: #1a7a3a;
}

/* ---------- Botões de ação: hierarquia visual clara ---------- */
.btnPalpitar,
.btn-surpresinha,
.add-jogo,
.btn-finalizar,
.btnLimpar-dezenas {
	border-radius: 10px !important;
	min-height: 44px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	padding: 10px 20px !important;
	transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btnPalpitar:hover,
.btn-surpresinha:hover,
.add-jogo:hover,
.btn-finalizar:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* LIMPAR é ação secundária/destrutiva: não deve competir visualmente com as demais */
.btnLimpar-dezenas {
	background: #fff !important;
	color: #777 !important;
	border: 2px solid #ddd !important;
}

.btnLimpar-dezenas:hover {
	background: #f5f5f5 !important;
	border-color: #bbb !important;
}

/* FINALIZAR é a ação principal (conversão): maior destaque */
.btn-finalizar {
	font-size: 16px !important;
	min-height: 52px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

/* ---------- Responsivo: botões continuam com bom alvo de toque no celular ---------- */
@media (max-width: 480px) {
	.dezena {
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		margin: 3px !important;
	}

	.btn.add-jogo,
	.btn.btn-finalizar,
	.btn.btnPalpitar,
	.btn.btnLimpar-dezenas {
		width: 100% !important;
		margin-left: 0 !important;
	}
}