/**--ALLGEMEIN--**/

/**--background container--**/
#rutschen-filter-form {
	display: block;
	
	background: #f2f5f9;
	padding: 2rem 1rem;
}

/**--basis für alle filter-Reihen--**/
.filter-row {
	display: grid;
	gap: 2rem;
	align-items: end;
}

/**--labels--**/
#rutschen-filter-form label {
	display: flex;
	flex-direction: column;
	font-family: var( --e-global-typography-26957cc-font-family ), Sans-serif;
	font-weight: var( --e-global-typography-26957cc-font-weight );
	font-size: 1rem;
	text-transform: var( --e-global-typography-26957cc-text-transform );
	color: var(--e-global-color-text);
	gap: calc(var(--default-gap)/2);
}

/**--input--**/
#rutschen-filter-form select,
#rutschen-filter-form input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: var(--default-border-width) solid var(--e-global-color-text) !important;
	font-size: 14px;
}

#rutschen-filter-form select:focus,
#rutschen-filter-form input[type="text"]:focus {
	outline: none;
	background-color: var(--e-global-color-accent);
	box-shadow: 0px;
}

/**--deaktivierte felder--(disabled input & select wurden im template php feld gestyled)**/

.disabled-label {
	opacity: 0.5;
}

/**--SELECT BOXEN--**/

/**--container--**/
.custom-select-wrapper {
	position: relative;
	display: block;
}

/**--basis--**/
#rutschen-filter-form select {
	width: 100%;
	padding: 10px 40px 10px 12px;
	border: var(--default-border-width) solid var(--e-global-color-text) !important;
	cursor: pointer;
	transition: all 0.3s ease;
  
/**--entferne standard arrow--**/
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none;
	
/**--custom arrow--**/
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 12.6 12.6'%3e%3cg transform='translate(4.3,4.3) rotate(135) translate(-4.3,-4.3)'%3e%3cpolygon points='.7 8.6 0 7.9 6.9 1 0 1 0 0 8.6 0 8.6 8.6 7.6 8.6 7.6 1.7 .7 8.6' fill='%232B3133'/%3e%3c/g%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 12px;
}

#rutschen-filter-form select:disabled {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 12.6 12.6'%3e%3cg transform='translate(4.3,4.3) rotate(135) translate(-4.3,-4.3)'%3e%3cpolygon points='.7 8.6 0 7.9 6.9 1 0 1 0 0 8.6 0 8.6 8.6 7.6 8.6 7.6 1.7 .7 8.6' fill='%232B3133'/%3e%3c/g%3e%3c/svg%3e");
}

/**--LAYOUT--**/

/**--reihe 1--**/
.filter-first-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--default-gap);
}

/**--reihe 2 (jetzt mit 5 Spalten für city)--**/
.filter-second-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--default-gap);
}

/**--reihe 3--**/
.filter-third-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--default-gap);
}

/**--reihe 4--**/
.filter-fourth-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--default-gap);
	border-top: var(--default-border-width) solid var(--e-global-color-text);
	padding-top: 2rem;
}

/**--BUTTONS--**/

.filter-buttons {
	display: flex;
	gap: var(--default-gap);
	align-items: end;
	justify-content:end;
	grid-column: 2 / span 5;
}

.filter-submit-btn {
	background: var(--e-global-color-text);
	color: white;
	border: 0px !important;
	padding: 0.5rem 2rem;
	border-radius: 50vw;
	cursor: pointer;
	font-family: var( --e-global-typography-f697800-font-family ), Sans-serif;
	font-size: var( --e-global-typography-f697800-font-size );
	display: flex;
	align-items: center;
	transition: all 0.2s ease;
	min-width: 120px;
	justify-content: center;
}

.filter-submit-btn:hover {
	background: var(--e-global-color-secondary);
}

.filter-submit-btn.loading {
	background: var(--e-global-color-text);
	cursor: not-allowed;
	transform: none;
}

/**--Reset Button ist Inline-Style im HTML des templates--**/

.filter-reset-btn {
	padding: 0.5rem 2rem;
	border-radius: 50vw;
	cursor: pointer;
	font-family: var( --e-global-typography-f697800-font-family ), Sans-serif;
	font-size: var( --e-global-typography-f697800-font-size );
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
	min-width: 120px;
	justify-content: center;
}

.results {
	display: flex;
	align-items: start;
	margin-top: 2rem;
	padding-left: 1rem;
}

.filter-results-info {
	font-family: var( --e-global-typography-f697800-font-family ), Sans-serif;
	font-size: var( --e-global-typography-f697800-font-size );
	color: white;
	padding: 12px 14px;
	background: var(--e-global-color-secondary);
}

/**--RESPONSIV--**/

/**--tablet--**/
@media (max-width: 1024px) {
	.filter-second-row,
	.filter-third-row {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.filter-fourth-row {
		grid-template-columns: 1fr 2fr;
	}
	
	.filter-buttons{
		grid-column:auto;
	}
  
	.filter-submit-btn,
	.filter-reset-btn {
		width: 100%;
		justify-content: center;
  }
}

/**--mobile--**/
@media (max-width: 768px) {
	#rutschen-filter-form {
		padding: 2rem 1rem;
	}
	
	.filter-first-row,
	.filter-second-row,
	.filter-third-row,
	.filter-fourth-row {
		grid-template-columns: 1fr;
	}
	
	.filter-fourth-row {
		margin-top: 1rem;
	}
	
	.filter-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: var(--default-gap);
		margin-top: 1rem;
	}
	
	.filter-row {
		gap: var(--default-gap);
	}
}