/* backend/static/css/cookie_banner.css */

/* Versão: 2.0.1 - BTOS Privacy & Compliance (DNA Edition - Mobile Perf Optimized)
   Foco: Glassmorphism Escuro, Tipografia Legível, Integração de UI e Animação via GPU */

#cookie-banner {
  pointer-events: none;
  will-change: transform, opacity;

  position: fixed;
  z-index: 1056;
  bottom: 30px;

  /* Posição final fixa para evitar recálculo de layout (reflow) */
  left: 50%;
  transform: translate(-50%, 20px);

  /* Offset inicial via GPU */
  width: 95%;
  max-width: 800px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: var(--radius-md);

  color: var(--color-text-white);

  /* Posicionado acima do chatbot */
  opacity: 0;

  /* Baseado no brand-dark com transparência premium */
  background-color: rgb(21 7 14 / 92%);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-dna-lg);

  /* Substitui visibility: hidden para não bloquear a thread principal */
  transition:
    opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Dica para a GPU do mobile priorizar esta camada */
}

#cookie-banner.show {
  pointer-events: auto;

  /* Reativa os cliques quando visível */
  transform: translate(-50%, 0);
  opacity: 1;

  /* Animação suave 100% na GPU */
}

.cookie-banner-content {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;

  padding: 1rem 1.5rem;
}

.cookie-banner-text {
  flex-grow: 1;
  margin: 0;
}

.cookie-banner-text p {
  margin-bottom: 0;

  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgb(255 255 255 / 90%);
}

.cookie-banner-text a {
  font-weight: 700;
  color: var(--brand-i);

  /* Influência/Alerta para links de política */
  text-decoration: underline;
  transition: var(--transition-fast);
}

.cookie-banner-text a:hover {
  color: var(--color-text-white);
  text-decoration: none;
}

.cookie-banner-actions {
  flex-shrink: 0;
}

/* Botão de Aceite Customizado para o Banner */
#cookie-accept-btn {
  cursor: pointer;

  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: var(--radius-sm);

  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  background-color: var(--brand-primary);

  transition: var(--transition-normal);
}

#cookie-accept-btn:hover {
  transform: translateY(-2px);
  background-color: var(--brand-primary-hover);
  box-shadow: var(--shadow-dna-sm);
}

/* Responsividade para telas pequenas */
@media (width <= 768px) {
  #cookie-banner {
    bottom: 20px;

    /* Base fixa mobile */
    transform: translate(-50%, 15px);
    width: calc(100% - 20px);

    /* Offset mobile */
  }

  #cookie-banner.show {
    transform: translate(-50%, 0);

    /* Retorna à origem sem alterar o bottom */
  }

  .cookie-banner-content {
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem;
    text-align: center;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  #cookie-accept-btn {
    width: 100%;
    padding: 0.8rem;
  }
}