/*
 Theme Name: ListingHive Child
 Theme URI: https://okplace.com.br
 Description: Tema filho do ListingHive para a Okplace
 Author: Jonas Campos
 Author URI: https://okplace.com.br
 Template: listinghive
 Version: 1.0
*/

/* Importa o CSS do tema pai */
@import url("../listinghive/style.css");

/* Aqui você pode adicionar customizações próprias */



/* --------------------------- */

/* BANNERS */


/* Aqui é o modo mobile */


/* Container principal do slider */
/* Estilos padrão para mobile */
.slider {
  position: relative;
  width: 100%; /* Ocupa toda a largura da tela */
  overflow: hidden; /* Esconde o conteúdo que ultrapassa */
  margin: 0 auto; /* Centraliza o slider */
  height: auto; /* Altura automática para mobile */
	margin-top: -30px

}
/*----------- fim ---------- */

/* Aqui é o modo desktop */

/* Ajustes para telas maiores (desktops) */
@media (min-width: 769px) {
  .slider {
    height: 300px; /* Ajuste a altura apenas para telas maiores */
  }
}

/*--------- fim ----------- */






/* Slides */
.slides {
  display: flex; /* Deixa os slides lado a lado */
  transition: transform 0.5s ease-in-out; /* Animação suave */
}

.slide {
  min-width: 100%; /* Cada slide ocupa 100% da largura */
}

.slide img {
  width: 100%; /* A imagem preenche todo o slide */
  height: auto; /* Mantém a proporção da imagem */
  display: block; /* Remove espaços extras ao redor */
}

/* Botões de navegação */
button.prev,
button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.4);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease; /* Transição suave para tamanho e cor */
}


/* Hover apenas para os botões de navegação */
button.prev:hover,
button.next:hover {
  background-color: rgba(255, 255, 255, 0.6); /* Cor mais forte ao passar o mouse */
  transform: translateY(-50%) scale(1.1); /* Aumenta levemente o botão */
}



button.prev {
  left: 10px;
}

button.next {
  right: 10px;
}

/* Indicadores (bolinhas) */
.dots {
  position: absolute;
  bottom: 06px; /* Posiciona as bolinhas no rodapé do slider */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.5); /* Cor inicial */
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: rgba(255, 255, 255, 1); /* Cor da bolinha ativa */
}



.dots {
  display: flex;
  justify-content: center;
  gap: 10px; /* Espaçamento entre os indicadores */
  margin-top: 10px; /* Espaço acima dos indicadores */
}

.dot {
  width: 10px; /* Diâmetro das bolinhas */
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.8); /* Contorno das bolinhas */
  border-radius: 50%; /* Formato circular */
  background-color: transparent; /* Sem preenchimento */
  transition: all 0.3s ease; /* Transição suave */
}

.dot.active {
  background-color: #ffff; /* Bolinha preenchida quando ativa */
  border-color: #ffff; /* Contorno igual à cor de preenchimento */
}


/* Responsividade */
/* MOBILE */

@media (max-width: 768px) {
  /* Centralizar as setas no botão de navegação */
  button {
    display: flex; /* Define um layout flexbox */
    align-items: center; /* Alinha verticalmente ao centro */
    justify-content: center; /* Alinha horizontalmente ao centro */ 
	}


  /* Ajustar espaçamento entre as bolinhas */
  .dots {
    display: flex; /* Define um layout flexbox */
    justify-content: center; /* Centraliza as bolinhas horizontalmente */
    gap: 2px; /* Define o espaçamento entre as bolinhas */
  }

  /* Reposicionar as bolinhas dentro do banner */
  .dots {
    position: absolute; /* Permite reposicionamento */
    bottom: 2px; /* Ajusta a altura das bolinhas no banner */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta a centralização */
  }
}





/* ------------------------ */
/* OCULTAR DATA DE POSTAGEM DO ANÚNCIO */

.hp-listing__created-date {
    display: none !important;
}





/* -------------------------- */




/* ===========================
   CARTÃO DE ANÚNCIO UNIFORME
   =========================== */

/* Garantir que os cartões de anúncio tenham altura uniforme */
.hp-listing__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 223px; /* Ajuste conforme necessário */
  overflow: hidden;
}

/* ===========================
   TÍTULO DO ANÚNCIO
   =========================== */

/* Limitar título a 2 linhas e cortar com "..." no final */
.hp-listing__title {
  white-space: normal !important;        /* Permite quebra de linha */
  overflow: hidden !important;           /* Oculta o excesso */
  text-overflow: ellipsis !important;    /* Adiciona "..." */
  display: -webkit-box !important;       /* Necessário para o clamp */
  -webkit-line-clamp: 2 !important;      /* Limite de 2 linhas */
  -webkit-box-orient: vertical !important; /* Orientação vertical */
  line-height: 1.3em !important;         /* Altura de cada linha */
  max-height: 2.6em !important;          /* Altura total para 2 linhas */
  font-size: 1.2em;                       /* Ajuste do tamanho da fonte */
}

