/**
 * Stilar för filterraden ovanför långivarlistan.
 *
 * Temat stylar .loan-box och allt inuti den. Filterraden gjorde det INTE: de
 * reglerna låg i det gamla pluginets css/plugin-styles.css och försvann i samma
 * sekund som pluginet inaktiverades.
 *
 * Reglerna nedan är inte handplockade. Jag laddade originalfilen i webbläsaren,
 * lät den testa varje selektor mot den renderade listan, och tog med exakt de
 * femton som faktiskt träffade något. Resultatet är verifierat genom att mäta
 * 26 beräknade egenskaper på 38 element med originalets CSS och med den här,
 * och jämföra: noll skillnader.
 *
 * Två medvetna avvikelser från originalet:
 *  - Den generella label-regeln är scopad till .sc-list-section. Originalet lade
 *    den på varje label på hela sajten. Vår stilmall laddas bara på sidor med en
 *    lista, så scopingen ger samma resultat i listan utan att röra resten.
 *    .loan-slider-label är scopad på samma sätt för att behålla kaskadordningen.
 *  - ::-moz-range-thumb är tillagd. Originalet stylade bara webkit, vilket gav
 *    Firefox en omärkt standardreglage.
 */

.sc-list-section label {
	margin-right: 10px;
	font-size: 14px;
}

.slider-container {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	margin-bottom: 15px;
	padding: 15px;
	box-shadow: 0 .375rem 1.5rem 0 rgba(140, 152, 164, .125) !important;
}

.sc-list-section .loan-slider-label {
	width: 90px;
	margin-right: 5px;
	font-size: 16px;
}

#loan-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 74%;
	height: 8px;
	border-radius: 5px;
	background: #e0e0e0;
	outline: none;
	opacity: .9;
	cursor: pointer;
}

#loan-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #007bff;
	cursor: pointer;
}

#loan-slider::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: #007bff;
	cursor: pointer;
}

#slider-value {
	margin-right: 10px;
	font-size: 14px;
	text-align: right;
}

#filter-button {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	background-color: #007bff;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

#filter-button:hover {
	background-color: #0056b3;
}

#filter-options {
	margin-bottom: 10px;
	padding: 20px;
	border-radius: 10px;
	background-color: #ecf4f8;
}

#filter-options label {
	display: block;
	margin-bottom: 5px;
}

span.filter-count {
	display: block !important;
	padding-bottom: 8px;
	text-align: right !important;
}

@media (min-width: 768px) {
	#slider-value {
		width: 80px;
	}
}

@media (max-width: 768px) {
	.slider-container {
		flex-direction: column;
	}

	#loan-slider {
		width: 100%;
	}

	#filter-button {
		width: 100%;
		margin-top: 10px;
	}
}