/* Поверх стилей старой темы theme945 (static/legacy/<сайт>/...).
   Здесь только то, чего в старой теме не было: новые компоненты и правки для телефонов. */

/* Старая тема не задавала фон и полагалась на белый фон браузера по умолчанию */
html { background: #fff; color-scheme: light; }

img { max-width: 100%; height: auto; }

/* Меню прилипает к верху при прокрутке (раньше — jQuery-плагин tm-stick-up, класс .isStuck из темы) */
.stickup.isStuck { position: fixed; }

/* --- Исправления старой вёрстки (не копируем очевидные косяки) --- */

/* Шапка: телефон, e-mail и кнопка стояли на разной высоте (у блоков разные margin/padding) — выравниваем по центру */
.header-contacts-phone { display: flex; align-items: center; }
.header-contacts-phone > .pull-left { float: none; margin-top: 0; padding-top: 0; }
/* У телефона перед номером скрытая ссылка WhatsApp и &nbsp; — давали лишнюю пустую строку над номером */
.header-contacts-phone .phone-number { display: flex; align-items: center; }
/* Круглые иконки телефона и почты были прибиты к верху (top: 0) разных блоков — центрируем по тексту */
.header-contacts-phone::before, .header-contacts-phone > .phone::before { top: 50%; transform: translateY(-50%); }

/* Из CSS модуля path_breadcrumbs, который отдельно не подключаем */
.breadcrumb .inline { display: inline-block; }

.page-image { margin: 0 0 24px; }

/* Слайдеры (клиники, врачи, видео, направления) — вместо jQuery slick: прокрутка с привязкой.
   Количество карточек на экране — как было в настройках slick (js/script.js старой темы). */
.js-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.js-slider::-webkit-scrollbar { display: none; }
.js-slider > .views-row { flex: 0 0 calc(100% / var(--per-view, 1)); scroll-snap-align: start; box-sizing: border-box; }
.clinics-slider .js-slider { --per-view: 5; }
.doctors .js-slider { --per-view: 4; }
@media (max-width: 1023px) { .clinics-slider .js-slider, .doctors .js-slider { --per-view: 3; } }
@media (max-width: 599px) { .clinics-slider .js-slider, .doctors .js-slider { --per-view: 2; } }
@media (max-width: 479px) { .clinics-slider .js-slider, .doctors .js-slider { --per-view: 1; } }
.slider-host { position: relative; }

/* Карточки: врачи клиники, списки на главной */
.cards { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cards .card { margin: 0; padding: 0; background: none; }
.card a { display: grid; gap: 8px; text-decoration: none; }
.card img { width: 100%; height: auto; border-radius: 4px; }

.clinic-header__logo { margin-bottom: 12px; }

.doctor { display: grid; gap: 16px 32px; }
@media (min-width: 768px) {
  .doctor { grid-template-columns: 320px 1fr; }
  .doctor__body { grid-column: 1 / -1; }
}
.doctor__photo { border-radius: 4px; }

.video-embed { position: relative; aspect-ratio: 16 / 9; margin-bottom: 24px; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.news-date { display: block; margin-bottom: 12px; color: #888; }

/* Формы заявок: окна (<dialog>) и форма в тексте страницы */
.lead-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 32px 28px 24px; border: 0; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.lead-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.lead-dialog__close { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 28px; line-height: 1; color: #777; cursor: pointer; }
.lead-form__title { margin: 0 0 16px; font-size: 22px; text-transform: uppercase; color: #00abaa; text-align: center; }
.lead-form__row { margin-bottom: 12px; }
.lead-form__row label { display: block; margin-bottom: 4px; font-size: 14px; }
.lead-form input[type=text], .lead-form input[type=tel], .lead-form input[type=email], .lead-form textarea {
  width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #ccc; border-radius: 4px; font: inherit; font-size: 16px;
}
.lead-form [aria-invalid="true"] { border-color: #c0392b; }
.lead-form__error { color: #c0392b; font-size: 13px; min-height: 0; }
.lead-form__consent { display: flex; gap: 8px; align-items: flex-start; justify-content: flex-start; margin: 4px 0 8px; font-size: 13px; text-align: left; }
.lead-form__consent input { flex: 0 0 auto; width: auto; margin: 3px 0 0; }
.lead-form__consent span { flex: 1 1 auto; }
.lead-form__status { min-height: 20px; margin: 8px 0; font-size: 14px; }
.lead-form__submit { width: 100%; padding: 12px; border: 0; border-radius: 4px; background: #00abaa; color: #fff; font-size: 16px; cursor: pointer; }
.lead-form__submit:disabled { opacity: .6; cursor: wait; }
.form-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.embedded-form { max-width: 560px; margin: 32px auto; }
.required { color: #c0392b; }

/* Таблицы и встраивания из старого HTML не должны ломать ширину на телефоне */
.field-item table, .price-table table, .taxonomy-term-description table { display: block; max-width: 100%; overflow-x: auto; }
.field-item iframe { max-width: 100%; }

/* Поиск по сайту (/search). Строки результатов и пейджер — стили темы (.view-search-views, .pager) */
.search-page-form { display: flex; gap: 8px; max-width: 640px; margin: 0 0 24px; }
.search-page-form .form-text { flex: 1 1 0; width: auto !important; min-width: 0; height: auto; box-sizing: border-box; padding: 9px 12px; border: 1px solid #ccc; border-radius: 4px; font: inherit; font-size: 16px; }
.search-page-form .form-submit { flex: 0 0 auto; width: auto !important; margin: 0; padding: 9px 22px; border: 0; border-radius: 4px; background: #00abaa; color: #fff; font-size: 16px; cursor: pointer; }
.search-page-summary { color: #888; }
.view-search-views .search-results { margin: 0; padding: 0; list-style: none; }
.view-search-views .views-row { margin-bottom: 24px; }
.view-search-views .views-field-title { font-size: 18px; margin-bottom: 6px; }
.view-search-views .views-field-search-api-excerpt strong { color: #00abaa; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }

/* Поле поиска в шапке belhope.be (на старом .be его не было; вид — как у блока поиска .ru) */
.header-search { width: 174px; margin-top: 9px; }
.header-search .element-invisible { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; }
.header-search .views-exposed-widgets { position: relative; border: 1px solid #e1e1e1; border-radius: 5px; overflow: hidden; background: #fff; }
.header-search .views-exposed-widget { float: none; padding: 0; }
.header-search .form-text { display: block; width: 100%; box-sizing: border-box; height: auto; margin: 0; padding: 4px 32px 4px 10px; border: 0; background: none; font-size: 14px; line-height: 20px; }
.header-search .form-submit {
  position: absolute; top: 0; right: 0; bottom: 0; width: 30px; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  font-size: 0; color: transparent; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7c7c' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.header-search .form-submit:hover { background-color: #f3f3f3; }

/* Формы на посадочной странице (тема land растягивает все input на всю ширину и делает подписи мелкими) */
.landing .lead-form label { font-size: 15px; }
.landing .lead-form__consent { display: flex; align-items: flex-start; gap: 8px; }
/* !important: тема на ширине до 480px растягивает все input на 100% с !important — галочка выталкивала
   текст согласия за край экрана */
.landing .lead-form__consent input { display: inline-block; width: auto !important; height: auto; flex: 0 0 auto; margin: 3px 0 0; }
.landing .lead-form__consent span { font-size: 14px; }

/* Мобильное меню belhope.be (разметка slicknav строится в site.js, оформление — slicknav.css темы) */
.slicknav_nav[hidden], .slicknav_nav ul[hidden] { display: none; }
[data-site="be"] .slicknav_menu .slicknav_btn { border: 0; background: none; text-shadow: none; font: inherit; font-size: 20px; color: #fff; }
[data-site="be"] .slicknav_menu .slicknav_btn:focus-visible { outline: 2px solid #fff; }
[data-site="be"] .slicknav_btn:after { content: "Menu"; } /* в теме было «меню» по-русски на французском сайте */
[data-site="be"] .slicknav_nav { padding: 4px 0 10px; }
[data-site="be"] .slicknav_nav li { position: relative; }
[data-site="be"] .slicknav_nav a { padding: 10px 48px 10px 12px; margin: 0; border-radius: 0; color: #fff; line-height: 1.3; }
[data-site="be"] .slicknav_nav a:hover, [data-site="be"] .slicknav_nav a:focus { background: rgba(255, 255, 255, .15); color: #fff; border-radius: 0; }
[data-site="be"] .slicknav_nav ul { margin: 0 0 0 16px; border-left: 1px solid rgba(255, 255, 255, .35); }
[data-site="be"] .slicknav_nav ul a { font-size: 15px; padding-top: 8px; padding-bottom: 8px; }
[data-site="be"] .slicknav_nav .slicknav_arrow {
  position: absolute; top: 0; right: 4px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: none;
  color: #fff; font-size: 14px; cursor: pointer;
}
[data-site="be"] .slicknav_nav .slicknav_arrow:after { content: "\25BE"; display: inline-block; transition: transform .2s; }
[data-site="be"] .slicknav_nav .slicknav_arrow.slicknav_open:after { transform: rotate(180deg); }
[data-site="be"] .slicknav_nav ul .slicknav_arrow { height: 38px; }
.slicknav_search.header-search { width: auto; margin: 6px 10px 10px; }
.slicknav_search.header-search .form-text { padding-top: 8px; padding-bottom: 8px; font-size: 16px; }

@media (max-width: 767px) {
  /* Шапка .be на телефоне: в теме ширина контактов задана в px (446/218) — номер и e-mail ломались и обрезались.
     Телефон и e-mail — столбиком с общим левым краем, круглая иконка трубки слева по центру
     (раньше строки были сдвинуты друг относительно друга, у e-mail висела лишняя точка) */
  [data-site="be"] .header-contacts { width: auto; max-width: 100%; padding: 12px 16px; box-sizing: border-box; }
  [data-site="be"] .header-contacts-phone {
    display: grid; justify-items: start; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto;
    padding-left: 60px; box-sizing: border-box;
  }
  [data-site="be"] .header-contacts-phone::before { left: 0; }
  [data-site="be"] .header-contacts .phone { float: none; margin: 0; padding-left: 0; }
  [data-site="be"] .header-contacts .phone::before { display: none; }
  [data-site="be"] .header-contacts .phone p { margin: 0; }
}
[data-site="be"] .phone .phone-number a { white-space: nowrap; }

/* --- Телефоны: общие правки, без смены дизайна --- */

/* clean-style.css включал правой колонке content-visibility: auto без запасной высоты: пока колонка вне экрана,
   её высота 0 — на телефоне меню раздела ложилось поверх подвала, а при прокрутке страница прыгала */
#sidebar-second { content-visibility: visible; }

/* Длинные ссылки и слова в старом тексте (адреса источников) растягивали страницу вбок */
p, li, td, dd, blockquote { overflow-wrap: break-word; }

/* Верхняя полоска с телефоном на .ru: строка была выше полоски (30px при 28px) — иконка WhatsApp
   стояла выше номера, низ номера обрезало меню. Иконка и номер — на одной линии по центру полоски */
.phone-fixed-mob { align-items: center; padding-top: 0; padding-bottom: 0; }
.phone-fixed-mob p { margin: 0; }
.phone-fixed-mob .phone-number { display: flex; align-items: center; gap: 4px; line-height: 20px; white-space: nowrap; }
.phone-fixed-mob .whatsapp-link { flex: none; width: 20px; height: 20px; margin: 0; background-position: center; }

@media (max-width: 767px) {
  /* .ru: под фиксированной шапкой оставалось ~60px пустоты до хлебных крошек
     (clean-style.css добавлял отступ 30px сверх отступа body под шапку) */
  [data-site="ru"] #breadcrumb { padding-top: 0; }

  /* Подвал: текст шёл от края до края и последние строки прятались под фиксированной кнопкой
     «Связаться» / «Demandez un appel» внизу экрана */
  .footer .container { padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
  .footer { padding-bottom: 72px; }

  /* Направления медицины (.ru): «зебра» строк таблицы на телефоне превращалась в серые пятна
     из 4 пунктов, растянутые до края экрана */
  .ways .views-view-grid tr { background: none; }

  /* Списки в блоках справа: перенос строки уходил под маркер */
  .righttext ul { list-style-position: outside; padding-left: 20px; }
}

/* Посадочная /lend. Клиники: фото нет ни в копии, ни на живом сайте — без них плитки схлопывались в 0 px,
   подписи наезжали друг на друга и на заголовок. Плитки — сплошные блоки с названием (размер как у фото 364px) */
.landing .clinic-list { padding: 0; }
.landing .clinic-list li { width: 364px; max-width: 100%; height: 160px; vertical-align: top; background: #00abaa; }
.landing .clinic-list li p { left: 20px; right: 20px; width: auto; margin: 0; transform: translateY(-50%); font-size: 24px; }

@media (max-width: 767px) {
  .landing .container { padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
  .landing .clinic-list { margin-right: 0; }
  .landing .clinic-list li { display: block; width: auto; height: 96px; margin: 0 0 12px; }
  .landing .clinic-list li p { font-size: 20px; }
  /* Стрелки слайдеров выходили за правый край экрана */
  .landing .slider-host { padding: 0 28px; }
  .landing .slider-host .slick-prev { left: 0; }
  .landing .slider-host .slick-next { right: 0; }
}