/* ===========================
   DESCRIÇÃO DO ANÚNCIO
   =========================== */

.hp-listing__description {
  flex-grow: 1; /* Faz a descrição ocupar o restante do espaço */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Limita a 3 linhas */
  -webkit-box-orient: vertical;
}

/* ===========================
   PÁGINA DE DETALHES DO ANÚNCIO
   =========================== */

.single-hp_listing .hp-listing__title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  line-height: 1.3em !important;
  max-height: 2.6em !important;
}


/* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
    /* Garantir que o título seja truncado também em dispositivos móveis */
    .hp-listing__title,
    .single-hp_listing .hp-listing__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
        max-height: 2.6em;
			  font-size: 18.1px;
    }
}







/* ----------------------------*/








/* 03 BANNERS PROMOÇÃO */




.product-grid {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: 40px 0;
	margin-right: 0px;
	margin-left: -20px;
}

.product-item {
  position: relative;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0px;
  overflow: hidden;
  flex: 1;
  max-width: 100%;
  height: 130px;
}

.product-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.product-item .content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.product-item h3 {
  text-align: right; /* Alinha o texto à direita */
  margin-top: 70px;
	color: #000;
	margin-right: 2px;
	margin-left: 10px;
	font-size: 15px;
}

.product-item p {
	text-align: right;
	margin-bottom: 10px;
	color: #fff;
}

.product-item .btn {
  display: inline-block;
  padding: 06px 10px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 12px;
  transition: background-color 0.3s;
  align-self: center; /* Centraliza o botão horizontalmente */
  margin-bottom: 70px; /* Espaço entre o texto e o botão */
	margin-top: -5px;
	margin-left: 60px;
}

.product-item .btn:hover {
  background-color: #0056b3;
}







/*---------------------------*/









/* BANNER HOME - Botões de navegação */

   .swiper-container {
  position: relative; /* posiciona os botões de navegação */
}


/* Ajuste do ícone da seta */
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 20px !important; /* Tamanho do ícone da seta */
  color: #000 !important; /* Cor da seta */
}

/* Ajusta o botão de navegação como um todo */
.swiper-button-next, .swiper-button-prev {
  width: 40px !important; /* Largura do botão */
  height: 40px !important; /* Altura do botão */
  background-color: #ffffff !important; /* Fundo branco */
  border-radius: 50% !important; /* Formato circular */
  top: 40% !important; /* Centraliza verticalmente */
  transform: translateY(-50%) !important; /* Ajusta o alinhamento */
  z-index: 10 !important; /* Garante visibilidade */
  transition: all 0.3s ease; /* Suaviza a transição do efeito */
}

/* Efeito hover para as setas */
.swiper-button-next:hover, .swiper-button-prev:hover {
  background-color: #f0f0f0 !important; /* Cor de fundo ao passar o mouse */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Sombramento */
  transform: translateY(-50%) scale(1.1) !important; /* Aumenta ligeiramente o botão ao passar o mouse */
}

/* Posicionamento horizontal */
.swiper-button-next {
  right: 5px !important; /* Ajusta o espaço da borda direita */
}

.swiper-button-prev {
  left: 5px !important; /* Ajusta o espaço da borda esquerda */
}


/* Remove os pontos de navegação */
.swiper-pagination {
  display: none !important;
}







/* --------------------------- */

/* Campo de busca */

/* Estilos para o formulário personalizado */
.custom-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}

.custom-form__fields {
  display: flex;
  flex-direction: row; /* Alinha os elementos na mesma linha */
  align-items: center; /* Centraliza verticalmente */
  width: 100%;
  max-width: 700px;
  position: relative;
}

.custom-form__field--search {
  flex: 1; /* Faz o campo de busca ocupar o máximo de espaço disponível */
  position: relative;
}

.custom-field--search {
  width: 90%;
	height: 42px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px; /* Arredonda apenas o lado esquerdo */
  font-size: 16px;
  outline: none;
  box-sizing: border-box; /* Garante que o padding não aumente o tamanho total */
}

.custom-field--search:focus {
  border-color: #2a9d8f;
  box-shadow: 0 0 0px rgba(0, 123, 255, 0.5);
}

.custom-search-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0 5px 5px 0; /* Arredonda apenas o lado direito */
  padding: 10px 15px;
  cursor: pointer;
  display: flex; /* Garante que o ícone fique centralizado */
  align-items: center;
  justify-content: center;
  height: 100%; /* Faz o botão ter a mesma altura do campo */
}

