/*
 * Шапка и окна заявок (просьба Кости 23.09.2026). Подключается ко всем страницам в scripts/site-additions.py.
 * Правила темы в шапке с !important, поэтому селекторы длиннее и местами тоже !important.
 */

/* ── Кнопки «Пройти тест» и «Бесплатная консультация»: одинаковые, прозрачные с белой рамкой, в одну строку ──
   Вид «Пройти тест» задаёт скрипт темы инлайном (#mlHeaderQuizBtn, наведение — тоже им), здесь только размеры. */
.header-center #mlHeaderQuizBtn,
.header-center a.header-center__btn.header-center__btn--consult.btn.btn--filled {
  height: 44px;
  padding: 0 20px !important;
  margin: 0 !important;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  font-size: 14px !important;
  letter-spacing: .8px;
}
.header-center a.header-center__btn.header-center__btn--consult.btn.btn--filled {
  min-width: 0 !important; /* тема держала 275 px — поля шире, чем у «Пройти тест» */
  width: auto !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, .5) !important;
  font-weight: 400 !important;
  line-height: 1;
  transition: background .2s, color .2s, border-color .2s;
}
.header-center a.header-center__btn.header-center__btn--consult.btn.btn--filled:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
  opacity: 1;
}

/* Тема показывает консультацию только с 1272 px (ниже — display:none!important), тут же и мы */
@media (min-width: 1272px) {
  .header-center a.header-center__btn.header-center__btn--consult.btn.btn--filled { display: inline-flex !important; }
}

/* ── Мессенджеры (MAX, Telegram): пара одинаковых кружков ── */
.header-center .socials_block {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-center .socials_block a {
  display: block;
  line-height: 0;
  transition: transform .2s;
}
.header-center .socials_block a:hover { transform: translateY(-1px); }
.header-center .socials_block img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}

/* ── Правая часть: телефон → кнопки → мессенджеры в правом краю (группы с ровными промежутками) ──
   Поиск по сайту пока скрыт (просьба Кости 23.09.2026), мессенджеры встали на его место. */
.header-center .header-center__search-wrapper { display: none !important; }
.header-center .header-center__right { align-items: center; }
.header-center .header-center__right > .header-center__phone-col { order: 1; margin-right: 24px; flex-shrink: 0; }
.header-center .header-center__right > #mlHeaderQuizBtn { order: 2; margin-right: 10px !important; }
.header-center .header-center__right > a.header-center__btn.header-center__btn--consult.btn.btn--filled { order: 3; margin-right: 20px !important; }
.header-center .header-center__right > .socials_block { order: 4; margin-right: 0; }
.header-center .header-center__right > .header-center__burger-btn { order: 5; margin-left: 16px; }

/* Компьютер: подпись у логотипа («Сеть клиник…») не помещается рядом со всем остальным — в Safari (Helvetica Neue
   шире) всё вместе ~1540 px при строке шапки максимум 1510 px, рейтинг наезжал на телефон. Подпись остаётся
   на планшете и телефоне. Рейтинг — с 1500 px (ниже с ним не хватает места). */
@media (min-width: 1272px) {
  .header-center .header-center__logo-text { display: none; }
  .header-center .header-center__logo-wrapper { margin-right: 32px; }
  /* слева — логотип, город, рейтинг; справа — телефон, кнопки, мессенджеры (тема раскидывала блоки по ширине) */
  .header-center .header-center__row { justify-content: flex-start; }
  .header-center .header-center__row > .header-center__location-holder { margin-left: 0 !important; }
  .header-center .header-center__row > .header-center__right { margin-left: auto; }
}
@media (min-width: 1272px) and (max-width: 1499px) {
  .header-center .header-top__rating { display: none !important; }
}
/* Узкий компьютерный экран: промежутки плотнее — всё в одну строку */
@media (min-width: 1272px) and (max-width: 1599px) {
  .header-center .header-center__logo-wrapper { margin-right: 24px; }
  .header-center .header-center__right > .header-center__phone-col { margin-right: 20px; }
  .header-center .header-center__right > a.header-center__btn.header-center__btn--consult.btn.btn--filled { margin-right: 16px !important; }
  .header-center #mlHeaderQuizBtn,
  .header-center a.header-center__btn.header-center__btn--consult.btn.btn--filled { padding: 0 16px !important; }
}

