/* ═══════════════════════════════════════════════════════════════
 * sp-campaign.css — Overrides para páginas internas quando
 * Template 3 (Steak Premiações) está ativo.
 *
 * Aplicado em TODA página que usa header.php padrão (campanha,
 * ganhadores, meus-números, etc.) quando homepage_template=sp.
 *
 * Escopo: body.sp-mode — nada aqui vaza pra templates 1/2.
 * Paleta: body #1f0a2b / app-main #251729 / card #3d1d4d / accent var(--tema-participate-color, #fda92d)
 * ═══════════════════════════════════════════════════════════════ */

/* ═══ BASE ═══ */
body.sp-mode,
body.sp-mode html { background: #1f0a2b !important; color: #e2e8f0 !important; }

/* Oculta o <span id="add_to_cart"> vazio (aparece quando usuário não está
 * logado) — NÃO afeta o <button id="add_to_cart"> usado por usuários logados.
 */
body.sp-mode span#add_to_cart { display: none !important; }
body.sp-mode {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body.sp-mode a { color: inherit; text-decoration: none; }
body.sp-mode a:hover { color: inherit; }

/* ═══ APP MAIN CONTAINER (card sobreposto) ═══
 * SEM z-index/position-relative pra não criar stacking context
 * que prende modais (ex: #modal-consultaCompras).
 * O efeito de sobreposição vem do margin-top negativo + DOM order.
 */
body.sp-mode .container.app-main,
body.sp-mode .app-main {
  background: #251729 !important;
  border-radius: 28px !important;
  padding: 18px 12px 24px !important;
  margin-top: -12px !important;
  color: #e2e8f0;
}

/* ═══ APP TITLE ═══ */
body.sp-mode .app-title {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding: 4px 0 14px 4px;
  text-align: left;
}
body.sp-mode .app-title h1,
body.sp-mode .app-title .h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  margin: 0;
}
body.sp-mode .app-title-desc {
  font-size: 13px !important;
  color: #94a3b8 !important;
}

/* ═══ CARD PRINCIPAL DA CAMPANHA (destaque no topo) ═══ */
body.sp-mode .campanha-header .SorteioTpl_sorteioTpl__2s2Wu,
body.sp-mode .SorteioTpl_sorteioTpl__2s2Wu {
  background: #3d1d4d !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
  color: #e2e8f0 !important;
  overflow: hidden;
}
body.sp-mode .SorteioTpl_sorteioTpl__2s2Wu.SorteioTpl_destaque__3vnWR {
  padding: 0 !important;
}
body.sp-mode .SorteioTpl_imagemContainer__2-pl4 {
  border-radius: 14px 14px 0 0 !important;
}
body.sp-mode .SorteioTpl_title__3RLtu,
body.sp-mode .SorteioTpl_title__3RLtu a {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.2px;
}
body.sp-mode .SorteioTpl_descricao__1b7iL {
  color: #cbd5e1 !important;
  font-size: 13px !important;
}
body.sp-mode .SorteioTpl_info__t1BZr,
body.sp-mode .custom-content-wrapper {
  color: #e2e8f0 !important;
  padding: 12px 14px !important;
}

/* Badges sobre o card destaque */
body.sp-mode .custom-badge-display {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
}
body.sp-mode .badge.bg-success {
  background-color: #198754 !important; color: #fff !important;
  border-radius: 6px !important; padding: 5px 10px !important;
  font-size: 11px !important; font-weight: 600 !important;
}
body.sp-mode .badge.bg-dark {
  background-color: #1a1022 !important; color: #e2e8f0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important; padding: 5px 10px !important;
  font-size: 11px !important; font-weight: 600 !important;
}
body.sp-mode .blink { animation: sp-blinker 1.2s linear infinite; }
@keyframes sp-blinker { 50% { opacity: 0.5; } }

/* ═══ PREÇO + DATA ═══ */
body.sp-mode .campanha-preco,
body.sp-mode .campanha-preco.porApenas {
  background: #3d1d4d !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  color: #e2e8f0 !important;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 !important;
}
body.sp-mode .campanha-preco span { color: #e2e8f0 !important; }
body.sp-mode .campanha-preco .porApenas,
body.sp-mode .porApenas span:last-child {
  color: var(--tema-participate-color, #fda92d) !important;
  font-weight: 700 !important;
}

/* ═══ CARDS GERAIS (descrição, prêmios, promoções, ranking) ═══ */
body.sp-mode .app-card,
body.sp-mode .app-card.card,
body.sp-mode .card {
  background: #3d1d4d !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 14px !important;
  color: #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
  margin-bottom: 10px !important;
}
body.sp-mode .app-card.card.bg-success {
  background: linear-gradient(145deg, #14532d, #0f3f22) !important;
  border-color: rgba(34,197,94,0.2) !important;
  color: #d1fae5 !important;
}
body.sp-mode .app-card h3,
body.sp-mode .app-card h4,
body.sp-mode .app-card h5,
body.sp-mode .app-card p,
body.sp-mode .app-card span,
body.sp-mode .app-card label { color: #e2e8f0 !important; }
body.sp-mode .sorteio_sorteioDesc__TBYaL {
  background: #3d1d4d !important; color: #cbd5e1 !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  padding: 14px !important;
  line-height: 1.6;
}

/* ═══ PROMOÇÃO/DESCONTO ═══ */
body.sp-mode .app-promocao-numeros,
body.sp-mode .app-promocao-numeros button {
  color: #e2e8f0 !important;
}
/* Título "Cotas premiadas" / "Roletas" / "Caixas premiadas" — branco sobre fundo SP */
body.sp-mode .app-promocao-numeros .app-title h1 {
  color: #ffffff !important;
}
body.sp-mode .app-promocao-numeros .app-title-desc {
  color: #cbd5e1 !important;
}
body.sp-mode .app-promocao-numeros .btn {
  background: #3d1d4d !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
body.sp-mode .app-promocao-numeros .btn:hover {
  background: #4a2459 !important;
  border-color: var(--tema-participate-color, #fda92d) !important;
}

/* ═══ RANKING TOP COMPRADORES ═══ */
body.sp-mode .top-compradores {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 4px 0;
}
body.sp-mode .comprador {
  background: #3d1d4d !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  padding: 14px 10px !important;
  margin: 0 !important;
  min-width: 140px;
}
body.sp-mode .comprador .ranking { color: var(--tema-participate-color, #fda92d) !important; }
body.sp-mode .comprador .customer-details,
body.sp-mode .comprador .customer-details b { color: #fff !important; }

/* ═══ SELETOR Livres/Reservados/Pagos (tabs) ═══ */
body.sp-mode .campanha-seletor {
  display: flex; gap: 6px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 10px;
}
body.sp-mode .seletor-item {
  flex: 1;
  background: #3d1d4d !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  color: #cbd5e1 !important;
  padding: 8px 6px !important;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  transition: all .15s;
}
body.sp-mode .seletor-item:hover,
body.sp-mode .seletor-item.active {
  background: #4a2459 !important;
  border-color: var(--tema-participate-color, #fda92d) !important;
  color: #fff !important;
}

/* ═══ PROGRESS BAR — roxa com leve espelhamento deslizando ═══ */
body.sp-mode .progress {
  height: 18px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.25),
    0 0 8px rgba(107, 26, 141, 0.2) !important;
  margin: 10px 0 !important;
  position: relative !important;
}
body.sp-mode .progress-bar,
body.sp-mode .progress .progress-bar.bg-success,
body.sp-mode .progress > .progress-bar {
  border-radius: 999px !important;
  background: linear-gradient(90deg, #6B1A8D, #a855f7) !important;
  background-color: #6B1A8D !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  position: relative !important;
  transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow:
    0 0 10px rgba(168, 85, 247, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  z-index: 1;
}
/* Espelhamento aplicado no TRACK (.progress) — sempre visível,
 * independente do preenchimento (funciona com 0% ou 100%) */
body.sp-mode .progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 40%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.18) 60%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: sp-progress-mirror 3.5s ease-in-out infinite;
  pointer-events: none;
  filter: blur(2px);
  z-index: 2;
  border-radius: inherit;
}
/* Brilho glassy fixo no topo do track */
body.sp-mode .progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 55%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}
@keyframes sp-progress-mirror {
  0%   { left: -60%; }
  70%  { left: 110%; }
  100% { left: 110%; }
}
/* Variantes alternativas */
body.sp-mode .progress-bar.progress-yellow { background: linear-gradient(90deg, #d97706, #fbbf24) !important; }
body.sp-mode .progress-bar.progress-red    { background: linear-gradient(90deg, #b91c1c, #ef4444) !important; }
body.sp-mode .progress-bar.progress-green  { background: linear-gradient(90deg, #6B1A8D, #a855f7) !important; }
/* Texto/percentual SEMPRE branco, acima dos pseudo-elementos */
body.sp-mode .progress,
body.sp-mode .progress *,
body.sp-mode .progress-bar,
body.sp-mode .progress-bar * { color: #ffffff !important; }
body.sp-mode .progress .position-absolute,
body.sp-mode .progress-bar {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
  font-weight: 700 !important;
}
body.sp-mode .progress .position-absolute {
  z-index: 4 !important;
  position: relative;
}
/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.sp-mode .progress::before { animation: none !important; display: none; }
}

/* ═══ GRID DE NÚMEROS (cotas) ═══ */
body.sp-mode .numeros-list {
  gap: 6px !important;
  padding: 8px 0;
}
body.sp-mode .numero-template {
  border-radius: 8px !important;
  padding: 8px 4px !important;
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  transition: transform .15s, background .15s;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
body.sp-mode .numero-template.bg-cota {
  background: #3d1d4d !important;
  color: #e2e8f0 !important;
  cursor: pointer;
}
body.sp-mode .numero-template.bg-cota:hover {
  background: #4a2459 !important;
  border-color: var(--tema-participate-color, #fda92d) !important;
}
body.sp-mode .numero-template.bg-info {
  background: #ca8a04 !important;
  color: #000 !important;
  opacity: 0.6;
  cursor: not-allowed;
}
body.sp-mode .numero-template.bg-success {
  background: #198754 !important;
  color: #fff !important;
  opacity: 0.7;
  cursor: not-allowed;
}
body.sp-mode .numero-template.numero-template-selected {
  background: var(--tema-participate-color, #fda92d) !important;
  color: #000 !important;
  border-color: #fff !important;
  transform: scale(1.05);
}

/* ═══ STICKY BOTTOM — QUERO PARTICIPAR ═══
 * SEM backdrop-filter pra não criar stacking context que pode
 * prender modais. Usa cor opaca que preserva legibilidade.
 */
body.sp-mode .sorteio-numeros-selecionados {
  background: #1f0a2b !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
body.sp-mode .cotas-checkout {
  color: #e2e8f0 !important;
}
body.sp-mode .cotas-checkout .col,
body.sp-mode .cotas-checkout > div {
  background: #3d1d4d !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  color: #fff !important;
}
/* #total dentro do botão "Quero participar" — branco sobre o fundo do botão */
body.sp-mode #add_to_cart #total,
body.sp-mode #place_order #total,
body.sp-mode .btn-success #total,
body.sp-mode .btn-participar-sorteio #total,
body.sp-mode #add_to_cart .total-price,
body.sp-mode .btn-success .total-price {
  color: #ffffff !important;
  font-weight: 700;
  position: relative;
  z-index: 3;
  text-shadow: 2px 2px 3px #000;
}
/* #total fora de botão (ex: resumo) — laranja de destaque */
body.sp-mode .total-price { color: var(--tema-participate-color, #fda92d); font-weight: 700; }
/* Garante que todos os descendentes do botão ficam acima dos pseudo-elementos */
body.sp-mode #add_to_cart *,
body.sp-mode #place_order *,
body.sp-mode .btn-success *,
body.sp-mode .btn-participar-sorteio * { position: relative; z-index: 2; }

/* ═══ BOTÕES PRINCIPAIS — fiel ao design "btn-participar-sorteio" ═══
 * Gradient roxo #6f1ab6 → #a855f7 com pulse + shine animations.
 */
body.sp-mode .btn-success,
body.sp-mode #add_to_cart,
body.sp-mode #place_order,
body.sp-mode .btn-participar-sorteio,
body.sp-mode button[id="add_to_cart"],
body.sp-mode button[id="place_order"] {
  background: linear-gradient(135deg, #6f1ab6, #a855f7) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  letter-spacing: 0.3px;
  min-height: 48px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 6px 15px rgba(156, 39, 176, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.2s ease;
  animation: sp-pulseBtn 2s infinite;
}

/* Brilho gradient fixo no topo do botão */
body.sp-mode .btn-success::before,
body.sp-mode #add_to_cart::before,
body.sp-mode #place_order::before,
body.sp-mode .btn-participar-sorteio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent 40%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

/* Shine passando em loop */
body.sp-mode .btn-success::after,
body.sp-mode #add_to_cart::after,
body.sp-mode #place_order::after,
body.sp-mode .btn-participar-sorteio::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: sp-shineMove 2.8s infinite;
  pointer-events: none;
  z-index: 1;
}

/* Hover: elevação + glow amarelado (fiel ao design) + shine acelera */
body.sp-mode .btn-success:hover,
body.sp-mode #add_to_cart:hover,
body.sp-mode #place_order:hover,
body.sp-mode .btn-participar-sorteio:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 10px 25px rgba(255, 193, 7, 0.5),
    inset 0 1px 0 rgba(255,255,255,0.4);
  filter: brightness(1.05);
  color: #fff !important;
}
body.sp-mode .btn-success:hover::after,
body.sp-mode #add_to_cart:hover::after,
body.sp-mode .btn-participar-sorteio:hover::after {
  animation-duration: 1.2s;
}

/* Active/click: afunda levemente */
body.sp-mode .btn-success:active,
body.sp-mode #add_to_cart:active,
body.sp-mode #place_order:active,
body.sp-mode .btn-participar-sorteio:active {
  transform: scale(0.96);
}

/* Conteúdo interno acima dos pseudo-elementos */
body.sp-mode .btn-success > *,
body.sp-mode #add_to_cart > *,
body.sp-mode #place_order > *,
body.sp-mode .btn-participar-sorteio > * {
  position: relative;
  z-index: 2;
}

/* Ícone bi-check-circle-fill dentro do botão — branco, sem wrapper com fundo */
body.sp-mode .btn-success i,
body.sp-mode .btn-success .bi-check-circle-fill,
body.sp-mode #add_to_cart i,
body.sp-mode #add_to_cart .bi-check-circle-fill,
body.sp-mode #place_order i,
body.sp-mode .btn-participar-sorteio i {
  color: #ffffff !important;
  font-size: 18px;
}
/* Wrapper do ícone (automatic.php injeta span.me-4 com bg branco inline) —
 * remove o quadradinho branco pro ícone aparecer direto sobre o gradient roxo */
body.sp-mode .btn-success .me-4,
body.sp-mode #add_to_cart .me-4,
body.sp-mode #place_order .me-4,
body.sp-mode .btn-participar-sorteio .me-4 {
  background-color: transparent !important;
  background: transparent !important;
  aspect-ratio: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-right: 8px !important;
}
/* Textos dentro do botão — brancos */
body.sp-mode .btn-success span,
body.sp-mode #add_to_cart span,
body.sp-mode #place_order span,
body.sp-mode .btn-participar-sorteio span {
  color: #ffffff !important;
}

/* Preço dentro do botão ("valor") */
body.sp-mode .btn-participar-sorteio .valor,
body.sp-mode .btn-participar-sorteio #total {
  background: rgba(0,0,0,0.25);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff !important;
}

/* Keyframes — pulse de glow (amarelo dourado, fiel ao design) */
@keyframes sp-pulseBtn {
  0%   { box-shadow: 0 6px 15px rgba(156, 39, 176, 0.35), 0 0 0 rgba(255, 193, 7, 0.4); }
  50%  { box-shadow: 0 6px 18px rgba(156, 39, 176, 0.5),  0 0 12px rgba(255, 193, 7, 0.6); }
  100% { box-shadow: 0 6px 15px rgba(156, 39, 176, 0.35), 0 0 0 rgba(255, 193, 7, 0.4); }
}

/* Keyframes — shine deslizando */
@keyframes sp-shineMove {
  0%   { left: -80%; }
  100% { left: 130%; }
}

/* Respeita preferência de redução de movimento */
@media (prefers-reduced-motion: reduce) {
  body.sp-mode .btn-success,
  body.sp-mode #add_to_cart,
  body.sp-mode #place_order,
  body.sp-mode .btn-participar-sorteio {
    animation: none !important;
  }
  body.sp-mode .btn-success::after,
  body.sp-mode #add_to_cart::after,
  body.sp-mode #place_order::after,
  body.sp-mode .btn-participar-sorteio::after {
    animation: none !important;
    display: none;
  }
}
body.sp-mode .btn-primary {
  background: #6b1a8d !important;
  border-color: #6b1a8d !important;
  color: #fff !important;
  border-radius: 10px !important;
}
body.sp-mode .btn {
  border-radius: 10px !important;
}
body.sp-mode .addNumero,
body.sp-mode .removeNumero {
  background: #3d1d4d !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
}
body.sp-mode .addNumero:hover,
body.sp-mode .removeNumero:hover {
  background: #4a2459 !important;
  border-color: var(--tema-participate-color, #fda92d) !important;
}

/* ═══ INPUTS/FORMS ═══ */
body.sp-mode .form-control,
body.sp-mode input.form-control,
body.sp-mode input[type="text"],
body.sp-mode input[type="number"],
body.sp-mode input[type="tel"],
body.sp-mode input[type="email"],
body.sp-mode input[type="password"],
body.sp-mode select,
body.sp-mode textarea {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
body.sp-mode .form-control:focus,
body.sp-mode select:focus {
  border-color: var(--tema-participate-color, #fda92d) !important;
  box-shadow: 0 0 0 0.15rem rgba(253,169,45,0.18) !important;
  background: rgba(255,255,255,0.05) !important;
}
body.sp-mode .form-control::placeholder { color: rgba(255,255,255,0.4) !important; }
/* Preserva o comportamento do Bootstrap form-floating: placeholder transparente
   para o label poder ficar "dentro" do input quando vazio, em vez de sobrepor. */
body.sp-mode .form-floating > .form-control::placeholder { color: transparent !important; }
body.sp-mode label { color: #cbd5e1 !important; }

/* ═══ MODAIS (checkout/consulta/aviso/erro) ═══ */
body.sp-mode .modal-content {
  background: linear-gradient(145deg, #212b36, rgba(0,0,0,0.15)) !important;
  border: none !important;
  border-radius: 18px !important;
  color: #fff !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.45) !important;
}
body.sp-mode .modal-header {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: transparent !important;
  color: #fff !important;
}
body.sp-mode .modal-title { color: #fff !important; font-weight: 600; }
body.sp-mode .modal-body { color: #e2e8f0 !important; }
body.sp-mode .modal-footer {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: transparent !important;
}
body.sp-mode .btn-close { filter: invert(1); opacity: 0.85; }

/* ═══ SELETOR DE QUANTIDADE (v2) — Grid +50/+100/+300... ═══
 * Design fiel ao screenshot: fundo preto, número branco grande,
 * label "SELECIONAR" em amarelo/laranja. "Mais popular" em roxo.
 */
body.sp-mode .vendasExpressNumsSelect.v2 .item .item-content {
  background-color: var(--tema-btn-color, #0a0612) !important;
  color: var(--tema-btn-text, #ffffff) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 12px !important;
  padding: 14px 8px !important;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}
body.sp-mode .vendasExpressNumsSelect.v2 .item:not(.mais-popular) .item-content:hover {
  transform: translateY(-1px);
  border-color: var(--tema-btn-hover-border, #22c55e) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
body.sp-mode .vendasExpressNumsSelect.v2 .item .item-content h3,
body.sp-mode .vendasExpressNumsSelect.v2 .item .item-content .h3 {
  color: var(--tema-btn-text, #ffffff) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  line-height: 1 !important;
}
body.sp-mode .vendasExpressNumsSelect.v2 .item .item-content p {
  color: #fda92d !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
}
/* "Mais Popular" destacado */
body.sp-mode .vendasExpressNumsSelect.v2 .item.mais-popular .item-content {
  background: linear-gradient(135deg, var(--tema-participate-color, #6f1ab6), #a855f7) !important;
  border: 1px solid rgba(168, 85, 247, 0.6) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(107, 26, 141, 0.35) !important;
}
body.sp-mode .vendasExpressNumsSelect.v2 .item.mais-popular .item-content h3,
body.sp-mode .vendasExpressNumsSelect.v2 .item.mais-popular .item-content .h3,
body.sp-mode .vendasExpressNumsSelect.v2 .item.mais-popular .item-content p {
  color: #fff !important;
}
body.sp-mode .vendasExpressNumsSelect .item.mais-popular:before {
  background-color: var(--tema-participate-color, #6f1ab6) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 3px 12px !important;
  top: -10px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15) !important;
  letter-spacing: 0.2px !important;
}

/* ═══ CONTADOR [- 1 +] (vendasExpressNums) ═══
 * Linha com botão menos (escuro), input (escuro) e botão mais (roxo).
 */
body.sp-mode .vendasExpressNums.app-card,
body.sp-mode .vendasExpressNums {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
body.sp-mode .vendasExpressNums .card-body {
  background: transparent !important;
  padding: 0 !important;
  gap: 6px !important;
}
body.sp-mode .vendasExpressNums .left,
body.sp-mode .vendasExpressNums .right,
body.sp-mode .vendasExpressNums .center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.sp-mode .vendasExpressNums .removeNumero,
body.sp-mode .vendasExpressNums .addNumero {
  width: 40px; height: 40px;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform .1s ease, box-shadow .15s ease !important;
}
body.sp-mode .vendasExpressNums .removeNumero {
  background: var(--tema-btn-color, #0a0612) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
body.sp-mode .vendasExpressNums .addNumero {
  background: var(--tema-participate-color, #6f1ab6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(107, 26, 141, 0.35) !important;
}
body.sp-mode .vendasExpressNums .removeNumero:hover,
body.sp-mode .vendasExpressNums .addNumero:hover { transform: translateY(-1px); }
body.sp-mode .vendasExpressNums .removeNumero i,
body.sp-mode .vendasExpressNums .addNumero i {
  font-size: 22px !important;
  line-height: 1 !important;
}
/* Substitui o ícone do bootstrap-icons (bi-*-circle) pelo glifo puro
 * "+"/"−" sem círculo — usando pseudo-element com font-family padrão.
 */
body.sp-mode .vendasExpressNums .removeNumero i::before,
body.sp-mode .vendasExpressNums .addNumero i::before {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: inline-block;
}
body.sp-mode .vendasExpressNums .removeNumero i::before { content: "\2212" !important; } /* − minus sign U+2212 */
body.sp-mode .vendasExpressNums .addNumero i::before    { content: "\002B" !important; } /* + plus sign */
body.sp-mode .vendasExpressNums input.qty {
  background: var(--tema-btn-color, #0a0612) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  width: 56px !important;
  height: 40px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-align: center !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.sp-mode .vendasExpressNums input.qty:focus {
  outline: none !important;
  border-color: var(--tema-btn-hover-border, var(--tema-participate-color, #6f1ab6)) !important;
}

/* ═══ SHARE FIXED BUTTONS ═══ */
body.sp-mode .sorteio_sorteioShare__247_t a {
  background: #3d1d4d !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
body.sp-mode .sorteio_sorteioShare__247_t a.whatsapp-grupo { background: #25d366 !important; }

/* ═══ HEADER PADRÃO (quando sp-mode ativo em páginas internas) ═══
 * Garante que o header-app-header fique roxo e legível mesmo em
 * páginas que usam o header.php padrão (não só home_sp).
 */
body.sp-mode .header-app-header .header-app-header-container,
body.sp-mode .black-bar,
body.sp-mode .bg-cor-primaria {
  background: var(--tema-header-color, #6B1A8D) !important;
  color: #fff !important;
}
body.sp-mode .header-app-header a,
body.sp-mode .header-app-header button,
body.sp-mode .header-app-header i { color: #fff !important; }

/* ═══ FOOTER PADRÃO ═══ */
body.sp-mode footer,
body.sp-mode .container-fluid.rodape {
  background: #0f172a !important;
  color: #cbd5e1 !important;
}
body.sp-mode footer a,
body.sp-mode .container-fluid.rodape a { color: #cbd5e1 !important; }
body.sp-mode footer a:hover { color: var(--tema-participate-color, #fda92d) !important; }

/* ═══ TEXT UTILITIES ═══ */
body.sp-mode .text-dark,
body.sp-mode .text-muted { color: #94a3b8 !important; }
body.sp-mode .text-white { color: #fff !important; }
body.sp-mode hr { border-color: rgba(255,255,255,0.08) !important; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 400px) {
  body.sp-mode .app-title h1 { font-size: 18px !important; }
  body.sp-mode .comprador { min-width: 120px; padding: 10px 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════
 * PRESERVAR ESTILOS ORIGINAIS
 * Blocos que mantêm a aparência padrão do sistema (mesmo com
 * Template 3 ativo), conforme requisitado:
 *   1. Modal "Consulta de compras" (Meus Números)
 *   2. Cards de ganhadores/prêmios (.app-card.card.bg-success)
 *   3. Widget de Prêmios por Horário (prize_schedules.php → .ps-*)
 *   4. Cotas Premiadas (.app-promocao-numeros com "Cotas premiadas")
 * ═══════════════════════════════════════════════════════════════ */

/* ─── Garante z-index correto: modal sempre acima da sticky bar ─── */
body.sp-mode .sorteio-numeros-selecionados { z-index: 100 !important; }
body.sp-mode .modal-backdrop { z-index: 1055 !important; }
body.sp-mode .modal { z-index: 1060 !important; }
body.sp-mode #modal-consultaCompras { z-index: 1060 !important; }

/* ─── 1. Modal "Meus Números" (#modal-consultaCompras) ─── */
body.sp-mode #modal-consultaCompras .modal-content {
  background: #ffffff !important;
  color: #212529 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
}
body.sp-mode #modal-consultaCompras .modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid #dee2e6 !important;
  color: #212529 !important;
}
body.sp-mode #modal-consultaCompras .modal-title { color: #212529 !important; }
body.sp-mode #modal-consultaCompras .modal-body { color: #212529 !important; }
body.sp-mode #modal-consultaCompras .modal-footer {
  background: #ffffff !important;
  border-top: 1px solid #dee2e6 !important;
}
body.sp-mode #modal-consultaCompras .btn-close { filter: none !important; opacity: 0.5 !important; }
body.sp-mode #modal-consultaCompras label { color: #212529 !important; }
body.sp-mode #modal-consultaCompras input,
body.sp-mode #modal-consultaCompras .form-control,
body.sp-mode #modal-consultaCompras select,
body.sp-mode #modal-consultaCompras textarea {
  background: #ffffff !important;
  color: #212529 !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
}
body.sp-mode #modal-consultaCompras input::placeholder { color: #6c757d !important; }
body.sp-mode #modal-consultaCompras .btn-primary,
body.sp-mode #modal-consultaCompras button[type="submit"] {
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
  animation: none !important;
  box-shadow: none !important;
  border-radius: 0.375rem !important;
}
body.sp-mode #modal-consultaCompras .btn-primary::before,
body.sp-mode #modal-consultaCompras .btn-primary::after,
body.sp-mode #modal-consultaCompras button::before,
body.sp-mode #modal-consultaCompras button::after { display: none !important; }

/* ─── 2. Cards de Ganhadores (prêmios do sorteio realizado) ─── */
body.sp-mode .app-card.card.bg-success,
body.sp-mode .app-card.bg-success {
  background: #198754 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
}
body.sp-mode .app-card.card.bg-success *,
body.sp-mode .app-card.bg-success * {
  color: #ffffff !important;
}
body.sp-mode .app-card.card.bg-success.text-dark,
body.sp-mode .app-card.card.bg-success .text-dark {
  color: #000000 !important;
}
body.sp-mode .app-card.card.bg-success .text-dark * { color: #000000 !important; }

/* ─── 3. Widget de Prêmios por Horário (prize_schedules.php) +
 *      Promoção Cota (promocao_cota.php)
 * Alinha a tonalidade com a seção "Cotas Premiadas" do template SP:
 * container #482458 / accent #6B1A8D / card interno #4c256d.
 */

/* Promoção Cota — outer wrapper (tem estilo inline, por isso !important) */
body.sp-mode .promocao-cota-wrap {
  background: #482458 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}
/* Cards dos números (maior/menor cota) */
body.sp-mode .promocao-cota-wrap [style*="background: var(--tema-promo-cota-bg"],
body.sp-mode .promocao-cota-wrap div[style*="background: var(--tema-promo-cota-bg"] {
  background: #6B1A8D !important;
  color: #fff !important;
}
/* Chips do cronômetro */
body.sp-mode .promocao-cota-wrap .pc-countdown-item {
  background: #4c256d !important;
}

/* Prêmios por Horário — widgets grandes */
body.sp-mode .ps-widget {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
body.sp-mode .ps-widget.ps-bg-quota,
body.sp-mode .ps-widget.ps-bg-top {
  background: linear-gradient(135deg, #482458, #6B1A8D) !important;
}
body.sp-mode .ps-widget .ps-prizes-bar,
body.sp-mode .ps-widget .ps-timer {
  background: rgba(0,0,0,0.35) !important;
}
body.sp-mode .ps-widget .ps-winner-row,
body.sp-mode .ps-widget .ps-card-item {
  background: #4c256d !important;
}
body.sp-mode .ps-widget .ps-winner-badge,
body.sp-mode .ps-widget .ps-card-quota {
  background: rgba(0,0,0,0.4) !important;
  color: #fff !important;
}
body.sp-mode .ps-widget .ps-widget-title,
body.sp-mode .ps-widget .ps-prize-item,
body.sp-mode .ps-widget .ps-winner-name,
body.sp-mode .ps-widget .ps-card-name {
  color: #fff !important;
}

/* ─── 4. Cotas Premiadas (app-promocao-numeros) — design fiel ao
 * steakpremiacoes-com/sorteio-100-cotas-para-o-sorteio-kit-cerveja-e-churrasco-2
 * Paleta: container #482458 / hover/ganho #6B1A8D / card interno #4c256d
 * Números: pill cinza claro #e5e7eb com texto preto
 */
body.sp-mode .app-promocao-numeros .app-card.card.sorteio_sorteioDesc__TBYaL {
  background: #482458 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  padding: 4px !important;
}
body.sp-mode .app-promocao-numeros .app-card.card.sorteio_sorteioDesc__TBYaL,
body.sp-mode .app-promocao-numeros .app-card.card.sorteio_sorteioDesc__TBYaL * {
  color: #ffffff !important;
}

/* Container interno (caso o HTML do admin use .body-cotas-premiadas) */
body.sp-mode .body-cotas-premiadas {
  background: #482458 !important;
  color: #ffffff !important;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  max-height: 720px;
  overflow: auto;
}
body.sp-mode .body-cotas-premiadas::-webkit-scrollbar { display: none; }

/* Linha de cota premiada (.row-cota) */
body.sp-mode .body-cotas-premiadas .row-cota,
body.sp-mode .row-cota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #482458 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  transition: all .2s ease;
  color: #ffffff !important;
}
body.sp-mode .body-cotas-premiadas .row-cota:hover,
body.sp-mode .row-cota:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* Estado "cota-comprada" (cotas já ganhas, destaque roxo médio) */
body.sp-mode .body-cotas-premiadas .row-cota.cota-comprada,
body.sp-mode .row-cota.cota-comprada {
  background: #6B1A8D !important;
  border: none !important;
  color: #ffffff !important;
}

/* Badge do número da cota */
body.sp-mode .body-cotas-premiadas .number-cota,
body.sp-mode .number-cota {
  background: #e5e7eb !important;
  color: #111 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 13px;
}
body.sp-mode .body-cotas-premiadas .cota-comprada .number-cota,
body.sp-mode .cota-comprada .number-cota {
  background: #ffffff !important;
  color: #111 !important;
}

/* Status à direita */
body.sp-mode .body-cotas-premiadas .cota-status,
body.sp-mode .cota-status {
  font-weight: 600;
  font-size: 14px;
  color: #ffffff !important;
}

/* Variação .item-cota-premiada.dark */
body.sp-mode .item-cota-premiada.dark,
body.sp-mode .cota-premiada {
  color: #ffffff !important;
  border-radius: 5px;
  font-weight: bold;
}

/* Card interno (quando o admin usa .app-promocao-numeros .app-card) */
body.sp-mode .app-promocao-numeros .app-card {
  background: #4c256d !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  color: #ffffff !important;
}
body.sp-mode .app-promocao-numeros .card-body { background: transparent !important; color: #ffffff !important; }

/* ─── Cotas Premiadas renderizadas via AJAX (class/Main.php?action=load_cotas)
 * HTML real usa .sc-3f9a15f1-7 com style inline linear-gradient.
 * Sobrescreve com paleta SP (roxo escuro/roxo claro).
 */
body.sp-mode #cotas-container .sc-3f9a15f1-7,
body.sp-mode .cotas_modal .sc-3f9a15f1-7 {
  background: #482458 !important;
  border-radius: 999px !important;
  margin-bottom: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.06);
}
body.sp-mode #cotas-container .sc-3f9a15f1-7.reservada,
body.sp-mode .cotas_modal .sc-3f9a15f1-7.reservada {
  background: #6B1A8D !important;
  border: none;
}
body.sp-mode #cotas-container .sc-3f9a15f1-7.disponivel,
body.sp-mode .cotas_modal .sc-3f9a15f1-7.disponivel {
  background: #482458 !important;
}
/* Pill do número da cota (span.new_gradient_anime ou .wd-*) */
body.sp-mode #cotas-container .sc-3f9a15f1-7 .new_gradient_anime,
body.sp-mode #cotas-container .sc-3f9a15f1-7 [class*="wd-"],
body.sp-mode .cotas_modal .sc-3f9a15f1-7 .new_gradient_anime,
body.sp-mode .cotas_modal .sc-3f9a15f1-7 [class*="wd-"] {
  background-color: #ffffff !important;
  color: #111 !important;
}
body.sp-mode #cotas-container .sc-3f9a15f1-7.reservada .new_gradient_anime,
body.sp-mode .cotas_modal .sc-3f9a15f1-7.reservada .new_gradient_anime {
  background-color: #ffffff !important;
  color: #14532d !important;
}
/* Textos dentro (prize, ganhador, "Disponível") */
body.sp-mode #cotas-container .sc-3f9a15f1-7 .prize,
body.sp-mode #cotas-container .sc-3f9a15f1-7 span,
body.sp-mode .cotas_modal .sc-3f9a15f1-7 .prize,
body.sp-mode .cotas_modal .sc-3f9a15f1-7 span {
  color: #ffffff !important;
}
/* Exceção: o número da cota mantém texto escuro sobre fundo branco */
body.sp-mode #cotas-container .sc-3f9a15f1-7 .new_gradient_anime,
body.sp-mode .cotas_modal .sc-3f9a15f1-7 .new_gradient_anime {
  color: #111 !important;
}
body.sp-mode #cotas-container .sc-3f9a15f1-7.reservada .new_gradient_anime {
  color: #14532d !important;
}

/* Header do bloco de cotas premiadas (h5 + subtexto) */
body.sp-mode .app-promocao-numeros h5,
body.sp-mode .app-promocao-numeros .sc-3f9a15f1-14 { color: #ffffff !important; }
body.sp-mode .app-promocao-numeros .sc-3f9a15f1-13 span { color: #cbd5e1 !important; }

/* Skeleton loading (barras cinzas que aparecem antes do AJAX) */
body.sp-mode #cotas-container .skeleton {
  background: linear-gradient(90deg, #3a1a48 0%, #5a2b6d 50%, #3a1a48 100%) !important;
  border-radius: 999px;
  height: 28px;
  margin-bottom: 6px;
  animation: sp-skeleton-shimmer 1.8s infinite;
}
@keyframes sp-skeleton-shimmer {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
body.sp-mode #cotas-container .hr {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 0;
  border: none;
}

/* Modal expandido #modal-cotas */
body.sp-mode #modal-cotas .modal-content {
  background: #251729 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px;
}
body.sp-mode #modal-cotas .modal-header { border-bottom: 1px solid rgba(255,255,255,0.08); }
body.sp-mode #modal-cotas h5,
body.sp-mode #modal-cotas .modal-title { color: #ffffff !important; }
body.sp-mode #modal-cotas .cotas_modal { background: transparent !important; color: #ffffff !important; }

/* ─── 5. Alerts Bootstrap (fundo claro, texto escuro) ─── */
/* Todos os .alert-* têm fundo claro e precisam de texto escuro
 * para legibilidade. As regras genéricas do sp-mode (.app-card *,
 * .text-dark, etc.) sobrescreviam a cor padrão do Bootstrap.
 * Preserva as cores Bootstrap 5 originais em qualquer contexto.
 */
body.sp-mode .alert,
body.sp-mode .alert * { color: inherit; }

body.sp-mode .alert-success,
body.sp-mode span.alert-success,
body.sp-mode .app-card .alert-success,
body.sp-mode .app-card span.alert-success,
body.sp-mode .app-card p.alert-success {
  background: #d1e7dd !important;
  color: #0a3622 !important;
  border: 1px solid #a3cfbb !important;
}
body.sp-mode .alert-warning,
body.sp-mode .app-card .alert-warning,
body.sp-mode .app-card p.alert-warning {
  background: #fff3cd !important;
  color: #664d03 !important;
  border: 1px solid #ffe69c !important;
}
body.sp-mode .alert-info,
body.sp-mode .app-card .alert-info,
body.sp-mode .app-card p.alert-info {
  background: #cff4fc !important;
  color: #055160 !important;
  border: 1px solid #9eeaf9 !important;
}
body.sp-mode .alert-danger,
body.sp-mode .app-card .alert-danger,
body.sp-mode .app-card p.alert-danger {
  background: #f8d7da !important;
  color: #58151c !important;
  border: 1px solid #f1aeb5 !important;
}
body.sp-mode .alert-primary,
body.sp-mode .app-card .alert-primary,
body.sp-mode .app-card p.alert-primary {
  background: #cfe2ff !important;
  color: #052c65 !important;
  border: 1px solid #9ec5fe !important;
}
body.sp-mode .alert-secondary,
body.sp-mode .app-card .alert-secondary {
  background: #e2e3e5 !important;
  color: #2b2f32 !important;
  border: 1px solid #c4c8cb !important;
}
body.sp-mode .alert-light,
body.sp-mode .app-card .alert-light {
  background: #fcfcfd !important;
  color: #636464 !important;
  border: 1px solid #e8e9ea !important;
}
body.sp-mode .alert-dark,
body.sp-mode .app-card .alert-dark {
  background: #ced4da !important;
  color: #141619 !important;
  border: 1px solid #a6acb2 !important;
}
/* Filhos dentro do alert herdam a cor do próprio alert (não do sp) */
body.sp-mode .alert-warning *,
body.sp-mode .alert-info *,
body.sp-mode .alert-danger *,
body.sp-mode .alert-primary *,
body.sp-mode .alert-secondary *,
body.sp-mode .alert-light *,
body.sp-mode .alert-dark * { color: inherit !important; }