/**
 * RIFAS 2025 - Tema premium (página do jogo / campanha)
 * Objetivo: deixar seleção/checkout/ranking/cotas com visual mais robusto e profissional.
 *
 * Observação: esta folha é carregada após os estilos inline de `view_product.php`,
 * então pode sobrescrever com menos `!important`.
 */

/* Base da página de campanha */
.campanha-header,
.campanha-buscas,
.campanha-seletor,
.sorteio-seletor,
.numeros-list,
.top-compradores,
.app-promocao-numeros {
  color: rgba(255, 255, 255, 0.92);
}

/* Cards padrão (glass) */
.app-main .app-card.card,
.app-main .sorteio_sorteioDesc__TBYaL,
.app-main .top-compradores {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Títulos das seções (Promoção, Ranking, Cotas etc.) */
.app-main .app-title h1,
.app-main .app-title h2,
.app-main .app-title h3,
.app-main h1 {
  color: rgba(255, 255, 255, 0.92) !important;
}
.app-main .app-title .app-title-desc {
  color: rgba(255, 255, 255, 0.70) !important;
}

/* Promoção: botões/pills */
.app-main .app-promocao-numeros .btn.btn-success {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}
.app-main .app-promocao-numeros .btn.btn-success:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Grid de seleção (+10 +20 +50 ...) */
.vendasExpressNumsSelect.v2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
@media (max-width: 520px) {
  .vendasExpressNumsSelect.v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.vendasExpressNumsSelect.v2 .item {
  width: auto !important;
}
.vendasExpressNumsSelect.v2 .item .item-content {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  min-height: 92px !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.vendasExpressNumsSelect.v2 .item .item-content:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.vendasExpressNumsSelect.v2 .item .item-content h3 {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.vendasExpressNumsSelect.v2 .item .item-content p {
  opacity: 0.85;
}

/* Mais popular */
.vendasExpressNumsSelect.v2 .item.mais-popular .item-content {
  background: linear-gradient(135deg, rgba(14, 159, 110, 0.35), rgba(14, 159, 110, 0.18)) !important;
  border: 1px solid rgba(14, 159, 110, 0.55) !important;
}
.vendasExpressNumsSelect .item.mais-popular:before {
  border-radius: 0 0 10px 10px !important;
  font-weight: 700 !important;
}

/* Contador + botão participar */
.app-main .vendasExpressNums {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.app-main .vendasExpressNums input.qty {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-radius: 12px !important;
  height: 44px !important;
}
.app-main .btn.btn-success.w-100.py-2,
.app-main .btn.btn-success.w-100 {
  background: linear-gradient(135deg, #0e9f6e 0%, #0a7d55 100%) !important;
  border: 1px solid rgba(14, 159, 110, 0.55) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(14, 159, 110, 0.22) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}
.app-main .btn.btn-success.w-100.py-2:hover,
.app-main .btn.btn-success.w-100:hover {
  filter: brightness(1.03);
}

/* Ranking / top compradores */
.app-main .top-compradores {
  padding: 14px !important;
  margin-top: 6px !important;
}
.app-main .top-compradores .item-content {
  max-width: none !important;
  min-width: 0 !important;
}
.app-main .top-compradores .customer-details {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  border-radius: 14px !important;
  padding: 14px !important;
}

/* Lista de números (manual) */
.numero-template {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.numero-template:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.numero-template.numero-template-selected {
  background: rgba(14, 159, 110, 0.25) !important;
  border-color: rgba(14, 159, 110, 0.55) !important;
}

/* Barra sticky “números selecionados” */
.sorteio-numeros-selecionados {
  background: rgba(0, 0, 0, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Header da campanha: sempre mostrar logo e manter sticky */
.header-app-header.campanha {
  position: sticky !important;
  top: 0;
}
.header-app-header.campanha .header-app-brand {
  display: block !important;
}

/* Botões laterais redes sociais / suporte – padrão profissional */
.whatsapp-grupo,
.telegram-grupo,
.instagram-grupo,
.suporte {
  margin-bottom: 8px;
}
.whatsapp-grupo a,
.telegram-grupo a,
.instagram-grupo a,
.suporte a {
  text-decoration: none;
  display: block;
}
.social-sidebar-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.social-sidebar-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
}
.social-sidebar-btn i {
  font-size: 1.25rem !important;
  opacity: 0.95;
}
.social-sidebar-btn--whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #fff !important;
}
.social-sidebar-btn--whatsapp:hover {
  color: #fff !important;
}
.social-sidebar-btn--telegram {
  background: linear-gradient(135deg, #0088cc 0%, #006699 100%) !important;
  color: #fff !important;
}
.social-sidebar-btn--telegram:hover {
  color: #fff !important;
}
.social-sidebar-btn--instagram {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  color: #fff !important;
}
.social-sidebar-btn--instagram:hover {
  color: #fff !important;
}
.social-sidebar-btn--suporte {
  background: linear-gradient(135deg, #f5b041 0%, #d68910 100%) !important;
  color: #1a1a1a !important;
}
.social-sidebar-btn--suporte:hover {
  color: #1a1a1a !important;
}