/* Reset Básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  background-color:var(--background-color);
  position: relative; 
  /* contain: paint; Moderno - contém efeitos de vazamento - verificar isso pq o popup card fica aparecendo fora da tela */
  overflow-x: clip; /* Mais seguro que hidden */
  margin-left: 0;
}

html{
  overflow-y: auto;
}

/* Se houver elementos com position fixed/absolute que possam cobrir */
.modal,
.popup,
.overlay,
.toast,
.notification {
    z-index: 9999 !important; /* Menor que o megamenu */
}

/* Cabeçalho */
.header {
  display: block; 
  background-color: var(--primary-color);
  color: var(--text-light);
  padding: 10px 20px;
  margin-bottom: 0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .header-top .logo a{
  text-decoration: none;
  font-family: var(--font-logo);
  color: var(--text-color);
  font-size: var(--font-size-logo); 
} */

.header-top img{
  width: 100px;
  height: 91px;
}

.header-bottom {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
/*LOGO*/
h1.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

/* Se quiser estilizar o link dentro do logo */
h1.logo a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-logo);
  color: var(--text-color);
  font-size: var(--font-size-logo);
}

/* Estilo para o texto quando não há imagem */
h1.logo a span {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.search-bar {
  width: 80%;
  padding: 10px;
  border: none;
  border-radius: var(--border-radius);
}

.search-btn {
  padding: 10px 15px;
  margin-left: 0.2rem;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: var(--button-border-radius);
  cursor: pointer;
}

.search-btn:hover{
  background-color: var(--button-bg-hover);
}

.menu-list {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
}

.menu-list a {
  text-decoration: none;
  color: var(--text-color-light);
  font-weight: bold;
}

.menu-list a:hover {
  color: var(--accent-color);
}
.auth-buttons {
  color: var(--button-text);
  border: none;
  padding: 8px 15px;
  border-radius: var(--button-border-radius);
  cursor: pointer;
  margin-left: 10px;
}

.auth-buttons button:hover{
  background-color: var(--button-bg-hover);
}


/*========================================
Popups 
=========================================*/
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

.popup.hidden {
 display: none; /*Inicialmente escondido*/
}

.popup.visible {
  opacity: 1;
  visibility: visible;
}

.popup-content {
  background: white;
  padding: 25px; /* Aumentar um pouco o padding geral */
  border-radius: 10px;
  width: 90%;
  /* max-width: 400px; */ /* Comente ou remova o max-width antigo */
  max-width: 650px; /* Aumentar para um valor mais confortável em telas maiores */
  box-shadow: 0px 4px G0px rgba(0, 0, 0, 0.3);
  /* text-align: center; */ /* REMOVA ou comente esta linha */
  position: relative; /* Mantém para o botão fechar e o selo */
}

.popup-body {
  display: flex; /* ATIVA O FLEXBOX */
  align-items: center; /* Alinha itens no topo (caso tenham alturas diferentes) */
  gap: 25px; /* Espaço entre a imagem e o bloco de informações */
  text-align: left; /* Alinha o texto à esquerda dentro desta div e seus filhos */
  margin-top: 20px; /* Espaço abaixo do botão fechar/título(se estivesse fora) */
}

.popup-img {
  flex: 0 0 300px; /* Não cresce, não encolhe, base de 200px (AJUSTE) */
  /* Alternativa: max-width: 200px; */
  height: 300px !important; /* Mantém proporção */
  max-height: 300px !important; /* Limita altura máxima (opcional) */
  object-fit: contain; /* Garante que a imagem caiba sem distorcer */
  display: block; /* Evita espaço extra abaixo */
  border: 1px solid #eee; /* Borda sutil (opcional) */
  border-radius: 5px; /* Cantos arredondados (opcional) */
}

.popup-info {
  flex: 1; /* Deixa o bloco de informações ocupar o espaço restante */
  display: flex; /* Para organizar o conteúdo interno verticalmente */
  flex-direction: column;
}

.popup-title {
  margin: 0 0 15px 0; /* Margem inferior maior */
  font-size: 1.3em; /* Tamanho maior para o título */
  font-weight: 600; /* Um pouco mais de peso */
  line-height: 1.3;
  /* text-align: left; (Já definido no .popup-body) */
}

.popup-price {
  margin: 5px 0 5px 0;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--accent-color);
}

.popup-installments {
  margin: 0 0 15px 0; /* Espaço antes do botão */
  font-size: 0.95em;
  color: #555;
}