.custom-search-button:hover {
  background-color: #2a9d8f;
}

.custom-search-button svg {
  width: 20px;
  height: 20px;
}

/* ---------------------------- */

/* Estilos gerais para alinhar o botão e o campo */
.custom-form__field--search {
  display: flex;
  align-items: center; /* Garante alinhamento vertical perfeito */
}

.custom-form__field--search input {
  flex: 1; /* Faz o campo de busca ocupar o espaço restante */
  height: 40px; /* Certifique-se de que a altura seja consistente com o botão */
}

.custom-search-button {
  height: 40px; /* Garante que a altura seja igual à do campo */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1px; /* Espaçamento horizontal entre o campo e o botão */
}




/* Estilos para as sugestões de busca */

.suggestions-container {
  position: absolute;
  z-index: 1000;
  background-color: white;
  border: 1px solid #ccc;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.suggestions-container.active {
  display: block;
}

.suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #000;
}






/* ---------------------------- */

/* OCULTAR CAMPO DE BUSCA PADRÃO DO TEMA  */
.hp-form--listing-search {
  display: none !important;
}







/* ------------------------  */

/* Ajustes para o campo de busca em dispositivos móveis */
@media (max-width: 768px) {
    .custom-form {
        flex-direction: column;
        padding: 15px;
			  margin-bottom: -30px;
    }

    .custom-form__fields {
        width: 93%;
    }

    .custom-form__field--search input.custom-field--search {
        padding: 10px;
        font-size: 14px;
    }

    .custom-search-button {
        width: 100%;
        padding: 10px;
        margin-right: 0px;
        border-radius: 5px;
    }
}




/* -------------------------- */

/* Ocultar o campo de busca padrão nas páginas de resultados de pesquisa */
.search .hp-form--listing-search {
    display: none;
}







/* --------------------------- */

/* CRONOMETRO CATEGORIA PROMOÇÕES DO DIA */

.category-pd-cronometro {
    text-align: center;
    background: #2a9d8f !important; /* Cor de fundo laranja */
    color: #fff; /* Cor do texto em branco */
    padding: 15px 30px; /* Espaçamento interno */
    border-radius: 50px !important; /* Bordas arredondadas */
    font-family: Arial, sans-serif; /* Fonte */
    display: flex; /* Flexbox para alinhar os itens na mesma linha */
    justify-content: center; /* Alinhar os itens ao centro */
    align-items: center; /* Alinhar verticalmente */
    gap: 20px; /* Espaçamento entre os elementos */
}

.category-pd-cronometro .super-ofertas {
    font-size: 1.5rem;
    margin: 0; /* Remove margem */
}

.category-pd-cronometro p {
    font-size: 1rem; /* Tamanho do texto "Termina em:" */
    margin: 0; /* Remove margem */
}

#category-pd-contador {
    display: flex; /* Flexbox para alinhar os números na mesma linha */
    font-size: 1.5rem; /* Tamanho maior para os números */
    font-weight: bold; /* Negrito */
    gap: 0px; /* Espaço entre os números */
}

#category-pd-contador {
    display: flex; /* Flexbox para alinhar os números na mesma linha */
    font-size: 1.5rem; /* Tamanho maior para os números */
    font-weight: bold; /* Negrito */
}

#category-pd-contador span {
    font-size: 1.5rem; /* Tamanho dos números */
    font-weight: bold; /* Deixar os números em negrito */
}

#horas {
    margin-right: 0px; /* Espaço entre horas e 'h' */
}
#minutos {
    margin-left: 5px; /* Espaço entre 'h' e minutos */
    margin-right: 0px; /* Espaço entre minutos e 'm' */
}
#segundos {
    margin-left: 5px; /* Espaço entre 'm' e segundos */
}



/* ------ mobile ------------ */

@media (max-width: 768px) { /* Aplica apenas para telas menores que 768px */
    .category-pd-cronometro {
        text-align: center !important;
        background: #2a9d8f !important;
        color: #fff !important;
        padding: 10px !important;
        border-radius: 50px !important;
        font-family: Arial, sans-serif !important;
        margin-bottom: 50px !important;
    }

   	 .super-ofertas {
        font-size: 0.9rem !important;
        margin-bottom: 1px !important;
			margin-right: 3px !important;
    }

    p {
        font-size: 0.9rem !important;
        margin-bottom: 1px !important;
			  margin-right: -10px !important;
    }

    #category-pd-contador {
        font-size: 0.9rem !important; /* Reduz o tamanho dos números */
        font-weight: bold !important;
        display: flex !important;
        justify-content: center !important;
        gap: 4px !important;
			margin-right: 3px !important;
    }

    #category-pd-contador span {
        font-size: 0.9rem !important; /* Reduz o tamanho dos números */
        font-weight: bold !important;
    }

    #category-pd-contador span::after { /* Seleciona o texto "h", "m", "s" */
        font-size: 0.9rem !important; /* Reduz o tamanho das letras */
        font-weight: normal !important;
    }
	
		#horas {
				margin-right: -3px; /* Espaço entre horas e 'h' */
		}
		#minutos {
				margin-left: 5px; /* Espaço entre 'h' e minutos */
				margin-right: -3px; /* Espaço entre minutos e 'm' */
		}
		#segundos {
				margin-left: 5px; /* Espaço entre 'm' e segundos */
			  margin-right: -3px;
		}
}







