/* MODAL FILTRO */

.modal-filtro {
    display: none; /* Inicialmente escondido */
    position: fixed; /* Fica fixo na tela, mesmo ao rolar */
    top: 0; /* Posicionado no topo da tela */
    left: 0; /* Posicionado na esquerda da tela */
    width: 100%; /* Ocupa toda a largura da tela */
    height: 100%; /* Ocupa toda a altura da tela */
    background: rgba(0,0,0,0.5); /* Fundo semitransparente escuro, efeito de overlay */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    z-index: 9999; /* Fica acima de quase todos os elementos da página */
}

.modal-filtro.ativo {
    display: flex; /* Quando a classe "ativo" é adicionada, o modal aparece e vira flex container */
}

.filtro-conteudo {
    background: var(--branco); /* Fundo branco do modal */
    padding: 25px; /* Espaçamento interno */
    border-radius: var(--rem-05); /* Cantos arredondados */
    width: 90%; /* Largura ocupando 90% da tela (em telas pequenas) */
    max-width: 400px; /* Limita a largura máxima a 400px */
    max-height: 90vh; /* Altura máxima de 90% da altura da tela */
    overflow-y: auto; /* Adiciona scroll vertical se o conteúdo ultrapassar a altura máxima */
}

.filtro-topo {
    display: flex; /* Flex container para organizar elementos do topo */
    justify-content: space-between; /* Espaça elementos para as extremidades */
    align-items: center; /* Centraliza verticalmente */
    margin-bottom: 15px; /* Espaçamento abaixo do topo */
}

.filtro-topo button {
    border: none; /* Remove borda padrão */
    background: none; /* Remove fundo padrão */
    font-size: 20px; /* Tamanho da fonte maior (ícone de fechar, por exemplo) */
    cursor: pointer; /* Cursor de clique */
}

.filtro-secao {
    margin-bottom: 15px; /* Espaço entre cada seção do filtro */
}

.filtro-secao h4 {
    margin-bottom: var(--rem-05); /* Espaço abaixo do título da seção */
}

.filtro-secao label {
    display: block; /* Faz o label ocupar toda a largura disponível */
    margin-bottom: 5px; /* Espaçamento abaixo do label */
    cursor: pointer; /* Cursor de clique, útil se o label for clicável junto ao input */
}

.btn-aplicar-filtro {
    width: 100%; /* Botão ocupa toda a largura do modal */
    padding: 10px; /* Espaçamento interno */
    border: none; /* Sem borda */
    background: var(--verde-escuro); /* Cor de fundo verde escuro */
    color: var(--branco); /* Texto branco */
    font-weight: bold; /* Texto em negrito */
    border-radius: var(--rem-025); /* Cantos arredondados */
    cursor: pointer; /* Cursor de clique */
}

.filtros-ativos {
    display: flex; /* Flex container para tags de filtros ativos */
    flex-wrap: wrap; /* Permite quebrar para a linha seguinte se não couber */
    gap: var(--rem-05); /* Espaço entre as tags */
    margin: 15px 0; /* Espaçamento vertical entre as tags e outros elementos */
}

.filtro-tag {
    background: var(--cinza-claro); /* Fundo cinza claro */
    padding: 6px 10px; /* Espaçamento interno */
    border-radius: 20px; /* Forma arredondada tipo "pílula" */
    font-size: 14px; /* Tamanho da fonte menor */
    display: flex; /* Permite alinhar ícone de remover dentro da tag */
    align-items: center; /* Centraliza verticalmente */
    gap: 6px; /* Espaço entre texto e botão */
}

.filtro-tag button {
    border: none; /* Sem borda */
    background: none; /* Sem fundo */
    cursor: pointer; /* Cursor de clique */
    font-size: 14px; /* Tamanho da fonte igual ao texto da tag */
    color: var(--vermelho); /* Cor vermelha, geralmente para indicar remoção da tag */
}

