/* Фильтрация: один набор фильтров в Bootstrap 5 offcanvas-lg (мобильный — панель, десктоп — в сайдбаре) */

.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: 0.25em 0.5em;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	font-weight: bold;
}

.btn-filter .icon--filter,
.bureau-list-sorting .icon--sort {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--blue);
	flex-shrink: 0;
}

.btn-filter .icon--filter svg,
.bureau-list-sorting .icon--sort svg {
	width: 100%;
	height: 100%;
}


/* Панель над списком: бейджи фильтров + сортировка (отступ от контента — у контейнера main) */
.bureau-list-toolbar {
	padding: 0.25rem 0 0.5rem;
	margin-bottom: 0;
	border-bottom: 1px solid var(--gray);
}

.bureau-list-badges {
	list-style: none;
	display: flex;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	align-items: center;
}
/* Отступ только когда бейджи есть (между строкой иконок и бейджами) */
.bureau-list-badges:not(:empty) {
	margin-top: 0.25rem;
}

.bureau-list-sorting {
	flex-shrink: 0;
}

.bureau-list-sorting select {
	width: auto;
	min-width: 180px;
	max-width: 100%;
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	border: 1px solid var(--gray);
	color: var(--blue);
	font-size: 0.95rem;
}

.bureau-list-cards {
	margin-top: 0.5rem;
}

/* Бейджи для фильтров (в панели и в offcanvas) */

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

.filter-mobile-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background-color: var(--gray);
	color: var(--blue);
	padding: 0.35rem 0.75rem;
	border-radius: 20px;
	font-weight: 600;
	font-size: 0.9rem;
}	

/* .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 {
	background: radial-gradient(
		ellipse 120% 150% at 50% 50%,
		rgba(255, 152, 0, 0.22) 0%,
		rgba(255, 152, 0, 0.12) 50%,
		rgba(255, 152, 0, 0.04) 100%
	);
	border-radius: 4px;
	padding: 2px 6px;
	animation: highlight-fade-in 0.35s ease-out;
}

/* Подсветка для станций метро — та же дымка с затуханием */
.metro-station-item.filter-highlight {
	background: radial-gradient(
		ellipse 120% 150% at 50% 50%,
		rgba(255, 152, 0, 0.22) 0%,
		rgba(255, 152, 0, 0.12) 50%,
		rgba(255, 152, 0, 0.04) 100%
	);
	border-radius: 4px;
	padding: 4px 8px;
}

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

@keyframes highlight-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* Плашка в списке: уменьшенные отступы */
.bureau-block-info.list {
	padding: 15px 40px 30px 15px;
}

@media screen and (max-width: 769px) {
	.bureau-block-info.list {
		padding: 15px 15px 20px 15px;
	}
}

section.bureau-list-el a {
	text-decoration: none;
}

section.bureau-list-el div.grade-blue-block {
	min-width: 60px;
	width: 60px;
	height: 58px;
	font-size: x-large;
	margin-top: -16px;
}

@media screen and (max-width: 769px) {
	section.bureau-list-el div.grade-blue-block {
		margin-top: 0;
	}
}

section.bureau-list-el a.phone {
	text-decoration: underline;
}

/* Карточка бюро в списке: лого, иконки, заголовок, ссылки */
.bureau-card {
	position: relative;
}

.bureau-card img {
	max-width: 96px;
	max-height: 96px;
}

.bureau-card svg {
	max-width: 96px;
	max-height: 96px;
}

.bureau-card .icon--bureau-confirmed svg,
.bureau-card .icon-bureau-confirmed-information svg {
	width: 10px;
	height: 10px;
	max-width: 10px;
	max-height: 10px;
}

.bureau-card .icon--bureau-priority svg {
	width: 99px;
	height: 27px;
	max-width: 99px;
	max-height: 27px;
}

.wrapper-title-card {
	display: flex;
	align-items: start;
	gap: 2px;
	flex-wrap: wrap;
}

.bureau-card a.card-more-tags {
	font-size: 14px;
	text-decoration: underline;
}

