.search-block {
	display: flex;
	justify-content: space-between;
}
.filter-title-name {
	display: none;
}
.md\:grid-cols-3 {
	@media (width >= 48rem) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.j-tab.active{
	color: #D63C3C;
}
div[id^='wait_'] {
	display: none !important;
	background: none !important;
	border: 0 !important;
	color: #000000;
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	font-style: normal !important;
	font-variant: normal !important;
	font-weight: normal;
	letter-spacing: normal !important;
	line-height: normal;
	padding: 0 !important;
	position: absolute;
	text-align: center !important;
	text-indent: 0 !important;
	width: 0px !important;
	height: 0px !important;
	word-spacing: normal !important;
	z-index: 0;
	content: '';
}
.section-block {
	margin-bottom: 128px;
	@media (max-width: 1024px) {
		margin-bottom: 64px;
	}
}
#uslugi  iframe{
	width: 100% !important;
	max-width: 853px;
}
.fixed{
	z-index: 99;
	position: fixed;
}
#uslugi .new-map iframe{
	max-width: 100%;
}
#uslugi .new-video iframe{
	max-width: 100%;
	height: 100%;
}
.detail-text iframe{
	width: 100% !important;
	max-width: 853px;
}
.search-block .input-group-merge {
	width: 100%;
}

.search-elements {
	display: flex;
	margin-left: auto;
	width: 70%;
	height: 40px;
}

#banner .modal-content {
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent !important;
	max-width: 50rem !important;
}

#banner .modal-content img {
	width: 100%;
}

.c-btn-red {
	border: 1px solid #db2f2f;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	font-size: 18px;
	color: #db2f2f;
	height: 36px;
	padding: 6px 32px;
	cursor: pointer;
}

.about-page-link__icon img {
	border-radius: 0 10px 10px 0;
}

@media (max-width: 991px) {
	.filter-title-name {
		display: block;
	}
	.about-page-link__icon img {
		border-left: 2px solid;
	}
	.btn-choose-m {
		display: flex !important;
	}
	.m-none {
		display: none !important;
	}
}

.show-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 32px;
}

.modal {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: auto;
	z-index: 1005;
	background: rgba(0, 0, 0, 0.8);
	display: none;
	padding: 2rem;
}

.bi-chevron-up:before {
	font-size: 25px;
}

.modal-close {
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}

.modal .modal-content {
	background: #fff;
	border-radius: 10px;
	margin: auto;
	position: relative;
	max-width: 26rem;
	padding: 1.5rem;
	-webkit-box-shadow: -5px 0 30px 0 rgba(0, 0, 0, 0.1);
	box-shadow: -5px 0 30px 0 rgba(0, 0, 0, 0.1);
	width: 100%;
}

.modal-title {
	font-size: 20px;
	color: #252626;
	margin-bottom: 16px;
	text-align: center;
	line-height: 26px;
}

.c-form .input-group-merge {
	margin-bottom: 16px;
}

.c-form .btn {
	color: #fff;
	font-size: 16px;
	margin-bottom: 16px;
	outline: none;
	border: none;
}

#form-3 .c-form .btn {
	color: #db2f2f !important;
}

.advantage-item__icon {
	margin-top: 0;
	margin-bottom: 15px;
}

#sectionNashaKomanda {
	padding-bottom: 60px;
}

@media (max-width: 991px) {
	.advantage-item__icon img{
		max-width: 45px;
		margin-right: 10px;
	}
	.accordion-item__header{
		gap: 0 !important;
	}
	.c-lg-none {
		display: none !important;
	}
	.accordion-item__title{
		padding-right: 5px !important;
	}
}

.search-block {
	flex-direction: column;
}

.search-elements {
	margin-left: 0;
	width: 100%;
	margin-bottom: 16px;
}

.breadcrumb-item a:hover {
	color: #2d374b !important;
}

.menu {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 0;
	list-style: none;
	padding-left: 0;
}

.menu-item {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0 16px;
	white-space: nowrap;
	position: relative;
}
@media(max-width: 1580px) {
	.menu-item {
		padding: 0 8px;
	}
}
@media(max-width: 780px) {
	.menu-item{
		white-space: wrap;
		max-width: 320px;
	}
	.sub-sub-menu-wrapper{
		min-width: auto;
	}
}
.menu-item:nth-child(4) .menu-item-submenu-wrapper {
	display: block;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}

.menu-item:nth-child(5) .menu-item-submenu-wrapper {
	display: block;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}

.menu-item:first-child {
	padding-left: 0;
}

.menu-item:last-child {
	padding-right: 0;
}
@media(min-width: 992px) {
	.menu-item:hover .menu-item-submenu {
		display: block;
	}
}


.menu-item-submenu {
	z-index: 3;
	position: absolute;
	top: 1.25rem;
	left: -0.5rem;
	display: none;
	padding-top: 2.4rem;
}

.menu-item-submenu a svg {
	transform: rotate(-90deg);
	margin-left: 8px;
}