/* Carrinho lateral */
.carrinho-lateral {
  position: fixed;                    /* Fixa o painel na tela, mesmo ao rolar a página */
  top: 0;                             /* Posiciona no topo da tela */
  right: -500px;                      /* Inicia fora da tela, à direita (fora da viewport) */
  width: 400px;                        /* Largura fixa do painel */
  max-width: 90%;                      /* Em telas pequenas, o painel não ultrapassa 90% da largura da tela */
  height: 100%;                        /* Ocupa toda a altura da tela */
  background: var(--branco);                    /* Cor de fundo branca */
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.25); /* Sombra à esquerda para efeito de profundidade */
  transition: right 0.3s ease;         /* Animação suave ao abrir/fechar (mudança de posição horizontal) */
  display: flex;                       /* Torna o painel um container flexbox */
  flex-direction: column;              /* Organiza elementos dentro do painel em coluna */
  z-index: 1000;                       /* Garante que o painel fique acima de outros elementos */
  font-family: sans-serif;             /* Define a fonte padrão do painel */
  overflow: hidden;                    /* Esconde qualquer conteúdo que ultrapasse o painel */
}

.carrinho-lateral.ativo {
  right: 0;  /* Move o painel para dentro da tela, alinhado à borda direita */
}

.carrinho-header {
  display: flex;                     /* Transforma o cabeçalho em um container flexbox */
  justify-content: space-between;    /* Coloca o primeiro item à esquerda e o último à direita */
  align-items: center;               /* Centraliza verticalmente os elementos dentro do cabeçalho */
  padding: var(--rem-1);                     /* Adiciona espaçamento interno de 1rem (≈16px) em todos os lados */
  border-bottom: 1px solid var(--cinza-claro); /* Adiciona uma linha fina abaixo do cabeçalho, separando do conteúdo do carrinho */
}

.carrinho-header h3 {
  margin: 0;           /* Remove a margem padrão do título, evitando espaços extras */
  font-size: 1.2rem;   /* Define o tamanho da fonte (aprox. 19px se 1rem ≈ 16px) */
  font-weight: bold;    /* Deixa o texto em negrito */
}

.carrinho-header button {
  background: transparent;  /* Remove qualquer cor de fundo do botão, deixando-o invisível visualmente */
  border: none;              /* Remove a borda padrão do botão */
  font-size: 1.2rem;         /* Define o tamanho do ícone ou texto dentro do botão (aprox. 19px) */
  cursor: pointer;           /* Muda o cursor para a mãozinha ao passar sobre o botão */
  color: var(--preto-suave);               /* Define a cor do texto ou ícone */
}

.carrinho-mensagem {
  padding: var(--rem-05) var(--rem-1);        /* Espaçamento interno: 0.5rem vertical e 1rem horizontal */
  margin: var(--rem-05) var(--rem-1);         /* Espaçamento externo: 0.5rem vertical e 1rem horizontal */
  border-radius: 5px;          /* Arredonda os cantos da caixa da mensagem */
  font-weight: bold;            /* Deixa o texto em negrito */
  text-align: center;           /* Centraliza o texto horizontalmente */
  display: none;                /* Começa escondido, só aparece quando ativado */
}

.carrinho-mensagem.aviso {
  background-color: var(--vermelho-suave);  /* Define o fundo da mensagem como um tom de vermelho claro (aviso) */
  color: var(--vermelho);                 /* Define a cor do texto como vermelho escuro, indicando alerta */
}

.carrinho-mensagem.sucesso {
  background-color: #ccffcc;  /* Define o fundo da mensagem como verde claro, indicando sucesso */
  color: var(--verde);                /* Define a cor do texto como verde escuro, reforçando o status positivo */
}

.pedido-nome {
  display: flex;           /* Transforma o container em Flexbox, permitindo organizar elementos em linha */
  gap: var(--rem-05);             /* Cria um espaço de 0.5rem (~8px) entre os elementos internos, como nome e quantidade */
  margin: var(--rem-05) var(--rem-1);     /* Espaçamento externo: 0.5rem vertical e 1rem horizontal */
}

.pedido-nome input {
  flex: 1;                     /* Faz o input ocupar todo o espaço disponível dentro do container flex (.pedido-nome) */
  padding: var(--rem-05);             /* Espaçamento interno de 0.5rem em todos os lados, para texto não ficar grudado */
  border-radius: var(--rem-025);          /* Arredonda levemente os cantos do input, deixando-o visualmente agradável */
  border: 1px solid var(--cinza-claro);      /* Adiciona uma borda cinza clara ao input */
}

.pedido-nome button {
  padding: var(--rem-05) var(--rem-1);        /* Espaçamento interno: 0.5rem em cima/baixo e 1rem nas laterais */
  background-color: var(--verde);     /* Cor de fundo do botão */
  color: var(--branco);                /* Cor do texto */
  border: none;                /* Remove a borda padrão do botão */
  cursor: pointer;             /* Muda o cursor para uma mãozinha ao passar o mouse */
  border-radius: var(--rem-025);          /* Cantos arredondados do botão */
}

