/*
 Theme Name:   Boxcar Child
 Theme URI:    https://themeforest.net/item/boxcar-automotive-car-dealer-wordpress-theme/49741717
 Description:  Boxcar Child Theme
 Author:       ApusTheme
 Author URI:   http://apusthemes.com
 Template:     boxcar
 Version:      1.0.0
 Text Domain:  boxcar-child
*/

/* ==========================================================================
   Opcionais do formulário de anúncio — categorias empilhadas
   ==========================================================================

   Problema no tema pai (boxcar/css/template.css):

       div.cmb2-wrap .term-parent-wrapper { float:left; width:100% }
       @media (min-width:768px)  { ... width:50% }
       @media (min-width:1200px) { ... width:25% }   <- causa

   Cada .term-parent-wrapper e UMA CATEGORIA de opcionais, entao a regra punha
   Seguranca | Conforto | Tecnologia | Audio lado a lado, e os itens de cada uma
   empilhados dentro da sua coluna. A largura e fixa: nao vem de configuracao
   nenhuma (a secao Opcionais renderiza com columns-1 e o efeito acontece igual).

   Aqui a responsabilidade se inverte, sem tocar no HTML do plugin:

       .term-parent-wrapper  -> 100%, uma categoria abaixo da outra
       .term-parent-inner    -> recebe as colunas dos ITENS

   O numero de colunas vem do "Colunas internas" da secao (Gerenciador de Campos
   > cabecalho Opcionais), que class-abstract-form.php ja publica como
   class="before-group-row ... columns-N" no wrapper da secao. Nenhum PHP novo.

   Fluxo em coluna (column-count, nao grid): com a lista em ordem alfabetica, ler
   de cima para baixo em cada coluna e o que faz sentido — ABS, Airbag, Alarme na
   primeira; Controle..., Sensor... na segunda.
   ========================================================================== */

/* 1. Cada categoria ocupa a linha inteira.
      Especificidade (0,3,1) para vencer o (0,2,1) do tema em todos os
      breakpoints sem precisar repetir as media queries dele. */
div.cmb2-wrap .cmb-td > .term-parent-wrapper {
	float: none;
	width: 100%;
	padding-right: 0;
	margin: 0 0 26px;
}

div.cmb2-wrap .cmb-td > .term-parent-wrapper:last-child {
	margin-bottom: 0;
}

/* 2. Titulo da categoria com uma linha de apoio, para a secao ficar legivel
      agora que as categorias sao empilhadas. */
div.cmb2-wrap .cmb-td > .term-parent-wrapper > h3 {
	padding-bottom: 8px;
	margin-bottom: 14px;
	border-bottom: 1px solid rgba(127, 127, 127, .22);
}

/* 3. A linha do campo de opcionais nunca e espremida pelo columns-N da secao.
      Sem isto, "Colunas internas = 2" daria 50% de largura a lista inteira.
      Alvo pelo TIPO do campo (nao pelo id) para valer em qualquer formulario
      que use a checklist agrupada. As variantes com .columns-N existem para
      superar a especificidade das regras do tema. */
div.cmb2-wrap .before-group-row-inner > .cmb-row.cmb-type-pw-taxonomy-checkbox-parent,
div.cmb2-wrap .columns-2 .before-group-row-inner > .cmb-row.cmb-type-pw-taxonomy-checkbox-parent,
div.cmb2-wrap .columns-3 .before-group-row-inner > .cmb-row.cmb-type-pw-taxonomy-checkbox-parent,
div.cmb2-wrap .columns-4 .before-group-row-inner > .cmb-row.cmb-type-pw-taxonomy-checkbox-parent {
	width: 100%;
	float: none;
	/* O cabecalho da secao continua sendo um float:left de 100%; sem o clear, a
	   caixa da checklist comeca no mesmo topo dele e so as linhas de texto
	   descem. Com clear ela sempre inicia abaixo. */
	clear: both;
}

/* 4. Os ITENS em colunas. Celular sempre 1 — checkbox espremido nao e opcao. */
div.cmb2-wrap .term-parent-inner {
	column-count: 1;
	column-gap: 30px;
}

div.cmb2-wrap .term-parent-inner > li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

/* Tablet: no maximo 2, mesmo que o admin peca 3 ou 4. */
@media (min-width: 768px) {
	div.cmb2-wrap .columns-2 .term-parent-inner,
	div.cmb2-wrap .columns-3 .term-parent-inner,
	div.cmb2-wrap .columns-4 .term-parent-inner {
		column-count: 2;
	}
}

/* Desktop: o valor configurado. */
@media (min-width: 1200px) {
	div.cmb2-wrap .columns-3 .term-parent-inner { column-count: 3; }
	div.cmb2-wrap .columns-4 .term-parent-inner { column-count: 4; }
}

/* ==========================================================================
   "4 Column" no Gerenciador de Campos nao fazia nada
   ==========================================================================
   O tema so define .columns-2 e .columns-3 para os campos da secao — nao ha
   .columns-4 em lugar nenhum, entao escolher "4 Column" caia no padrao de 1
   campo por linha. Regra abaixo no mesmo molde das outras duas.

   Hoje nenhuma secao usa 4, entao isto nao muda nada do que ja esta na tela:
   passa a valer so quando alguem escolher essa opcao. A checklist de opcionais
   fica de fora pela regra 3 acima.
   ========================================================================== */
div.cmb2-wrap .columns-4 .before-group-row-inner {
	margin-left: -0.9375rem;
	margin-right: -0.9375rem;
}

div.cmb2-wrap .columns-4 .before-group-row-inner > div {
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
	width: 25%;
	float: left;
}

div.cmb2-wrap .columns-4 .before-group-row-inner > [data-fieldtype="title"],
div.cmb2-wrap .columns-4 .before-group-row-inner > .submit-button-wrapper {
	width: 100%;
}

/*
 * Atalho de limpeza da busca de anuncios.
 *
 * Fica fora da pilula do formulario de proposito: o bloco de botoes tem 4
 * colunas e ja carrega "Mais filtros" e "Buscar veiculos" — um terceiro item
 * monta em cima do campo de preco.
 *
 * @see boxcar-child/inc/busca-anuncios.php
 */
.busca-filtros-ativos {
	margin: 12px 0 0;
	text-align: right;
}

.busca-limpar-filtros {
	display: inline-flex;
	align-items: center;
	/* 44px de alvo de toque (WCAG 2.5.5). */
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.busca-limpar-filtros::before {
	content: "\00d7";
	margin-right: .5em;
	font-size: 1.15em;
	line-height: 1;
}

/*
 * A barra de busca mora sobre a faixa escura do topo, e o link herdaria a cor
 * de texto do tema (#050B20) — invisivel ali. Branco da 15:1 sobre a faixa.
 */
.busca-filtros-ativos .busca-limpar-filtros {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
}

.busca-filtros-ativos .busca-limpar-filtros:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* Dentro do "nenhum anuncio encontrado" o atalho e a acao principal da tela. */
.not-found .busca-limpar-filtros {
	margin-top: 14px;
	border: 1px solid var(--boxcar-theme-color, #405FF2);
	color: var(--boxcar-theme-color, #405FF2);
	background: #fff;
}

.not-found .busca-limpar-filtros:hover {
	background: var(--boxcar-theme-color, #405FF2);
	color: #fff;
}

/* O bloco vazio empilha mensagem e acao. */
.not-found { display: flex; flex-direction: column; align-items: center; }

@media (max-width: 767px) {
	.busca-filtros-ativos { text-align: center; }
}