/*
 * Arquivo: cookie-consent-responsive-fix.css
 * Corrige problemas de responsividade no popup de consentimento de cookies em dispositivos móveis.
 */

/* Aplica as correções em telas menores (celulares) */
@media (max-width: 480px) {

  /* Ajusta o container principal do popup */
  .cookie-consent {
    /* Posiciona o popup na parte inferior da tela, ocupando toda a largura */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    
    /* Remove transformações que podem causar desalinhamento */
    transform: none;

    /* Arredonda apenas os cantos superiores */
    border-radius: 20px 20px 0 0;

    /* Adiciona um limite de altura para evitar que o popup seja maior que a tela */
    max-height: 80vh; /* Ocupará no máximo 80% da altura da tela */
    
    /* Organiza o conteúdo em coluna para melhor aproveitamento do espaço */
    display: flex;
    flex-direction: column;
  }

  /* Garante que a animação de entrada para o popup funcione corretamente */
  .cookie-consent.show {
    transform: translateY(0);
  }

  /* A correção mais importante: permite a rolagem interna do conteúdo */
  .cookie-content {
    overflow-y: auto; /* Adiciona uma barra de rolagem vertical se o conteúdo for muito grande */
    padding-right: 15px; /* Cria um pequeno espaço para a barra de rolagem não sobrepor o texto */
  }

  /* Empilha os botões verticalmente para facilitar o clique */
  .cookie-actions {
    flex-direction: column; 
    width: 100%;
  }

  /* Faz os botões ocuparem toda a largura disponível */
  .cookie-accept-btn,
  .cookie-settings-btn {
    width: 100%; 
  }
}

/* Ajustes adicionais para telas muito estreitas (ex: iPhone 5/SE) */
@media (max-width: 360px) {
  .cookie-header h3 {
    font-size: 1.1rem; /* Diminui um pouco o título */
  }

  .cookie-content p {
    font-size: 0.85rem; /* Diminui o texto para caber melhor */
  }
}