.pedido-nome button:hover {
  background-color: var(--verde-escuro);  /* Quando o mouse passa sobre o botão, muda o fundo para verde escuro */
}

.carrinho-produtos {
  flex: 1;                     /* Faz o container ocupar todo o espaço vertical disponível dentro do carrinho-lateral */
  overflow-y: auto;            /* Permite rolagem vertical caso os produtos ultrapassem a altura do painel */
  padding: var(--rem-1);               /* Espaçamento interno de 1rem em todos os lados, deixando o conteúdo afastado das bordas */
  display: flex;               /* Transforma o container em Flexbox, facilitando organizar os produtos em coluna */
  flex-direction: column;      /* Organiza os produtos em coluna (um embaixo do outro) */
  gap: var(--rem-1);                   /* Espaçamento vertical de 1rem entre cada produto */
}

.item-carrinho {
  display: flex;                  /* Transforma cada item em um container flexbox, permitindo alinhar elementos em linha */
  gap: var(--rem-05);             /* Espaçamento horizontal entre os elementos internos (ex: imagem, nome, quantidade) */
  border-bottom: 1px solid var(--branco);  /* Linha fina abaixo de cada item, separando visualmente os produtos */
  padding-bottom: 10px;           /* Espaçamento interno inferior, garantindo que a linha não fique colada à borda */
}

.item-carrinho img {
  width: 60px;                 /* Define a largura da imagem como 60 pixels */
  height: 60px;                /* Define a altura da imagem como 60 pixels */
  object-fit: cover;           /* Faz a imagem preencher o espaço definido, cortando partes se necessário, sem distorcer */
  border-radius: 5px;          /* Arredonda levemente os cantos da imagem, deixando-a visualmente agradável */
}

.item-carrinho .fa-trash {
  cursor: pointer;           /* muda o cursor para a mão */       
}

.item-info {
  flex: 1;                        /* Faz o container ocupar todo o espaço horizontal disponível dentro do .item-carrinho */
  display: flex;                   /* Torna o container um Flexbox, para organizar elementos internos verticalmente */
  flex-direction: column;          /* Organiza os elementos em coluna (um embaixo do outro) */
  justify-content: space-between;  /* Distribui o espaço vertical entre os elementos, empurrando o primeiro para cima e o último para baixo */
}

.item-topo {
  display: flex;                 /* Coloca os elementos em linha (nome do produto + outro elemento, ex: quantidade ou botão) */
  justify-content: space-between;/* Distribui os elementos entre as extremidades (um à esquerda, outro à direita) */
  align-items: center;           /* Centraliza verticalmente os elementos dentro da linha */
}

.item-topo h4 {
  margin: 0;                     /* Remove a margem padrão do título, evitando espaços extras */
  font-size: 0.95rem;            /* Define o tamanho da fonte (~15px se 1rem ≈ 16px) */
  font-weight: 600;               /* Define o peso da fonte como semi-negrito, destacando o nome do produto */
}

.item-topo button {
  background: transparent;   /* Remove qualquer fundo do botão, deixando-o visualmente limpo */
  border: none;               /* Remove a borda padrão do botão */
  color: var(--vermelho);             /* Define a cor do texto ou ícone do botão como vermelho, indicando ação de remover */
  cursor: pointer;            /* Muda o cursor para mãozinha ao passar sobre o botão, indicando que é clicável */
  font-size: var(--rem-1);            /* Define o tamanho do ícone ou texto dentro do botão (~16px) */
}

.quantidade {
  display: flex;              /* Organiza os elementos (botão -, input, botão +) em linha horizontal */
  gap: 5px;                   /* Espaçamento de 5px entre cada elemento dentro do container */
  align-items: center;        /* Alinha verticalmente os elementos ao centro */
  margin-top: 5px;            /* Pequeno espaço acima do componente, separando do conteúdo acima */
}

.quantidade button {
  width: var(--rem-175);                /* Largura do botão (ex: '-' ou '+') */
  height: var(--rem-175);               /* Altura do botão */
  border: 1px solid var(--cinza-claro);     /* Borda cinza clara ao redor do botão */
  background: var(--cinza-claro);       /* Fundo cinza claro */
  border-radius: var(--rem-025);         /* Cantos levemente arredondados */
  cursor: pointer;            /* Cursor de mãozinha, indicando que o botão é clicável */
  font-weight: bold;           /* Texto (ou símbolo) em negrito */
  transition: background 0.2s ease; /* Animação suave de 0,2s para mudança de cor ao passar o mouse */
}

