/* ========================================
   🎄 TEMA NATALINO - TikTok Bônus
   Mantém identidade TikTok + Espírito Natalino
   ======================================== */

:root {
  --natal-vermelho: #c41e3a;
  --natal-verde: #165b33;
  --natal-dourado: #ffd700;
  --natal-branco: #ffffff;
  --tiktok-preto: #000000;
  --tiktok-rosa: #fe2c55;
  --tiktok-azul: #00f2ea;
}

/* === FUNDO NATALINO === */
body {
  background: linear-gradient(180deg, 
    #000000 0%, 
    #0a1e0a 30%,
    #1a0a0a 70%,
    #000000 100%) !important;
  position: relative;
}

/* === LUZES DE NATAL NO TOPO === */
.christmas-lights {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, 
    #ff0000 0%, #00ff00 10%, 
    #0000ff 20%, #ffff00 30%, 
    #ff00ff 40%, #00ffff 50%,
    #ff0000 60%, #00ff00 70%,
    #0000ff 80%, #ffff00 90%,
    #ff00ff 100%);
  opacity: 0.6;
  animation: twinkle 1.5s infinite alternate;
  z-index: 9998;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

@keyframes twinkle {
  0% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

/* === NEVE CAINDO === */
.snow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  color: #fff;
  user-select: none;
  pointer-events: none;
  animation: snowfall linear infinite;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

@keyframes snowfall {
  0% {
    top: -10%;
    transform: translateX(0) rotate(0deg);
  }
  100% {
    top: 110%;
    transform: translateX(100px) rotate(360deg);
  }
}

/* === TÍTULO COM TEMA NATALINO === */
.title {
  background: linear-gradient(135deg, 
    var(--natal-vermelho) 0%, 
    var(--natal-dourado) 50%, 
    var(--natal-verde) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  position: relative;
}

/* === EMOJIS DECORATIVOS NO TÍTULO === */
.title::before {
  content: '🎄';
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  -webkit-text-fill-color: initial;
  animation: bounce 2s infinite;
}

/* Emoji de papai noel removido do título */

@keyframes bounce {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-60%) scale(1.1); }
}

/* === CONTAINER DE SALDO COM EFEITO NATALINO === */
.container-saldo {
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}

/* Remover sombras douradas dos elementos dentro do container-saldo */
.container-saldo .saldo-info,
.container-saldo .saldo-label,
.container-saldo .saldo-valor,
.container-saldo .saldo-text,
.container-saldo .valor-currency,
.container-saldo .saldo-action,
.container-saldo .btn-sacar {
  filter: none !important;
  text-shadow: none !important;
}

/* Garantir que não há drop-shadow dourado nos valores dentro do container-saldo */
.container-saldo .valor-currency {
  filter: none !important;
}

/* Permitir que o badge apareça mesmo com overflow hidden no container */
.container-saldo .saldo-action {
  overflow: visible !important;
  position: relative !important;
}

/* Efeito rotativo dourado removido */

/* === VALORES COM GRADIENTE NATALINO === */
.valor-currency {
  background: linear-gradient(135deg, 
    #ff0000 0%, 
    #ffd700 30%,
    #00ff00 60%,
    #ffd700 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* === BOTÃO SACAR - FUNDO PRETO === */
.btn-sacar {
  background: #000000 !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}

/* Emoji de presente removido do botão de sacar */

/* === BADGE PIX SOBREPOSTO AO BOTÃO === */
.saldo-action {
  position: relative !important;
  overflow: visible !important;
  z-index: 5 !important;
}

.pix-badge {
  position: absolute !important;
  top: -8px !important;
  right: -3px !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
}

.pix-badge img {
  width: 31px !important;
  height: 11px !important;
  padding: 2px 4px !important;
  border-radius: 6px 6px 6px 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.btn-sacar {
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.btn-sacar:hover {
  background: #000000 !important;
}

/* === MENSAGEM DE PARABÉNS === */
.parabens {
  background: linear-gradient(135deg, 
    rgba(196, 30, 58, 0.1) 0%, 
    rgba(22, 91, 51, 0.1) 100%);
}

.parabens-txtum {
  color: var(--natal-dourado) !important;
  position: relative;
}

.parabens-txtum::before {
  content: '🎉';
  margin-right: 8px;
}

.parabens-txtum::after {
  content: '🎉';
  margin-left: 8px;
}

.parabens-valor {
  background: linear-gradient(135deg, 
    #ff0000, #ffd700, #00ff00) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* === DIAS DE CHECK-IN COM FLOCOS DE NEVE === */
.day-tracker__box {
  box-shadow: 
    0 2px 8px rgba(255, 0, 0, 0.15),
    0 0 15px rgba(0, 255, 0, 0.1) !important;
  position: relative;
}

.day-tracker__content::after {
  content: '❄️';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.9em;
  animation: rotate-snowflake 4s linear infinite;
}

@keyframes rotate-snowflake {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.day-tracker__coin img {
  animation: coin-shine 2s infinite;
}

@keyframes coin-shine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

/* === BOTÃO CONCLUÍDO - COR ORIGINAL === */
.btn-concluido {
  background: #f1f1f3 !important;
  color: #d4d4d4 !important;
  font-weight: 500 !important;
}

.btn-concluido::before {
  content: '';
  margin-right: 0;
}

/* === BARRA DE PROGRESSO === */
.progress-step {
  position: relative;
}

.progress-step .step-icon {
}

/* === POPUP COM TEMA NATALINO === */
.popup {
  background: linear-gradient(135deg, 
    #c41e3a 0%, 
    #a01830 50%,
    #8b1428 100%) !important;
  box-shadow: 
    0 10px 50px rgba(0, 0, 0, 0.5),
    inset 0 0 100px rgba(255, 255, 255, 0.1) !important;
}

/* Garantir que textos no popup fiquem brancos/dourados */
.popup .gol-txt,
.popup span {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.gol {
  color: #ffd700 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  font-weight: 700;
}

.gol::before {
  content: '🎁 ';
}

.gol::after {
  content: ' 🎄';
}

/* Estilizar melhor a imagem do popup */
.gol-img {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: 120px !important;
  object-fit: contain !important;
  object-position: center !important;
  aspect-ratio: auto !important;
  position: absolute !important;
  top: -90px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Valor no popup deve ser bem visível */
.popup .gol-valor {
  background: linear-gradient(135deg, 
    #ffd700 0%, 
    #ffffff 50%,
    #ffd700 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
  font-size: 1.2em !important;
}

/* Timer no popup */
.popup .timer-wrapper {
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px;
  padding: 15px;
}

.popup .timer-label {
  color: #ffd700 !important;
  font-weight: 600;
}

.popup .timer-box {
  background: linear-gradient(135deg, 
    #ffd700 0%, 
    #ffed4e 100%) !important;
  color: #8b1428 !important;
  font-weight: 900;
  box-shadow: 
    inset 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Botão obrigado no popup - FUNDO PRETO */
.popup .btn-obrigado {
  background: #000000 !important;
  color: #fff !important;
  font-weight: 500;
  border: 0 !important;
  box-shadow: none !important;
}

.popup .btn-obrigado:hover {
  background: #000000 !important;
  transform: none;
  box-shadow: none !important;
}

/* === BOTÕES DE PAGAMENTO - FUNDO PRETO === */
.payment-submit-button,
.confirmation-cta-button {
  background: #000000 !important;
  box-shadow: none !important;
}

.payment-submit-button:hover,
.confirmation-cta-button:hover {
  background: #000000 !important;
  transform: none;
  box-shadow: none !important;
}

/* === ESTRELAS DECORATIVAS === */
.saldo-info::before {
  content: '⭐';
  position: absolute;
  top: -10px;
  left: -10px;
  font-size: 1.2em;
  animation: star-twinkle 2s infinite;
}

.saldo-info::after {
  content: '⭐';
  position: absolute;
  bottom: -10px;
  right: -10px;
  font-size: 1.2em;
  animation: star-twinkle 2s infinite 1s;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* === TIMER COM TEMA NATALINO === */
.timer-box {
  background: linear-gradient(135deg, 
    var(--natal-vermelho) 0%, 
    var(--natal-verde) 100%);
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.2);
}

/* === BADGES E LABELS === */
.confirmation-reembolso-badge {
  background: linear-gradient(135deg, 
    var(--natal-dourado) 0%, 
    #ffed4e 100%) !important;
  color: var(--natal-verde) !important;
}

/* === BOTÕES PRINCIPAIS - FUNDO PRETO === */
.btn-obrigado,
.btn-sacar-dois,
.btn-vincular {
  background: #000000 !important;
  box-shadow: none !important;
}

/* === EFEITOS DE HOVER - FUNDO PRETO === */
.btn-obrigado:hover,
.btn-sacar-dois:hover,
.btn-vincular:hover {
  background: #000000 !important;
  transform: none;
  box-shadow: none !important;
}

/* === ANIMAÇÃO DE PRESENTE === */
@keyframes gift-bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px) rotate(-5deg); }
  75% { transform: translateY(-5px) rotate(5deg); }
}

.parabens-img {
  animation: gift-bounce 2s infinite;
}

/* === ENFEITES NAS BORDAS === */
.bloco-dois::before {
  content: '🎄';
  position: absolute;
  top: 20px;
  left: 10px;
  font-size: 2em;
  opacity: 0.3;
  z-index: 0;
}

.bloco-dois::after {
  content: '🎅';
  position: absolute;
  bottom: 20px;
  right: 10px;
  font-size: 2em;
  opacity: 0.3;
  z-index: 0;
}

/* === RESPONSIVIDADE === */
@media (max-width: 768px) {
  .title::before {
    font-size: 1em;
    left: -25px;
  }
  
  .snowflake {
    font-size: 0.8em;
  }
  
  .christmas-lights {
    height: 6px;
  }
}

/* === MENSAGEM ESPECIAL DE NATAL === */
.natal-message {
  text-align: center;
  padding: 15px;
  margin: 20px 0;
  background: linear-gradient(135deg, 
    rgba(196, 30, 58, 0.1) 0%, 
    rgba(22, 91, 51, 0.1) 100%);
  border-radius: 12px;
  color: var(--natal-dourado);
  font-weight: 600;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.natal-message::before {
  content: '🎁 ';
  font-size: 1.2em;
}

.natal-message::after {
  content: ' 🎁';
  font-size: 1.2em;
}