/* Самый узкий компьютерный экран (1272–1359 px): ещё плотнее, чтобы город не прижимался к телефону */
@media (min-width: 1272px) and (max-width: 1359px) {
  .header-center .header-center__logo-wrapper { margin-right: 20px; }
  .header-center .header-center__right > .header-center__phone-col { margin-right: 14px; }
  .header-center .header-center__right > #mlHeaderQuizBtn { margin-right: 8px !important; }
  .header-center .header-center__right > a.header-center__btn.header-center__btn--consult.btn.btn--filled { margin-right: 12px !important; }
  .header-center #mlHeaderQuizBtn,
  .header-center a.header-center__btn.header-center__btn--consult.btn.btn--filled { padding: 0 13px !important; }
}

/* ── Город: подпись по ширине текста, в одну строку, стрелка сразу за ней (тема растягивала подпись) ── */
@media (min-width: 992px) {
  .header-center .header-top__location-city-current { width: auto !important; flex: 0 0 auto; white-space: nowrap; padding-right: 22px; }
}

/* ── Телефон (до 780 px): логотип, номер, MAX, Telegram и меню в одну строку, без наездов.
   Логотип и номер уменьшаются вместе с экраном (на 360 px иначе не помещается) ── */
@media (max-width: 780px) {
  .header-center .header-center__row { gap: 8px; }
  .header-center .header-center__row > .header-center__logo-wrapper { flex-shrink: 0; margin-right: 0; width: auto; }
  .header-center .header-center__row > .header-center__logo-wrapper .header-center__logo-img { width: auto; }
  .header-center .header-center__row > .header-center__logo-wrapper .header-center__logo-img img { width: clamp(76px, 22vw, 100px); height: auto; }
  .header-center .header-center__phone--mob { font-size: clamp(12.5px, 3.6vw, 16px) !important; white-space: nowrap; flex-shrink: 0; }
  .header-center .header-center__right { flex-shrink: 0; }
  .header-center .header-center__right > .socials_block { gap: 6px; }
  .header-center .header-center__right > .header-center__burger-btn { margin-left: 10px; }
  .header-center .socials_block img { width: 28px !important; height: 28px !important; }
}
@media (min-width: 400px) and (max-width: 780px) {
  .header-center .socials_block img { width: 30px !important; height: 30px !important; }
}

/* Верхняя полоса (планшет): значки мессенджеров и ВК по одной линии */
.header-top__socials { align-items: center; }

/* ── Город и рейтинг: без жёстких ширин темы (блок 273 px, рейтинг 83 px) — иначе при подписи у логотипа
   рейтинг наезжал на телефон, а «1069 оценок» переносилось ── */
@media (min-width: 1287px) {
  .header-center .header-center__location-holder { width: auto !important; height: auto !important; padding-right: 0 !important; margin-right: 32px; flex-shrink: 0; }
  .header-center .header-top__location,
  .header-center .header-top__location-city { width: auto !important; }
  .header-center .header-top__rating { width: auto !important; height: auto !important; padding: 0 !important; margin-left: 28px; flex-shrink: 0; }
  .header-center .header-top__rating-link { width: auto !important; margin: 0 !important; }
  .header-center .header-top__rating-text { width: auto !important; height: auto !important; margin: 4px 0 0 !important; white-space: nowrap; }
}

/* ── «Ваш город: …?» — карточка с нормальными кнопками вместо серых браузерных ── */
#locationPopup .header-top__location-dropdown-title_098 { font-size: 17px; font-weight: 500; margin: 0 0 14px; }
#locationPopup .header-top__location-buttons { display: flex; flex-wrap: wrap; gap: 10px; height: auto; }
#locationPopup #yes-button,
#locationPopup #no-button {
  height: 40px;
  padding: 0 24px;
  border: 1.5px solid #2a2a2a;
  border-radius: 0;
  font: 400 14px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}