.menu-item-submenu-wrapper {
	background: #ededed;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 24px 0 32px 32px;
	border-radius: 0.5rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.menu-item-submenu-wrapper:before {
	content: '';
	width: 1.8rem;
	height: 1.8rem;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 1.5rem;
	left: 2.5rem;
	background: #ededed;
}

.menu-item-submenu li {
	padding-right: 45px;
	list-style: none;
	position: relative;
	width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
}

@media(min-width: 992px) {
	.menu-item-submenu li svg{
		position: absolute;
		right: 20px;
		top: 41%;
		transform: rotate(-90deg);
	}
}
.menu a {
	font-size: 16px;
	font-weight: 400;
	display: block;
	margin-right: 8px;
	color: #2d374b;
}

.menu a:hover {
	color: #d63c3c;
}

.sub-sub-menu {
	position: absolute;
	left: 100%;
	top: -22px;
	display: none;
	padding-left: 10px;
}
@media(min-width: 992px) {
	.menu-item-submenu li:hover .sub-sub-menu {
		display: flex;
	}
}


.sub-sub-menu-wrapper {
	background: #ededed;
	padding: 32px;
	padding-top: 24px !important;
	padding-bottom: 24px !important;
	min-width: 700px;
	column-count: 2;
	border-radius: 0.5rem;
}
@media(max-width: 1500px) {
	.sub-sub-menu-wrapper {

		min-width: 600px;
	}
}
@media(max-width: 780px) {

	.sub-sub-menu-wrapper{
		min-width: auto;
	}
	.menu-item-submenu li{
		padding-right: 0;
	}
}
.sub-sub-menu-wrapper a {
	padding: 8px 0;
	white-space: normal;

}

@media (max-width: 991px) {
	.c-logo {
		display: none !important;
	}

	.menu {
		height: calc(100vh - 46px);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding-left: 15px;
		width: 100%;
	}

	.navbar-brand-logo {
		max-width: 129px !important;
	}

	.menu-item {
		padding: 16px 0 16px 0;
		border-bottom: 1px solid #848484;
		width: 100%;
		display: block;
	}

	.menu-item-submenu {
		position: initial;

		padding-top: 0;
	}

	.menu-item-submenu-wrapper:before {
		display: none;
	}

	.menu-item-submenu-wrapper {
		background: transparent;
		padding: 0;
		padding-left: 16px;
	}

	.menu a {
		display: inline-block;
	}

	.menu-item:nth-child(4) .menu-item-submenu-wrapper {
		column-count: 1;
	}

	.menu-item:nth-child(5) .menu-item-submenu-wrapper {
		column-count: 1;
	}

	.sub-sub-menu {
		position: initial;
		padding-left: 0;
	}

	.sub-sub-menu-wrapper {
		background: transparent;
		column-count: 1;
		display: flex;
		flex-direction: column;
	}
}

input.invalid {
	border-color: #d63c3c;
}

textarea.invalid {
	border-color: #d63c3c;
}

.input-group-merge.invalid {
	margin-bottom: 0;
}

.error-message {
	font-size: 12px;
	margin-bottom: 10px;
	color: #d63c3c;
}

#form-3 .input-group-merge.invalid {
	margin-bottom: 16px;
}

#form-3 .error-message {
	font-size: 12px;
	margin-bottom: 0;
	color: #252626;
}

#form-3 input.invalid {
	border-color: #252626;
}
#vacancy-form .input-group-merge.invalid {
	margin-bottom: 16px;
}

#vacancy-form .error-message {
	font-size: 12px;
	margin-bottom: 0;
	color: #252626;
}

#vacancy-form input.invalid {
	border-color: #252626;
}
#otzyvyModalCenteredScrollable .modal-content {
	max-width: 50rem;
}

.download-top {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-bottom: 3.25rem;
}

.download-top .tags-item {
	max-width: 19.5rem;
	font-size: 0.9rem;
}

@media (max-width: 980px) {
	.download-top .tags-item {
		display: none;
	}
}

.download-block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.download-left {
	-webkit-box-flex: 0;
	-webkit-flex: 0 1 750px;
	-ms-flex: 0 1 750px;
	flex: 0 1 750px;
	border-radius: 10px;
	overflow: hidden;
}

.download-right {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	border-radius: 10px;
	background: #f8f8f8;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	max-height: 360px;
	padding: 0 3.5rem;
}

.download-img {
	width: 100%;
}

.download-desc {
	width: 100%;
}

.download-desc-logo {
	margin-bottom: 1.15rem;
}

.download-desc-text {
	margin-bottom: 3.2rem;
}

