/*   
Theme Name: Ретина
Theme URI: наш сайт
Version: 3.0
Tags: глазной, офтальмолог
Description: Глазная клиника
Author: saxa:p
Author URI: Запорожье
*/
:root {
    --width-site: 1200px;
	--color-font: #283D55;
}
body {
    font-family: Arial, Helvetica, Sans-serif;
	margin: 0 0;
	background-color: #F1F6F7;
}
/*форматирование текста*/
.container p {
    margin: 0 0 10px 0;
	font-size: medium;
}
/*контент main и сайдбар*/
.container {
    width: var(--width-site);
    margin: 0 auto;
    padding: 0px;
    display: flex;
    box-sizing: border-box;
}
.main-content {
    flex: 1;
    min-width: 0; 
    padding-right: 10px;
}
.sidebar {
    width: 280px;
	box-sizing: border-box;
	height: fit-content;
}
/* Мобильная адаптация */
@media (max-width: 1024px) {
    .container {
        padding: 0 10px;
    }
    .main-content {
        width: 100%;
        padding-right: 0;
		flex: auto;
    }
    .sidebar {
        width: 100%;
        margin-top: 20px; 
    }

}
/* меню в хедере*/
.topbar {
  background-color: #fff;
  color: #077181;
  max-width: 100%;
  padding: 10px 0;
}

.container {
  max-width: var(--width-site);
  /*margin: auto;*/
  display: flex;
  /*align-items: center;*/
  justify-content: space-between;
  flex-wrap: wrap;
  /*padding: 0 10px;*/
}

.left-section {
  display: flex;
  align-items: center;
}

.logo {
  width: 120px;
  height: 95px;
  margin-right: 10px;
}
.gerb {
    width: 55px;
    height: 71px;
    margin-right: 10px;
}

.hospital-name {
  font-weight: bold;
  line-height: 1.2;
}

.info-section {
  display: flex;
  gap: 70px;
  align-items: center;
  flex-wrap: wrap;
}

.info-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 25px;
}
.info-item:hover{color:#64818c;}

.buttons-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

.btn.primary {
  background-color: #077181;
  color: white;
}
.btn.primary:hover {
  background-color: #0A899C;
  color: white;
}

.btn.secondary {
  background-color: white;
  color: #333;
  border: 1px solid #ccc;
}

/* Модальное окно */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  max-width: 400px;
  position: relative;
  border-radius: 10px;
}

.close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 20px;
  cursor: pointer;
}

/* Мобильная адаптация */
@media screen and (max-width: 1199px) {
  .container {max-width: 100%;padding: 0 10px 0 10px}
  .info-item {font-size: 35px;}
  }
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    align-items: center;
    /*text-align: center;*/
	max-width: 100%;
  }

  .info-section {
    justify-content: center;
    margin-top: 10px;
  }

  .info-item span {
    display: none;
  }

  .buttons-section {
    width: 80%;
    margin-top: 10px;
  }

  .btn {
    width: 100%;
  }
}
/*меню хедер конец*/
/* Адаптация для мобильных */
@media (max-width: 600px) {
    .header-text {
        font-size: 10px;
    }
    .header-icons {
        gap: 10px;
    }
}
/*шапка с логотипом и кнопкой и адресом*/
/* Общие стили */
    .container-heder {
  max-width: var(--width-site);
  margin: 20px auto;
  padding: 0px 12px;
  /*background: #fff;*/
  border-radius: 10px;
  /*box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
    }
.proinput form input {
    font-size: 25px !important;
}
/*полоса с хлебными крошками, загловком и лписание*/
.page-header-wrapper {
  background: linear-gradient(90deg, #1D7B88 0%, #055D6D 100%);
  color: white;
  padding: 30px 0;
  width: 100%; /* тянется от края до края */
  margin-bottom: 10px;
}

.page-header-inner {
  max-width: var(--width-site);
  margin: 0 auto;
  padding: 0 10px;
}

.breadcrumbs {
  font-size: 14px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumbs a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.breadcrumbs .separator {
  margin: 0 5px;
}

.page-title {
  font-size: 50px;
  font-weight: 400;
  margin: 10px 0 0 0;
}

.page-description {
  font-size: 20px;
  margin-top: 10px;
  max-width: 100%;
}
@media (max-width: 1024px) {
  .page-title {
    font-size: 28px;
  }
}

/*меню*/
.main-nav {
  max-width: var(--width-site);
  margin: 20px auto;
  padding: 0 20px;
}

.nav-desktop {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-desktop li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 38px;
  background: #ffffff;
  color: #077181;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  font-size: clamp(12px, 1.5vw, 20px);
  text-align: center;
  white-space: nowrap;
  flex-grow: 1;
  transition: background 0.2s, transform 0.2s;
}

.nav-desktop li a:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}

.nav-desktop .hbmen a {
    background-color: #938e24;
    color: #fff;
}
.nav-desktop .current-menu-item a {
    background-color: #0A6778;
    color: #fff;
}
.nav-desktop .hbmen a:hover {
    background-color: #706e36;
    color: #fff;
}

/* Мобильное меню скрыто по умолчанию */
.nav-mobile {
  display: none;
}

#menu-toggle {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  cursor: pointer;
}

#mobile-menu {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

#mobile-menu li {
  margin-bottom: 6px;
}