/* --------------------------- */

/* CRONOMETRO PROMOÇÕES DO DIA - ANÚNCIO INDIVIDUAL */


.cronometro-anuncio {
    text-align: center;
    background: #2a9d8f; /* Cor de fundo laranja */
    color: #fff; /* Cor do texto em branco */
    padding: 15px 30px; /* Espaçamento interno */
    border-radius: 50px !important; /* Bordas arredondadas */
    font-family: Arial, sans-serif; /* Fonte */
    display: flex; /* Flexbox para alinhar os itens na mesma linha */
    justify-content: center; /* Alinhar os itens ao centro */
    align-items: center; /* Alinhar verticalmente */
    gap: 20px; /* Espaçamento entre os elementos */
}

.cronometro-anuncio .oferta-especial {
    font-size: 1.5rem;
    margin: 0; /* Remove margem */
}

.cronometro-anuncio p {
    font-size: 1rem; /* Tamanho do texto "Termina em:" */
    margin: 0; /* Remove margem */
}

#contador-anuncio {
    display: flex; /* Flexbox para alinhar os números na mesma linha */
    font-size: 1.5rem; /* Tamanho maior para os números */
    font-weight: bold; /* Negrito */
    gap: 0px; /* Espaço entre os números */
}

#contador-anuncio span {
    font-size: 1.5rem; /* Tamanho dos números */
    font-weight: bold; /* Deixar os números em negrito */
}

#horas-anuncio {
    margin-right: 0px; /* Espaço entre horas e 'h' */
}
#minutos-anuncio {
    margin-left: 5px; /* Espaço entre 'h' e minutos */
    margin-right: 0px; /* Espaço entre minutos e 'm' */
}
#segundos-anuncio {
    margin-left: 5px; /* Espaço entre 'm' e segundos */
}



/* -------- mobile ---------- */


@media (max-width: 768px) { /* Aplica apenas para telas menores que 768px */
    .contador-anuncio {
        text-align: center !important;
        background: #2a9d8f !important;
        color: #fff !important;
        padding: 10px !important;
        border-radius: 50px !important;
        font-family: Arial, sans-serif !important;
        margin-bottom: 50px !important;
    }

    .oferta-especial {
        font-size: 0.8rem !important;
        margin-bottom: 1px !important;
			margin-right: -10px !important;
    }

    p {
        font-size: 0.8rem !important;
        margin-bottom: 1px !important;
			  margin-right: -10px !important;
    }

    #contador-anuncio {
        font-size: 0.8rem !important; /* Reduz o tamanho dos números */
        font-weight: bold !important;
        display: flex !important;
        justify-content: center !important;
        gap: 0px !important;
			margin-right: 0px !important;
    }

    #contador-anuncio span {
        font-size: 0.8rem !important; /* Reduz o tamanho dos números */
        font-weight: bold !important;
    }

    #contador-anuncio span::after { /* Seleciona o texto "h", "m", "s" */
        font-size: 0.9rem !important; /* Reduz o tamanho das letras */
        font-weight: normal !important;
    }
	
		#horas-anuncio {
				margin-right: 0px; /* Espaço entre horas e 'h' */
		}
		#minutos-anuncio {
				margin-left: 5px; /* Espaço entre 'h' e minutos */
				margin-right: 0px; /* Espaço entre minutos e 'm' */
		}
		#segundos-anuncio {
				margin-left: 5px; /* Espaço entre 'm' e segundos */
			  margin-right: 0px;
		}
}






/* ------------------------- */
/* DIA/MÊS (ALUGUEL) */


.hp-listing__footer .hp-listing__attributes.hp-listing__attributes--primary {
    display: flex;
    flex-direction: row-reverse; /* Inverte apenas a ordem de "dia" e "$400 /" */
    align-items: center; /* Garante alinhamento vertical */
}

.hp-listing__attribute--price-type,
.hp-listing__attribute--rent {
    margin: 0; /* Remove margens que possam causar quebras */
    white-space: nowrap; /* Impede quebra de linha entre os elementos */
}

