#filters-modal {}
@media (min-width: 640px) { #filters-modal { display: contents; } }
@media (max-width: 639.99px) {
	#filters-modal {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 50px;
		
		background-image: linear-gradient(to bottom, rgba(0,0,0,.3) calc(100% - 30px), transparent);
	}
	.filters-modal-open #filters-modal {
		transform: translateY(0px);
		opacity: 1;
		pointer-events: auto;
	}
}

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

#filters-modal > .outer-wrapper {
	position: relative;
	padding: 20px;
	
	background-image: linear-gradient(to right, #BCD5E4 9.77%, #647B92 62.91%, #364A67 116.06%);
	border-radius: 30px;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
}
@media (min-width: 900px) { #filters-modal > .outer-wrapper {} }
@media (max-width: 899.99px) { #filters-modal > .outer-wrapper {} }

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

#filters-modal > .outer-wrapper > .close-btn {}
@media (min-width: 640px) {
	#filters-modal > .outer-wrapper > .close-btn { display: none; }
}
@media (max-width: 639.99px) {
	#filters-modal > .outer-wrapper > .close-btn {
		position: absolute; top: 20px; right: 20px;
		display: block; height: 40px; width: 40px;
		
		background-color: #1C3558; transition: background-color .4s ease-out;
		border-radius: 50%;
		
		cursor: pointer;
	}
	#filters-modal > .outer-wrapper > .close-btn:hover { background-color: #5E6E85; }
	#filters-modal > .outer-wrapper > .close-btn:after {
		content: '';
		position: absolute; top: 0; right: 0; transform: rotate(45deg);
		display: block; height: 100%; width: 100%;
		
		background-color: #FFF;
		
		--mask-image: url("../../images/icons/close.svg");
		--mask-position: center;
		--mask-origin: content-box;
		--mask-size: 50%;
		--mask-repeat: no-repeat;
		
		-webkit-mask-image: var(--mask-image);
		mask-image: var(--mask-image);
		-webkit-mask-position: var(--mask-position);
		mask-position: var(--mask-position);
		-webkit-mask-origin: var(--mask-origin);
		mask-origin: var(--mask-origin);
		-webkit-mask-size: var(--mask-size);
		mask-size: var(--mask-size);
		-webkit-mask-repeat: var(--mask-repeat);
		mask-repeat: var(--mask-repeat);
		transition: transform .4s ease-out;
	}
	#filters-modal > .outer-wrapper > .close-btn:hover:after { transform: rotate(0deg); }
}

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

#filters-modal > .outer-wrapper > .inner-wrapper {}
#filters-modal > .outer-wrapper > .inner-wrapper > .header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 7.5px;
	column-gap: 20px;
	
	margin-bottom: 20px;
}
#filters-modal > .outer-wrapper > .inner-wrapper > .header > * {
	flex: 0 0 auto;
}
#filters-modal > .outer-wrapper > .inner-wrapper > .header > .title {
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
}
#filters-modal > .outer-wrapper > .inner-wrapper > .header > .cta-link {}

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

#filters-modal > .outer-wrapper > .active-filters > .filters {
	position: relative;
	
	padding-bottom: 150px;
	margin-bottom: 20px;
	
	border-bottom: solid 1px #CCC;
}
#filters-modal > .outer-wrapper > .active-filters > .filters:after {
	content: '';
	position: absolute; bottom: 15px; left: -50px; z-index: 2;
	display: block; height: 100px; width: 100px;

	background-image: url("../../images/accents/accent-smiley.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	
	pointer-events: none;
	animation: filters-smiley-float 4s ease-in-out 0s infinite;
}
@keyframes filters-smiley-float {
	0%	 { transform: translateY(0px) rotate(-25deg); }
	50%	 { transform: translateY(-20px) rotate(-25deg); }
	100% { transform: translateY(0px) rotate(-25deg); }
}

#filters-modal > .outer-wrapper > .active-filters > .header {}
@media (min-width: 640px) {}
@media (max-width: 639.99px) {
	#filters-modal > .outer-wrapper > .active-filters > .header { padding-right: 60px; }
}

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

#filters-modal > .outer-wrapper > .active-filters > .filters,
#filters-modal > .outer-wrapper > .filter-groups > .filter-group {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 5px;
	row-gap: 7.5px;
}
#filters-modal > .outer-wrapper > .filter-groups > .filter-group:not(:last-child) { margin-bottom: 15px; }

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

#filters-modal > .outer-wrapper > .inner-wrapper .filter {
	position: relative;
	padding: 0 15px;
	
	border-radius: 25px;
	border: solid 1px #000;
	
	white-space: nowrap;
	
	text-align: center;
	line-height: 25px;
	font-size: 12px;
	font-weight: 500;
	color: #000;
	
	cursor: pointer;
	
	transition:
		padding .2s ease-out .2s,
		filter .2s ease-out;
}
#filters-modal > .outer-wrapper > .inner-wrapper .filter:after {
	content: '';
	position: absolute; top: 0; right: 0;
	display: block; height: 25px; width: 25px;

	background-color: currentColor;

	--mask-image: url("../../images/icons/spinner.svg");
	--mask-position: center;
	--mask-origin: content-box;
	--mask-size: 80%;
	--mask-repeat: no-repeat;

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-origin: var(--mask-origin);
	mask-origin: var(--mask-origin);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
	
	opacity: 0; transition: opacity .2s ease-out;
}
#filters-modal > .outer-wrapper > .inner-wrapper .filter.loading {
	padding-right: 32px;
	transition:
		padding .2s ease-out,
		filter .2s ease-out;
}
#filters-modal > .outer-wrapper > .inner-wrapper .filter.loading:after {
	opacity: 1; transition: opacity .2s ease-out .2s;
}
#filters-modal > .outer-wrapper > .inner-wrapper .filter:not(.loading):hover {
	filter: brightness(90%);
}