#locationPopup #yes-button { background: #2a2a2a; color: #fff; }
#locationPopup #yes-button:hover { background: #000; border-color: #000; }
#locationPopup #no-button { background: transparent; color: #2a2a2a; }
#locationPopup #no-button:hover { background: #2a2a2a; color: #fff; }
#locationPopup .header-top__location-dropdown-nottice_098 { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: #8a8a8a; }

/* ── Окна заявок (консультация, звонок, запись…): поле во всю ширину, видимые галочки, ровные строки ──
   Тема мешает правилами с !important: .input { border: 0; border-bottom: 2px; padding-right: 45px } (галочка
   превращалась в широкую серую чёрточку), .popup-callback__form-agreement.input_asseptance { position: static } (галочка улетала в угол окна)
   и ширина подзаголовка calc(100% - 150px). В Safari с минимальным размером шрифта тексты крупнее — переносы
   балансируем, чтобы одно слово не висело на строке. */
.popup-callback .popup__desc { width: auto !important; max-width: none; text-wrap: balance; }
.popup-callback .popup-trust-badge { margin-bottom: 24px; }
.popup-callback .popup-trust-badge span { text-wrap: balance; }
.popup-callback .popup-trust-badge .ml-nb { white-space: nowrap; } /* пункты плашки (header.js) — перенос только между ними */
.popup-callback .popup-callback__form-left { flex: 1 1 100%; width: 100%; max-width: 100%; }
.popup-callback .liner_point,
.popup-callback .liner_point .wpcf7-form-control-wrap,
.popup-callback .liner_point input.input { width: 100% !important; max-width: 100%; box-sizing: border-box; }
.popup-callback .popup-callback__form-agreement.input_asseptance { position: relative !important; top: 0 !important; left: 0 !important; width: auto !important; max-width: none; padding-left: 30px; font-size: 13px; line-height: 1.45; color: #8a8a8a; }
.popup-callback .input_asseptance a { color: #2a2a2a; }
.popup-callback .input_asseptance .wpcf7-form-control-wrap { position: absolute; left: 0; top: 1px; line-height: 0; }
.popup-callback .input_asseptance .wpcf7-list-item { margin: 0; }
.popup-callback .input_asseptance input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px !important;
  height: 18px !important;
  margin: 0;
  padding: 0 !important; /* тема: .input { padding-right: 45px !important } — раздувала галочку до 47 px */
  border: 1.5px solid #9a9a9a !important;
  border-radius: 3px;
  background: #fff center / 12px 12px no-repeat;
  display: block;
  cursor: pointer;
  box-sizing: border-box;
}
.popup-callback .input_asseptance input[type="checkbox"]:checked {
  border-color: #2a2a2a !important;
  background-color: #2a2a2a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.popup-callback .input_asseptance input[type="checkbox"]:focus-visible { outline: 2px solid #2a2a2a; outline-offset: 2px; }
/* Строка доверия под кнопкой: без висящих «·», переносится целыми пунктами */
.popup-callback .ml-form-trust { flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.popup-callback .ml-form-trust > span:nth-child(2n) { display: none; }

/* Плашка cookie (CookieYes, z-index ~1e9) лежала поверх окна заявки и закрывала его угол: пока окно открыто
   (Fancybox вешает на body класс fancybox-active) — опускаем её под затемнение, после закрытия она на месте */
body.fancybox-active .cky-consent-container,
body.fancybox-active .cky-btn-revisit-wrapper { z-index: 99990 !important; }

/* Первый экран главной: шапка на компьютере стала ниже (164 → 135 px), поэтому верхний отступ заголовка меньше
   (#ml-hero-fix в prod-fixes.py ставит 200 px) — от меню до заголовка снова ~60 px */
@media (min-width: 1272px) {
  .hero-new .hero-new__content { padding-top: 150px; }
}