/* Loja do YM (views do Gesior Shop sobrepostas pelo tema) + botão pequeno, passos e telas de sucesso */
.ym-btn-pequeno { padding: 7px 14px; font-size: 13px; border-radius: 9px; }
.ym-centro-flex { justify-content: center; }

.ym-loja-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.ym-loja-topo .ym-intro { margin: 0; }
.ym-saldo { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(242, 198, 109, .16), rgba(79, 184, 245, .08)); border: 1px solid rgba(242, 198, 109, .35); }
.ym-saldo-rotulo { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-fraco); }
.ym-saldo-valor { font-family: var(--titulo); font-weight: 800; font-size: 22px; color: var(--ouro); }

/* vitrine de ofertas */
.ym-ofertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ym-oferta { position: relative; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(27, 49, 72, .95), rgba(13, 26, 41, .95)); border: 1px solid var(--borda); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ym-oferta:hover { transform: translateY(-4px); border-color: rgba(242, 198, 109, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(242, 198, 109, .15); }
.ym-oferta-img { height: 118px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(143, 211, 255, .2), transparent 62%), linear-gradient(180deg, rgba(8, 18, 30, .2), rgba(8, 18, 30, .6)); border-bottom: 1px solid var(--borda); }
.ym-oferta-img img { width: 64px !important; height: 64px !important; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transition: transform .25s ease; }
.ym-oferta:hover .ym-oferta-img img { transform: scale(1.12) rotate(-3deg); }
.ym-oferta-corpo { padding: 12px 14px 4px; flex: 1; }
.ym-oferta-corpo h3 { margin: 0 0 4px; font-family: var(--titulo); font-size: 16px; color: #fff; }
.ym-oferta-corpo p { margin: 0; font-size: 13.5px; color: var(--texto-fraco); line-height: 1.45; }
.ym-oferta-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 14px; }
.ym-oferta-rodape form { margin: 0; }
.ym-preco { font-size: 13px; color: var(--texto-fraco); }
.ym-preco b { font-family: var(--titulo); font-size: 20px; color: var(--ouro); margin-right: 2px; }
.ym-ofertas-mini { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ym-oferta-mini .ym-oferta-img { height: 90px; }
.ym-oferta-pos { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #3a2400; background: linear-gradient(180deg, #ffe39f, #d79a33); }

/* passos da compra */
.ym-passos { display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; counter-reset: passo; flex-wrap: wrap; }
.ym-passos li { counter-increment: passo; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texto-fraco); border: 1px solid var(--borda-forte); }
.ym-passos li::before { content: counter(passo); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--cartao2); font-size: 12px; }
.ym-passos li.feito { color: var(--verde); border-color: rgba(91, 224, 138, .35); }
.ym-passos li.feito::before { content: "✓"; background: rgba(91, 224, 138, .18); }
.ym-passos li.atual { color: #fff; border-color: var(--ouro); background: rgba(242, 198, 109, .1); }
.ym-passos li.atual::before { background: linear-gradient(180deg, #ffe39f, #d79a33); color: #3a2400; }
.ym-loja-resumo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 16px; margin-bottom: 22px; border-radius: 14px; background: var(--cartao2); border: 1px solid var(--borda); }
.ym-loja-resumo .ym-oferta-corpo { padding: 0; }
.ym-confirma { max-width: 560px; padding: 18px; border-radius: 16px; background: var(--cartao2); border: 1px solid rgba(242, 198, 109, .35); }
.ym-confirma .ym-info { grid-template-columns: 1fr; margin-bottom: 12px; }
.ym-confirma .ym-acoes form { margin: 0; }

/* telas de sucesso / cancelado */
.ym-sucesso { max-width: 560px; margin: 10px auto; padding: 28px 22px; text-align: center; border-radius: 18px; background: radial-gradient(circle at 50% 0, rgba(242, 198, 109, .16), transparent 60%), var(--cartao2); border: 1px solid rgba(242, 198, 109, .35); }
.ym-sucesso h2 { margin: 6px 0 8px; font-family: var(--titulo); font-size: 26px; color: #fff; }
.ym-sucesso-icone { font-size: 46px; display: block; animation: ym-pulo 1.6s ease-in-out infinite; }
.ym-sucesso-erro { border-color: rgba(255, 107, 107, .4); background: var(--cartao2); }
@keyframes ym-pulo { 50% { transform: translateY(-6px) scale(1.06); } }

/* comprar pontos */
.ym-pagamentos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ym-pagamento { padding: 16px; border-radius: 14px; background: var(--cartao2); border: 1px solid var(--borda); text-align: center; }
.ym-pagamento img { max-width: 150px; height: auto !important; }

/* login e formulários de conta: cartão centralizado */
#ContentHelper .ym-login-pagina, #ContentHelper form > .ym-cartao.ym-quadro { max-width: 620px; margin-left: auto; margin-right: auto; }

@media (max-width: 780px) {
	.ym-ofertas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ym-oferta-img { height: 96px; }
	.ym-oferta-rodape { flex-direction: column; align-items: stretch; }
	.ym-oferta-rodape .ym-btn { width: 100%; }
	.ym-saldo { width: 100%; justify-content: space-between; }
}
.ym-saldo-entrar { font-weight: 700; color: var(--ouro); }
/* rodapé da oferta: preço em cima, botão inteiro embaixo (o texto não quebra) */
.ym-oferta-rodape { flex-direction: column; align-items: stretch; gap: 10px; }
.ym-oferta-rodape .ym-btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 780px) {
	.ym-saldo { flex-wrap: wrap; row-gap: 4px; }
	.ym-saldo-rotulo { flex: 1 0 100%; }
	.ym-saldo .ym-btn { margin-left: auto; }
}