:root {
  --bodyFonts: 'Josefin Sans', sans-serif;
  --notoFont: 'Noto Sans', sans-serif;
  --blueColor: #032e59;

  --buttonColor: #008833; /* Verde original */
  --buttonColorHover: #00aa55; /* Verde mais claro ao passar o mouse */
  --buttonColorActive: #006622; /* Verde mais escuro ao clicar */

  --titleColor: #323740;
  --bodyColor: #f9f4f1;
  --lightblueColor: #8D99FF;
  --whiteColor: #ffffff;
  --primaryBlue: #043668;
  --accentBlue: #0085ff;
  --transition: 0.3s ease;
  --cardShadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h3 {
	font-family: 'Arial', sans-serif; /* Mude 'Arial' para a fonte desejada */
	color: white;
	font-size: 20px; /* Tamanho da fonte */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra do texto para um toque extra */
	margin: 0;
	white-space: normal; /* Permite quebra de linha quando necessário */
	word-wrap: break-word; /* Força a quebra de palavras longas */
	word-break: break-word;
}

.titulo{
	display: flex; 
	justify-content: center;
	align-items: center;
	position: relative;
	width:100%;
	opacity: 0.5; /* 0.8 significa 80% opaco */ 
}

.titulo_centro { 
	flex-grow: 1; 
	text-align: center;
}

.titulo_canto_direito { 
	margin-left: auto; 
	flex-shrink: 0; 
}

.titulo_canto_esquerdo { 
	margin-right: auto; 
	display: flex; 
	align-items: center;
	order: 0;
	max-width:250px;
}

.titulo_canto_esquerdo img { 
	margin-right: 8px; 
	width:46px;
	height:46px;
}

body {	
  padding-top: 90px;
  font-family: var(--notoFont) !important;
  background: var(--bodyColor);
}

html, body, form {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/*mensagem*/
.btn-77-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.btn-77 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #f1fafa;
  color: var(--buttonColor);
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  font-size: 100%;
  line-height: 1.5;
  
  margin-top:15px;
  margin-bottom:15px;
  margin-left:0px;
  margin-right:0px;
  
  border: 1px solid;
  border-radius: 999px;
  box-shadow: 0 0 0 2em transparent;
  font-weight: 900;
  
  padding: 10px 3rem;
   
  position: relative;
  text-transform: uppercase;
  text-decoration: none;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #c2e2ff;
  }
}
/*---------------------------*/

#janelaCarrinho { 
	display: none; /* Inicialmente oculto */ 
}

.update-panel { 
	height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* Expande o conteúdo principal para ocupar o espaço disponível */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bodyColor);
  position: fixed;
  width: 100%;
  max-width: 1400px;
  z-index: 999;
  left: 50%;
  transform: translateX(-50%);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

a:hover {
  text-decoration: none;
}

.btn{
	min-width:40px;
	min-height:35px;
}

/* Layout Principal */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
}

/* Header e Navegação */
.navbar {
  background: var(--blueColor);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  opacity: 0.95; /* 0.8 significa 80% opaco */ 
  height:68px; 
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* Sombra leve na parte de baixo */
}

.logo {
  width: clamp(100px, 15vw, 150px);
  height: auto;
}

/* Busca */
.search-container { 
	position: fixed; 
	left: 50%;
	width:400px; 
	top: 14px;
	transform: translateX(-50%); 
	z-index: 1010;
}

.search-container .search-input{ 
	font-size:1rem;
}

.search-wrapper {
	display: flex;
	align-items: center;
	background: var(--whiteColor);
	border-radius: 25px;
	padding-left: 15px;
	box-shadow: var(--cardShadow);
	height:40px;
}

.search-input {
	border: none;
	outline: none;
	padding: 0px;
	margin-left:10px;
	margin-right:20px;
	font-size: clamp(14px, 1.5vw, 16px);
	width:100%;
	height:38px;
}

.search-button {
	font-size: 20px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0px;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
}

.search-button:hover {
	color: #003baf;
}

.search-button-filtro{
	height: 40px;
	background-color: var(--buttonColor); /* Rosa intenso para combinar */
	width: 140px;	
	border-radius: 0 25px 25px 0;
	border-color: var(--buttonColor); 
	color: white; /* Para melhor contraste */
}

.search-button-filtro:hover{
	background-color: var(--buttonColorHover); /* Rosa intenso para combinar */
	border-color: var(--buttonColorHover); 
}