.buy-button-pop {
  display: inline-block; /* Para aplicar padding/margin corretamente */
  align-self: flex-start; /* Alinha o botão à esquerda dentro do flex column */
  text-decoration: none;
  padding: 12px 25px; /* Botão um pouco maior */
  background-color: var(--button-bg, #007bff); /* Usa variável ou fallback */
  color: var(--button-text, white);
  border: none;
  border-radius: var(--button-border-radius, 5px);
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: bold;
  text-align: center;
  margin-top: auto; /* Empurra para baixo se houver espaço */
  margin-bottom: 15px; /* Espaço antes do disclaimer */
}

.buy-button-pop:hover {
  background-color: var(--button-bg-hover, #0056b3);
}


.popup-content h2 {
  margin-bottom: 15px;
}

.popup-content input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: var(--border-radius);
}

.popup-content button {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  padding: 10px 20px;
  border-radius: var(--button-border-radius);
  cursor: pointer;
  transition: background 0.3s ease;
}

.popup-content button:hover {
  background-color: var(--button-bg-hover);
}

/* Mude esta regra no seu CSS: */
.close-popup-btn { /* <<< MUDOU DE .close-btn */
  position: absolute;
  top: 15px;  /* Ajuste se necessário com o novo padding */
  left: 15px; /* Ajuste se necessário com o novo padding */
  font-size: 1.5rem; /* var(--font-size-xl); */ /* Aumentar um pouco */
  color: var(--text-color-a, #555);
  background: none; /* Sem fundo */
  border: none; /* Sem borda */
  cursor: pointer;
  padding: 0; /* Sem padding extra */
  line-height: 1; /* Para alinhar bem o '✖' */
  /* font-weight: var(--font-weight); (Normalmente não precisa de negrito) */
}

.close-popup-btn:hover {
    color: #000; /* Escurece no hover */
}

.hidden {
  display: none;
}
/*  */

/*=======================================*/ 
/* Banner */
/*=======================================*/
.banner-section {
  position: relative;
  width: 100%;
  height: 400px;
  margin: 1rem 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  font-family: var(--font-heading);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* --- Carrossel e Slides --- */
.banner-carousel {
  height: 100%;
  width: 100%;
  position: relative;
}

.banner-slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banner-slide.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay para melhor contraste do texto */
.banner-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg, 
    rgba(0, 0, 0, 0.5) 0%, 
    rgba(0, 0, 0, 0.3) 50%, 
    rgba(0, 0, 0, 0.5) 100%
  );
  z-index: 1;
}

/* --- Layout de Conteúdo Reorganizado --- */
.banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* --- Área de Texto Otimizada --- */
.banner-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 2rem 0;
}

.banner-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0 0 1rem 0;
  color: var(--text-color);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-family: var(--font-heading);
}

.banner-text p {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 2rem 0;
  color: rgba(255, 255, 255, 0.9);
  max-width: 90%;
  font-family: var(--font-body);
}

/* --- Container de Imagem Profissional --- */
.banner-image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-height: 350px;
}

.banner-image-wrapper {
  position: relative;
  max-width: 300px;
  max-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ESTILO PARA AS IMAGENS MARKDOWN */
.banner-content img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
  border-radius: 8px;
}

.banner-content:hover img {
  transform: scale(1.05) translateY(-5px);
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.4));
}

/* --- Badge de Oferta (Opcional) --- */
.banner-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--accent-color);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
  animation: pulse 2s infinite;
  font-family: var(--font-body);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* --- Botão CTA Mais Atraente --- */
.banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(45deg, var(--accent-color), var(--button-bg-hover));
  border-radius: 8px;
  padding: 14px 32px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--button-text);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(57, 181, 74, 0.3);
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.banner-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.banner-btn:hover::before {
  left: 100%;
}

.banner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(57, 181, 74, 0.4);
  background: linear-gradient(45deg, var(--button-bg-hover), var(--accent-color));
}

.banner-btn:active {
  transform: translateY(0);
}

/* --- Controles de Navegação Modernos --- */
.banner-prev,
.banner-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  z-index: 5;
}

.banner-prev:hover,
.banner-next:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%) scale(1.1);
}

.banner-prev { left: 20px; }
.banner-next { right: 20px; }

/* --- Indicadores de Slide --- */
.banner-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.banner-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.banner-indicator.active {
  background: white;
  transform: scale(1.2);
}