.hp-listing__footer .hp-listing__attributes.hp-listing__attributes--primary {
    display: flex;
    align-items: center; /* Garante o alinhamento vertical */
    gap: 4px; /* Adiciona espaço entre "dia" e "$400 /" */
}


/* barra apenas para categoria "aluguel" */

.hp-listing__attribute--price-type::before {
  content: "/";
  margin-right: 2px; /* Espaçamento entre a barra e o valor */
}

.hp-listing__attribute--price-type {
  display: inline-block; /* Certifique-se de que o elemento esteja em linha */
}



/* -------------------------- */


/* FOOTER - Remove os marcadores ao lado das páginas */

.footer-widgets .widget_nav_menu .menu {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.footer-widgets .widget_nav_menu .menu li {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.footer-widgets .widget_nav_menu .menu li::before {
    content: none !important; /* Remove qualquer marcador adicionado com ::before */
}

.footer-widgets .widget_nav_menu .menu li a {
    text-decoration: none !important; /* Remove sublinhado nos links, se necessário */
}



/* ------------------------- */



/* FOOTER - Reduzir o tamanho dos títulos (h5) */
.footer-widgets .widget__title {
    font-size: 15px !important;
}

/* Reduzir o tamanho dos links de menu */
.footer-widgets .widget_nav_menu .menu li a {
    font-size: 14px !important;
}

 

/* ------------------------- */


/* FOOTER - Reduzir o tamanho dos títulos (h5) */
.footer-widgets .widget__title {
    font-size: 15px !important;
}

/* Reduzir o tamanho dos links de menu */
.footer-widgets .widget_nav_menu .menu li a {
    font-size: 14px !important;
}




/* ------------------------- */


/* FOOTER - Remove o traço acima dos títulos - Remover qualquer borda ou traço acima dos títulos */
.footer-widgets .widget__title {
    border-top: 0 !important;  /* Garante que a borda superior seja removida */
    padding-top: 0 !important;  /* Remove o espaçamento superior, se houver */
    margin-top: 0 !important;   /* Remove margens extras, se houver */
    text-decoration: none !important; /* Remove sublinhado ou outro estilo de decoração */
}

/* Remover qualquer linha de fundo que possa estar aplicada ao título */
.footer-widgets .widget__title:before {
    content: none !important; /* Remove qualquer pseudo-elemento com linha */
}




/* ------------------------- */



/* FOOTER - Diminuir os espaços entre os títulos e as páginas */

/* Diminuir o espaço abaixo dos títulos */
.footer-widgets .widget__title {
    margin-bottom: 04px !important; /* Ajuste o valor conforme necessário */
}

/* Diminuir o espaço acima dos itens de lista */
.footer-widgets .widget_nav_menu .menu li {
    margin-top: 0 !important; /* Ajuste o valor conforme necessário */
}





/* ------------------------- */



/* FOOTER - Estilizar o copyright*/

.footer-copyright {
    text-align: center;
    font-size: 14px; /* Ajuste o tamanho da fonte conforme desejado */
    color: #666; /* Ajuste a cor conforme desejado */
    margin-top: 0px; /* Adiciona um espaço acima do texto */
    padding-bottom: 0px; /* Adiciona um espaço inferior ao rodapé */
}





/* -------------------------- */




/* MOBILE */

/* tamanho setas e bolinhas dos banners */

/* Ajustes para telas menores (Mobile) */
@media screen and (max-width: 768px) {

  button.prev, button.next {
    width: 30px; /* Reduz tamanho das setas */
    height: 30px;
    padding: 5px; /* Ajusta o espaçamento interno */
  }

  .dot {
    width: 10px; /* Reduz tamanho das bolinhas */
    height: 10px;
    margin: 0 3px; /* Ajusta o espaçamento entre as bolinhas */
  }
}









/* -------------------------- */

/* 03 BANNERS PROMOÇÃO */



@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: 1fr; /* Para telas menores, exibe em uma coluna */
		gap: 0px; /* Espaçamento entre os itens */
		margin-top: 20px;
		margin-bottom: 20px;
		margin-right: -05px;
		margin-left: -10px;

  }

	
	.product-item {
  background-color: #fff;
  padding: 0px;
  border-radius: 0px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	height: 70px;
	margin-right: 05px;
	margin-left: 10px;
}
	
	.product-item h3 {
		text-align: center; /* Alinha o texto ao centro */
		margin: 0 auto; /* Remove margens desnecessárias */
		color: #fff;
		font-size: 06px; /* Ajusta o tamanho da fonte */
		margin-top: 0px;
		margin-left: -10px;
		margin-right: px;
	}

	.product-item p {
		text-align: center; /* Alinha o texto ao centro */
		margin-bottom: 100px; /* Define uma margem inferior adequada */
		color: #fff; /* Altere a cor do texto, se necessário */
		font-size: 06px !important; /* Ajusta o tamanho da fonte */
	}

	.product-item .btn {
		display: block; /* Permite centralizar o botão */
		padding: 03px 07px; /* Ajusta o padding */
		background-color: #007bff;
		color: #fff;
		text-decoration: none;
		border-radius: 50px;
		font-size: 06px; /* Ajusta o tamanho da fonte */
		transition: background-color 0.3s;
		margin: 0 auto; /* Centraliza o botão */
		margin-left: 10px;
		margin-top: 10px; /* Ajusta a margem superior */
		width: 47px;
		margin-right: 05px;
	}

}