#mobile-menu li a {
  display: block;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  color: #333;
}

.hidden {
  display: none;
}

/* Медиа-запрос для мобильной версии */
@media (max-width: 1024px) {
  .nav-desktop {
    display: none;
  }

  .nav-mobile {
    display: block;
  }
}
/*хлебные крошки*/
.breadcrumb-wrapper {
  max-width: var(--width-site);
  margin: 20px auto;
  padding: 0 20px;
}

.breadcrumbs {
  font-size: 15px;
  color: #666;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumbs a {
  color: #007BFF;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs .separator {
  margin: 0 5px;
  color: #999;
}

.breadcrumbs .current {
  color: #999;
}

/* Адаптация под маленькие экраны */
@media (max-width: 600px) {
  .breadcrumbs {
    font-size: 12px;
  }
}

/*блок контента*/
.content h2, .content h3, .content h4, .content h5, .content h6 {font-weight: 700;margin-block-start: 1.5em;margin-block-end: 0.5em;}
.content {
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  background-color: #fff;
  color: var(--color-font);
}

/* Текстовые элементы */
.content p {
  font-size: 1.2em;
  margin-bottom: 1em;
  color: var(--color-font);
}

/* Списки */
.content ul {
  font-size: 1.1em;
  padding-left: 1.2em;
  list-style-type: disc;
  color: var(--color-font);
}

.content ul ul {
  list-style-type: circle;
}

.content ol {
  font-size: 1.1em;
  padding-left: 1.5em;
  list-style-type: decimal;
  counter-reset: item;
}

.content ol li {
  counter-increment: item;
}

.content ol li::marker {
  content: counters(item, ".") ". ";
}

.content li {
  margin-bottom: 0.5em;
}

/* Подстрочный и надстрочный текст */
.content sub {
  font-size: 0.8em;
  vertical-align: sub;
}

.content sup {
  font-size: 0.8em;
  vertical-align: super;
}

/* Цитаты */
.content blockquote {
  background: #bad8ea;
  padding: 15px 15px 1px;
  margin: 1em 0;
  border-left: 4px solid #ccc;
  position: relative;
  font-style: italic;
}

.content blockquote::before {
  content: "“";
  font-size: 3em;
  color: #000;
  position: absolute;
  top: -6px;
  left: 10px;
}

.content q {
  quotes: "“" "”" "‘" "’";
  font-style: italic;
}

/* Изображения */
.content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1em;
}

.content img.alignnone {
  float: left;
  margin: 0 15px 15px 0;
}

.content img.alignleft {
  float: left;
  margin: 0 15px 15px 0;
}

.content img.alignright {
  float: right;
  margin: 0 0 15px 15px;
}

.content img.aligncenter {
  display: block;
  margin: 0 auto 15px auto;
}

/* Таблицы */
.content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}

.content th, .content td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.content table-responsive {
  overflow-x: auto;
}

