/* Filter - Start */
#filter-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 20px;
}
.#filter-form > * {
	order: 1;
}
.filter-group.price-filter {
	order: 2;
}
#filter-form > a {
	order: 3;
}
.filter-group {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0px;
	padding: 0px 0 20px 0;
	background: var(--white);
	border-radius: 0px;
	border-bottom: 0px solid var(--border);
}
.filter-group .filter-group-head {
	display: flex;
	justify-content: space-between;
	cursor: pointer;
}
.filter-group .filter-group-head .h3 {
	font-size: 20px;
	line-height: 24px;
}
.filter-group .filter-group-head i {
	position: relative;
	display: flex;
	width: 20px;
	height: 20px;
}
.filter-group .filter-group-head i:before {
content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: 18px;
    height: 18px;
    background: url(/wp-content/themes/shop/img/icons/black/chevron-right.svg) no-repeat center center;
    background-size: contain;
    filter: url(#accent-color);
    transition: all 0.5s ease;
    transform: rotate(90deg);
}
.filter-group.active .filter-group-head i:before {
	transform: rotate(270deg);
}
.filter-group .filter-group-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding-top: 15px;
}
.filter-group.price-filter .filter-group-body {
	padding-top: 20px;
}
.filter-checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.filter-checkbox input {
	display: none;
}
.filter-checkbox .custom-checkbox {
	position: relative;
	display: flex;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 1px solid var(--border);
	border-radius: 3px;
	transition: all 0.3s ease-in-out;
}
.filter-checkbox input:checked + .custom-checkbox {
	border: 1px solid var(--primary);
	background: var(--primary);
}
.filter-checkbox .checkbox-value {
	line-height: 25px;
}
.filter-checkbox .checkbox-name {
	color: #303030;
	padding-top: 5px;
}
.price-inputs {
	display: flex;
	align-items: center;
	gap: 0;
	justify-content: center;
	width: 100%;
	margin-bottom: 20px;
}
.price-inputs input {
	color: var(--black);
	width: 50%;
	padding: 10px 10px 6px 10px;
	outline: none;
	border: none;
	border-radius: 5px;
	background: #ffffff;
	border: 1px solid var(--border);
	font-family: var(--font-family-2);
	font-size: 18px;
	line-height: 28px;
	text-align: center;
}
.price-inputs input:nth-child(1) {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-right: 0px solid var(--border);
}
.price-inputs input:nth-child(2) {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}
input.hidden {
	display: none;
}
.reset-filters,
.submit-filter-call {
	height: 45px !important;
}
.btn.reset-filters {
	background: #e13a3a;
}
.btn.reset-filters:hover {
	background: red;
}
.filter-more {
    display: flex;
    justify-content: center;
    width: fit-content;
    padding: 6px 14px 5px 14px;
    background: var(--primary);
    color: var(--primary-match);
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
}
@media (max-width: 1279px) {
	#filter-form {
		gap: 0px;
	}
	.filter-group {
		gap: 0px;
		padding: 30px 25px;
		background: #fff;
		border-radius: 0px;
	}
}
/* Filter - End */

/* UI-Slider - Start */
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider-horizontal {
	height: 3px;
	background: #D2D2D2;
	width: calc(100% - 30px);
	margin: 0 auto;
	margin-bottom: 15px;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 18px;
	height: 18px;
	cursor: default;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -7.5px;
	margin-left: -7.5px;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
	background: #1A5D1A;
}
.ui-widget-header {
	border: 1px solid #aaaaaa;
	background: #cccccc;
	color: #222222;
	font-weight: bold;
}
.ui-state-default, 
.ui-widget-content .ui-state-default {
	border: 3px solid #1A5D1A;
	background: #1A5D1A;
	font-weight: normal;
	color: #555555;
	border-radius: 100%;
	box-sizing: border-box;
	cursor: pointer;
}
@media (max-width: 1279px) {
	.filter-group.price-filter {
		gap: 0px;
	}
	.ui-slider .ui-slider-handle {
		width: 25px;
		height: 25px;
	}
	.ui-slider-horizontal .ui-slider-handle {
		top: -11px;
		margin-left: -11px;
	}
}
/* UI-Slider - End */

.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	height: fit-content;
}

.filter-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 30px;
	width: fit-content;
	margin: 0;
	padding: 0 15px 0 20px;
	background: #efefef;
	font-size: 14px;
	line-height: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
	border-radius: 30px;
}
.filter-chip.reset-all-chip {
	padding: 0 20px 0 20px;
}
.filter-chip span {
	font-family: var(--font-family-1);
	color: var(--black);
	font-weight: 500;
	height: 14px;
	transition: all 0.3s ease;
}
.filter-chip span.remove-chip {
	display: flex;
	cursor: pointer;
	font-weight: 300;
	font-size: 22px;
	height: 23px;
	padding: 5px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.filter-chip span.remove-chip:hover {
	color: #ff3131;
}

.filter-chip.reset-all-chip {
	background-color: #ff3131;
	cursor: pointer;
	transition: all 0.3s ease;
}
.filter-chip.reset-all-chip:hover {
	background-color: #e70000;
}
.filter-chip.reset-all-chip span{
	color: #fff;
}
@media (max-width: 1279px) {
	.filter-chip {
		padding: 0 10px 0 15px;
	}
	.filter-chip.reset-all-chip {
		padding: 0 15px 0 15px;
	}
}

.apply-filter-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	padding: 5px 6px 5px 5px;
	background: var(--primary);
	border-radius: 100%;
	transition: all 0.3s ease;
}
.apply-filter-button p {
	font-size: 12px;
	line-height: 12px;
	color: var(--primary-match);
	transition: all 0.3s ease;
}
.apply-filter-button:hover {
	background: var(--accent);
}
.apply-filter-button:hover p {
	color: var(--accent-match);
}