/* RESPONSIVE FILTER */


@media (max-width: 768px) 
{
	.grid-container.search-container {
		display: grid;
		
		grid-template-columns: repeat(6, 1fr);
		grid-template-areas:
			'search_title search_title search_title search_title search_title search_title'
			'search_location search_location search_location search_location search_location search_location'
			
			'search_burger search_burger search_filter search_filter search_tacos search_tacos'
			'search_services search_services search_services search_specialties search_specialties search_specialties' 
			'search_days search_days search_days search_customcheckbox search_customcheckbox search_customcheckbox'
			'search_openinghours search_openinghours search_openinghours . . .'
			'search_dualrange search_dualrange search_dualrange search_dualrange search_dualrange search_dualrange';
			
			
		gap: 15px 15px;
		/*background-color: #2196F3;*/
		
		padding: 20px 20px 0px 20px;
		
		/*
		   Nous permet de tricher et supprimer le "gap" des elements cachés (en bas) de .grid-container.search-container
		   avec dans index.php (plus tard ...lib/filter/main.js) : 
			var searchContainer = document.querySelector('.grid-container.search-container');					
			if (switchFilter.checked) {
				searchContainer.style.maxHeight = '1000px';
			} else {
				searchContainer.style.maxHeight = ''; // remet la valeur CSS par défaut
			}
		*/
		max-height: 385px;
	}
	/*
	.item-search_tacos,
	.item-search_burger {
	      display: none;
	}
	*/
	
	.item-search_filter {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.item-search_tacos img,
	.item-search_burger img {
	      width: 160px;
	}
}
@media (max-width: 576px) {
	/* Styles pour mobiles */
	/* cette configuration utilise 576px pour inclure les grands smartphones. */
	
	.grid-container.search-container {
		display: grid;
		
		grid-template-columns: repeat(6, 1fr);
		grid-template-areas:
			'search_title search_title search_title search_title search_title search_title'
			'search_location search_location search_location search_location search_location search_location'
			'search_burger search_burger search_filter search_filter search_tacos search_tacos'
			'search_services search_services search_services search_services search_services search_services' 
			'search_specialties search_specialties search_specialties search_specialties search_specialties search_specialties' 
			'search_days search_days search_days search_days search_days search_days'
			'search_customcheckbox search_customcheckbox search_customcheckbox search_customcheckbox search_customcheckbox search_customcheckbox'
			'search_openinghours search_openinghours search_openinghours . . .'
			'search_dualrange search_dualrange search_dualrange search_dualrange search_dualrange search_dualrange';
			
			
		gap: 15px 15px;
		/*background-color: #2196F3;*/
		
		padding: 20px 20px 0px 20px;
	}
	
	.item-search_tacos img,
	.item-search_burger img {
	      width: 130px;
	}
}