/* Горизонтальный скролл на узких экранах */
@media (max-width: 768px) {
  .content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
/*сайдбар*/
/*меню сайта*/
.sidebar-menu {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

.menu-title {
  font-size: 1.15em;
  color: #15a0b9;
  margin: 5px 0 10px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.menu-buttons {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-buttons li {
  margin-bottom: 6px;
}

.menu-buttons li:last-child {
  margin-bottom: 0;
}

.menu-buttons a {
  display: block;
  text-decoration: none;
  color: #16a3bb;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-size: 1em;
}

.menu-buttons a:hover {
  background-color: #f0f3ff;
}

/* Мобильная версия */
@media screen and (max-width: 900px) {
  .sidebar {
    width: 100%;
  }

  .menu-buttons a {
    width: 100%;
    box-sizing: border-box;
  }
}
/*обратная связь*/
.contact-buttons {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-buttons li {
  margin-bottom: 6px;
}

.contact-buttons li:last-child {
  margin-bottom: 0;
}

.contact-buttons a {
  display: block;
  text-decoration: none;
  color: #3344aa;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-size: 1em;
}
.contact-buttons a:hover {
  background-color: #f0f3ff;
}

.contact-buttons a i {
  margin-right: 8px;
}

/* Зелёная кнопка */
.contact-buttons .green-button {
  background-color: #a5d6a7;
  color: white;
}

.contact-buttons .green-button:hover {
  background-color: #8bcf93;
}

/* Светло-синяя кнопка */
.contact-buttons .callback-button {
  background-color: #E8F0F3;
  color: #3344aa;
}

.contact-buttons .callback-button:hover {
  background-color: #d6e8ee;
}

/* Серая кнопка с розовым текстом */
.contact-buttons .promo-button {
  background-color: #D9E0E2;
  color: #D0054A;
}

.contact-buttons .promo-button:hover {
  background-color: #cfd6d8;
}

/* Мобильная версия */
@media screen and (max-width: 900px) {
  .contact-buttons a {
    width: 100%;
    box-sizing: border-box;
  }
}

/* подвал */
        
        .footer-container {
			background: linear-gradient(90deg, #1D7B88 0%, #055D6D 100%);
            width: 100%;
            padding: 20px 0;
            color: white;
			margin-top: 10px;
        }
        
        .footer-content {
            width: 100%;
            max-width: var(--width-site);
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            padding: 0 5px;
            box-sizing: border-box;
        }
        
        .footer-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .footer-block-wide {
            width: 65%;
        }
        
        .footer-block-narrow {
            width: 35%;
        }
        
        .footer-block {
            box-sizing: border-box;
            padding-right: 15px;
        }
        
        .footer-block p {
            margin: 5px 0;
            line-height: 1.4;
        }
        
        .footer-links {
            display: flex;
            flex-direction: column;
        }
        
        .footer-links a {
            color: white;
            text-decoration: none;
            margin-bottom: 5px;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        .social-icons {
            display: flex;
            margin-top: 10px;
        }
        
        .social-icon {
            width: 32px;
            height: 32px;
            margin-right: 10px;
            background-color: white;
            border-radius: 50%;
            /* Здесь должны быть иконки мессенджеров */
        }
        
        .copyright {
            font-size: 14px;
        }
        
        .reviews {
            display: flex;
            flex-direction: column;
        }
        
        /* Адаптация для мобильных устройств */
        @media (max-width: 768px) {
            .footer-block-wide, 
            .footer-block-narrow {
                width: 100%;
                padding-right: 0;
                margin-bottom: 15px;
            }
            
            .footer-row {
                flex-direction: column;
            }
            
            .social-icons {
                justify-content: center;
            }
        }
/* стили хлебных крошек */
.yoast-breadcrumbs span > span {
  display: inline-block;
  margin-right: 5px;
}

.yoast-breadcrumbs a {
  text-decoration: none;
  padding: 0px 6px;
  /*background-color: #f0f4ff;*/
  color: #fff;
  /*border: 1px solid #c3d3f0;*/
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
  font-size: 13px;
}

.yoast-breadcrumbs a:hover {
  background-color: #00629b;
  color: #fff;
}

.yoast-breadcrumbs .breadcrumb_last {
  display: inline-block;
    padding: 1px 6px;
  /*background-color: #938e24;*/
  color: white;
  font-weight: bold;
  /*border-radius: 4px;*/
  cursor: default;
  font-size: 13px;
}
/*рубрики*/
.post-list h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.post-list h3 a {
  color: #222;
  text-decoration: none;
}

.post-list h3 a:hover {
  text-decoration: underline;
}

/* Пагинация */
.category-posts h3 {
  font-size: 20px;
  margin: 10px 0;
}

.category-posts h3 a {
  color: #003595;
  text-decoration: none;
}

.category-posts h3 a:hover {
  text-decoration: underline;
}

.pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 30px 0;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 8px 12px;
  /*border: 1px solid #003595;*/
  color: #003595;
  text-decoration: none;
  border-radius: 4px;
  background-color: #F6F6F6;
}

.pagination .page-numbers.current {
  background-color: #00629B;
  color: #fff;
}

.pagination .page-numbers:hover {
  background-color: #00629B;
  color: #fff;
}
/* Базовые стили списка рубрик*/

.content .subcategory-list {
	list-style: none;
  margin: 0;
  padding: 0;
  font-size: 18px;     /* шрифт 16px */
}

.subcategory-list li { margin: 0; padding: 0; }

.subcategory-list a {
  display: block;                 /* удобнее ловить hover на всю ширину */
  position: relative;
  padding: 6px 0;                 /* можно подогнать под макет */
  text-decoration: none;          /* убираем стандартное подчёркивание */
  color: inherit;
  transform: translateX(0);
  transition: transform .2s ease, color .2s ease;
}

/* Анимированное подчёркивание: появляется с ПРАВОГО края и тянется влево */
.subcategory-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;            /* растягиваем на всю ширину ссылки */
  bottom: 0;
  height: 0.5px;         /* толщина линии */
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center; /* старт с правого края */
  transition: transform .35s ease;
}

/* Ховер/фокус: сдвиг вправо на 5px и показ подчёркивания */
.subcategory-list a:hover,
.subcategory-list a:focus-visible {
  transform: translateX(5px);
}

.subcategory-list a:hover::after,
.subcategory-list a:focus-visible::after {
  transform: scaleX(1);
}

/* Уважение системной настройки "уменьшить анимацию" */
@media (prefers-reduced-motion: reduce) {
  .subcategory-list a,
  .subcategory-list a::after {
    transition: none;
  }
}

.entry-content img {
    border-radius: 10px;
}
.wp-video {margin: 0 auto;}

/*руброка лечение*/
.category-posts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.category-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: #EDFAFF;
    border-radius: 10px;
    padding: 15px;
}

.category-card__img img {
    width: 250px;
    height: 175px;
    object-fit: cover;
    border-radius: 10px;
}

.category-card__content {
    flex: 1;
}

.category-card__title {
    font-size: 1.4em;
    font-weight: 600;
    color: #00629B;
    text-decoration: none;
}

.category-card__excerpt {
    margin-top: 8px;
    font-size: 1em;
    line-height: 1.5;
    color: #333;
}

.category-card__more {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    /*border: 1px solid #00629B;*/
    border-radius: 6px;
    color: #00629B;
    text-decoration: none;
    transition: 0.3s;
}

.category-card__more:hover {
    background-color: #00629B;
    color: #fff;
}

/* Пагинация */
.pagination {
    text-align: center;
    margin-top: 30px;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border-radius: 6px;
    background: #fff;
    color: #00629B;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.pagination .current {
    background: #00629B;
    color: #fff;
}

.pagination a:hover {
    background: #00629B;
    color: #fff;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .category-card {
        flex-direction: column;
        align-items: center;
    }

    .category-card__img img {
        width: calc(100% - 20px);
        height: auto;
        border-radius: 10px;
    }

    .category-card__content {
        text-align: center;
        padding: 0 10px;
    }

    .category-card__more {
        margin-top: 15px;
    }
}
/*автоматическая подпись под картинкой*/
.image-with-caption {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.image-with-caption img {
    border-radius: 10px;
    display: block;
    max-width: 100%;
    height: auto;
}

.signature-title {
    text-align: center;
}
.signature-text {
    padding: 5px 10px;
    background: #f2f5f7;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 10px;
	    color: #333;
    font-size: 14px;
}
.portal-block {
    text-align: center;
}

.portal-title {
    font-size: 22pt;
    font-weight: 700;
}

.portal-city {
    margin-top: 5px;
    font-size: 16px;
}

.portal-region {
    margin-top: 3px;
    font-size: 8pt;
    font-weight: 700;
}
/*список в рубриках*/
.category-wrapper .subcategory-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px; /* вертикальный и горизонтальный отступ */
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-wrapper .subcategory-list li {
  margin: 0;
  padding: 0;
}
@media (max-width: 992px) {
  .category-wrapper .subcategory-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .category-wrapper .subcategory-list {
    grid-template-columns: 1fr;
  }
}
/*картинка в рубрике*/
.zoom-img {
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.zoom-img:hover {
    transform: scale(1.07);
}
.zoom-wrap {
    overflow: hidden;
}
/*разметка страницы клиники*/
.clinic-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:12px;
    padding:20px;
    margin:0;
    box-sizing:border-box;
}

.clinic-top{
    display:flex;
    gap:25px;
}

.clinic-info{
    flex:1;
}

.clinic-row{
    display:flex;
    gap:15px;
    margin-bottom:18px;
    align-items:flex-start;
}

.clinic-row i{
    width:22px;
    color:#bdbdbd;
    font-size:18px;
    margin-top:3px;
}

.clinic-row .label{
    display:block;
    color:#888;
    font-size:14px;
    margin-bottom:-5px;
}

.clinic-row .value{
    display:block;
    font-size:16px;
    color:#222;
    line-height:1.5;
}

.clinic-side{
    width:340px;
    flex-shrink:0;
}

.clinic-side img{
    width:100%;
    height:240px;
    object-fit:cover;
    border-radius:10px;
    display:block;
}

.clinic-actions{
    margin-top:15px;
}

.editor-choice{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff8d6;
    color:#b8860b;
    padding:8px 12px;
    border-radius:20px;
    font-size:14px;
    margin-bottom:0;
}

.editor-choice i{
    color:#ffc107;
}

.clinic-phone,
.clinic-site{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 15px;
    border:1px solid #e5e5e5;
    border-radius:8px;
    text-decoration:none;
    color:#222;
    margin-bottom:10px;
    transition:.2s;
}

.clinic-phone:hover,
.clinic-site:hover{
    background:#f7f7f7;
}

.clinic-about{
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #e5e5e5;
}

.about-title{
    display:inline-block;
    margin-bottom:12px;
    /*font-size:22px;*/
    font-weight:600;
    text-decoration:none;
    color:#1b5fc1;
}

.about-title:hover{
    text-decoration:underline;
}
.clinic-rating-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:15px;
}

.rating-box{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

.stars{
    display:flex;
    gap:2px;
}

.stars i{
    color:#ffb400;
    font-size:18px;
}

.rating-value{
    font-size:18px;
    font-weight:700;
    color:#222;
}

/* Адаптивность */

@media (max-width:768px){

    .clinic-top{
        flex-direction:column;
    }

    .clinic-side{
        width:100%;
    }

    .clinic-side img{
        height:220px;
    }

    .clinic-phone,
    .clinic-site{
        justify-content:center;
    }
}
/*карточка врача в рубрике и на странице клиники*/
.doctor-card{
    display:flex;
    gap:25px;
    padding:20px;
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:12px;
    margin:25px 0;
}

.doctor-photo{
    width:250px;
    flex-shrink:0;
}

.doctor-photo img{
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:10px;
    display:block;
}

.doctor-content{
    flex:1;
}

.doctor-name{
    margin:0 0 10px;
    font-size:34px;
    line-height:1.2;
    font-weight:600;
}
.doctor-content h2 {
    font-weight: 700;
    margin-block-start: 0em;
    margin-block-end: 0.5em;
}

.doctor-position{
    font-size:20px;
    color:#666;
    margin-bottom:15px;
}

.doctor-rating{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

.doctor-stars{
    color:#ffb400;
    font-size:20px;
}

.doctor-rating-value{
    font-weight:700;
    font-size:18px;
}

.doctor-comments{
    color:#666;
}

.doctor-meta{
    margin-bottom:20px;
}

.doctor-item{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.doctor-item i{
    width:20px;
    color:#0b7997;
}

.doctor-item a{
    color:#0b7997;
    text-decoration:none;
}

.doctor-item a:hover{
    text-decoration:underline;
}

.doctor-about{
    color:#333;
    margin-bottom:25px;
}

.doctor-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.doctor-btn{
    padding:12px 24px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:.2s;
}

.doctor-btn-main{
    border:1px solid #d8d8d8;
    color:#333;
}

.doctor-btn-main:hover{
    background:#f5f5f5;
}

.doctor-btn-accent{
    background:#0b7997;
    color:#fff;
}

.doctor-btn-accent:hover{
    opacity:.9;
}
@media (max-width:768px){

    .doctor-card{
        flex-direction:column;
    }

    .doctor-photo{
        width:100%;
    }

    .doctor-photo img{
        height:auto;
    }

    .doctor-name{
        font-size:28px;
    }

    .doctor-buttons{
        flex-direction:column;
    }

    .doctor-btn{
        text-align:center;
    }

}

/*карточка врача*/
.doctor-profile{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    overflow:hidden;
    margin:0;
}

.doctor-header{
    display:flex;
    gap:30px;
    padding:30px;
}

.doctor-photo{
    width:370px;
    flex-shrink:0;
}

.doctor-photo img{
    width:100%;
    display:block;
    border-radius:12px;
    object-fit:cover;
}

.doctor-info{
    flex:1;
}

.doctor-name{
    margin:0 0 10px;
    font-size:38px;
    line-height:1.2;
    font-weight:700;
}

.doctor-position{
    display:inline-block;
    background:#eef7ff;
    color:#0b7997;
    padding:8px 14px;
    border-radius:30px;
    font-size:15px;
    margin-bottom:20px;
}

.doctor-rating{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

.doctor-comments{
    color:#666;
}

.doctor-contacts{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:25px;
}

.doctor-contact{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    text-decoration:none;
    color:#333;
}

.doctor-contact:hover{
    background:#f8fafc;
}

.doctor-appointment{
    display:inline-block;
    background:#0b7997;
    color:#fff;
    text-decoration:none;
    padding:14px 28px;
    border-radius:8px;
    font-size:17px;
    font-weight:600;
}

.doctor-appointment:hover{
    opacity:.9;
}

.doctor-about{
    border-top:1px solid #edf0f2;
    padding:30px;
}

.doctor-about h2{
    margin:0 0 20px;
    /*font-size:28px;*/
}

@media (max-width:768px){

    .doctor-header{
        flex-direction:column;
        padding:20px;
    }

    .doctor-photo{
        width:100%;
    }

    .doctor-name{
        font-size:28px;
    }

    .doctor-contacts{
        flex-direction:column;
    }

    .doctor-contact{
        width:100%;
        box-sizing:border-box;
    }

    .doctor-appointment{
        display:block;
        text-align:center;
    }

}
}
.main-content #comments {
    margin: 0 auto;
}
/*карточка клиники на странице врачей*/
.clinic-short-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:25px;
    margin:30px 0;
}

.clinic-short-header{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
}

.clinic-logo{
    width:80px;
    flex-shrink:0;
}

.clinic-logo img{
    width:100%;
    display:block;
}

.clinic-label{
    display:block;
    color:#777;
    font-size:14px;
    margin-bottom:5px;
}
.clinic-title-wrap h2 {
    font-weight: 700;
    margin-block-start: 0em;
    margin-block-end: 0.5em;
}
.clinic-title{
    margin:0;
    font-size:34px;
    line-height:1.3;
}

.clinic-short-content{
    display:grid;
    grid-template-columns:280px 3fr 5fr;
    gap:25px;
}

.clinic-photo img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px;
    display:block;
}

.clinic-row{
    display:flex;
    gap:12px;
    margin-bottom:11px;
    line-height:1.6;
}
.clinic-row a{text-decoration: none;}
.clinic-row i{
    width:20px;
    color:#0b7997;
    margin-top:3px;
}


.clinic-btn{
    text-decoration:none;
    padding:14px 24px;
    border-radius:8px;
    font-weight:600;
}

.clinic-btn-primary{
    background:#0b7997;
    color:#fff;
}

.clinic-btn-secondary{
    border:1px solid #d9d9d9;
    color:#333;
}

.clinic-btn-secondary:hover{
    background:#f5f5f5;
}
@media (max-width:768px){

    .clinic-short-content{
        grid-template-columns:1fr;
    }

    .clinic-short-header{
        flex-direction:column;
        text-align:center;
    }

    .clinic-title{
        font-size:26px;
    }


    .clinic-btn{
        text-align:center;
    }

}
/*вывод рубрики клиники*/
.clinic-card-30 {
  width: 100%;
  max-width: 888px;
  margin: 0 auto 20px auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  
  display: flex;
  flex-direction: column;
}

/* Картинка на мобильном подстраивается под пропорции экрана */
.clinic-image-wrapper-30 {
  width: 100%;
  /*height: 200px;*/
}

.clinic-image-30 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clinic-content-30 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clinic-title-block-30 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.clinic-title-block-30 h2{margin-block-start:0;}

.clinic-logo-30 {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.clinic-name-30 {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

/* Мета и Контакты */
.clinic-meta-30 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #64748b;
}

.clinic-price-info-30 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.price-value-30 {
  color: #0f172a;
  font-weight: 700;
}

.clinic-rating-30 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stars-30 {
  color: #ffb800;
}

.rating-number-30 {
  font-weight: 600;
  color: #1e293b;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
}

.clinic-contacts-30 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #475569;
}

.contact-item-30 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.icon-30 {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: #64748b;
  flex-shrink: 0;
}

/* Кнопки на мобильном */
.clinic-actions-30 {
  padding: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-30 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
}

.btn-primary-30 {
  background-color: #006677;
  color: #ffffff;
}

.btn-secondary-30 {
  background-color: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
}


/* ==========================================================================
   ПЛАНШЕТНЫЙ РЕЖИМ (Экран от 576px до 767px)
   Переключаемся на Grid. 2 колонки сверху (картинка и инфо), кнопки падают вниз.
   ========================================================================== */
@media (min-width: 576px) {
  .clinic-card-30 {
    display: grid;
    /* Левая колонка строго 180px, правая забирает всё оставшееся место */
    grid-template-columns: 180px 1fr; 
    padding: 16px;
    gap: 16px;
  }

  .clinic-image-wrapper-30 {
    grid-column: 1;
    width: 100%; /* Занимает ровно выделенные сеткой 180px */
    height: 135px; /* Пропорция кадра сохраняется автоматически */
    border-radius: 8px;
  }

  .clinic-content-30 {
    grid-column: 2;
    padding: 0;
  }

  /* Блок кнопок растягивается на обе колонки внизу */
  .clinic-actions-30 {
    grid-column: 1 / -1; 
    padding: 4px 0 0 0;
    flex-direction: row; /* Кнопки встают в ряд: 50% на 50% */
  }

  .btn-30 {
    flex: 1;
  }
}


/* ==========================================================================
   ДЕCКТОПНЫЙ РЕЖИМ (Экран от 768px и до упора в 888px)
   Идеальная трехколоночная структура по вашему макету.
   ========================================================================== */
@media (min-width: 768px) {
  .clinic-card-30 {
    /* Фиксируем левую (240px) и правую (220px) колонки. Центр — резиновый. */
    grid-template-columns: 240px 1fr 220px;
    align-items: stretch;
    gap: 20px;
  }

  .clinic-image-wrapper-30 {
    grid-column: 1;
    height: 100%; /* Растягивается по высоте контента в карточке */
    min-height: 150px;
    border-radius: 10px;
  }
.clinic-image-wrapper-30 img{height: inherit;}  

  .clinic-content-30 {
    grid-column: 2;
    justify-content: space-between; /* Равномерно распределяет элементы по высоте */
  }

  .clinic-name-30 {
    font-size: 20px;
  }

  /* Кнопки уходят в третью (правую) колонку */
  .clinic-actions-30 {
    grid-column: 3;
    padding: 0;
    flex-direction: column; /* Снова выстраиваются вертикально */
    justify-content: center;
    gap: 10px;
  }
  
  .btn-30 {
    flex: none; /* Сбрасываем флекс-пропорции планшета */
  }
}
/*фильтр клиник*/
/* Контейнер формы — выстраивает всё в ряд */
.clinic-filter-horizontal-30 {
    display: flex;
    flex-wrap: wrap; /* Чтобы на мобильных экранах элементы аккуратно переносились */
    align-items: center;
    gap: 15px; /* Отступы между чекбоксами и кнопками */
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
}

/* Стилизация элементов-лейблов с чекбоксами */
.clinic-filter-horizontal-30 .filter-item-30 {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}

/* Кнопка "Выбор пользователей" */
.btn-filter-toggle-30 {
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}
.btn-filter-toggle-30.active {
    background: #ffeb3b;
    border-color: #fbc02d;
    font-weight: bold;
}

/* Общие стили для кнопок Применить / Сбросить */
.clinic-filter-horizontal-30 .btn-30 {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    border: none;
    cursor: pointer;
    text-align: center;
}

/* Кнопка применить */
.btn-submit-filter-30 {
    background-color: #0073aa;
    color: #fff;
}
.btn-submit-filter-30:hover {
    background-color: #005177;
}

/* Кнопка сбросить */
.btn-reset-filter-30 {
    background-color: #d32f2f;
    color: #fff !important;
}
.btn-reset-filter-30:hover {
    background-color: #9a0007;
}
/*рубрика врачи*/
.doctor-card-32 {
  width: 100%;
  max-width: 888px;
  margin: 0 auto 20px auto;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  
  display: flex;
  flex-direction: column;
}

/* Фото врача */
.doctor-image-wrapper-32 {
  width: 100%;
  /*aspect-ratio: 3 / 4; */
  overflow: hidden;
}

.doctor-image-32 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Контентный блок */
.doctor-content-32 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doctor-name-32 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 4px;
}
.doctor-info-header-32 h3 {
    margin-block-start: 0;
}

.doctor-specialty-32 {
  font-size: 15px;
  font-weight: 600;
  color: #006677;
  margin-bottom: 2px;
}

.doctor-info-header-32 .doctor-experience-32 {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 10px;
}

/* Рейтинг и отзывы */
.doctor-rating-block-32 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}

.doctor-rating-32 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stars-32 {
  color: #ffb800;
  font-size: 15px;
  letter-spacing: 1px;
}

.kksr-legend {
  font-weight: 700;
  color: #1e293b;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 13px;
}

.doctor-reviews-count-32 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.doctor-reviews-count-32:hover {
  color: #006677;
  text-decoration: underline;
}

.icon-comment-32 {
  width: 16px;
  height: 16px;
  color: #94a3b8;
}

/* Кнопки на мобильном */
.doctor-actions-32 {
  padding: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-32 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s ease;
  text-align: center;
}

.btn-primary-32 {
  background-color: #006677;
  color: #ffffff;
  border: none;
}

.btn-primary-32:hover {
  background-color: #004d5a;
}

.btn-secondary-32 {
  background-color: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
}

.btn-secondary-32:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

/* ==========================================================================
   ПЛАНШЕТНЫЙ РЕЖИМ (от 576px до 767px)
   ========================================================================== */
@media (min-width: 576px) {
  .doctor-card-32 {
    display: grid;
    grid-template-columns: 160px 1fr;
    padding: 16px;
    gap: 16px;
  }

  .doctor-image-wrapper-32 {
    grid-column: 1;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 8px;
  }
.doctor-image-wrapper-32 img {height: stretch;     margin-bottom: 0;}

  .doctor-content-32 {
    grid-column: 2;
    padding: 0;
  }

  .doctor-actions-32 {
    grid-column: 1 / -1;
    padding: 8px 0 0 0;
    flex-direction: row;
    gap: 12px;
  }

  .btn-32 {
    flex: 1;
  }
}

/* ==========================================================================
   ДЕCКТОПНЫЙ РЕЖИМ (от 768px и до упора в 888px)
   ========================================================================== */
@media (min-width: 768px) {
  .doctor-card-32 {
    grid-template-columns: 180px 1fr 220px;
    align-items: center;
    gap: 24px;
    padding: 20px;
  }

  .doctor-image-wrapper-32 {
    grid-column: 1;
    border-radius: 12px;
  }

  .doctor-content-32 {
    grid-column: 2;
    gap: 16px;
  }

  .doctor-name-32 {
    font-size: 22px;
  }

  .doctor-actions-32 {
    grid-column: 3;
    padding: 0;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .btn-32 {
    flex: none;
    padding: 13px 20px;
  }
}
/*фильтр докторов*/
/* Контейнер всей формы фильтра */
.doctor-filter-form-32 {
    background-color: #f7f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: inherit;
}

/* Строка с элементами выбора */
.doctor-filter-form-32 .filter-row-32 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px; /* Большие отступы между селектами как на фото */
}

/* Обертка для выпадающих списков */
.filter-select-wrapper-32 {
    position: relative;
    min-width: 220px;
}

/* Стили выпадающих списков */
.filter-select-32 {
    width: 100%;
    padding: 8px 30px 8px 12px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    appearance: none; /* Убираем дефолтную стрелку браузера */
    -webkit-appearance: none;
    cursor: pointer;
}

/* Кастомная стрелочка для селектов */
.filter-select-wrapper-32::after {
    content: "▼";
    font-size: 10px;
    color: #777;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Кнопка-тумблер "Выбор пациентов" */
.btn-filter-toggle-32 {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-filter-toggle-32.active {
    background-color: #fffdf0;
    border-color: #fbc02d;
    font-weight: bold;
}

/* Кнопки действий (Применить / Сбросить) */
.btn-filter-action-32 {
    display: inline-block;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

/* Синяя кнопка применить */
.btn-submit-32 {
    background-color: #0073aa;
    color: #fff;
}
.btn-submit-32:hover {
    background-color: #005984;
}

/* Красная кнопка сбросить */
.btn-reset-32 {
    background-color: #d32f2f;
    color: #fff !important;
}
.btn-reset-32:hover {
    background-color: #b71c1c;
}
/* подвал сайта */
.footer-main{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:28px;
    width:100%;
}

/* ЛОГО */

.footer-brand{
    display:flex;
    align-items:center;
    gap:20px;
    flex:0 1 380px;
}

.footer-brand img{
    width:180px;
    height:auto;
    display:block;
}

.footer-title{
    font-size:30px;
    line-height:1;
    font-weight:700;
    color:#fff;
}

.footer-subtitle{
    margin-top:10px;
    font-size:15px;
    color:rgba(255,255,255,.9);
}

/* МЕНЮ */

.footer-menu{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:120px;
    font-size: 14px;
}

.footer-menu a{
    color:#fff;
    text-decoration:none;
}

.footer-menu a:hover{
    text-decoration:underline;
}

/* ИНФО */

.footer-info,
.footer-warning{
    max-width:230px;
    line-height:1.5;
    color:rgba(255,255,255,.75);
    font-size:12px;
}

/* ТЕЛЕФОН */

.footer-phone{
    display:flex;
    align-items:center;
    gap:18px;
    white-space:nowrap;
}

.footer-phone i{
    font-size:42px;
    color:#fff;
}

.footer-phone-label{
    font-size:18px;
    color:#fff;
    margin-bottom:4px;
}

.footer-phone a{
    color:#fff;
    text-decoration:none;
    font-size:32px;
    font-weight:700;
}

/* ПЛАНШЕТ */

@media (max-width:1100px){

    .footer-main{
        flex-wrap:wrap;
    }

    .footer-brand{
        flex-basis:100%;
    }

}

/* ТЕЛЕФОН */

@media (max-width:768px){

    .footer-main{
        flex-direction:column;
        gap:25px;
    }

    .footer-brand{
        flex-direction:column;
        text-align:center;
    }

    .footer-menu{
        width:100%;
        flex-direction:row;
        flex-wrap:wrap;
        gap:15px 25px;
    }

    .footer-info,
    .footer-warning{
        max-width:none;
    }

    .footer-phone{
        justify-content:center;
        width:100%;
    }

}
.footer-bottom{
    margin: 0 auto;
    max-width: 275px;
}
/*блоки в диагностике на лечение*/
.diagnostika-related {
    margin: 5px 0;
}
.diagnostika-related h2 {
    margin-block-start: 0;
    margin-block-end: 0;
}

.diagnostika-related h2 {
    margin-bottom: 20px;
    text-align: center;
}

.diagnostika-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.diagnostika-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: .2s;
}

.diagnostika-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.diagnostika-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.diagnostika-content {
    padding: 15px;
}

.diagnostika-title {
    color: #222;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.diagnostika-excerpt {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .diagnostika-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .diagnostika-grid {
        grid-template-columns: 1fr;
    }

    .diagnostika-thumb img {
        height: 200px;
    }
}

.left-section a, .portal-block a{text-decoration: none;}
.left-section a:link, .portal-block a:visited {
    color: #077181; 
}

html, body {
    scroll-behavior: smooth !important;
}
/*кнопки на якоря*/
/* Контейнер всей панели */
.clinic-nav-panel {
    padding: 15px 20px;
    margin: 0;
	width: 30%;
}

/* Флекс-сетка для выравнивания кнопок */
.clinic-nav-container {
    display: flex;
    justify-content: space-between;
    gap: 12px;
   
}

/* Общие стили для кнопок-ссылок */
.clinic-nav-btn {
    flex: 1;
    text-align: center;
    background-color: #ffffff; /* Белый фон для контентной гармонии */
    color: #0B6574 !important; /* Текст цвета бренда */
    padding: 1px 2px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Эффект при наведении (Hover) */
.clinic-nav-btn:hover {
    background-color: #F1F6F7; /* Цвет фона сайта при наведении */
    color: #0B6574 !important;
    text-decoration: none !important;
}

/* Адаптивность для мобильных устройств (экран меньше 768px) */
@media (max-width: 768px) {
    .clinic-nav-container {
        flex-direction: column; /* Кнопки встают друг под друга */
        gap: 10px;
    }
    
    .clinic-nav-btn {
        padding: 14px; /* Чуть увеличиваем область нажатия на смартфонах */
    }
}