/* xl - DESKTOP STYLES */ 
@media (min-width: 1120px) {
  /*================ FILTROS ================*/
  .filtro-mapa, 
  .filtro-calendario-mapa .date-picker-container {
  	width: 200px;
  }
}

/* lg - TABLET LANDSCAPE STYLES */ 
@media (min-width: 1024px) and (max-width: 1119px) {
  /*================ FILTROS ================*/
  .filtro-mapa, 
  .filtro-calendario-mapa .date-picker-container {
  	width: 200px;
  }
}

/* md - TABLET PORTRAIT STYLES */ 
@media (min-width: 768px) and (max-width: 1023px) {
  /*================ FILTROS ================*/
  .filtro-mapa, 
  .filtro-calendario-mapa .date-picker-container {
  	width: 200px;
  }
}

/* sm - SMARTPHONE LANDSCAPE STYLES */ 
@media (min-width: 480px) and (max-width: 767px) {
  /*================ FILTROS ================*/
  .filtro-mapa, 
  .filtro-calendario-mapa .date-picker-container {
  	width: 56px;
  }
  
  .filtro-calendario-mapa input.form-control.input {
  	width: 44px !important;
      padding-left: 44px !important;
      z-index: 1;
  }
  .filtro-calendario-mapa .calendar-icon {
  	position: absolute;
      padding-left: 8px;
  }
  .filtro-mapa-icon {
  	padding-left: 24px !important;
  	padding-bottom: 8px;
  	background-color: var(--background-neutral-primary);
  	z-index: 2;
  	pointer-events: none;
  	border-left: 1px solid var(--line-default);
  }
}

/* xs - SMARTPHONE PORTRAIT STYLES */ 
@media (max-width: 479px) {
  /*================ FILTROS ================*/
  .filtro-mapa, 
  .filtro-calendario-mapa .date-picker-container {
  	width: 56px;
  }
  
  .filtro-calendario-mapa input.form-control.input {
  	width: 44px !important;
      padding-left: 44px !important;
      z-index: 1;
  }
  .filtro-calendario-mapa .calendar-icon {
  	position: absolute;
      padding-left: 8px;
  }
  .filtro-mapa-icon {
  	padding-left: 24px !important;
  	padding-bottom: 8px;
  	background-color: var(--background-neutral-primary);
  	z-index: 2;
  	pointer-events: none;
  	border-left: 1px solid var(--line-default);
  }
}

/* RETINA DISPLAY STYLES */ 
/* INDICE ------------------------------------- 
---------------------------------------------------------------------------------------------------------------
01.    Geral
---------------------------------------------------------------------------------------------------------------
02.    Pesquisa
02.1   Focus e hover
---------------------------------------------------------------------------------------------------------------
03.    Filtro de categoria
03.1   Focus e hover
---------------------------------------------------------------------------------------------------------------
04.    Filtro de datas
04.1   Focus e hover
04.2   Centrar o icon
04.3   Icon x
---------------------------------------------------------------------------------------------------------------
05.    Limpar filtros
---------------------------------------------------------------------------------------------------------------
06.    Sorting
------------------------------------------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------- 01. Geral ------------------------------------------------- */
.map-pesquisa {
	border: none;
	width: 100%;
	height: 44px;
	background-color: transparent;
}

.filtro-mapa, 
.filtro-calendario-mapa .date-picker-container {
	color: var(--text-primary);
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: 1px solid var(--line-default);
	height: 44px;
	border-radius: 0;
}

/* --------------------------------------------- 02. Pesquisa ---------------------------------------------- */
/* -------------------- 02.1 Focus e hover -------------------- */
.map-pesquisa:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.cont-pesquisa:has(.map-pesquisa:focus) .bde-icon-513-142 svg path,
.cont-pesquisa:has(.map-pesquisa:hover) .bde-icon-513-142 svg path {
  fill: var(--status-hover);
}
.cont-pesquisa:has(.map-pesquisa:focus),
.cont-pesquisa:has(.map-pesquisa:hover) {
  border-color: var(--status-hover);
}