/* =======================================*/
/* Responsividade Avançada */
/* =======================================*/
@media (max-width: 1024px) {
  .banner-section {
    height: 350px;
  }
  
  .banner-content {
    padding: 0 2rem;
    gap: 2rem;
  }
  
  .banner-text h2 {
    font-size: 2rem;
  }
  
  .banner-image-wrapper {
    max-width: 250px;
    max-height: 250px;
  }
}

@media (max-width: 768px) {
  .banner-section {
    height: auto;
    min-height: 500px;
    border-radius: 8px;
  }
  
  .banner-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    text-align: center;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
  }
  
  .banner-text {
    order: 2;
    padding: 1rem 0;
  }
  
  .banner-text h2 {
    font-size: 1.8rem;
  }
  
  .banner-text p {
    max-width: 100%;
    font-size: 1rem;
  }
  
  .banner-image-container {
    order: 1;
    max-height: 200px;
  }
  
  .banner-image-wrapper {
    max-width: 200px;
    max-height: 200px;
  }
  
  .banner-prev,
  .banner-next {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .banner-btn {
    padding: 12px 24px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .banner-section {
    min-height: 450px;
  }
  
  .banner-text h2 {
    font-size: 1.5rem;
  }
  
  .banner-text p {
    font-size: 0.9rem;
  }
  
  .banner-image-wrapper {
    max-width: 150px;
    max-height: 150px;
  }
  
  .banner-content {
    padding: 1.5rem 1rem;
  }
}

/* --- Animações de Entrada --- */
.banner-slide {
  animation: slideIn 0.8s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Efeito de Brilho no Hover --- */
.banner-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s;
}

.banner-content:hover::before {
  left: 100%;
}

/* --- Variações de Cor Alternativas --- */
.banner-section.variant-1 {
  background: linear-gradient(135deg, #1F509A 0%, #0A3981 100%);
}

.banner-section.variant-2 {
  background: linear-gradient(135deg, #003f8a 0%, #00275d 100%);
}

.banner-section.variant-3 {
  background: linear-gradient(135deg, #1F509A 0%, #39b54a 100%);
}

.banner-section.variant-4 {
  background: linear-gradient(135deg, #0A3981 0%, #003f8a 50%, #1F509A 100%);
}


/* Seções Gerais */
section {
  padding: 20px;
  background: white;
  margin: 20px auto;
  border-radius: var(--border-radius);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-bottom: 15px;
  font-size: var(--font-size-xl);
  color: #333;
}

/*Main Content*/
.main-content {
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

/* Categorias */
.categories h2{
  font-family: var(--font-heading);
}

.categories-grid {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: space-around;
}

.category-card {
  text-align: center;
  background: white;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: var(--border-radius);
  width: 200px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.category-card:hover {
  transform: scale(1.05);
}

.category-card img {
  width: 100px;
  height: 100px; /*auto*/
  margin-bottom: 10px;
}

.category-card p {
  font-size: var(--font-size-md);
  color: #333;
}

/*=================================================================
Pagination
================================================================*/
/* 🔹 Seção centralizada da paginação */
.pagination-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

/* 🔹 Container da paginação */
.pagination {
display: flex;
gap: 8px;
list-style: none;
padding: 0;
}

.pagination ul {
  display: flex; /* Faz os <li> ficarem em linha */
  flex-wrap: nowrap; /* Inicialmente, não quebra linha no desktop */
  align-items: center; /* Alinha os itens verticalmente */
  padding: 0; /* Remove padding padrão da ul */
  margin: 0; /* Remove margem padrão da ul */
  list-style: none; /* Remove marcadores da lista */
  gap: inherit; /* Herda o 'gap' do pai .pagination, se desejado, ou defina um específico */
}

/* 🔹 Botões da paginação */
.pagination li {
list-style: none;
}

/* 🔹 Estilização dos botões de página */
.pagination a {
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: #fff;
background: #28a745;
/* Verde padrão */
padding: 10px 15px;
border-radius: 5px;
transition: background 0.3s ease, transform 0.2s ease;
display: inline-block;
}

/* 🔹 Hover: Efeito ao passar o mouse */
.pagination a:hover {
background: #218838;
/* Verde escuro */
transform: scale(1.1);
}

/* 🔹 Página ativa */
.pagination a.active {
  background: var(--button-bg-active); /* Ex: #0A3981 ou a cor escura que você escolheu */
  color: #fff;
  pointer-events: none; /* Impede clique */
  transform: none; /* Remove qualquer efeito de hover como scale */
}

/* Hover para botões NÃO ativos */
.pagination a:not(.active):hover {
  background: #218838; /* Verde mais escuro para hover */
  transform: scale(1.1);
}

/* Botões realmente desabilitados (ex: << na página 1) */
.pagination a.disabled {
  background: #ccc; /* Fundo cinza */
  color: #666; /* Texto mais apagado */
  pointer-events: none;
  cursor: default;
  transform: none; /* Remove efeito de scale */
}

/* 🔹 Reticências "..." */
.pagination .dots {
padding: 10px;
font-size: 16px;
color: #666;
}

/* 🔹 Campo de busca da paginação */
.search-input {
width: 60px;
padding: 5px;
border: 1px solid #28a745;
border-radius: 5px;
font-size: 14px;
text-align: center;
transition: border-color 0.3s;
}

.search-input:focus {
border-color: #218838;
outline: none;
}


/*=================================================================
Produtos Card
================================================================*/



/*================================================================
Rodapé
================================================================*/
  /* Super Footer */
.super-footer {
  background-color: var(--primary-color);
  color: var(--footer-text);
  font-size: var(--font-size-small);
  line-height: 1.6;
  transition: max-height 0.5s ease; /* Transição suave */
}

/* Camada Superior */
.footer-top {
  max-height: 0; /* Inicialmente contraída */
  overflow: hidden; /* Garante que não haja elementos visíveis fora do limite */
  transition: max-height 0.5s ease; /* Transição suave para expansão/contração */
  padding: 0 20px; /* Garantir que padding também seja animado */
  opacity: 0; /* Invisível no início */
  transition: max-height 0.5s ease, opacity 0.5s ease; /* Transição combinada */
}

.footer-top.expanded {
  max-height: 500px; /* Altura máxima suficiente para o conteúdo expandido */
  opacity: 1; /* Torna visível quando expandido */
  padding: 30px 20px; /* Aplica padding completo quando expandido */
}

.footer-columns {
  display: grid !important; /* Força o uso de Grid */
    /* Cria colunas automáticas com no mínimo 200px, ocupando frações iguais (1fr) */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 30px; /* Espaço entre as colunas (substitui margin lateral) */
    
    /* O que já funcionou pra você */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    
    /* Garante alinhamento vertical no topo */
    align-items: start;
}

.footer-column {
  /* Removemos flex e larguras fixas */
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  
  /* Centraliza o TEXTO dentro da coluna */
  text-align: center;
}

/* Ajuste para telas pequenas (Celular) */
@media (max-width: 768px) {
  .footer-columns {
      /* No celular, vira uma coluna só */
      grid-template-columns: 1fr !important;
      gap: 40px;
  }
}

.footer-column h4 {
  font-size: var(--font-size-md);
  margin-bottom: 15px;
  border-bottom: 2px solid #ffcc00;
  display: inline-block;
  padding-bottom: 5px;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  text-decoration: none;
  color: var(--text-light);
  transition: color 0.3s ease;
}

.footer-column ul li a:hover {
  color:var(--footer-hover);
}

/* Redes Sociais */
.social-icons {
  display: flex;
  gap: 10px;
}

.social-icons img {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.social-icons img:hover {
  transform: scale(1.1);
}

/* Botão de Expansão */
.footer-expand {
text-align: center;
cursor: pointer;
padding: 10px 0;
background-color: #004494;
color: var(--text-light);
font-size: var(--font-size-md);
}

.footer-expand:hover {
background-color: #003573;
}

.expand-icon {
margin-right: 5px;
font-size: var(--font-size-lg);
}

.expand-text {
font-weight: bold;
}

/* Camada Inferior */
.footer-bottom {
text-align: center;
padding: 15px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: var(--font-size-xs);
}

.footer-links a {
color: #ffcc00;
text-decoration: none;
margin: 0 5px;
}

.footer-links a:hover {
text-decoration: underline;
}

/* Layouts do Copyright */
.copyright-vertical {
  text-align: center;
}

.copyright-vertical .copyright-line {
  margin: 2px 0;
  line-height: 1.4;
}

.copyright-horizontal {
  text-align: center;
  line-height: 1.6;
}

.copyright-compacto {
  text-align: center;
  font-size: 0.9em;
  color: #666;
}

/* Preview no admin */
#copyright-preview .copyright-line {
  margin: 3px 0;
  padding: 2px 0;
}