:root {
  --color-bg-base: #121212;
  --color-bg-elevated: #181818;
  --color-bg-elevated-alt: #1e1e1e;
  --color-bg-press: #000;
  --color-border: #282828;
  --color-text-primary: #ffffff;
  --color-text-secondary: #b3b3b3;
  --color-text-muted: #7a7a7a;
  --color-brand-green: #1db954; /* Spotify brand */
  --color-brand-green-hover: #1ed760;
  --color-focus: #ffffff;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-elev: 0 4px 24px rgba(0,0,0,0.4);
  --transition-fast: .15s ease;
  --font-family-base: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* Reset de fundo */
body {
  background: var(--color-bg-base) !important;
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar dark (webkit) */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #000; }
body::-webkit-scrollbar-thumb { background: #303030; border-radius: 20px; }
body::-webkit-scrollbar-thumb:hover { background: #3f3f3f; }

/* Top menu */
.menu {
  background: linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
  box-shadow: var(--shadow-elev) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
.menu::before { /* sobrescreve pseudo-elemento branco do styles.css */
  background: linear-gradient(180deg, var(--color-bg-elevated), var(--color-bg-elevated-alt)) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}
.menu a { color: var(--color-text-secondary) !important; }
.menu a img { filter: brightness(1) saturate(1.2); }

/* Bottom menu */
.menuemb {
  background: var(--color-bg-elevated) !important;
  box-shadow: var(--shadow-elev) !important;
  backdrop-filter: blur(8px);
  border:1px solid var(--color-border) !important;
}
.menuemb .material-symbols-outlined { color: var(--color-text-secondary) !important; transition: color var(--transition-fast); }
.menuemb a:nth-child(2) .material-symbols-outlined[style*='color: #06B32E'] { color: var(--color-brand-green) !important; }
.menuemb a:active .material-symbols-outlined, .menuemb a:focus .material-symbols-outlined { color: var(--color-brand-green) !important; }

/* Valor box */
.valor-box { background: var(--color-brand-green) !important; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
#valor { color: #fff !important; }

.valor-box-saque { background: var(--color-bg-elevated) !important; border: 1px solid var(--color-border); box-shadow: var(--shadow-elev); }
#valor-money { color: var(--color-brand-green) !important; }

/* Caixa branca -> cartões */
.white-box, .white-box-login, .imagem, .outer-box .white-box, .outer-box-login .white-box-login {
  background: var(--color-bg-elevated) !important;
  box-shadow: var(--shadow-elev) !important;
  border: 1px solid var(--color-border);
}
.outer-box, .outer-box-login { box-shadow: none !important; }

/* Textos neutros */
p, .popup-text, .popup-textL, .pergunta-whats, .question, .answer, .faq-title, .footer-text p {
  color: var(--color-text-secondary) !important;
}
.pergunta-whats { color: var(--color-text-primary) !important; }
.faq-title { color: var(--color-text-primary) !important; }
.answer { background: var(--color-bg-elevated-alt) !important; color: var(--color-text-secondary) !important; border-left: 3px solid var(--color-brand-green); }
.question { background: transparent !important; color: var(--color-text-primary) !important; border:none !important; }
.question:hover { background: #1a1a1a !important; }
.question {
  position: relative;
  padding: 12px 60px 12px 22px !important; /* espaço para seta e texto mais à direita */
  border-radius: 0;
  font-weight:500;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:background .18s ease, color .25s ease;
}
.question::after {
  content:'';
  position:absolute;
  right:24px; /* seta um pouco deslocada para a esquerda */
  top:50%;
  width:10px; height:10px;
  border-right:2px solid var(--color-text-secondary);
  border-bottom:2px solid var(--color-text-secondary);
  transform:translateY(-50%) rotate(45deg);
  transition: transform .3s ease, border-color .3s ease;
}
.question.open { color: var(--color-brand-green) !important; background: transparent !important; box-shadow:none; border-radius: 0; }
.question.open::after { transform: translateY(-50%) rotate(225deg); border-color: var(--color-brand-green); }

.answer { display:none; background:transparent !important; border:none !important; padding:0 !important; margin:0 !important; }
.answer.active { display:block; padding:12px 22px 16px 22px !important; background:transparent !important; color: var(--color-text-secondary) !important; line-height:1.55; }
.faq-title { font-size:24px !important; font-weight:600 !important; margin:20px 0 26px 0 !important; text-align:center; letter-spacing:-.5px; }
.faq-title + .question { margin-top:4px; }
.question + .answer { margin-top:0; }
.question:not(.open) + .answer { border-left:0 !important; }
.question + .answer.active { margin-top:-1px; }

/* Espaçamento entre blocos FAQ */
.question { margin-bottom:6px; }
.answer.active { margin-bottom:8px; }

/* Botões primários */
.prosseguir-button, .desbloquear-button, .enviarCodigo, .desbloquear-buttonL, .gerarCodigo, .gerarCodigo2 {
  background: var(--color-brand-green) !important;
  color: #fff !important;
  border: none !important;
  font-weight:600;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.prosseguir-button:hover, .desbloquear-button:hover, .enviarCodigo:hover, .desbloquear-buttonL:hover, .gerarCodigo:hover, .gerarCodigo2:hover {
  background: var(--color-brand-green-hover) !important;
  transform: translateY(-2px);
}
.prosseguir-button:active, .desbloquear-button:active, .enviarCodigo:active { transform: translateY(0); }

/* Rating buttons */
.rating-button { background: #232323 !important; color: var(--color-text-secondary) !important; border:1px solid #2d2d2d !important; transition: background .12s ease,color .12s ease, transform .12s ease; }
.rating-button.active,
.rating-button:active,
.rating-button:focus { background: var(--color-brand-green) !important; color: #fff !important; border-color: var(--color-brand-green) !important; box-shadow: inset 0 0 0 1px #15a046, 0 0 0 2px #1db95455; }
.rating-button:hover { background:#2e2e2e !important; }

/* PIX square buttons */
.square-button { background: #1e1e1e !important; box-shadow: none !important; border:1px solid var(--color-border) !important; color:#fff !important; }
.square-button.active { background: var(--color-brand-green) !important; color:#fff !important; }
/* Ícones brancos dentro dos cards de seleção PIX */
.square-button img { filter: invert(1) brightness(1.2) contrast(1.1) !important; }
/* Caso exista texto dentro do botão, força branco */
.square-button span, .square-button p, .square-button small { color:#fff !important; }

/* Inputs */
.form-input { background:#1e1e1e !important; color: var(--color-text-primary) !important; border:1px solid var(--color-border) !important; }
.form-input::placeholder { color: var(--color-text-muted); }
/* Estado de erro para inputs */
.input-error { border-color:#ff4d4f !important; box-shadow: 0 0 0 2px rgba(255,77,79,.15) !important; }

/* Popups */
.popup-container, .popup-containerL { background: var(--color-bg-elevated) !important; border:1px solid var(--color-border); box-shadow: var(--shadow-elev) !important; }

/* Progresso */
#texto-progresso span { color: var(--color-text-secondary) !important; }
#minha-barra-progresso { stroke: var(--color-brand-green) !important; }

/* Footer */
.footer-text p { color: var(--color-text-muted) !important; }

/* Links genericos */
a { color: var(--color-brand-green); }
a:hover { color: var(--color-brand-green-hover); }

/* Estados de foco acessível */
button:focus, .rating-button:focus, .square-button:focus, .form-input:focus { outline: 2px solid var(--color-brand-green); outline-offset: 2px; }

/* Animação leve de entrada para cartões */
.outer-box, .white-box, .valor-box-saque, .faq-item { animation: fadeInScale .4s ease; }
/* Popups: usar fade simples para evitar salto de posicionamento */
.popup-container, .popup-containerL { opacity:0; animation: popupFade .25s ease forwards; }
@keyframes popupFade { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInScale { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:scale(1); } }

/* Ajustes de fontes para consistência Spotify */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-family-base); font-weight:600; letter-spacing:-.02em; }

/* Específicos de cores de valores */
#valor-saque, .popup-container span[style*='color: #202020'] { color: var(--color-text-secondary) !important; }

/* Remover shadows claras que sobraram */
.box-shadow, .imagem { box-shadow: 0 2px 8px rgba(0,0,0,.4) !important; }

/* Ajustar gradientes verdes anteriores inline (#06B32E) para brand */
span[style*='#06B32E'], p[style*='#06B32E'], .popup-container span[style*='#06B32E'] { color: var(--color-brand-green) !important; }

/* Evitar herança de cor verde em ícones desativados */
.material-symbols-outlined { color: var(--color-text-secondary); }
.material-symbols-outlined[style*='#06B32E'] { color: var(--color-brand-green) !important; }

/* Footer fix no overlap */
.footer-text { background: linear-gradient(180deg, transparent, #000000aa); }

/* Spotify preview wrapper - ocupa toda a largura do cartão e mantém proporção elegante */
.imagem.spotify-preview-wrapper { /* neutraliza fundo/borda herdados de .imagem */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.spotify-preview-wrapper {
  padding: 10px !important; /* respiro para não encostar nas bordas */
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: var(--radius-lg) !important;
  box-sizing: border-box !important; /* evita ultrapassar a largura do cartão */
  overflow: hidden; /* garante que nada escape da seção */
}
.spotify-embed-ratio {
  position: relative;
  width: 100%;
  /* altura maior para deixar a prévia mais "grossa" */
  padding-top: 50%; /* antes: 38% */
  border: 0 !important;
  background: transparent !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spotify-embed-ratio .spotify-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  transform: translateY(-4px); /* ajuste mais suave para evitar overflow visual */
}

@media (max-width: 420px) {
  .spotify-embed-ratio { padding-top: 56%; }
}

/* Mensagem de validação abaixo do botão enviar */
.validation-error {
  display: none;
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 8px;
  font-weight: 500;
  text-align: center;
}