/* Вынесено из index: футер в бургере, нижняя панель, .body-application */

.footer-modern .footer-modern__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: max-content !important;
  max-width: max-content !important;
}

.footer-modern .footer-modern__container {
  margin-top: 30px;
}

.footer-modern .footer-modern__contacts > a {
  order: 1;
}

.footer-modern .footer-modern__city-selector {
  order: 2;
  display: flex;
  gap: 25px !important;
}

.footer-modern .footer-modern__phone {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #ffffff;
}

.footer-modern .footer-modern__city-selector a {
  font-size: 14px !important;
  font-weight: 300;
  line-height: 1.4;
  color: #969696 !important;
  opacity: 1;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.footer-modern .footer-modern__city-selector a + a {
  margin-left: 0 !important;
}

.footer-modern .footer-modern__city-selector a.selected {
  font-size: 14px !important;
  font-weight: 400;
  color: #ffffff !important;
}

/* Не скрывать .footer-modern__request / .messenger-container здесь: родитель
   — только <footer class="footer-modern"> внизу страницы; бургер без этого
   родителя не матчится (правила ниже, со скоупом .btns__modal, покрывают
   именно бургер). */

/* Контакты/соцсети/CTA-пилюли внутри оверлея бургера (.header .btns__modal[data-v-7050ddb2] …):
   перенесено сюда из parity-sync.css (было только на главной) — тот же скоуп-атрибут
   есть у любой страницы с новым контуром шапки, поэтому больше не дублируем эти
   правила точечно в CSS отдельных кейсов. */
.header .btns__modal[data-v-7050ddb2] {
  padding-bottom: 38px !important;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__contacts {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: max-content;
  max-width: max-content;
  margin-left: 6px;
  /* Легаси-бандлы кейсов иногда переопределяют body{color} тёмной темой (#969696) —
     явный #777 держит бургер-контакты в тон шапке главной независимо от бандла. */
  color: #777;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__city-selector {
  order: 2;
  display: flex;
  gap: 25px !important;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__phone {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #ffffff;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__city-selector a {
  font-size: 14px !important;
  font-weight: 300;
  line-height: 1.4;
  color: #969696 !important;
  opacity: 1;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__city-selector a.selected {
  font-size: 14px !important;
  font-weight: 400;
  color: #ffffff !important;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__city-selector a:not(.selected):hover {
  color: #fff !important;
  opacity: 1;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__request {
  display: none !important;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__social {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end !important;
  row-gap: 6px;
  column-gap: 25px;
  width: max-content !important;
  max-width: max-content !important;
  /* Ряд «телефоны | соцсети» в .btns__modal: без shrink блок с двумя иконками сжимался до одной (TG за краем). */
  flex-shrink: 0;
  min-width: min-content;
  margin-left: auto;
  margin-right: 6px;
  text-align: right;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__social .social__header {
  display: block !important;
  flex: 0 0 100%;
  margin: 0 0 10px;
  font-size: 14px !important;
  font-weight: 300;
  line-height: 1.4;
  color: #969696;
  text-align: right !important;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__social-icons {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 25px;
  flex-shrink: 0;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__social-icons > a {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0.7;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__social-icons > a svg {
  width: 40px;
  height: 40px;
}

.header .btns__modal[data-v-7050ddb2] .footer-modern__social-icons > a:hover {
  opacity: 1;
}

@media screen and (max-width: 1200px) and (min-width: 769px) {
  .header .btns__modal[data-v-7050ddb2] .footer-modern__social {
    justify-content: flex-end !important;
  }
  .header .btns__modal[data-v-7050ddb2] .footer-modern__social .social__header {
    text-align: right !important;
  }
}

/* Burger CTA buttons: same corner radius + hover feel as sticky CTA */
.header .navigation-new__button[data-v-7050ddb2] {
  height: 54px !important;
  border-radius: 30px !important;
  transition: none !important;
  will-change: transform, box-shadow;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.header .navigation-new__button[data-v-7050ddb2]:hover {
  text-shadow: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.header .navigation-new__button[data-v-7050ddb2]:active {
  transform: none !important;
}

/* Touch-устройства: убираем белую ::before заливку и colour-flip при тапе */
@media (hover: none) {
  .header .navigation-new__button[data-v-7050ddb2]::before {
    transition: none !important;
  }
  .header .navigation-new__button[data-v-7050ddb2]:hover::before,
  .header .navigation-new__button[data-v-7050ddb2]:active::before {
    transform: scaleX(0) !important;
  }
  .header .navigation-new__button[data-v-7050ddb2]:hover,
  .header .navigation-new__button[data-v-7050ddb2]:active {
    color: #fff !important;
  }
}

.footer-modern .footer-modern__social {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  row-gap: 6px;
  column-gap: 25px;
  width: auto !important;
  max-width: none !important;
}

.footer-modern .footer-modern__social .social__header {
  display: block !important;
  flex: 0 0 100%;
  margin: 0 0 10px;
  font-size: 14px !important;
  font-weight: 300;
  line-height: 1.4;
  color: #969696;
  text-align: center !important;
}

.footer-modern .footer-modern__social-icons {
  display: flex;
  flex: 0 0 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 25px;
}

@media screen and (min-width: 1201px) {
  .footer-modern .footer-modern__social-icons {
    justify-content: center;
  }
}

.footer-modern .footer-modern__social-icons > a,
.footer-modern .footer-modern__social > a {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0.7;
}

.footer-modern .footer-modern__social-icons > a svg,
.footer-modern .footer-modern__social > a svg {
  width: 40px;
  height: 40px;
}

.footer-modern .footer-modern__social-icons > a:hover,
.footer-modern .footer-modern__social > a:hover {
  opacity: 1;
}

@media screen and (max-width: 1200px) and (min-width: 769px) {
  .btns.white .btns__itemsss,
  .btns.white .btns__item_open.opacited {
    display: none !important;
  }

  .footer-modern .footer-modern__contacts {
    display: none !important;
  }

  .footer-modern .footer-modern__social {
    /* left:0 + padding: absolute игнорирует padding контейнера; так отступ не пропадает */
    left: 0 !important;
    right: auto !important;
    bottom: 16px;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: max(var(--page-gutter-x, 36px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--page-gutter-x, 36px), env(safe-area-inset-right, 0px)) !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .footer-modern .footer-modern__social .social__header {
    text-align: left !important;
  }

  .compressed.header .body-application[data-v-e5e2adce] {
    display: flex !important;
    top: auto;
    right: var(--page-gutter-x);
    bottom: 12px;
    transform: none !important;
  }

  .compressed.header .body-application .btn-box[data-v-e5e2adce] {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .compressed.header .body-application .footer__link[data-v-e5e2adce] {
    float: none !important;
    transform: none !important;
  }
}

@media screen and (max-width: 768px) {
  .btns.white .btns__itemsss,
  .btns.white .btns__item_open.opacited {
    display: none !important;
  }

  .footer-modern .footer-modern__contacts {
    display: none !important;
  }

  .footer-modern .footer-modern__social {
    left: 0 !important;
    right: auto !important;
    bottom: 16px;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: max(var(--page-gutter-x, 36px), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--page-gutter-x, 36px), env(safe-area-inset-right, 0px)) !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  .footer-modern .footer-modern__social .social__header {
    text-align: left !important;
  }

  .compressed.header .body-application[data-v-e5e2adce] {
    display: flex !important;
    top: auto;
    right: var(--page-gutter-x);
    bottom: 16px;
    transform: none !important;
  }

  .compressed.header .body-application .btn-box[data-v-e5e2adce] {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .compressed.header .body-application .footer__link[data-v-e5e2adce] {
    float: none !important;
    transform: none !important;
  }

  .compressed.header .body-application .application[data-v-e5e2adce] .icon {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {
  .compressed.header .body-application[data-v-e5e2adce] {
    display: flex !important;
  }

  .compressed.header .body-application[data-v-e5e2adce] {
    top: auto;
    right: var(--page-gutter-x);
    bottom: 16px;
    transform: none;
  }
}

/* Backdrop за модалкой заявки #desktop-order-popup (создаётся JS
   leave-request-cta.js, если не найден в DOM). Перенесено из parity-sync.css —
   раньше работало только на страницах с Nuxt layout (главная/сервисы, где
   .overlay-new приходил статически). Общее правило + видимость через
   body.order-popup-open — теперь работает и на кейсах. */
.overlay-new {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 145;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: none;
}

body.order-popup-open .overlay-new {
  display: block;
}

/* Карточки «Больше кейсов»/«Кейсы» (.more-cases .case): фон-заглушка до
   загрузки картинки + раскрытие тегов/сдвиг описания на :hover. В статике нет
   .active (Vue IntersectionObserver, который на проде переключает reveal),
   поэтому дублируем тот же reveal через :hover — перенесено из
   parity-sync.css (было только на главной). */
.more-cases .case[data-v-c0adc676],
.more-cases .case,
.more-cases .case > a[data-v-c0adc676],
.more-cases .case > a {
  background-color: #1d1d1f !important;
}

.more-cases .case__media[data-v-c0adc676],
.more-cases .case__media {
  background-color: #1d1d1f !important;
}

@media screen and (min-width: 1025px) and (hover: hover) {
  .more-cases .case:hover .case__description[data-v-c0adc676]:not(.sceleton_description) {
    transform: translateY(40px);
  }
  .more-cases .case:hover .case__tag[data-v-c0adc676] {
    opacity: 1;
  }
  .more-cases .case:hover.animation .case__tags[data-v-c0adc676] {
    transition: 15s ease-out;
    animation: tags-data-v-c0adc676 15s infinite;
    position: absolute;
    z-index: 1;
  }
}

@media screen and (max-width: 1200px), (hover: none) {
  .more-cases .case:hover .case__description[data-v-c0adc676]:not(.sceleton_description) {
    transform: none !important;
  }
  .more-cases .case:hover .case__tag[data-v-c0adc676] {
    opacity: 0 !important;
  }
  .more-cases .case:hover .case__media img[data-v-c0adc676],
  .more-cases .case:hover .zoom .case__media--front[data-v-c0adc676] {
    transform: none !important;
  }
  .more-cases .case:hover .case__media.video img[data-v-c0adc676] {
    opacity: 1 !important;
  }
}

/* Настоящая причина «зумятся все карточки сразу»: корневой контейнер
   страницы кейса имеет class="case nuxt" (общий класс страницы, не
   карточки). Селектор бандла `.case:hover .case__media img{scale(1.15)}`
   матчит и на этом внешнем `.case`, пока курсор просто над страницей — и
   каждая .case__media img внутри всех карточек попадает под правило,
   независимо от того, на какую карточку реально наведён курсор.

   Ни will-change, ни transform:translateZ() тут не помогают — селектор
   работает по DOM, а не по слоям. Изолируем правило только карточками
   «Больше кейсов»: возвращаем transform в базовое состояние (1.01, как в
   бандле в покое) для всех НЕ наведённых карточек внутри .more-cases, а
   родное правило hover'а из бандла (`.case:hover .case__media img{scale
   (1.15)}`) остаётся работать только на реально наведённой карточке. */
.more-cases .case:not(:hover) .case__media img,
.more-cases .case:not(:hover) .case__media img[data-v-c0adc676] {
  transform: scale(1.01) !important;
}