/**
 * Estilização responsiva para o Formulário de Busca e Filtros.
 * Integrado ao Design System e Blocos Nativos do Theme.json (WordPress 7.4)
 *
 * @package    CCC_Plugin
 * @subpackage Assets/css
 * @author     Equipe WSS
 * @version    1.0.0
 */

/* ==========================================================================
   ESTILOS BASE DO FORMULÁRIO E CONTAINER
   ========================================================================== */
.ccc-search-filter-form {
	background-color: var(--wp--preset--color--branco-claro, #FFF9EF);
	border: none;
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40, 30px);
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 30px);
}

.ccc-filter-fields-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 30px);
	width: 100%;
}

/* Estilização individual dos Campos */
.ccc-filter-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 10px);
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.ccc-filter-label {
	color: var(--wp--preset--color--marrom-escuro, #4E3B29);
	font-family: var(--wp--preset--font-family--manrope), sans-serif;
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Inputs e Selects Nativos alinhados ao Tema */
.ccc-input {
	width: 100%;
	height: 48px;
	padding: 0 var(--wp--preset--spacing--30, 20px);
	background-color: var(--wp--preset--color--base, #FFFFFF);
	border: 1px solid var(--wp--preset--color--marrom-escuro, #4E3B29);
	border-radius: 10px;
	color: var(--wp--preset--color--marrom-escuro, #4E3B29);
	font-family: var(--wp--preset--font-family--manrope), sans-serif;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	box-sizing: border-box;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select.ccc-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234E3B29' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
	background-position: right 1rem center;
	background-repeat: no-repeat;
	background-size: 1rem;
	padding-right: 2.75rem;
	cursor: pointer;
}

.ccc-input:hover {
	border-color: var(--wp--preset--color--terracota, #B86F43);
}

.ccc-input:focus {
	border-color: var(--wp--preset--color--verde-folha, #707B54);
	box-shadow: 0 0 0 3px rgba(112, 123, 84, 0.15);
	outline: none;
}

/* ==========================================================================
   ESTILOS DE DESTAQUE PARA CAMPOS ATIVOS / SELECIONADOS
   ========================================================================== */

/* 1. Destaque Especial com Fundo Pintado (Exclusivo para o Tipo de Conteúdo) */
.ccc-filter-field.ccc-field-cpt-highlight .ccc-filter-label {
	color: var(--wp--preset--color--vermelho, #AD3F1F);
	font-weight: 800;
}

.ccc-filter-field.ccc-field-cpt-highlight select.ccc-input {
	border: 2px solid var(--wp--preset--color--terracota, #B86F43);
	background-color: rgba(184, 111, 67, 0.08);
	/* Fundo pintado sutil */
	color: var(--wp--preset--color--marrom-escuro, #4E3B29);
	font-weight: 700;
}

/* 2. Destaque Padrão com Fundo Branco (Para Busca e Demais Taxonomias Selecionadas) */
.ccc-filter-field.ccc-field-active:not(.ccc-field-cpt-highlight) .ccc-filter-label {
	color: var(--wp--preset--color--terracota, #B86F43);
	font-weight: 800;
}

.ccc-filter-field.ccc-field-active:not(.ccc-field-cpt-highlight) .ccc-input {
	border: 2px solid var(--wp--preset--color--terracota, #B86F43);
	background-color: var(--wp--preset--color--base, #FFFFFF);
	/* Mantém fundo branco */
	color: var(--wp--preset--color--marrom-escuro, #4E3B29);
	font-weight: 600;
}

/* ==========================================================================
   BOTÕES DE AÇÃO BASE
   ========================================================================== */
.ccc-filter-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20, 20px);
	padding-top: var(--wp--preset--spacing--30, 30px);
	border-top: 1px solid var(--wp--preset--color--areia, #F5EBE1);
	flex-wrap: wrap;
	width: 100%;
}

.ccc-filter-actions .wp-block-button {
	margin-bottom: 0;
}

.ccc-filter-actions .wp-block-button__link {
	box-sizing: border-box;
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--manrope), sans-serif;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	font-weight: 700;
	transition: all 0.2s ease;
}

.ccc-filter-actions .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--verde-folha, #707B54);
	color: var(--wp--preset--color--base, #FFFFFF);
	border: none;
}

.ccc-filter-actions .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--vermelho, #AD3F1F);
}

.ccc-filter-actions .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--verde-folha, #707B54);
	border: 2px solid var(--wp--preset--color--verde-folha, #707B54);
}

.ccc-filter-actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--vermelho, #AD3F1F);
	border-color: var(--wp--preset--color--vermelho, #AD3F1F);
}

/* ==========================================================================
   1. LAYOUT HORIZONTAL TRADICIONAL (GRID UNIFICADA LADO A LADO)
   ========================================================================== */
.ccc-layout-horizontal {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ccc-layout-horizontal .ccc-filter-fields-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--30, 30px);
	width: 100%;
}

.ccc-layout-horizontal .ccc-row-main,
.ccc-layout-horizontal .ccc-row-grid {
	display: contents;
}

.ccc-layout-horizontal .ccc-filter-field {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

.ccc-layout-horizontal .ccc-filter-actions {
	justify-content: center;
	border-top: 1px solid var(--wp--preset--color--areia, #F5EBE1);
}

.ccc-layout-horizontal .ccc-filter-actions .wp-block-button {
	width: auto;
}

/* ==========================================================================
   2. LAYOUT HORIZONTAL-INLINE (LINHA ÚNICA, FLUIDA E ALINHADA AO GUTENBERG)
   ========================================================================== */
.ccc-search-filter-form.ccc-layout-horizontal-inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: inherit;
	gap: var(--wp--preset--spacing--20, 15px);
	width: 100%;
	box-sizing: border-box;
}

.ccc-layout-horizontal-inline .ccc-filter-fields-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--20, 15px);
	flex: 1 1 auto;
	width: auto;
}

.ccc-layout-horizontal-inline .ccc-row-main,
.ccc-layout-horizontal-inline .ccc-row-grid {
	display: contents;
}

.ccc-layout-horizontal-inline .ccc-filter-field {
	flex: 1 1 180px;
	min-width: 160px;
	max-width: 100%;
	box-sizing: border-box;
}

.ccc-layout-horizontal-inline .ccc-filter-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	border-top: none;
	padding-top: 0;
	margin-top: 0;
	flex: 0 0 auto;
	width: auto;
	gap: 12px;
}

.ccc-layout-horizontal-inline .ccc-filter-actions .wp-block-button,
.ccc-layout-horizontal-inline .ccc-btn-submit,
.ccc-layout-horizontal-inline .ccc-btn-reset {
	width: auto;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ==========================================================================
   3. LAYOUT VERTICAL (EMPILHADO 100% LARGURA)
   ========================================================================== */
.ccc-layout-vertical .ccc-filter-fields-wrapper,
.ccc-layout-vertical .ccc-row-main,
.ccc-layout-vertical .ccc-row-grid {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 30px);
	width: 100%;
}

.ccc-layout-vertical .ccc-filter-actions {
	flex-direction: column;
	width: 100%;
}

.ccc-layout-vertical .ccc-filter-actions .wp-block-button,
.ccc-layout-vertical .ccc-filter-actions .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* ==========================================================================
   RESPONSIVIDADE (MOBILE)
   ========================================================================== */
@media (max-width: 45rem) {
	.ccc-search-filter-form {
		padding: var(--wp--preset--spacing--30, 20px);
	}

	.ccc-layout-horizontal .ccc-filter-fields-wrapper {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--20, 15px);
	}

	.ccc-search-filter-form.ccc-layout-horizontal-inline {
		flex-direction: column;
		align-items: stretch;
	}

	.ccc-layout-horizontal-inline .ccc-filter-fields-wrapper {
		flex-direction: column;
		width: 100%;
	}

	.ccc-layout-horizontal-inline .ccc-filter-field,
	.ccc-layout-horizontal-inline .ccc-filter-actions,
	.ccc-layout-horizontal-inline .ccc-filter-actions .wp-block-button,
	.ccc-layout-horizontal-inline .ccc-filter-actions .wp-block-button__link {
		width: 100%;
		flex: 1 1 100%;
	}

	.ccc-filter-actions {
		flex-direction: column;
		width: 100%;
		gap: 12px;
	}
}