.download-desc-links {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

.download-desc-links-item {
	margin-right: 0.8rem;
}

.download-desc-links-item:last-child {
	margin-right: 0;
}

.download-desc-links-item svg {
	max-width: 7.25rem;
	width: 100%;
}

.qr {
	width: 45%;
	margin-left: 1rem;
}

.qr img {
	min-width: 7.5rem;
}

.tags-item {
	height: 2.15rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0.4rem 0.8rem;
	margin-right: 0.8rem;
	border-radius: 0.5rem;
	border: 1px solid #ccc;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.tags-item:last-child {
	margin-right: 0;
}

.tags-item-icon {
	margin-right: 0.35rem;
	width: 1.2rem;
	height: 1.2rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.tags-item-icon img {
	width: auto;
}

.tags-item-title {
	font-size: 0.9rem;
}

.download-img img {
	width: 100%;
}

.qr img {
	width: 100%;
}

.services-new .services-item {
	padding: 24px;
	flex: 0 1 calc((100% - 64px) / 3);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 10px;
	border: 3px solid #f4f3f1;
	background: #fff;
	height: 219px;
}
@media (max-width: 991px) {
	.services-new .services-item {
		flex: 0 1 calc((100% - 32px) / 2);
	}
}
.services-new {
	margin-bottom: 128px;
}

.services-new .doctor-detail-btn {
	font-size: 18px;
	margin-top: 32px;
	padding: 6px 16px 6px 16px;
}

.services-items-wrap {
	display: none;
	flex-direction: column;
}

.complex-offers-filters-item.active {
	background: #e21f26;
	border-color: #e21f26;
	color: #fff;
}

.doctors_new img {
	max-width: 120px;
	max-height: 120px;
	margin-top: auto;
	border-radius: 100%;
}

.doctors_new .vrach-item__body {
	height: 180px;
}

.doctors_new .vrach-item__body svg {
	position: absolute;
	bottom: -10px;
	width: 100%;
	left: -30px;
}

.doctors_new .vrach-item__body .p-4 {
	position: relative;
	z-index: 2;
}

.doctors_new .vrach-item__body .left {
	max-width: 210px;
}

.doctors_new .vrach-item__body > div {
	display: flex;
	flex-direction: row;
}
.lab-control-slide img {
	width: 100%;
	max-width: 260px;
}

.c-how-going .how-going__list ul li {
	list-style: disc !important;
	padding-left: 0 !important;
}
.c-how-going li:before {
	display: none !important;
}
.banner-c img {
	width: 100%;
}
.kt-container {
	display: flex;

	gap: 64px;
}
.kt-bg {
	background: #f4f3f1;
}
.kt-text {
	width: 50%;
	font-size: 18px;
	padding: 20px 0;
	display: flex;
	align-items: center;
}
.kt-img img {
	width: 100%;
}
.kt-img {
	width: 50%;
}
.c-filter .filters {
	margin-top: 0;
}

@media (max-width: 1070px) {
	.kt-container {
		display: flex;
		flex-direction: column;
		gap: 64px;
	}
	.kt-bg {
		background: #fff;
	}
	.kt-text {
		width: 100%;
		font-size: 18px;
		padding: 20px 0;
		display: flex;
		align-items: center;
	}
	.kt-img img {
		width: 100%;
	}
	.kt-img {
		width: 100%;
	}
	.download-block {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.download-left,
	.download-right {
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 100%;
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
	}

	.download-right {
		background-color: transparent;
		padding: 0;
		margin-top: 1.2rem;
	}

	.download-right .qr {
		display: none;
	}

	.download-desc-text {
		margin-bottom: 1.2rem;
	}

	.download-desc-logo {
		display: none;
	}

	.download-top {
		margin-bottom: 1.2rem;
	}

	.download-top h2 {
		font-size: 1.5rem;
	}
}
.services-item__btns .services-item__btn {
	font-size: 16px;
	max-width: 117px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 33px;
	cursor: pointer;
}
.services-item__btns .services-item__btn:nth-child(2) {
	background: rgba(219, 47, 47, 1);
	color: #fff;
	margin-top: 16px;
}
@media (max-width: 768px) {
	.services-items-wrap h2 {
		display: none;
	}
	.c-filter {
		display: block !important;
	}
	#desc {
		padding: 15px 5px;
	}
	#desc .modal-content {
		padding: 0;
	}
	.services-item__btns .services-item__btn {
		font-size: 14px;
		max-width: 100px;
		height: 28px;
	}
	.services-item__btns .services-item__btn:nth-child(2) {
		margin-top: 8px;
	}
	.services-new .services-item {
		padding: 16px;
		height: 180px;
	}
}
.modal__table--hover tr:hover td {
	background: #e6e6e6;
}

.choose-block {
	display: flex;
	flex-direction: column;
}
.choose-block a {
	font-size: 20px;
	color: #000;
	display: block;
	margin-bottom: 10px;
}
.choose-block a:hover {
	color: #db2f2f;
}
.modal__table {
	width: 100%;
}

.btn-disc {
	cursor: pointer;
}
.mission,
.history {
	margin: 128px 0;
}
.mission__inner {
	background-color: #f4f3f1;
	padding: 64px;
	border-radius: 10px;
}
.mission__inner p {
	font-size: 18px;
	line-height: 130%;
}
.mission-title {
	margin-bottom: 15px;
}

.history__title {
	padding-bottom: 45px;
	border-bottom: 2px solid #db2f2f;
	margin-bottom: -15px;
}

.history__list {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	overflow: auto;
    padding-bottom: 20px;
	/* -ms-overflow-style: none;
	scrollbar-width: none; */

    scrollbar-color: #DB2F2F #e0e0e0;
    scrollbar-width: thin;
}

.history__list::-webkit-scrollbar {
	cursor: pointer;
}
.history-item {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: relative;
	padding-top: 60px;
	flex: 0 0 calc((100% - 64px) / 3);
    pointer-events: none;
    user-select: none
}

.history-item:before {
	content: '';
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #db2f2f;
	position: absolute;
	left: 0;
	top: 0px;
	z-index: 2;
}

.history-item__year {
	font-size: 26px;
	line-height: 100%;
	color: #db2f2f;
}
@media (max-width: 992px) {
	.history-item {
		flex: 0 0 calc((100% - 24px) / 2);
	}
}
@media (max-width: 768px) {
	.navbar-brand-logo {
		max-width: 111px !important;
	}
	.navbar-nav-wrap{

	}
	.navbar-brand.me-3{
		margin-right: 0 !important;
	}
	.mission,
    .history{
		margin: 64px 0;
	}
	.mission__inner {
		padding: 32px 16px;
	}

	.mission__inner p {
		font-size: 14px;
	}

	.mission-title {
		margin-bottom: 0;
	}

	.history-item {
		flex: 0 0 80%;
	}

	.history > .container {
		max-width: 100%;
	}

	.history-item {
		padding-top: 25px;
        gap: 16px;
	}
	.history-item:before {
		width: 15px;
		height: 15px;
	}
	.history-item__year {
		font-size: 24px;
	}

	.history-item__desc {
		font-size: 12px;
	}

    .history__title {
        padding-bottom: 10px;
        margin-bottom: -7.5px;
    }
}


.full-container {
	max-width: 1820px;
	padding: 0 50px !important;
	margin: 0 auto;
	@media(max-width: 1023px){
		padding: 0 16px !important;
	}
}
.tab.active {
	background: #D63C3C;
	color: #fff;
}

.tab-icon{
	/* Иконка перед подписью кнопки таба — цвет берётся из stroke="currentColor"
	   в самих SVG, поэтому отдельно красить не нужно: наследует и обычный
	   тёмный текст, и белый на .active/:hover (см. .tab.active выше). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 10px;
	flex-shrink: 0;
}

.tab-icon svg{
	width: 100%;
	height: 100%;
}


.admin-block.admin-block-v1{
	ul {
		column-count: 2;
		@media(max-width: 1250px){
			column-count: 1;
		}
	}
}
.admin-block.admin-block-v2{
	ul {
		column-count: 1;
	}
}
.admin-block{
	ul{
		padding-left: 18px;
		li{
			position: relative;
			padding-bottom: 16px;
			&:before{
				content: '';
				position: absolute;
				min-width: 8px;
				min-height: 8px;
				left: -16px;
				top: 8px;
				border-radius: 100%;
				background-color: var(--color-red-500);
			}
		}
	}
}
.tabs-content.active {
	display: flex !important;
}
.p-accordion__item.active .p-accordion-content {
	height: auto;
	transition: height .5s ease;
}
.p-accordion-item__content {
	overflow: hidden;
	height: 0;
	width: 100%;
	transition: height .5s ease;
}


.p-accordion__item.active .p-accordion-item__header svg {
	transform: scale(-1);
}
.p-acc-arr svg {
	transition: .3s ease;
}
.p-pagination {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	@media (max-width: 767px) {
		margin-top: 32px;
	}
	.swiper-pagination-bullet {
		margin: 0 12.5px !important;
		width: 16px;
		height: 16px;
		background: #D9D9D9;
		&:before{
			display: none;
		}
		@media (max-width: 767px) {
			margin: 0 4px !important;
			width: 10px;
			height: 10px;
		}
	}

	.swiper-pagination-bullet-active {
		background: #000;
	}
}
/* Left panel: the same grey frame that used to hold the letter square,
   now holding a flat list of specialties. !important overrides the
   Tailwind py-/px- utilities already baked into the compiled stylesheet,
   no rebuild required. */
.alph-frame{
	padding: 34px !important;
}

@media (min-width: 1536px){
	.alph-frame{
		padding: 55px !important;
	}
}

/* Левая коробка растянута на высоту всей правой колонки — панель врачей
   ПЛЮС блок поиска над ней (44px поле + 16px отступ = 60px), а не только
   на высоту панели врачей, как было исходно ("same overall height as the
   old letter square" ниже больше не буквально — с появлением поиска сверху
   правая колонка стала выше на эти 60px, и левая подросла на ту же
   величину, чтобы совпадать). */
.alph-body{
	display: flex;
	gap: 16px;
	height: 427px;
}

/* The right-hand doctors panel matches the left panel's total outer height
   (body height + its own frame padding) instead of shrinking to fit however
   few doctors a specialty happens to have. */
.alph-right-frame{
	height: 435px !important;
	box-sizing: border-box;
}

/* На мобильных — только список врачей. Серый блок с категориями и буквенным
   рейлом дублирует ту же навигацию, что и так есть на десктопе, и на узком
   экране просто не помещается — прячем целиком. Сам список остаётся коробкой
   фиксированного размера со своим внутренним скроллом (не растёт на всю
   страницу) — высота подобрана так, чтобы влезало от 3 обычных карточек
   врача (типичная карточка — ~135px, у части специальность в 2 строки и
   она выше; sticky-строка текущей специальности внутри коробки — ~40px;
   плюс отступы коробки 24px сверху/снизу) и при этом не упиралась в
   фиксированный нижний бар "Позвонить/Записаться" (.bottom-btns, 48px,
   всегда поверх контента на мобильных, см. footer.php). Поле поиска — вне
   этой коробки, отдельным блоком выше (см. .alph-mobile-search).

   Порог поднят с 1023.98px до 1279.98px (принципал: должно уходить в
   мобильный вариант уже на lg, не только ниже него) — теперь весь диапазон
   lg (1024–1279px) тоже считается "мобильным" для этого блока, десктопная
   версия с двумя колонками начинается только с xl (1280px). .alph-col-left
   — это ОБЁРТКА над .alph-frame (не сам .alph-frame): у обёртки в разметке
   есть свой Tailwind-класс `lg:w-[35%]`, который реально скомпилирован и
   продолжает работать с 1024px — просто спрятать .alph-frame внутри было
   бы недостаточно, обёртка всё равно держала бы пустые 35% ширины. Симметрично
   .alph-col-right нужно принудительно растянуть на 100% — иначе её
   `lg:w-[65%]` (тоже живой) оставит контент зажатым в 65% с пустым полем
   слева, где раньше был алфавитный список. */
@media (max-width: 1279.98px){
	.alph-frame{
		display: none !important;
	}

	.alph-col-left{
		display: none !important;
	}

	.alph-col-right{
		width: 100% !important;
	}

	.alph-right-frame{
		height: 560px !important;
		border-radius: 20px !important;
	}
}

/* Поиск по врачам (ФИО + специальность) — и на десктопе, и на мобильном.
   Стоит отдельным блоком НАД коробкой списка (обычный элемент разметки, не
   прилипает при скролле страницы) — на десктопе над правой панелью, вместо
   неё специальность по-прежнему можно выбрать и через список слева; поиск
   просто даёт более быстрый путь для конкретного врача/специальности.
   Прилипающий заголовок при скролле — сам настоящий .alph-doc-group-title
   из списка (см. ниже, в его собственном mobile-блоке), без отдельной
   синтетической копии — раньше была своя JS-подставляемая метка
   `.alph-mobile-current-spec`, и на экране было видно два одинаковых
   заголовка подряд. */
.alph-mobile-search{
	display: block;
	margin-bottom: 16px;
	position: relative;
}

.alph-mobile-search-icon{
	/* Та же иконка-лупа, что в поиске по сайту в навбаре (header_new.php). */
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.alph-mobile-search-input{
	width: 100%;
	height: 44px;
	padding: 0 46px 0 16px;
	border: 1px solid #DBDBDB;
	border-radius: 10px;
	font-size: 16px;
	outline: none;
	box-sizing: border-box;
}

.alph-mobile-search-input:focus{
	border-color: #D63C3C;
}

/* Лупа и крестик очистки — бледные. Цвет лупы задан атрибутом stroke в
   разметке (alph.php), CSS его перекрывает. Как только в поле что-то есть
   (.has-value, ставит new.js), лупа прячется и на её месте крестик —
   клик по нему стирает запрос, и лупа возвращается. */
.alph-mobile-search-icon path{
	stroke: #B5B5B5;
}

.alph-mobile-search.has-value .alph-mobile-search-icon{
	display: none;
}

.alph-search-clear{
	display: none;
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #B5B5B5;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: color .15s;
}

.alph-search-clear:hover{
	color: #8c8c8c;
}

.alph-mobile-search.has-value .alph-search-clear{
	display: flex;
}

/* Отступы .alph-right-frame и .alph-content-spec-block продублированы
   тут напрямую CSS-медиа-запросами с !important, а не через Tailwind
   px-[Npx]-классы в alph.php. Причина: www/dist/output.css — статично
   собранный файл (см. FILES.md), новые значения в квадратных скобках,
   которых не было в коде на момент сборки, в него не попадают — класс
   в разметке остаётся, а правила для него нет, и он молча ничего не
   делает. Так были незаметно "сломаны" сразу несколько правок в этом
   раунде (px-[18px], pl-[18px], xl:py-[32px]) — в браузере всё выглядело
   так, будто правка не применилась вообще, а не как визуальная мелочь.
   Эти правила в new.css НЕ зависят от сборки — отдаются напрямую и
   гарантированно работают. Порог — как и у .alph-frame выше — поднят до
   1279.98px, весь диапазон lg тоже мобильный. */
@media (max-width: 1279.98px){
	.alph-right-frame{
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
	.alph-content-spec-block{
		padding-left: 8px !important;
	}
}

/* Отступ над списком врачей на телефоне — дубль Tailwind-класса
   max-lg:mt-6 из alph.php: в прод-сборке dist/output.css его нет. */
@media (max-width: 1023.98px){
	.alph-right-frame{
		margin-top: 24px !important;
	}
}

@media (min-width: 1024px) and (max-width: 1279.98px){
	.alph-right-frame{
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}

@media (min-width: 1280px) and (max-width: 1535.98px){
	.alph-right-frame{
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}
}

@media (min-width: 1536px){
	.alph-right-frame{
		padding-top: 36px !important;
		padding-bottom: 36px !important;
		padding-right: 30px !important;
	}
}

.alph-doc-group.alph-search-hidden,
.alph-doc-link.alph-search-hidden{
	display: none !important;
}

.alph-mobile-search-empty{
	display: none;
	color: #8c8c8c;
	font-size: 16px;
	text-align: center;
	padding: 24px 0;
}

.alph-mobile-search-empty.visible{
	display: block;
}


/* Tab buttons on mobile: always exactly 2 per row (never 1, never 3),
   each stretched to fill its half — a fixed 2-column grid instead of
   flex-wrap, which would wrap unevenly depending on label length.
   Порог поднят до 1279.98px вместе с остальными "мобильными" правилами
   этого блока выше — на lg (1024–1279px) кнопки тоже в 2 колонки. */
@media (max-width: 1279.98px){
	.alph-tabs-row{
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
		/* .tabs несёт tailwind-класс items-center — из-за него кнопка с
		   однострочной подписью («Кардиоцентр») не тянулась по высоте до
		   соседней с двухстрочной («Центр хирургии»). Все кнопки одного
		   размера: строки сетки равной высоты, ячейки растянуты. */
		align-items: stretch !important;
		grid-auto-rows: 1fr;
	}
	.alph-tabs-row .tab{
		width: 100% !important;
		min-width: 0;
		padding-left: 12px !important;
		padding-right: 12px !important;
		text-align: center;
	}
}

.alph-right-frame .alph-content-spec{
	max-height: none !important;
	height: 100%;
	scrollbar-color: #D4D4D4 transparent;
	scrollbar-width: thin;
	/* .alph-right-frame — flex-row (justify-between). Без flex-grow этот
	   блок сжимался до ширины своего контента (shrink-to-fit) — на
	   вкладке "Специалисты" это маскировалось длинными карточками врачей
	   с фото, а на Диагностике/Центре хирургии/Кардиоцентре (короткие
	   строки-услуги без фото) стало видно: блок и всё внутри (заголовки,
	   линия-разделитель, карточки) обрывались на трети ширины панели. */
	flex: 1;
	min-width: 0;
}

.alph-right-frame .alph-content-spec::-webkit-scrollbar{
	width: 6px;
}

.alph-right-frame .alph-content-spec::-webkit-scrollbar-track{
	background: transparent;
}

.alph-right-frame .alph-content-spec::-webkit-scrollbar-thumb{
	background: #D4D4D4;
	border-radius: 10px;
}

@media (min-width: 1536px){
	.alph-body{
		height: 571px;
	}
	.alph-right-frame{
		height: 621px !important;
	}
}

.alph-letter-rail{
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow-y: auto;
	padding-right: 12px;
	border-right: 1px solid rgba(0, 0, 0, .1);
	scrollbar-width: none;
}

.alph-letter-rail::-webkit-scrollbar{
	display: none;
}

.alph-letter-link{
	font-size: 13px;
	font-weight: 600;
	color: #000;
	text-align: center;
	padding: 3px 2px;
	border-radius: 4px;
	cursor: pointer;
}

.alph-letter-link:hover{
	background: rgba(214, 60, 60, .12);
	color: #D63C3C;
}

.alph-letter-link.disabled{
	color: #ccc;
	cursor: default;
	pointer-events: none;
}

/* The letter matching whatever's scrolled to the top of the list right now. */
.alph-letter-link.current{
	color: #D63C3C;
	font-weight: 800;
}

/* Big red divider letter between groups of specialties in the list. */
.alph-cat-letter-heading{
	font-size: 28px;
	font-weight: 700;
	color: #D63C3C;
	line-height: 1;
	padding: 4px 4px 0;
	margin-top: 22px;
}

.alph-cat-letter-heading:first-child{
	margin-top: 0;
}

.alph-cat-list{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	padding-right: 12px;
	/* Без scroll-behavior: smooth — список переходит к нужной кнопке
	   сразу, а не едет через все промежуточные (см. new.js). */
	/* Толстая системная полоса прокрутки (напр. Firefox с "always show
	   scrollbars") съедала весь правый отступ и ложилась на кнопки —
	   тонкая, нейтрально-серая, не бросается в глаза как красная. */
	scrollbar-color: #D4D4D4 transparent;
	scrollbar-width: thin;
}

.alph-cat-list::-webkit-scrollbar{
	width: 6px;
}

.alph-cat-list::-webkit-scrollbar-track{
	background: transparent;
}

.alph-cat-list::-webkit-scrollbar-thumb{
	background: #D4D4D4;
	border-radius: 10px;
}

.alph-cat-link{
	padding: 16px 20px;
	border-radius: 10px;
	background: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	color: #000;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.alph-cat-link:hover{
	background: rgba(214, 60, 60, .12);
}

.alph-cat-link.active{
	background: #D63C3C;
	color: #fff;
}

/* Right-hand panel: one group per specialty, doctors listed underneath.
   Заголовок прилипает к верху коробки (.alph-content-spec скроллится сама
   на любом экране — overflow-y: auto без media-условий), пока не пролистают
   последнего врача этой специальности — дальше его перекрывает заголовок
   следующей группы (штатное поведение sticky в рамках .alph-doc-group). */
.alph-doc-group-title{
	/* Прилипающая ПОЛНОШИРИННАЯ белая подложка — без неё при скролле сквозь
	   узкий бейдж (см. .alph-doc-group-badge ниже) было видно карточки
	   врачей следующей группы, наползающие сбоку. Сам бейдж — внутри, уже
	   не на всю ширину. Отступ до первой карточки — padding-bottom, а НЕ
	   margin-bottom: margin остаётся прозрачным снаружи sticky-блока, и в
	   этом зазоре при скролле было видно карточку врача из-под заголовка. */
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	padding-bottom: 18px;
	/* Собственный композитный слой — без него на границе смены двух
	   прилипающих заголовков подряд браузер иногда рисует один кадр с
	   "просвечивающим" предыдущим содержимым под текстом (замечено и
	   подтверждено принципалом на скриншотах, не поймано на статичном
	   прокрученном кадре — эффект именно во время скролла). */
	transform: translateZ(0);
	will-change: transform;
	/* Дополнительная страховка от того же самого — subpixel-зазор в 1px
	   над sticky-блоком при округлении координат во время скролла, через
	   который на долю кадра проглядывает соседняя карточка. box-shadow
	   тем же цветом фона перекрывает этот зазор, не тратя реальный layout. */
	box-shadow: 0 -2px 0 0 #fff;
}

.alph-doc-group-title-inner{
	/* Обёртка ровно по высоте бейджа (без нижнего 18px заголовка) — flex +
	   align-items:center центрирует линию математически точно по середине
	   бейджа на любом экране/шрифте. */
	position: relative;
	display: flex;
	align-items: center;
	padding: 8px 0;
}

@media (min-width: 1280px){
	.alph-doc-group-title-inner::before{
		/* ::before, а НЕ ::after — важно: ::after красится ПОСЛЕ обычного
		   содержимого (после бейджа), поэтому линия оказывалась ПОВЕРХ красной
		   заливки, видна прямо на бейдже. ::before красится ДО содержимого —
		   бейдж перекрывает её своей непрозрачной заливкой, видны только
		   отрезки линии по бокам. Только десктоп (xl+, было lg — порог поднят
		   вместе с остальными мобильными правилами блока) — на мобильном/lg
		   не нужна. */
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 1px;
		background: #D63C3C;
	}
}

.alph-doc-group-badge{
	/* Тот же размер, что у ФИО врача (.alph-doc-name) — просто заглавными. */
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #fff;
	background: #D63C3C;
	border-radius: 10px;
	padding: 8px 16px;
	/* position:absolute у линии (.alph-doc-group-title-inner::before) красится
	   ПОВЕРХ обычного статичного контента вне зависимости от ::before/::after —
	   это правило CSS stacking order, не порядок в разметке. Явный
	   position+z-index здесь гарантированно поднимает бейдж НАД линией. */
	position: relative;
	z-index: 1;
}

.alph-doc-link{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-decoration: none;
	/* Первая буква ФИО врача начинается там же по X, где первая буква
	   заголовка внутри .alph-doc-group-badge (padding-left: 16px). */
	padding: 13px 0 13px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.alph-doc-link:last-child{
	border-bottom: none;
}

.alph-doc-text{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.alph-doc-name{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
	color: #000;
	display: flex;
	align-items: center;
}

.alph-doc-dot{
	/* Кружок слева от каждого пункта (врач/услуга) в правом списке. */
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9C9C9C;
	flex-shrink: 0;
	margin-right: 10px;
}

.alph-doc-link:hover .alph-doc-name{
	color: #D63C3C;
}

.alph-doc-spec{
	font-size: 15px;
	font-weight: 300;
	color: #8c8c8c;
	margin-top: 4px;
}

.alph-doc-exp{
	font-size: 14px;
	font-weight: 400;
	color: #8c8c8c;
	margin-top: 2px;
}

.alph-doc-photo{
	box-sizing: border-box;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	padding: 10px;
	border-radius: 50%;
	background: #F4F3F1;
	border: 1.5px solid rgba(214, 60, 60, .5);
	overflow: hidden;
}

.alph-doc-photo img{
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 2%;
}

@media (min-width: 1200px){
	.alph-doc-name{
		font-size: 22px;
	}
	.alph-doc-group-badge{
		font-size: 22px;
	}
	.alph-doc-photo{
		width: 92px;
		height: 92px;
		padding: 11px;
	}
}

.alph-doc-group{
	margin-bottom: 21px;
}

.alph-doc-group:last-child{
	margin-bottom: 0;
}

/* Услуги (Диагностика/Центр хирургии/Кардиоцентр, см. alph.php →
   .svc-wrap): вместо серого левого списка категорий — карточки всех услуг
   сеткой. Всё тут, а не Tailwind-классами — dist/output.css статичный
   (см. FILES.md). */
.svc-wrap{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.svc-wrap .svc-search{
	margin-bottom: 0;
	/* К левому краю, шириной со всем рядом верхних вкладок — значение ставит
	   new.js (syncSvcSearchWidth); до него и без JS — на всю ширину. */
	align-self: flex-start;
	width: var(--svc-search-width, 100%);
	max-width: 100%;
}

.svc-panels{
	border: 1px solid #DBDBDB;
	border-radius: 20px;
	padding: 32px;
	box-sizing: border-box;
}

.svc-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* Заполнение по столбцам: алфавит идёт сверху вниз, потом в следующий
	   столбец. Число строк приходит из alph.php (--svc-rows-3/2). */
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--svc-rows-3), auto);
	gap: 12px;
}

.svc-card{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 68px;
	padding: 14px 18px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: #F5F5F5;
	color: #000;
	text-decoration: none;
	box-sizing: border-box;
	transition: background .15s, border-color .15s;
}

.svc-card:hover{
	background: #fff;
	border-color: #D63C3C;
}

.svc-card-name{
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
	min-width: 0;
}

.svc-card:hover .svc-card-name{
	color: #D63C3C;
}

.svc-card-arrow{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	color: #D63C3C;
	transition: background .15s, color .15s;
}

.svc-card:hover .svc-card-arrow{
	background: #D63C3C;
	color: #fff;
}

/* Поиск по своей вкладке (см. new.js). Пока он активен, сетка идёт
   обычными строками: при заполнении по столбцам с фиксированным числом
   строк найденные карточки сбивались бы в первый столбец. */
.svc-wrap.is-searching .svc-grid{
	grid-auto-flow: row;
	grid-template-rows: none;
}

.svc-card.svc-hidden{
	display: none;
}

.svc-empty{
	display: none;
	padding: 24px 0;
	text-align: center;
	font-size: 16px;
	color: #8c8c8c;
}

.svc-empty.visible{
	display: block;
}

@media (max-width: 1279.98px){
	.svc-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(var(--svc-rows-2), auto);
	}
	.svc-panels{
		padding: 24px;
	}
	.svc-card-name{
		font-size: 16px;
	}
}

/* Телефон (одна колонка): плиток нет совсем — компактный список названий
   с точкой слева (как .alph-doc-dot), без фона и рамок, чтобы не занимать
   много места. */
@media (max-width: 767.98px){
	.svc-panels{
		padding: 12px 16px;
	}
	.svc-grid,
	.svc-wrap.is-searching .svc-grid{
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.svc-card,
	.svc-card:hover{
		background: transparent;
		border: 0;
		border-radius: 0;
	}
	.svc-card{
		justify-content: flex-start;
		gap: 10px;
		min-height: 0;
		padding: 9px 0;
	}
	.svc-card::before{
		content: '';
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #9C9C9C;
		flex-shrink: 0;
	}
	.svc-card:hover::before{
		background: #D63C3C;
	}
	.svc-card-name{
		font-size: 18px;
		line-height: 1.3;
	}
	.svc-card-arrow{
		display: none;
	}
}

.list-disc{
	list-style: none;
	li{
		position: relative;
		&:before{
			content: '';
			display: block;
			position: absolute;
			width: 11px;
			height: 11px;
			min-width: 11px;
			min-height: 11px;
			background: #D63C3C;
			left: -27px;
			top: 12px;
			border-radius: 100%;
		}
	}

}
@media(max-width: 1023px){
	.list-disc{

		li{

			&:before{
				content: '';
				display: block;
				position: absolute;
				width: 7px;
				height: 7px;
				min-width: 7px;
				min-height: 7px;
				background: #D63C3C;
				left: -15px;
				top: 8px;
				border-radius: 100%;
			}
		}

	}
}
.list-disc.active{
	display: flex !important;
}



.doctors-slider .swiper-slide,
.doctors-items .doctor-item {
	border-radius: 10px;
	overflow: hidden;
}

/* Отступ между блоком «Контакты» (карта) и бегущей строкой CL Prime (#company,
   include/mainpage/11_company.php): раньше карта прилегала к ней вплотную.
   Значения как у .mb-64 в theme.min.css. Если у #kontakty свой нижний отступ
   (напр. mb-128 на странице клиники), отступы схлопываются — берётся больший. */
#kontakty + #company{
	margin-top: 64px;
}

@media (max-width: 1200px){
	#kontakty + #company{
		margin-top: 48px;
	}
}

@media (max-width: 767.98px){
	#kontakty + #company{
		margin-top: 32px;
	}
}
/* Страница /uslugi/: у плитки услуги слева иконка раздела (.svc-card-icon, см.
   news/uslugi/bitrix/news.list/.default/template.php). Название растягивается
   между иконкой и стрелкой. На телефоне плитки — компактный список с точкой,
   иконку там не показываем. */
.svc-card-icon{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
}

.svc-card-icon img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.svc-card-icon + .svc-card-name{
	flex: 1;
}

@media (max-width: 767.98px){
	.svc-card-icon{
		display: none;
	}
}

/* Ссылка на страницу самого раздела над плитками вкладки на /uslugi/ (отступы даёт gap у .svc-wrap) */
.svc-section-link{
	align-self: flex-start;
	margin-left: 16px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: #D63C3C;
	text-decoration: none;
}

/* Стрелка справа — чтобы было видно, что это ссылка */
.svc-section-link::after{
	content: "\2192";
	display: inline-block;
	margin-left: 8px;
	transition: transform .15s;
}

@media (max-width: 767.98px){
	.svc-section-link{
		font-size: 18px;
	}
}

.svc-section-link:hover::after{
	transform: translateX(4px);
}

/* Страница /uslugi/ на телефоне: вместо 16 кнопок-разделов — выпадающий список
   (разметка в news/uslugi/bitrix/news.list/.default/template.php, логика — new.js:
   .custom-option → switchTab). Класс .hidden у списка ставит и снимает сам new.js. */
.uslugi-tabs-mobile{
	display: none;
}

@media (max-width: 767.98px){
	.uslugi-tabs-desktop{
		display: none;
	}
	.uslugi-tabs-mobile{
		display: block;
	}
}

.uslugi-select{
	position: relative;
	width: 100%;
}

.uslugi-select__trigger{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid #DBDBDB;
	border-radius: 10px;
	background: #fff;
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
}

.uslugi-select__trigger svg{
	flex-shrink: 0;
}

.uslugi-select__options{
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 6px 0 !important;
	max-height: 60vh;
	overflow-y: auto;
	list-style: none;
	border: 1px solid #DBDBDB;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.uslugi-select__option{
	padding: 12px 16px;
	font-size: 16px;
	line-height: 1.3;
	cursor: pointer;
}

.uslugi-select__option:hover{
	background: #F5F5F5;
	color: #D63C3C;
}