.search-button-filtro:active {
    background-color: var(--buttonColorActive) !important; /* Cor rosa mais clara ao clicar */
	border-color: var(--buttonColor) !important; 
}


.search-button-quantidade{
	
}

.search-button-quantidade:hover{
	
}

.search-button-quantidade:active {
   
}


.search-button-carrinho{
	background-color: var(--buttonColor); 
	border-color: var(--buttonColor); 
	border-radius: 8px;
	color: white; /* Para melhor contraste */
}

.search-button-carrinho:hover{
	background-color: var(--buttonColorHover); 
	border-color: var(--buttonColorHover); 
}

.search-button-carrinho:active{
	background-color: var(--buttonColorActive) !important; /* Cor rosa mais clara ao clicar */
	border-color: var(--buttonColor) !important; 
}


/* Cards */
.card-panel{
 	padding-right: 8px;  
	padding-left: 8px;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: var(--whiteColor);
  border-radius: 10px;
  box-shadow: var(--cardShadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.card:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card-body {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--blueColor);
  font-weight: bold;
  text-align: center;
  margin-bottom: 0.5rem;
}

.card-text {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.5;
}

.card .card-img-top {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  height:200px;
}

.titulo-h2 {
  padding-top: 30px;
  font-size: clamp(2rem, 5vmin, 6rem);
  font-family: sans-serif;
  color: var(--blueColor);
  text-align: left;
  padding-left: 30px;
}

.card button {
  border: none;
  padding: 10px 10px;
  margin-top: auto; 
  background-color: #043668;
  color: white;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
  cursor: pointer;
  font-size: clamp(12px, 1.5vw, 14px);
}

.card button:hover {
  background-color: var(--blueColor);
  color: #d9f0f7;
}

.janela-carrinho {
  position: fixed;
  display: none;
  top: 0;
  right: 0px;
  width: 400px;
  height: 100vh;
  overflow: hidden; /* Oculta o transbordo da janela de filtro */
  background: white;
  box-shadow: -2px 0 5px rgba(0,0,0,0.2);
  transition: right 0.3s ease-in-out;
  z-index: 9000;
  flex-direction: column;
}

.janela-carrinho.active {
 	right: 0;   
} 

#topo_carrinho {
    background-color: white; /* Defina um fundo para evitar sobreposição de texto durante a rolagem */
    z-index: 1000; /* Garante que a barra fique acima do conteúdo rolado */
    padding: 15px;
	padding-bottom: 0px;
	border-bottom: 1px solid #ddd; /* Borda fina e clara na parte inferior */
}

#itensCarrinho {
	flex: 1;
	overflow-y: auto; /* Permite rolar o conteúdo */
	padding-left:20px;
	padding-right:20px;
	margin-top:8px;
	padding-bottom: 240px; /* Garante espaço suficiente para o rodapé */
	height:auto;
}

#rodape_carrinho { 
	position: fixed;
    bottom: 0;
	width: 400px;
    background-color: white;
    z-index: 1000;
    padding: 15px;
	padding-top: 10px;
    border-top: 1px solid #ddd; /* Borda fina e clara na parte superior */
	gap: 10px;
    flex-shrink: 0; /* Garante que o rodapé não diminua de tamanho */
}

.janela-filtro {
    position: fixed;
    display: none;
    flex-direction: column;
    top: 0;
    right: 0;
    width: 400px; /* Limita a largura máxima em telas maiores */
    height: 100vh;
    background: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out;
    z-index: 9000;
    overflow: hidden; /* Evita overflow visível */
}

.janela-filtro.active {
	right: 0;   
} 

#topo_filtro {
    background-color: white; /* Define um fundo para evitar sobreposição de texto durante a rolagem */
    z-index: 1000; /* Garante que a barra fique acima do conteúdo rolado */
    padding: 15px;
    padding-bottom: 0px;
    border-bottom: 1px solid #ddd; /* Borda fina e clara na parte inferior */
}

#rodape_filtro {
    position: fixed;
    bottom: 0;
    width: 400px;
    background-color: white;
    z-index: 1000;
    padding: 15px;
    padding-top: 5px;
    border-top: 1px solid #ddd; /* Borda fina e clara na parte superior */
    display: flex;
    gap: 10px;
    flex-shrink: 0; /* Garante que o rodapé não diminua de tamanho */
}


.quantidade-container {
	width: 100%;
}