/* -------------------- 02.2 Botão x -------------------- */
.map-pesquisa::-webkit-search-cancel-button {
  opacity: 0.6;
  filter: brightness(0) contrast(1);
  cursor: pointer;
}

/* --------------------------------------------------------------------------------------------------------- */
/* --------------------------------------- 03. Filtro de categoria ----------------------------------------- */
.filtro-mapa-icon svg {
	opacity: 0.7;
}

/* Cor do Placeholder */
.filtro-mapa:has(option:checked[value=""]) {
  opacity: 0.6;
}

.filtro-mapa:has(option:checked:not([value=""])) {
  opacity: 1;
} 

/* -------------------- 03.1 Focus e hover -------------------- */
.filtro-mapa:focus,
.filtro-mapa:hover {
  outline: none;
  box-shadow: none;
  color: var(--status-hover);
  opacity: 1 !important;
}

.cont-pesquisa:has(.filtro-mapa:focus) .bde-icon-513-174 svg path,
.cont-pesquisa:has(.filtro-mapa:hover) .bde-icon-513-174 svg path {
  fill: var(--status-hover);
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------- 04. Filtro de datas ------------------------------------------- */

.filtro-calendario-mapa #event-date-picker, 
.filtro-calendario-mapa input.form-control.input,
.filtro-calendario-mapa .flatpickr-input { 
	border: none !important; 
	outline: none !important; 
	box-shadow: none !important;
	padding: 0 0 0 12px !important; 
	width: 100% !important; 
	height: 100% !important;
	background: transparent !important; 
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}
.filtro-calendario-mapa .date-picker-container {
	padding-left: 12px;
}

.filtro-calendario-mapa #data-pub-chevron {
	display: none;
}
		

/* Cor do Placeholder */
.filtro-calendario-mapa .date-picker-container:has(#reset-date-filter.is-hidden) input::placeholder {
  opacity: 0.6;
  color: var(--text-primary);
}

.filtro-calendario-mapa .date-picker-container:has(#reset-date-filter.is-hidden) .calendar-icon {
  opacity: 0.6;
}

.date-picker-container:has(#reset-date-filter:not(.is-hidden)) input,
.date-picker-container:has(#reset-date-filter:not(.is-hidden)) .calendar-icon {
  opacity: 1 !important;
}

/* -------------------- 04.1 Focus e hover -------------------- */
.date-picker-container:hover .calendar-icon,
.date-picker-container:focus-within .calendar-icon {
  color: var(--status-hover) !important;
  opacity: 1 !important;
}
.date-picker-container:hover input::placeholder,
.date-picker-container:focus-within input::placeholder {
  color: var(--status-hover) !important;
  opacity: 1 !important;
}

/* -------------------- 04.3 Icon x -------------------- */
.filtro-calendario-mapa #reset-date-filter { 
	background: none; 
	border: none; 
	font-size: 26px; 
	cursor: pointer; 
	padding: 0; 
	line-height: 1; 
	position: relative; 
	z-index: 10;
	transition: all 0.2s;
	opacity: 0.6;
}
.filtro-calendario #reset-date-filter:hover,
.filtro-calendario-mapa #reset-date-filter:hover { 
	color: var(--status-error); /* Mantido vermelho para erro/limpar */
} 

.filtro-calendario #reset-date-filter.is-hidden,
.filtro-calendario-mapa #reset-date-filter.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* --------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------- 05. Limpar filtros -------------------------------------------- */
#reset-all-filters {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-primary);
	padding: 0;
}
#reset-all-filters::before {
	content: "×";
	position: absolute;
	margin-left: -14px;
	color: var(--text-primary);
}
#reset-all-filters:hover, #reset-all-filters:hover::before {
	color: var(--status-hover);
}

/* --------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------- 06. Sorting ----------------------------------------------- */
.map-sorting {
	border: none;
	min-height: 32px;
	width: 90px;
}