.quantidade button:hover {
  background: var(--branco-suave);        /* Muda o fundo para um cinza um pouco mais escuro quando o usuário passa o mouse */
}

.quantidade input {
  width: var(--rem-25);                 /* Largura do input de quantidade */
  text-align: center;           /* Centraliza o número dentro do input */
  border: 1px solid var(--cinza-claro);       /* Borda cinza clara ao redor do input */
  border-radius: var(--rem-025);           /* Cantos levemente arredondados */
  padding: var(--rem-0125);                 /* Pequeno espaçamento interno para que o texto não fique grudado nas bordas */
}

.carrinho-total {
  padding: var(--rem-1);                  /* Espaçamento interno de 1rem em todos os lados, separando o conteúdo das bordas */
  border-top: 1px solid #ddd;     /* Linha acima do total, separando visualmente da lista de produtos */
  display: flex;                  /* Transforma o container em Flexbox, facilitando organizar os elementos internos */
  flex-direction: column;         /* Organiza os elementos em coluna (ex: subtotal, total, botão de finalizar) */
  gap: var(--rem-05);                    /* Espaçamento de 0.5rem entre cada elemento dentro do container */
}

.linha-total {
  display: flex;                     /* Coloca os elementos em linha (nome do valor à esquerda, valor à direita) */
  justify-content: space-between;    /* Empurra o primeiro elemento para a esquerda e o segundo para a direita */
  font-weight: bold;                 /* Deixa o texto em negrito, destacando os valores importantes */
  font-size: var(--rem-1);                   /* Tamanho da fonte, tornando o valor legível (~16px) */
  margin-bottom: 10px;               /* Espaço abaixo da linha, separando-a da próxima linha ou do botão */
}

.btn-finalizar {
  width: 100%;                             /* O botão ocupa toda a largura do container */
  padding: var(--rem-075);                           /* Espaçamento interno, deixando o botão confortável para clicar */
  background: var(--verde-escuro, --verde); /* Cor de fundo: variável CSS --verde-escuro ou verde como fallback */
  color: var(--branco);                             /* Cor do texto em branco, garantindo contraste com o fundo */
  border: none;                            /* Remove qualquer borda padrão */
  border-radius: 5px;                      /* Cantos arredondados para visual moderno e agradável */
  font-weight: bold;                        /* Texto em negrito, destacando a ação principal */
  cursor: pointer;                         /* Cursor de mãozinha, indicando que é clicável */
  transition: background 0.3s ease;        /* Animação suave para mudança de cor ao passar o mouse */
}

.btn-finalizar:hover {
  background: var(--verde-mais-escuro, darkgreen); /* Muda o fundo para um verde mais escuro, reforçando o hover */
}

.btn-continuar {
  width: 100%;               /* Ocupa toda a largura do container */
  padding: var(--rem-075);             /* Espaçamento interno, confortável para clicar */
  background: var(--cinza-claro);          /* Fundo cinza claro, indicando que é uma ação secundária */
  color: var(--preto-suave);               /* Texto cinza escuro, legível sobre o fundo */
  border: none;              /* Remove borda padrão */
  border-radius: 5px;        /* Cantos arredondados */
  cursor: pointer;           /* Cursor de mãozinha ao passar sobre o botão */
  transition: background 0.3s ease; /* Animação suave ao passar o mouse */
}

.btn-continuar:hover {
  background: var(--cinza); /* Muda o fundo para cinza mais escuro, reforçando que é clicável */
}

/* DEPARTAMENTOS */

.departamentos {
  width: 100%;                   /* Ocupa toda a largura disponível da tela */
  background: var(--cinza-claro); /* Fundo cinza claro, diferenciando visualmente a seção */
  display: flex;                  /* Transforma o container em Flexbox para organizar os itens */
  flex-wrap: wrap;                /* Permite que os itens quebrem linha quando não cabem em uma linha só */
  justify-content: center;        /* Centraliza os itens horizontalmente */
  gap: var(--rem-2);              /* Espaço entre cada item do menu (horizontal e vertical) */
  padding: var(--rem-05);         /* Espaçamento interno ao redor da seção */
}