.quantidade-input {
	text-align: center;
	width: clamp(40px, 8vw, 60px) !important;
	text-align: center;
}

.item-carrinho {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding-top: 5px;
	padding-left: 0px;
	padding-right: 0px;
	border-bottom: 1px solid #eee;
}

.item-carrinho img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	margin-right: 5px;
}

.item-carrinho-info {
	flex-grow: 1;
}

.item-carrinho-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.badge-carrinho {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

.bi-x {
  cursor: pointer;
  font-size: 24px;
  margin-bottom: 15px;
}

/*footer*/
.footer {
  padding-top: 1px;
  width: 100%;
  background: #999999;
  margin-top: auto;
}

.footer .footer-tags a {
  display: inline-block;
  margin: 0 5px 5px 0;
  padding: 2px 7px;
  font-size: 15px;
  color: #fff;
  text-transform: capitalize;
  border: 1px solid #fff;
  border-radius: 6px;
}

.footer .footer-tags a:hover {
  color: #ffffff;
  background: #0085ff;
  border-color: #0085ff;
}

.footer .footer-contact h4 {
  position: relative;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #ffffff;
}

.footer .footer-contact p {
  margin: 0;
  font-size: 16px;
  color: #ffffff;
}

.footer .footer-contact a {
  display: inline-block;
}

.footer .footer-contact a i {
  margin-right: 10px;
  font-size: 18px;
  color: #ffffff;
}

.footer .footer-contact a:last-child i {
  margin: 0;
}

.footer .footer-contact a:hover i {
  color: #0085ff;
}

.footer .copyright {
  position: relative;
  padding: 30px 0;
  background: var(--blueColor);
}

.footer .copyright .copy-text p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}

.footer .copyright .copy-text p a {
  color: #dddddd;
}

.footer .copyright .copy-text p a:hover {
  color: #0085ff;
}

.footer .copyright .copy-menu {
  position: relative;
  font-size: 0;
  text-align: right;
  margin-right:50px;
}

.footer .copyright .copy-menu a {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid rgba(255, 255, 255, .3);
}

.footer .copyright .copy-menu a:hover {
  color: #0085ff;
}

.footer .copyright .copy-menu a:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

.logofooter{
  width: 30%;
  padding-left: 20px;
}

/* Utilitários */
.quantity-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
}

.control-btn, .add-cart-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
}

.bi-telephone, .bi-cart {
  font-size: clamp(16px, 2vw, 24px);
  color: var(--whiteColor);
}

.badge-carrinho {
  position: absolute;
  top: -8px;
  right: -8px;
  background: red;
  color: var(--whiteColor);
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

#subir {
    position: fixed;
    bottom: 5px;
    right: 5px;
	font-size: 1.5em;
	color:#0077DD;
}

.carrinho-vazio {
    font-weight: bold; /* Destaque */
	font-size:18px;
    margin-top: 30px;  /* Margem superior */
    margin-bottom: 30px; /* Margem inferior */
    padding: 10px; /* Espaço interno */
}


@media (max-width: 980px) {
  
  body{
 	 padding-top: 130px;
  }

  .search-container {
    top: 79px;
  }
  
  .titulo_canto_esquerdo { 
		max-width:500px;
	}

  .footer .footer-contact .col-md-4 {
    margin-bottom: 25px;
  }

  .footer .footer-contact .col-md-4:last-child {
    margin: 0;
  } 
  
  .footer .copyright .copy-text,
  .footer .copyright .copy-menu {
    text-align: center;
  }

  .footer .copyright .copy-text p {
    margin-bottom: 5px;
  }
}


@media (max-width: 576px) {

  .janela-carrinho {
    width: 100%;
  }
  
  .janela-filtro {
        width: 100%;
        height: 100vh; /* Garante que a altura seja 100% da viewport */
    }

    #rodape_filtro {
        width: 100%;
    }
	
	#rodape_carrinho {
        width: 100%;
    }
	
	.titulo_canto_esquerdo { 
		max-width:350px;
	}
	  
  .search-container {
    display: flex;
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    padding: 0 9px; /* Adiciona margem de 20px em ambos os lados */
	width:100%;
  }
  
  .search-wrapper{
  	width: 100%;
    max-width: calc(100% - 18px); /* Calcula a largura total menos as margens */
    background-color: var(--whiteColor); /* Exemplo de cor de fundo */
    box-shadow: var(--cardShadow); /* Exemplo de sombra */	
  }  
}

