/* ==========================================================================
   mosaic-fix.css — стили состояний для интерактивных блоков сайта.
   Работает вместе с assets/mosaic-fix.js (заменяет недокачанные модули
   конструктора: do.menu_*.js, do.popup.js, do.blocklist.js и т.д.).
   Все правила действуют только когда JS запущен (класс .mfx-js на <html>).
   ========================================================================== */

/* ---------- Общее ---------- */
.mfx-js [role="button"] { cursor: pointer; }
.mfx-js .link-universal[role="button"]:focus-visible,
.mfx-js .button-up:focus-visible,
.mfx-js .dropdown__button:focus-visible,
.mfx-js .hor-menu__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@keyframes mfxFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Верхнее меню: выпадающие подменю ---------- */
.mfx-js .hor-menu__sub_list.mfx-show {
  animation: mfxFadeIn .2s ease both;
}
.mfx-js .hor-menu__icon,
.mfx-js .hor-menu__sub_icon {
  transition: transform .25s ease;
}
.mfx-js .hor-menu__item.mfx-open > .hor-menu__link > .hor-menu__icon,
.mfx-js .hor-menu__sub_item.mfx-open > .hor-menu__sub_link > .hor-menu__sub_icon {
  transform: rotate(180deg);
}

/* ---------- Мобильное меню (боковая панель) ---------- */
.mfx-js .side-panel__content {
  transition: transform .35s ease;
  will-change: transform;
}
.mfx-js .side-panel[data-mfx-side="left"]  .side-panel__content { transform: translateX(-105%); }
.mfx-js .side-panel[data-mfx-side="right"] .side-panel__content { transform: translateX(105%); }
.mfx-js .side-panel.mfx-open .side-panel__content { transform: translateX(0); }

.mfx-js .side-panel__mask {
  opacity: 0;
  transition: opacity .35s ease;
}
.mfx-js .side-panel.mfx-open .side-panel__mask { opacity: 1; }

/* Пункты вертикального меню с подпунктами */
.mfx-js .ver-menu__icon,
.mfx-js .ver-menu__sub_icon {
  cursor: pointer;
  transition: transform .25s ease;
}
.mfx-js .ver-menu__item.mfx-open > .ver-menu__link > .ver-menu__icon,
.mfx-js .ver-menu__sub_item.mfx-open > .ver-menu__sub_link > .ver-menu__sub_icon {
  transform: rotate(180deg);
}

/* ---------- Модальные окна (popup) ---------- */
.mfx-js .mosaic-popup__inner-bg {
  transition-duration: .3s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mfx-js .mosaic-popup.mfx-open .mosaic-popup__inner-bg { opacity: 1; }

.mfx-js .mosaic-popup__inner-data {
  transform: translateY(24px) scale(.98);
  transition: transform .3s ease;
}
.mfx-js .mosaic-popup.mfx-open .mosaic-popup__inner-data { transform: none; }

/* ---------- Выпадающий блок (телефон/контакты в шапке) ---------- */
.mfx-js .dropdown__content-wrapper.mfx-show {
  animation: mfxFadeIn .25s ease both;
}
.mfx-js .dropdown__button .svg_image { transition: transform .25s ease; }
.mfx-js .dropdown.mfx-open .dropdown__button .svg_image { transform: rotate(180deg); }

/* ---------- Слайдер (blocklist) ---------- */
.mfx-js .blocklist.mfx-slider .blocklist__items_wrapper {
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.mfx-js .blocklist.mfx-slider .blocklist__items_wrapper.mfx-dragging { cursor: grabbing; }
.mfx-js .blocklist.mfx-slider .blocklist__list { will-change: transform; }
.mfx-js .blocklist.mfx-slider img { -webkit-user-drag: none; user-drag: none; }
.mfx-js .blocklist.mfx-single .blocklist__arrows_wrapper,
.mfx-js .blocklist.mfx-single .blocklist__pagination_wrapper { display: none; }

/* ---------- Кнопка «Наверх» ---------- */
.mfx-js .button-up {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.mfx-js .button-up.mfx-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------- Увеличение картинок (lightbox) ---------- */
.mfx-js .imageFit.mfx-zoomable { cursor: zoom-in; }

.mfx-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .86);
  opacity: 0;
  transition: opacity .25s ease;
  cursor: zoom-out;
}
.mfx-lightbox.mfx-open { opacity: 1; }
.mfx-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
}
.mfx-lightbox__close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 28px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}
.mfx-lightbox__close:hover { background: rgba(255, 255, 255, .3); }

/* ---------- Формы ---------- */
.mfx-js .mosaic-form__field.mfx-invalid .mosaic-form__text {
  border-color: #e5484d;
}
.mfx-js .mosaic-form__button[disabled] {
  opacity: .6;
  cursor: progress;
}
.mfx-js .mosaic-form__servererror {
  margin-top: 10px;
  color: #e5484d;
  font-size: 14px;
  text-align: center;
}
.mfx-js re-captcha { display: none; }

/* Блокировка прокрутки страницы под открытым окном/меню */
body.mfx-locked { overflow: hidden; }