/* --------------------------- */

/* CAMPO DE BUSCA */

@media (max-width: 768px) {
  .custom-form--listing-search {
    display: flex;
    flex-direction: column; /* Empilha os elementos no mobile */
    align-items: center;
		padding-bottom: 40px;
  }

  .custom-form__field--search input {
    width: 90%; /* Reduz a largura do campo de busca */
    max-width: 300px; /* Define uma largura máxima */
    margin: 0 auto 0px; /* Centraliza e adiciona espaçamento abaixo */
    padding: 10px; /* Ajusta o espaçamento interno */
    font-size: 14px; /* Reduz o tamanho da fonte */
  }

  .custom-search-button {
    width: 50px; /* Reduz o tamanho do botão */
    height: 40px; /* Faz o botão ser quadrado */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background-color: #ffc107; /* Ajusta a cor do botão */
    border-radius: 5px; /* Arredonda levemente as bordas */
		margin-right: 03px;
  }

  .custom-search-button svg {
    width: 20px; /* Reduz o tamanho do ícone */
    height: 20px;
  }
}












/* -------------------------- */
/* ALINHAR CAMPO DE BUSCA E BOTÃO PESQUISAR */
/* Estilização para mobile */
@media (max-width: 768px) {
    #searchform {
        display: flex;
        flex-direction: column; /* Alinha os elementos em coluna */
        width: 100%; /* Garante que o formulário ocupe toda a largura */
    }

    #searchform input[type="text"] {
        width: 100%; /* Largura do campo de busca ocupa 100% */
        margin-bottom: 10px; /* Espaçamento entre o campo de busca e o botão */
			margin-left: 10px;
    }

    #searchform .hp-form__button {
        width: 100%; /* Largura do botão ocupa 100% */

    }
}










/* --------------------- */

/* Eletrônicos */

/* Inserir produtos dinamicamente */

.category-section-cateletro {
    margin: 20px 0 50px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 0px
    background-color: #fff;
}

.category-header-cateletro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #2a9d8f; /* Linha azul */
    padding-bottom: 10px;
}

.category-header-cateletro .category-title-cateletro {
    font-size: 18px;
		font-family: Poppins;
    color: inherit;
}

.category-header-cateletro .view-all-cateletro {
    font-size: 14px;
    color: inherit;
    text-decoration: none;
}

.product-grid-cateletro {
    display: grid; /* Alterar para grid */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Define quantos cartões por linha */
    gap: 20px; /* Espaçamento entre os cartões */
}

.product-cateletro {
    width: 100%; /* Garantir que cada cartão ocupe corretamente o espaço */
    border: 0px solid #ddd;
    padding: 0px;
    text-align: center;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); /* Leve sombra */
    border-radius: 5px;
}

.product-cateletro img {
    max-width: 100%;
    height: 150px;
    margin: 0 auto;
    display: block;
	  object-fit: cover;
}

.hp-price {
    font-size: 16px;
    font-weight: bold;
    color: #333;
	  margin-bottom: 10px;
}

.category-section-cateletro .product-cateletro h3 {
    font-size: 16px; /* Ajuste o tamanho conforme necessário */
    line-height: 1.4; /* Ajusta o espaçamento entre linhas */
    height: 48px; /* Define uma altura fixa para garantir alinhamento */
    overflow: hidden; /* Oculta o excesso de texto */
    text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
    white-space: normal; /* Permite quebra de linha */
    margin-bottom: 10px; /* Espaçamento consistente abaixo do título */
		margin-left: 05px;
		margin-right: 05px;
}


/*------------------------- */

 /* ------ mobile ----------- */
