/* ==========================================================================
   INVESTIMENTVS - ESTILOS GLOBAIS E GLASSMORPHISM (styles.css)
   ========================================================================== */

body { 
  transition: background-color 0.4s ease, color 0.4s ease; 
  background-attachment: fixed; 
}

/* TEMA CLARO (PADRÃO) */
html:not(.dark) body { 
  background: radial-gradient(circle at 10% 20%, #e0e7ff 0%, #f1f5f9 50%, #dbeafe 100%); 
  color: #0f172a; 
}
html:not(.dark) .glass-card { 
  background: rgba(255, 255, 255, 0.88) !important; 
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.8) !important; 
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); 
}

/* TEMA ESCURO */
.dark body { 
  background: radial-gradient(circle at 10% 20%, #0b0f19 0%, #17172e 50%, #030712 100%); 
  color: #f8fafc; 
}
.dark .glass-card { 
  background: rgba(17, 24, 39, 0.88) !important; 
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important; 
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); 
}

/* COMPONENTES E BOTÕES */
.win-input, .win-btn { 
  border-radius: 4px; 
  transition: all 0.15s ease-in-out; 
}
.win-btn:active { 
  transform: scale(0.98); 
}

/* ANIMAÇÃO DO TICKER TAPE */
@keyframes ticker { 
  0% { transform: translateX(0); } 
  100% { transform: translateX(-50%); } 
}
.animate-ticker { 
  display: flex; 
  width: max-content; 
  animation: ticker 40s linear infinite; 
}
.animate-ticker:hover { 
  animation-play-state: paused; 
}

/* SPINNER DE CARREGAMENTO */
@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}
.animate-spin-custom { 
  animation: spin 0.8s linear infinite; 
}

/* Contêiner de Ícone Estilo Glassmorphism Premium */
.icon-glass-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Temas de cores para os contêineres de ícones */
.icon-box-gold { background: rgba(234, 179, 8, 0.12); color: #facc15; border-color: rgba(234, 179, 8, 0.25); }
.icon-box-emerald { background: rgba(16, 185, 129, 0.12); color: #34d399; border-color: rgba(16, 185, 129, 0.25); }
.icon-box-blue { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border-color: rgba(59, 130, 246, 0.25); }
.icon-box-purple { background: rgba(139, 92, 246, 0.12); color: #c084fc; border-color: rgba(139, 92, 246, 0.25); }

/* Badges de categoria minimalistas */
.badge-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-pill-free { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-pill-gold { background: rgba(234, 179, 8, 0.15); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.3); }

/* ==========================================================================
   EFEITOS DE INTERATIVIDADE & ELEVAÇÃO PREMIUM (GLASSMORPHISM HOVER)
   ========================================================================== */

/* Classe dedicada apenas para cards que devem se mover ao passar o mouse */
.interactive-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
  will-change: transform, box-shadow;
}

/* Elevação 3D apenas em cards interativos */
.interactive-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
}

/* Glow Dourado */
.glass-card-hover-gold:hover {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 12px 28px -6px rgba(245, 158, 11, 0.25),
              0 0 16px 0 rgba(245, 158, 11, 0.15) !important;
}

/* Glow Azul */
.glass-card-hover-blue:hover {
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 12px 28px -6px rgba(59, 130, 246, 0.25),
              0 0 16px 0 rgba(59, 130, 246, 0.15) !important;
}

/* Glow Verde */
.glass-card-hover-emerald:hover {
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 12px 28px -6px rgba(16, 185, 129, 0.25),
              0 0 16px 0 rgba(16, 185, 129, 0.15) !important;
}

/* Glow Roxo */
.glass-card-hover-purple:hover {
  border-color: rgba(168, 85, 247, 0.6) !important;
  box-shadow: 0 12px 28px -6px rgba(168, 85, 247, 0.25),
              0 0 16px 0 rgba(168, 85, 247, 0.15) !important;
}

/* Micro-animação do ícone */
.group:hover .icon-box-anim {
  transform: scale(1.1) rotate(4deg);
  transition: transform 0.3s ease;
}