.menu-departamentos {
  display: flex;                  /* Transforma em Flexbox, para organizar os itens em linha */
  flex-wrap: wrap;                /* Permite que os itens quebrem para a linha de baixo se necessário */
  justify-content: center;        /* Centraliza os itens horizontalmente */
  gap: var(--rem-2);              /* Espaço uniforme entre cada item do menu */
}

.departamentos button {
  color: var(--verde-escuro);      /* Cor do texto do botão (verde escuro) */
  font-weight: bold;                /* Deixa o texto em negrito */
  font-size: 0.9rem;                /* Tamanho do texto (~14px se 1rem = 16px) */
  position: relative;               /* Permite posicionar pseudo-elementos (::after) em relação ao botão */
  background: none;                 /* Remove o fundo padrão do botão, deixando-o minimalista */
  border: none;                     /* Remove borda padrão */
  cursor: pointer;                  /* Cursor de mãozinha para indicar que é clicável */
}

.departamentos button::after {
  content: "";                     /* Cria um pseudo-elemento vazio */
  position: absolute;              /* Posiciona a linha em relação ao botão */
  left: 0;                         /* Começa na extremidade esquerda do botão */
  bottom: -6px;                    /* Distância da linha em relação à base do texto */
  width: 100%;                     /* A linha cobre toda a largura do botão */
  height: 3px;                     /* Espessura da linha */
  background-color: var(--vermelho); /* Cor da linha (vermelho) */
  opacity: 0;                       /* Começa invisível */
  transition: opacity 0.3s;        /* Transição suave ao aparecer */
}

.departamentos button:hover::after {
  opacity: 1;                     /* Torna a linha visível ao passar o mouse sobre o botão */
}

.menu-topo {
  display: none;           /* Oculta o menu superior por padrão (provavelmente aparece apenas em telas maiores via media query) */
}

.aviso-orcamento {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-left: 30px;
  max-width: 600px;
}

@media (max-width:1024px){

  .menu-topo{
    display: flex; /* Define o elemento como um container flex */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    padding: var(--rem-1); /* Adiciona espaçamento interno usando uma variável CSS */
    justify-content: space-between; /* Distribui os itens deixando espaço entre eles */
    width: 100%; /* Faz o container ocupar toda a largura disponível */
  }

  .menu-logo {
    height: 50px;            /* Define a altura da logo como 50 pixels */
  }

  .menu-x {
    height: 30px;            /* Define a altura do ícone "X" (geralmente usado para fechar menus ou modais) como 30 pixels */
  }
  
  .departamentos{
    position: fixed; /* Fixa o menu na tela, mesmo quando a página rola */
    top: 0; /* Alinha o menu ao topo da tela */
    left: -280px; /* Deixa o menu escondido fora da tela à esquerda */
    width: 280px; /* Define a largura do menu lateral */
    height: 100%; /* Faz o menu ocupar toda a altura da tela */
    flex-direction: column; /* Organiza os itens em coluna */
    transition: left 0.3s ease; /* Cria animação suave ao mover o menu */
    z-index: 999; /* Garante que o menu fique acima de outros elementos */
    box-shadow: 3px 0 15px rgba(0,0,0,0.15); /* Adiciona sombra na lateral do menu */
    padding: 0; /* Remove espaçamento interno */
    justify-content: flex-start; /* Alinha os itens no início do container */
    align-items: stretch; /* Faz os itens ocuparem toda a largura */
  }

  .departamentos.ativo{
    left: 0; /* Quando a classe ativo é aplicada, o menu aparece na tela */
  }

  .departamentos button{
    width: 100%; /* Faz o botão ocupar toda a largura do menu */
    text-align: left; /* Alinha o texto do botão à esquerda */
    padding: var(--rem-075) var(--rem-1); /* Adiciona espaçamento interno usando variáveis */
  }

  /* remover linha inferior */
  .departamentos button::after{
    display: none; /* Remove a linha decorativa que aparecia após o botão */
  }

  .menu-departamentos {
    gap: 0px;              /* Espaço uniforme entre cada item do menu */
  }

  .aviso-orcamento {
    font-size: var(--rem-075);
  }

}

@media (max-height: 440px) {
  .menu-topo{
    padding: 10px 12px; 
  }

  .menu-departamentos {
    max-height: 240px;   /* ajuste conforme necessário */
    overflow-y: auto;    /* ativa rolagem vertical */
  }
}