/*Фильтрация*/
.filter-mobile {
	display: none;
}

.filter-pc {
	display: block;
}

@media (max-width: 767px) {
	div.filter-mobile {
		display: block;
	}

	div.filter-pc {
		display: none;
	}	
}

.accordion-button:focus {
	border: none;
	box-shadow: none;
}

.accordion-button:not(.collapsed) {
	border: none;
	box-shadow: none;
	background-color: rgba(217, 217, 217, 1);
	color: var(--blue);
}

.accordion-button::after {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2311385B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2311385B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	transform: rotate(-180deg);
}

button.btn-filter {
	background: none;
	border: none;
	color: inherit;
	padding-left: 25px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	font-weight: bold;
	position: relative;
}

.btn-filter::before {
	content: ''; 
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 20px; 
	height: 20px;
	margin-left: -25px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position-y: center;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.375 2.20338L10.375 1.5C10.375 1.22386 10.5989 1 10.875 1C11.1511 1 11.375 1.22386 11.375 1.5L11.375 2.20338C12.0278 2.41427 12.5 3.02699 12.5 3.75C12.5 4.47301 12.0278 5.08575 11.375 5.29665L11.375 12.5C11.375 12.7762 11.1511 13 10.875 13C10.5989 13 10.375 12.7762 10.375 12.5L10.375 5.29665C9.72218 5.08575 9.25 4.47301 9.25 3.75C9.25 3.02699 9.72219 2.41427 10.375 2.20338ZM10.875 2.875C11.3582 2.875 11.75 3.26675 11.75 3.75C11.75 4.23325 11.3582 4.625 10.875 4.625C10.3917 4.625 10 4.23325 10 3.75C10 3.26675 10.3918 2.875 10.875 2.875Z' fill='%238C8B8C'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.375 1.5L6.375 8.7229C5.7222 8.9338 5.25 9.5465 5.25 10.2696C5.25 10.9926 5.7222 11.6053 6.375 11.8162L6.375 12.5C6.375 12.7762 6.59885 13 6.875 13C7.15115 13 7.375 12.7762 7.375 12.5L7.375 11.8162C8.0278 11.6053 8.5 10.9926 8.5 10.2696C8.5 9.5465 8.0278 8.9338 7.375 8.7229L7.375 1.5C7.375 1.22386 7.15115 1 6.875 1C6.59885 1 6.375 1.22386 6.375 1.5ZM7.75 10.2696C7.75 9.7863 7.35825 9.39455 6.875 9.39455C6.39175 9.39455 6 9.7863 6 10.2696C6 10.7528 6.39175 11.1446 6.875 11.1446C7.35825 11.1446 7.75 10.7528 7.75 10.2696Z' fill='%238C8B8C'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.375 5.20335L2.375 1.5C2.375 1.22386 2.59885 1 2.875 1C3.15115 1 3.375 1.22386 3.375 1.5L3.375 5.20335C4.0278 5.41425 4.5 6.027 4.5 6.75C4.5 7.473 4.0278 8.08575 3.375 8.29665L3.375 12.5C3.375 12.7762 3.15115 13 2.875 13C2.59885 13 2.375 12.7762 2.375 12.5L2.375 8.29665C1.7222 8.08575 1.25 7.473 1.25 6.75C1.25 6.027 1.7222 5.41425 2.375 5.20335ZM2.875 5.875C3.35825 5.875 3.75 6.26675 3.75 6.75C3.75 7.23325 3.35825 7.625 2.875 7.625C2.39175 7.625 2 7.23325 2 6.75C2 6.26675 2.39175 5.875 2.875 5.875Z' fill='%238C8B8C'/%3e%3c/svg%3e");
}


/*Бейджи для фильтров на мобильном*/

#container-mobile-badge {
	list-style: none;
	display: flex;
	gap: 1rem;
	margin-bottom: 0 0 1.5rem 0;
	padding: 0;
	flex-wrap: wrap;
}

.filter-mobile-badge {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background-color: var(--gray);
	color: var(--blue);
	padding: 4px 10px;
	border-radius: 15px;
	font-weight: bold;
}	

/* .filter-mobile-badge [id^=cross] {
	cursor: pointer;
	width: 15px;
	height: 3px;
	display: block;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
	position: relative;
}


.filter-mobile-badge [id^=cross]::after, .filter-mobile-badge [id^=cross]::before {
	content: "";
	position: absolute;
	background: var(--blue);
	width: 15px;
	height: 3px;
	left: 1px;
}

.filter-mobile-badge [id^=cross]::after {
	transform: rotate(-45deg);
}


.filter-mobile-badge [id^=cross]::before {
	transform: rotate(45deg);
}

.filter-mobile-badge [id^=mobile-badge] {
	white-space: nowrap;
} */