/* Mídia query para telas menores, exibe 2 colunas */
@media (max-width: 768px) {
    .product-grid-cateletro {
        grid-template-columns: repeat(2, 1fr); /* Exibe 2 colunas */
    }
	
	.product-cateletro img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
	  object-fit: cover;
		}
	
	.category-section-cateletro 		.product-cateletro h3 {
    font-size: 12px; /* Ajuste o tamanho conforme necessário */
    line-height: 1.4; /* Ajusta o espaçamento entre linhas */
    height: 48px; /* Define uma altura fixa para garantir alinhamento */
    overflow: hidden; /* Oculta o excesso de texto */
    text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
    white-space: normal; /* Permite quebra de linha */
    margin-bottom: 10px; /* Espaçamento consistente abaixo do título */
		margin-left: 05px;
		margin-right: 05px;
		}
	
	.product-cateletro img {
    width: 100%; /* Faz a imagem ocupar toda a largura do contêiner */
    height: auto; /* Define a altura fixa */
    object-fit: cover; /* Garante que a proporção da imagem seja mantida */
    display: block; /* Remove qualquer espaço extra ao redor da imagem */
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
		border-radius: 03px;
}
	
}

/* força os grids mostrar os anúncios e limita em 06 anúncios por grid no mobile */

@media (max-width: 768px) {
    .product-grid-cateletro {
        display: grid !important; /* Força exibição como grid */
        grid-template-columns: repeat(2, 1fr); /* Exibe 2 colunas */
    }

    .product-grid-cateletro .product-cateletro {
        display: block !important; /* Garante que cada produto seja exibido */
    }

    .product-grid-cateletro .product-cateletro:nth-child(n+7) {
        display: none !important; /* Oculta os anúncios além do 6º */
    }
}

/* ------------------------ */

/* Novidades */

.category-title {
    font-size: 18px; /* Ajuste o tamanho */
		font-family: Poppins;
    color: inherit;
    margin-bottom: 10px;
    border-bottom: 2px solid #2a9d8f; /* Linha inferior */
    padding-bottom: 10px; /* Espaço abaixo do texto */
}









/* -------------------------- */


/* AJUSTAR MENU */
/* limitado apenas ao modo desktop */

@media (min-width: 768px) {
    .header-navbar {
        display: flex;
        justify-content: center; /* Centraliza o conteúdo */
        align-items: center;
        padding-top: 25px;
        width: 100%; /* Ajuste a largura da barra para 100% */
        margin: 0 auto; /* Centraliza horizontalmente a barra */
        box-sizing: border-box;
        padding-right: 150px;
				
    }

		.header-navbar__start,
		.header-navbar__end {
				margin-left: 40px; 
				margin-right: -40px;
		}

		.header-navbar__menu {
				flex-grow: 1; /* Ocupa todo o espaço disponível */
				display: flex;
				justify-content: center;
				flex-wrap: nowrap; /* Garante que não quebre para segunda linha */
		}

    .header-navbar__actions {
        flex: 0 1 auto;
        display: flex;
        align-items: center;
    }
	
			.header-navbar__menu a {
				max-width: 150px; /* Ajuste conforme necessário */
				white-space: nowrap; /* Garante que o texto fique sempre em uma linha */
		}
}






/* ----------------------- */

/* ocultar categorias subcategorias */

.hp-field.hp-field--radio > ul > li:first-child > label {
    display: none;
}

.hp-field.hp-field--radio > ul > li:first-child > ul > li:first-child > label {
    display: none;
}

.hp-field.hp-field--radio ul ul {
    margin-left: 0;
    padding-left: 0;
}















/* -------------------------- */

/* PROMOÇÕES DO DIA */

.promocoes-do-dia {
    border-radius: 0; /* Remove o arredondamento da borda */
    border: 1px solid #ccc; /* Borda sólida */
    padding: 10px !important; /* Espaçamento interno */
    margin: 10px 0; /* Espaçamento externo */
}

.promocoes-do-dia .countdown-display {
    margin-left: 0; /* Remove qualquer margem à esquerda */
    margin-right: 650px; /* Ajusta o espaçamento entre o cronômetro e o próximo elemento */
    margin-top: 0px !important; /* Ajusta o espaçamento superior */
    font-size: 18px;
    font-family: Poppins, monospace; /* Monospace ajuda na largura uniforme dos caracteres */
    color: #2a9d8f !important; /* Cor específica */
    min-width: 160px; /* Largura fixa suficiente para o texto completo */
    text-align: left; /* Garante o alinhamento do texto */
    display: inline-block; /* Garante que o cronômetro seja tratado como um bloco em linha */
    white-space: nowrap; /* Impede a quebra de linha no texto */
}

