/* Кнопка связи «как на лендинге v-pare.ru» (assets/js/vp-connect.js), все сайты сети.
   Правила перенесены с лендинга (styles.css, блок «Выбор способа связи»):
   раскрытие через grid-template-rows 0fr → 1fr — высота едет плавно, содержимое
   ниже не прыгает; закрытый блок ещё и visibility:hidden, чтобы по спрятанным
   кнопкам нельзя было пройти табом. Цвет самой кнопки — наш (#FFDE00),
   кнопки мессенджеров — в их фирменных градиентах, как на лендинге. */
.vp-connect { --connect-w: 320px; --connect-pad: 12px; display: flex; flex-direction: column; width: var(--connect-w); max-width: 100%; min-width: 0; }
.vp-connect--header { --connect-w: auto; display: inline-flex; }
.vp-connect--hero > .vp-connect__toggle { width: 100%; }
.vp-connect__toggle { white-space: normal; text-align: center; }

.vp-connect__panel {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .28s ease, opacity .2s ease, margin .28s ease, visibility 0s linear .28s;
}
.vp-connect.is-open > .vp-connect__panel {
  grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-top: 12px;
  transition: grid-template-rows .28s ease, opacity .2s ease, margin .28s ease, visibility 0s;
}
.vp-connect__inner { overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Шапка приклеена к экрану — выбор выпадает карточкой поверх страницы. */
.vp-connect--drop { position: relative; }
.vp-connect--drop > .vp-connect__panel { position: absolute; top: 100%; right: calc(-1 * var(--connect-pad)); z-index: 1060; width: 284px; }
.vp-connect--drop.is-open > .vp-connect__panel { margin-top: 10px; }
.vp-connect--drop .vp-connect__inner { background: #fff; border-radius: 18px; padding: var(--connect-pad); box-shadow: 0 18px 40px rgba(0, 30, 27, .28); }

/* ---- три кнопки выбора ---- */
.vp-connect__link {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box;
  min-height: 46px; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; white-space: normal;
  text-decoration: none !important; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.vp-connect__link:hover { transform: translateY(-1px); text-decoration: none !important; }
.vp-connect__link:active { transform: translateY(0); }
.vp-connect__link:focus-visible { outline: 2px solid #C8943C; outline-offset: 2px; }
.vp-connect__icon { width: 16px; height: 16px; flex: none; }
html body a.vp-connect__link--tg, html body a.vp-connect__link--tg:hover, html body a.vp-connect__link--tg:focus { color: #fff !important; }
.vp-connect__link--tg { background: linear-gradient(135deg, #2AABEE, #229ED9); box-shadow: 0 4px 14px rgba(34, 158, 217, .32); }
.vp-connect__link--tg:hover { background: linear-gradient(135deg, #1d9bd5, #1a8dc2); }
html body a.vp-connect__link--max, html body a.vp-connect__link--max:hover, html body a.vp-connect__link--max:focus { color: #fff !important; }
.vp-connect__link--max { background: linear-gradient(135deg, #471AFF 0%, #6E1AFF 52%, #9500FF 100%); box-shadow: 0 4px 14px rgba(71, 26, 255, .34); }
.vp-connect__link--max:hover { background: linear-gradient(135deg, #3a12d9 0%, #5c14d9 52%, #7d00d9 100%); }
html body .vp-connect__link--ghost { background: #fff !important; border-color: #D5D2CB !important; color: #003C37 !important; }
html body .vp-connect__link--ghost:hover { border-color: #003C37 !important; }
.vp-connect__submit[disabled] { opacity: .7; cursor: default; }

/* ---- форма заявки ---- */
.vp-connect__form { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; }
.vp-connect__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.vp-connect__label--hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html body .vp-connect__input {
  width: 100%; box-sizing: border-box; height: auto; margin: 0; padding: 13px 16px; border: 1px solid #D5D2CB; border-radius: 14px;
  background: #fff; color: #0F2A1F; font-family: inherit; font-size: 16px; box-shadow: none;
}
.vp-connect__input::placeholder { color: #7A7770; opacity: 1; }
.vp-connect__input:focus { outline: 2px solid #C8943C; outline-offset: 1px; }
.vp-connect__error:empty { display: none; }
.vp-connect__error { margin: 0; font-size: 13px; font-weight: 600; color: #E0604A; }
.vp-connect__done { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
html body .vp-connect__privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12px; line-height: 1.35; text-align: left; }
.vp-connect__privacy a { text-decoration: underline; }
/* На тёмном первом экране подписи и благодарность — светлые; в карточке шапки — тёмные. */
.vp-connect--hero .vp-connect__done, .vp-connect--hero .vp-connect__privacy, .vp-connect--hero .vp-connect__privacy a { color: #F4F1E8; }
.vp-connect--hero .vp-connect__error { color: #FFB4A6; }
.vp-connect--drop .vp-connect__done, .vp-connect--drop .vp-connect__privacy, .vp-connect--drop .vp-connect__privacy a { color: #0F2A1F; }

/* Пока блок открыт, пульсация главной кнопки не нужна. */
.vp-connect.is-open > .vp-connect__toggle::after { animation: none !important; opacity: 0 !important; }

@media (max-width: 640px) { .vp-connect--hero { --connect-w: 100%; } }
@media (prefers-reduced-motion: reduce) { .vp-connect__panel, .vp-connect.is-open > .vp-connect__panel, .vp-connect__link { transition: none; } }

/* Меню-бургер красит всё внутри блока контактов кремовым (.list-menu-wrap .mob_info * — !important
   двумя классами): белая кнопка и поля формы там становились «белым по белому». Перебиваем весом. */
html body .vp-connect .vp-connect__link.vp-connect__link--ghost { color: #003C37 !important; }
html body .vp-connect .vp-connect__link.vp-connect__link--tg,
html body .vp-connect .vp-connect__link.vp-connect__link--max,
html body .vp-connect .vp-connect__link.vp-connect__link--tg *,
html body .vp-connect .vp-connect__link.vp-connect__link--max * { color: #fff !important; }
html body .vp-connect .vp-connect__field .vp-connect__input { color: #0F2A1F !important; background: #fff !important; }
html body .vp-connect .vp-connect__form .vp-connect__error { color: #FFB4A6 !important; }
html body .vp-connect.vp-connect--drop .vp-connect__form .vp-connect__error { color: #C0392B !important; }

/* Согласие: текст одним абзацем, галочка слева (флекс резал фразу на колонки по ссылкам). */
html body .vp-connect .vp-connect__privacy { display: block !important; position: relative; padding-left: 30px !important; }
html body .vp-connect .vp-connect__privacy .privacy_check_box { position: absolute !important; left: 0; top: 1px; margin: 0 !important; }
/* В меню-бургере блок — как на первом экране: кнопка и выбор одной ширины. */
.vp-connect--header:not(.vp-connect--drop) { display: flex; width: 100%; max-width: 320px; margin: 0 auto; }
.vp-connect--header:not(.vp-connect--drop) > .vp-connect__toggle { width: 100%; }
html body .vp-connect.vp-connect--header:not(.vp-connect--drop) > button.vp-connect__toggle { width: 100% !important; max-width: none !important; }
html body .header--button:has(> .vp-connect--header:not(.vp-connect--drop)) { width: 100%; }

/* ==========================================================================
   Ссылки на согласие на обработку персональных данных, политику и оферту —
   ВСЕ сайты сети, все места (формы заявок и всплывающие окна, квиз, «Нет
   нужного времени?», кнопка связи, плашка cookies, подвал, страница оплаты).
   Возврат 25.09: «ссылки на согласие сливаются с фоном». В форме кнопки связи
   общее правило ссылок нового оформления красило их тёмно-зелёным по
   тёмно-зелёному (контраст 1.99), в окне заявки — шалфеем по тёмной
   подложке, в плашке cookies городов — чёрным по зелёному.
   Одно правило на две ситуации: на светлом фоне — тёмно-зелёная ссылка
   (#003C37, контраст к кремовому 10.9), на тёмном — кремовая (#F4F1E8,
   к #003C37 — 10.9); всегда с подчёркиванием.
   ========================================================================== */
/* Контексты — через :where() (нулевой вес), поэтому решает ПОРЯДОК правил: общее → тёмный фон → светлые карточки. */
html body :is(a[href*="/processing-of-personal-data"], a[href*="/privacy"], a[href*="/oferta"], .privacy_text a, .quizle-contacts__agreement a, [id="cookie_note"] a) {
  color: #003C37 !important; opacity: 1 !important;
  text-decoration: underline !important; text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important; text-underline-offset: 2px !important;
}
/* Тёмный фон: плашка cookies, подвал, первый экран, меню-бургер, окна заявки (форма лежит на тёмной подложке). */
html body :where([id="cookie_note"], footer, .footer, .offer, .vp-connect--hero, .list-menu-wrap .mob_info, .modal.modal-form) :is(a[href*="/processing-of-personal-data"], a[href*="/privacy"], a[href*="/oferta"], .privacy_text a, .quizle-contacts__agreement a, [id="cookie_note"] a) { color: #F4F1E8 !important; }
/* Светлые карточки внутри тёмных блоков: карточка кнопки связи в шапке и блок оплаты (он лежит в тёмном контейнере, но сам кремовый). */
html body :where(.content.color_white, .vp-connect--drop) :is(a[href*="/processing-of-personal-data"], a[href*="/privacy"], a[href*="/oferta"], .privacy_text a, .quizle-contacts__agreement a, [id="cookie_note"] a) { color: #003C37 !important; }
html body .vp-connect--drop :is(.privacy_text, .vp-connect__done) { color: #0F2A1F !important; }
/* Плашка cookies: на части сайтов цвет её ссылок держит правило с id #cookie_note — берём тот же вес. */
html body #cookie_note#cookie_note a { color: #F4F1E8 !important; text-decoration: underline !important; }
html body :is(a[href*="/processing-of-personal-data"], a[href*="/privacy"], a[href*="/oferta"], .privacy_text a, .quizle-contacts__agreement a, [id="cookie_note"] a):hover { text-decoration-thickness: 2px !important; }

/* Страница оплаты на сайтах городов: brendbook.css даёт блоку .content.color_white кремовый фон,
   а старая тема красит его текст белым — весь блок «белым по кремовому». Текст — тёмный, как на основном сайте. */
html body .content.color_white { color: #0F2A1F !important; }
html body .content.color_white :is(p, span, li, h1, h2, h3, h4, label, div) { color: inherit; }
/* Галочка согласия в белой карточке шапки: рамка квадрата у темы белая — на белом её не видно. */
html body .vp-connect--drop .privacy_check_box span::after { border-color: #003C37 !important; }
html body .vp-connect--drop .privacy_check_box span::before { color: #003C37 !important; border-color: #003C37 !important; }
/* Отмеченная галочка у темы — белая картинка без рамки; в белой карточке даём ей тёмно-зелёную подложку. */
html body .vp-connect--drop .privacy_check_box input[type="checkbox"]:checked + span::after {
  background-color: #003C37 !important; border-color: #003C37 !important; width: 21px !important; left: 1px !important;
}

/* ==========================================================================
   Раунд 28.09 (все сайты сети)
   ========================================================================== */
/* Кнопки старого окна заявки (частые вопросы, цены, блог, предметы, своё расписание)
   теперь раскрываются выбором связи — выпадающей карточкой, как в шапке.
   Положение карточки по ширине подгоняет vp-connect.js (fit), чтобы не вылезала за экран. */
.vp-connect--auto { --connect-w: auto; display: inline-flex; vertical-align: middle; }
.vp-connect--auto > .vp-connect__panel { left: 0; right: auto; }
.vp-connect--predmety, .vp-connect--price { display: flex; width: 100%; }
.vp-connect--predmety > .vp-connect__toggle, .vp-connect--price > .vp-connect__toggle { width: 100%; }
/* Старое всплывающее окно заявки отключено: разметка нужна только как источник данных формы. */
html body :is(#myModal, #myModal1, #myModal2) { display: none !important; }

/* Подвал: ссылки «Договор-оферта | Политика… | Согласие… | Карта сайта» и строка курсов — один стиль.
   Раньше три ссылки брало правило согласия (кремовые, подчёркнутые), а «Карта сайта» оставалась
   шалфейной без подчёркивания. Разделители — тем же цветом, приглушённо. */
html body :is(footer, .footer) .footer__links { color: rgba(244,241,232,.45) !important; }
html body :is(footer, .footer) .footer__links a {
  color: #F4F1E8 !important; font-weight: 400 !important; opacity: 1 !important;
  text-decoration: underline !important; text-decoration-color: rgba(244,241,232,.4) !important;
  text-decoration-thickness: 1px !important; text-underline-offset: 3px !important;
  transition: color .18s ease, text-decoration-color .18s ease;
}
html body :is(footer, .footer) .footer__links a:hover,
html body :is(footer, .footer) .footer__links a:focus-visible {
  color: #C8943C !important; text-decoration-color: #C8943C !important; text-decoration-thickness: 1px !important;
}

/* Виджет связи (lk.egevpare.ru/widget.js) на компьютере — на полразмера кнопки (60 → 30 px)
   дальше от края по обеим осям. Телефон и планшет не трогаем. */
@media (min-width: 992px) {
  html body #egevpare-widget-root { right: 50px !important; bottom: 50px !important; }
}
/* Слой карточки на уровне страницы (см. fit() в vp-connect.js). */
.vp-connect--portal { position: absolute; width: 0; height: 0; z-index: 1060; }
.vp-connect--portal > .vp-connect__panel { top: 0; }