/* Стили для кнопки закрытия (крестика) */
.filter-mobile-badge [data-cross-id] {
    cursor: pointer;
    width: 15px;
    height: 3px;
    display: block;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    position: relative;
}

.filter-mobile-badge [data-cross-id]::after,
.filter-mobile-badge [data-cross-id]::before {
    content: "";
    position: absolute;
    background: var(--blue);
    width: 15px;
    height: 3px;
    left: 1px;
}

.filter-mobile-badge [data-cross-id]::after {
    transform: rotate(-45deg);
}

.filter-mobile-badge [data-cross-id]::before {
    transform: rotate(45deg);
}

/* Стили для текста бейджа */
.filter-mobile-badge [data-mobile-badge-id] {
    white-space: nowrap;
}


/*Инпуты*/
label {
	position: relative;
}

label input.form-check-input {
	position: absolute;
	display: none;
}



span.form-check-input {
	background-color: var(--gray);
	border-color: var(--gray);
	border-radius: 5px;
}

span.form-check-input.active {
	background-color: var(--blue);
	border-color: var(--blue);
}



span.check:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 11px;
    left: -16px;
    width: 6px;
    height: 45%;
    box-sizing: border-box;
    border-color: var(--white);
    border-style: solid;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-100%,-25%) scale(1);
}

span.form-check-input:checked {
	background-color: var(--blue);
	border-color: var(--blue);
}

span.form-check-input:focus {
	box-shadow: none;
	border-color: var(--gray);
}


/*Новые стили*/


span.wrapper-check {
	display: flex;
}


span.wrapper-check {
	background-color: var(--gray);
	border-color: var(--gray);
	border-radius: 5px;
}

span.fwrapper-check.active {
	background-color: var(--blue);
	border-color: var(--blue);
}



span.check:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 11px;
    left: -16px;
    width: 6px;
    height: 45%;
    box-sizing: border-box;
    border-color: var(--white);
    border-style: solid;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-100%,-25%) scale(1);
}

span.wrapper-check:checked {
	background-color: var(--blue);
	border-color: var(--blue);
}

span.wrapper-check:focus {
	box-shadow: none;
	border-color: var(--gray);
}





/**/

div.wrapper-filter-input {
	display: flex;
    margin: 0;
    border-radius: 7px;
    word-break: break-word;	
}

label.filter-label {
    position: relative;
}

input.filter-input {
	position: absolute;
   	display: none;
}

span.wrapper-filter-check {
	transition-property: opacity;
    display: flex;
	align-items: center;
	gap: 0.5rem;
}

span.filter-check {
	width: 1em;
    height: 1em;
	min-width: 1rem;
	min-height: 1rem;
	background-color: var(--gray);
    border-color: var(--gray);
    border-radius: 5px;
}

span.filter-check.active {
	background-color: var(--blue);
    border-color: var(--blue);
}

span.filter-marker {
	opacity: 1;
	position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


span.filter-marker:before {
	border-color: #21201f;
    height: 10px;
    width: 6px;
	content: "";
    position: absolute;
    z-index: 1;
    top: 8px;
    left: 8px;
    box-sizing: border-box;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-100%,-25%) scale(1);
}


/* Подсветка совпадающих фильтров в карточках бюро */
.filter-highlight {
	position: relative;
	background: rgba(255, 193, 7, 0.15);
	border-radius: 4px;
	padding: 2px 6px;
	margin: -2px -6px;
	border-left: 3px solid #ffc107;
	animation: highlight-fade-in 0.4s ease-out;
}

/* Подсветка для станций метро */
.metro-station-item.filter-highlight {
	background: rgba(255, 193, 7, 0.12);
	padding: 4px 8px;
	margin: -4px -8px;
	border-left: 3px solid #ffc107;
	border-radius: 4px;
}

.metro-station-item.filter-highlight .underground-station-badge a {
	font-weight: 600;
}

@keyframes highlight-fade-in {
	0% {
		opacity: 0;
		background: rgba(255, 193, 7, 0.4);
	}
	100% {
		opacity: 1;
		background: rgba(255, 193, 7, 0.15);
	}
}