.icon-bureau-priority-placement {
	position: absolute;
	top: 6%;
	right: 0%;
}

/* Кнопка «Показать еще» и селект сортировки — только на страницах со списком */
a.btn-show-all {
	font-weight: bold;
	text-decoration: underline;
}

select {
	color: var(--blue);
	border: 1px solid var(--gray);
	border-radius: 5px;
	padding: 3px;
}

select:focus-visible {
	outline: none;
}

@media screen and (min-width: 768px) {
	div.row select#sorting-select {
		width: 100%;
	}
}

/* Карточка бюро в списке: услуги, «И еще N», метро, отступы */
.bureau-list-el.bureau-card .service-information {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin-top: 0.25rem;
	margin-bottom: 0;
}

.bureau-list-el.bureau-card .services-marker {
	margin: 0;
}

.bureau-list-el.bureau-card a.card-more-tags {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
	border-bottom: 1px dashed var(--blue);
	opacity: 0.9;
}

.bureau-list-el.bureau-card a.card-more-tags:hover {
	opacity: 1;
	border-bottom-style: solid;
}

.bureau-list-el.bureau-card .metro-station-item {
	align-items: flex-start;
	gap: 0.25rem;
	min-width: 0;
}

.bureau-list-el.bureau-card .metro-station-item .underground-station-badge {
	line-height: 1.3;
}

.bureau-list-el.bureau-card .metro-station-item .underground-station-badge + span,
.bureau-list-el.bureau-card .metro-station-item > span:last-child {
	font-size: 0.85rem;
	color: var(--asphalt-gray, #555);
	line-height: 1.3;
}

/* Единый отступ между карточками: переопределяем тему (.bureau-block-info { margin: 3rem 0 }) */
#container-bureau.bureau-list-cards .bureau-list-el,
.bureau-list-cards .bureau-list-el {
	margin-top: 0;
	margin-bottom: 1rem;
}

.bureau-list-cards .bureau-list-el:last-child {
	margin-bottom: 0;
}

/* Пустое состояние: по фильтрам бюро не найдено */
.bureau-list-empty {
	background: var(--light-gray, #f5f5f5);
	border: 1px solid var(--gray, #e0e0e0);
	border-radius: 8px;
	padding: 2rem;
	text-align: center;
	color: var(--asphalt-gray, #333);
}

.bureau-list-empty__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	max-width: 36em;
	margin-left: auto;
	margin-right: auto;
}

/* Фильтры: сайдбар/offcanvas и кнопка «Фильтры» на мобильном */
@media (max-width: 991.98px) {
	.bureau-list-sidebar-col {
		min-height: 0;
		padding: 0;
		margin: 0;
	}
	#filter-offcanvas:not(.show) .offcanvas-body {
		display: none !important;
	}
	#filter-offcanvas:not(.show) {
		visibility: hidden !important;
		height: 0 !important;
		min-height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		border: none !important;
	}
	.btn-filter.d-lg-none {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0.5em 0.6em !important;
		min-width: 44px;
		min-height: 44px;
		border: none !important;
		background: none !important;
		box-shadow: none !important;
		outline: none !important;
		font: inherit;
		color: inherit;
		cursor: pointer;
	}
	.btn-filter.d-lg-none:hover,
	.btn-filter.d-lg-none:focus {
		background: var(--light-gray) !important;
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
	}
	.btn-filter.d-lg-none .btn-filter-label {
		display: none;
	}
}

@media (max-width: 991.98px) {
	.bureau-list-toolbar {
		padding-top: 0;
		padding-bottom: 0.35rem;
	}
}

@media (max-width: 991.98px) {
	.bureau-list-sorting .bureau-sorting-inner {
		position: relative;
		width: 2.5rem;
		height: 2.5rem;
		min-width: 44px;
		min-height: 44px;
		align-items: center;
		justify-content: center;
	}
	.bureau-list-sorting #sorting-select {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		opacity: 0 !important;
		cursor: pointer !important;
		z-index: 1;
	}
	.bureau-list-sorting .icon--sort {
		position: relative;
		z-index: 0;
		pointer-events: none;
	}
}