@media (max-width: 520px) {

	.titulo_canto_esquerdo { 
		max-width:250px;		
	}	
}


@media (max-width: 440px) {

	.titulo_canto_esquerdo { 
		max-width:200px;
	}
}

@media (max-width: 400px) {

	.titulo_canto_esquerdo { 
		max-width:185px;
	}
	
	.titulo_canto_esquerdo img{ 
		width:45px !important; 
		height:45px !important; 
	}
	
	.titulo_canto_esquerdo h3{ 
		font-size: min(5vw, 185px);
	}
	
	.navbar {
	  height:75px;	
	  padding:0px;
	  padding-left:8px;
	  padding-right:8px;
	}
	
}

/* styles.css */
.custom-alert {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.custom-alert-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column; /* Garante que os elementos sejam exibidos em coluna */
}

.custom-alert-content h2 {
    margin-top: 0;
}

.alert-buttons {
    margin-top: 20px; /* Espaço acima dos botões */
    display: flex;
    justify-content: center; /* Distribui os botões */
}

.alert-buttons button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin:10px;
}

.alert-buttons button:first-child {
    background-color: #5a6268; /* Cor vermelha para o botão "Cancelar" */
}

.alert-buttons button:hover {
    opacity: 0.8;
}

#zebra-list {
    flex: 1;
    overflow-y: auto; /* Permite rolar o conteúdo */
    padding: 0 20px;
    margin-top: 8px;
	padding-bottom: 140px; /* Garante espaço suficiente para o rodapé */
	height:auto;
}

.zebra-item {
    display: flex; /* Usa flexbox para alinhar os itens */
    align-items: center; /* Alinha verticalmente no centro */
    padding: 5px; /* Espaçamento interno dos itens */
    font-size: 16px; /* Tamanho da fonte */
}

/* Alterna as cores das linhas */
.zebra-item:nth-child(odd) {
    background-color: #f9f9f9; /* Cor para linhas ímpares */
}

.zebra-item:nth-child(even) {
    background-color: #e0e0e0; /* Cor para linhas pares */
}

/* Estilo para o checkbox */
.zebra-item input[type="checkbox"] {
    margin-right: 10px; /* Espaçamento à direita do checkbox */
}

#loadMoreBtn {
    opacity: 1.0; /* Reduz a opacidade */
	cursor: not-allowed;
	pointer-events: none; /* Desativa cliques no botão */
	color:#333333;
	font-size: 18px;
	background-color: transparent;
	background-image: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 0%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #F4F4F4));
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 0%);
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #F4F4F4 0%);

	background-image: url(../img/carregando_button.gif);
    background-repeat: no-repeat;
    background-position: left center;
    background-origin: content-box;
	
	padding-left:30px;
  	padding-right:0px;
  	padding-top:10px;
  	padding-bottom:10px;
	
	border-style:none;
	box-shadow: none;
}


.card .zoom-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  border: none;
  background-color: rgba(255, 255, 255, 0.7) !important; /* Fundo cinza com transparência */
  cursor: pointer;
  padding-top:2px;
  padding-left:9px;
  transition:  transform 0.3s ease;
  border-radius: 50%; /* Torna o botão redondo */
  width: 40px; /* Define uma largura */
  height: 40px; /* Define uma altura */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Adiciona sombreado */
}

.card .share-btn {
  position: absolute;
  top: 57px;
  right: 7px;
  background-color: rgba(255, 255, 255, 0.7) !important; /* Fundo cinza com transparência */
  border: none;
  cursor: pointer;
  padding-top:2px;
  padding-left:8px;
  transition: transform 0.3s ease;
  border-radius: 50%; /* Torna o botão redondo */
  width: 40px; /* Define uma largura */
  height: 40px; /* Define uma altura */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Adiciona sombreado */
}

/* Estilos específicos para o ícone dentro do botão */
.card .zoom-btn i, .share-btn i {
  color: #032e59 !important; /* Cor azul escuro */
  font-size: 22px; /* Aumenta o tamanho do ícone */
  font-weight: bold;
}

.card .zoom-btn:hover, .share-btn:hover {
  transform: scale(1.2);
}

.modal-transparent .modal-content {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.modal-transparent .modal-header {
    border-bottom: none;
}

.modal-transparent .modal-body {
    overflow-y: auto;
    padding: 0;
}

.btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-close:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.preco{
}

.unidade{
	font-weight: bold;
	margin-left:15px;
}