/* Card de consentimento (Trilha N, Fase 2). CSS puro, fora do build do Tailwind: o
   site.css e gerado e o deploy nao roda o build. Desenho do CandleTrader, cores do site
   (design/design-system.md): fundo claro e --logo-blue #165F8C.
   Aceitar e Rejeitar: mesmo tamanho e peso. So a cor muda. */

.tt-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0 16px 16px;
  transform: translateY(100%); opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}
.tt-consent[data-open] { transform: translateY(0); opacity: 1; }
.tt-consent[hidden], .tt-consent__prefs[hidden] { display: none; }

/* O botao "voltar ao topo" (#scroll-to-top, fixed bottom-right, z-40) sai de cena
   enquanto o card esta aberto: nenhum dos dois cobre o outro no celular. */
body:has(.tt-consent[data-open]) #scroll-to-top { opacity: 0 !important; visibility: hidden !important; }

.tt-consent__card {
  max-width: 56rem; margin: 0 auto; padding: 20px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  border-radius: 16px; border: 1px solid #e5e5e5;
  background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(24px);
  box-shadow: 0 25px 50px -12px rgba(22, 95, 140, 0.25);
  pointer-events: auto;
}
.tt-consent__head { display: flex; flex-direction: column; gap: 16px; }
.tt-consent__copy { flex: 1; }
.tt-consent__title { margin: 0 0 6px; font: 700 16px 'Outfit', system-ui, sans-serif; color: #171717; }
.tt-consent__text { margin: 0; color: #525252; font-size: 14px; line-height: 1.6; }
.tt-consent__text a { color: #165F8C; text-decoration: underline; text-underline-offset: 2px; }
.tt-consent__text a:hover { color: #0f4566; }

/* No celular a coluna e invertida: Aceitar em cima, Personalizar por ultimo. */
.tt-consent__actions { display: flex; flex-direction: column-reverse; gap: 8px; }

.tt-consent__btn {
  padding: 10px 20px; border-radius: 9999px; cursor: pointer;
  font: 600 14px 'Outfit', system-ui, sans-serif; color: #171717;
  background: #fff; border: 1px solid #d4d4d4;
  transition: background 0.2s, border-color 0.2s, filter 0.2s;
}
.tt-consent__btn:hover { background: #f5f5f5; }
.tt-consent__btn--primary { background: #165F8C; border-color: #165F8C; color: #fff; }
.tt-consent__btn--primary:hover { background: #165F8C; filter: brightness(1.12); }
.tt-consent__btn--outline { border-color: #165F8C; color: #165F8C; }
.tt-consent__btn--outline:hover { background: rgba(22, 95, 140, 0.06); }
.tt-consent__btn:focus-visible,
.tt-consent__link:focus-visible,
.tt-consent__purpose input:focus-visible { outline: 2px solid #165F8C; outline-offset: 2px; }

.tt-consent__link {
  padding: 10px 12px; background: none; border: 0; cursor: pointer;
  font: 500 13px 'Outfit', system-ui, sans-serif; color: #737373;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.2s;
}
.tt-consent__link:hover { color: #165F8C; }

.tt-consent__prefs {
  display: grid; gap: 12px; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}
.tt-consent__purpose { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.tt-consent__purpose--locked { opacity: 0.65; cursor: not-allowed; }
.tt-consent__purpose input { margin-top: 4px; width: 16px; height: 16px; flex-shrink: 0; accent-color: #165F8C; cursor: inherit; }
.tt-consent__purpose strong { color: #171717; font-size: 14px; font-weight: 600; }
.tt-consent__purpose em { color: #737373; font-style: normal; font-size: 12px; margin-left: 4px; }
.tt-consent__purpose small { display: block; margin-top: 2px; color: #525252; font-size: 13px; line-height: 1.6; }
.tt-consent__save { display: flex; justify-content: flex-end; margin-top: 8px; }

@media (min-width: 640px) {
  .tt-consent__card { padding: 24px; }
  .tt-consent__head { flex-direction: row; align-items: flex-start; gap: 24px; }
  .tt-consent__actions { flex-direction: row; align-items: center; flex-shrink: 0; }
}