.promocoes-do-dia .category-header-cateletro {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ------------------------ */
/* modo mobile */


/* Ajuste para mobile */
@media (max-width: 768px) {
    .promocoes-do-dia .category-header-cateletro {
        display: flex; /* Garante que os itens fiquem na mesma linha */
        justify-content: space-between; /* Distribui os itens com espaço entre eles */
        align-items: center; /* Alinha verticalmente no centro */
        width: 100%; /* Garantir que o contêiner tenha largura total */
        white-space: nowrap; /* Impede quebras de linha */
    }

    .promocoes-do-dia .category-title-cateletro {
        font-size: 16px !important; /* Ajusta o tamanho da fonte */
        margin-right: 10px; /* Espaço entre o título e o cronômetro */
    }

    .promocoes-do-dia .countdown-display {
        font-size: 12px !important; /* Ajusta o tamanho da fonte */
        text-align: left; /* Alinha o cronômetro à esquerda */
        margin-left: auto; /* Move o cronômetro para a direita */
				margin-right: -50px;
        white-space: nowrap; /* Impede quebra de linha */
				margin-top: 02px !important;
    }
}

/* Ajuste para telas menores, como smartphones */
@media (max-width: 480px) {
    .promocoes-do-dia .category-title-cateletro {
        font-size: 14px; /* Ajusta ainda mais o tamanho para telas muito pequenas */
    }

    .promocoes-do-dia .countdown-display {
        font-size: 14px; /* Ajusta ainda mais o tamanho para telas muito pequenas */
    }
}







/* ---------------------- */

a[href="https://okplace.com.br/listing-category/novidades/"] {
    display: none !important;
}


a[href="https://okplace.com.br/listing-category/recem-chegados/"] {
    display: none !important;
}


a[href="https://okplace.com.br/listing-category/esteira02off/"] {
    display: none !important;
}


a[href="https://okplace.com.br/listing-category/esteira04off/"] {
    display: none !important;
}


a[href="https://okplace.com.br/listing-category/esteira06off/"] {
    display: none !important;
}


a[href="https://okplace.com.br/listing-category/esteira08off/"] {
    display: none !important;
}







/* Remove o destaque ao tocar no link da logo */
.header-logo .custom-logo-link {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    padding: 0; /* Remove padding extra */
    display: inline-block; /* Controle melhor do espaço */
}

/* Remove espaçamento padrão da imagem */
.header-logo .custom-logo {
    display: block; /* Remove espaço abaixo da imagem */
}

/* Opcional: Remove efeitos de foco/ativo se necessário */
.header-logo .custom-logo-link:active,
.header-logo .custom-logo-link:focus {
    background-color: transparent;
    outline: none;
}








/* compras coletivas */

/* Estilo para os campos de "Compras Coletivas" */
.compra-coletiva-info {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}

.compra-coletiva-info p {
    margin: 10px 0;
    font-size: 16px;
}






/* comprar por participar */

@media (max-width: 480px) {
    .modal-conteudo h3 {
        font-size: 16px; /* Reduzindo o tamanho da fonte */
        white-space: nowrap; /* Evita quebra de linha */
        overflow: hidden; /* Garante que não transborde */
        text-overflow: ellipsis; /* Adiciona "..." se necessário */
    }
}







/* Esconde controles mobile em desktop */
@media (min-width: 768px) {
    .quantidade-mobile {
        display: none !important;
    }
    .quantidade-desktop {
        display: block !important;
    }
}

/* Mostra controles mobile apenas em telas pequenas */
@media (max-width: 767px) {
    .quantidade-mobile {
        display: flex !important;
    }
    .quantidade-desktop {
        display: none !important;
    }
}

/* Estilização dos botões mobile */
.qty-minus, 
.qty-plus {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2a9d8f;
    color: white;
    border: none;
    cursor: pointer;
}

.qty-input {
    flex: 1;
    max-width: 100px;
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
}







#tempo {
    display: none; /* Oculta inicialmente (se necessário) */
    font-size: 0.9rem; 
    margin-top: 5px;
    color: #f8f8f8;
}



/* oculta "quantidade" na categoria Leilão */



body[data-category="leilao"] .hp-form__field--number,
body[data-category="compras-coletivas"] .hp-form__field--number {
  display: none; /* Oculta apenas nas categorias específicas */
}



/* alterar cor do "Enviar" do formulário de contato */

#wpforms-submit-4315 {
    background-color: #2a9d8f;
    color: #ffffff; /* Mantém o texto legível */
    border: none; /* Remove borda indesejada */
    padding: 10px 20px;
    cursor: pointer;
}


/* alterar cor dos campos do formulário de contato, ao clicar */

input[type="text"]:focus, 
input[type="email"]:focus, 
textarea:focus {
    border: 1px solid #2a9d8f !important; /* Define a borda na cor desejada */
    outline: none !important; /* Remove o contorno padrão azul */
    box-shadow: 0 0 0px #2a9d8f !important; /* Adiciona um efeito ao redor */
}





/* modificar cor selo verificado */
.hp-listing__verified-badge {
  color: #2a9d8f;
}




/* transformar subcategorias em dropdown */
#subcategorias {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}


/* Oculta o container dos radio buttons para evitar o "salto" na página */
ul:has(input[name='_category']) {
    display: none !important;
}