/* ===== Vdoma custom (поверх Webflow) ===== */

/* 1) Матовое «жидкое» стекло меню — берёт цвет фона под ним (не форсит белый).
   Стекло только на ОДНОМ слое (.nav-bar), контейнер прозрачный, чтобы не было
   двойного белого и «белого прямоугольника». */
/* И в покое, и в .nav-bar-active (page-встроенный <style> идёт ПОЗЖЕ custom.css и красит меню
   в сплошной #FFFFFF!important с той же специфичностью → побеждал по порядку источника).
   Берём бОльшую специфичность через .navbar__comp (3 класса > 2) — выигрываем при любом порядке. */
.navbar__comp .nav-bar,
.navbar__comp .nav-bar.nav-bar-active {
  background-color: rgba(255, 255, 255, 0.06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: none !important;
  box-shadow: none !important;
}
.navbar__comp .nav-bar__container { background-color: transparent !important; }
.navbar__comp .nav-bar__shadow { opacity: 0 !important; }

/* security-app: тёмный (красный) герой — лого/пункты меню белые, пока меню физически НАД героем
   (класс vd-over-dark вешает JS по реальной позиции); при уходе героя вверх — меню снова тёмное. */
.navbar__comp .nav-bar.vd-over-dark .nav-bar__link,
.navbar__comp .nav-bar.vd-over-dark .button.is-light,
.navbar__comp .nav-bar.vd-over-dark .button.is-light * { color: #fff !important; }
.navbar__comp .nav-bar.vd-over-dark .navbar1_logo { filter: brightness(0) invert(1); }
.navbar__comp .nav-bar.vd-over-dark [class*="menu-icon1_line"] { background-color: #fff !important; }
/* белая обводка, в покое БЕЗ заливки (прозрачная), заливка white 10% — только на hover */
.navbar__comp .nav-bar.vd-over-dark .nav-bar__link,
.navbar__comp .nav-bar.vd-over-dark .button.is-light {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.navbar__comp .nav-bar.vd-over-dark .nav-bar__link:hover,
.navbar__comp .nav-bar.vd-over-dark .button.is-light:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
}
.navbar__comp .nav-bar.vd-over-dark .nav-bar-border { background-color: rgba(255, 255, 255, 0.10) !important; }
/* герой security: любой оставшийся чёрный текст — белым */
.is--security, .is--security h1, .is--security h2, .is--security h3,
.is--security p, .is--security .ecosys-hero__title, .is--security .ecosys-hero__descr { color: #fff !important; }

/* Уголок-скругление, который САМ берёт цвет своей секции (background-color наследуется от секции),
   чтобы уголок всегда совпадал с блоком под ним — без ручного подбора mod-* по страницам. */
.below-hero-corners.vd-mog-corner { background-color: inherit !important; }

/* «Можливості «Вдома»» (features-секция) — тот же плотный верхний отступ, что у «Відгуки»
   (.sec-v-pad-u-hero = 16px). Было .sec-v-pad = 64px → большой зазор до скругления. */
.sec-v-pad:has(.anchor-features) { padding-top: var(--size--16px) !important; }

/* «Відгуки»: уголок следующей секции заходит вверх на 64px и съедает нижний отступ →
   карточки упираются в скругление. Добавляем 64px компенсации + 16px (как сверху). */
.sec-v-pad-u-hero:has(.testim-grid) { padding-bottom: calc(var(--size--64px) + var(--size--64px)) !important; }

/* for-residents герой: сдвигаем CSS-фон вправо в ПИКСЕЛЯХ (не %, т.к. при ширине картинки
   ≈ ширине экрана процент = no-op), чтобы зелёный рукав-свитер (треугольник) ушёл за правый край.
   По вертикали фон двигает JS-параллакс, X держим здесь. */
.section-hero.is-residents { background-position-x: calc(100% + 200px) !important; }

/* 2) Плавное появление модалки — из альфы, после загрузки картинки.
   Пока картинка не загружена — контент скрыт; JS добавит .vd-ready. */
/* Плавное появление всего окна (фон+контент) и плавное закрытие */
.fs_modal { transition: opacity .4s ease; }
.fs_modal.vd-closing { opacity: 0 !important; pointer-events: none; }
.fs_modal-3_cover,
.fs_modal-3_content {
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.fs_modal.vd-ready .fs_modal-3_cover,
.fs_modal.vd-ready .fs_modal-3_content {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fs_modal, .fs_modal-3_cover, .fs_modal-3_content { transition: none; transform: none; }
}

/* 3) Веб-портал: карточка той же ВЫСОТЫ, что и остальные — БЕЗ искажения картинки.
   Картинку (es-app__img-2) не трогаем (оставляем оригинальной), выравниваем высоту
   карточки через min-height колонки с изображением, как у обычных карточек (~407px). */
.es-app__col-1.is-web-portal { min-height: 407px; }
@media (max-width: 991px) { .es-app__col-1.is-web-portal { min-height: 300px; } }
@media (max-width: 767px) { .es-app__col-1.is-web-portal { min-height: 240px; } }

/* 4) Глубина стопки (эффект в custom.js). Затемнение — через overlay-opacity
   (дёшево для GPU), НЕ через filter: brightness (тот вызывал тормоза и сбой рендера в Chrome). */
.stacks-wrap .stack-card { transform-origin: center top; }
.stacks-wrap .es-app { position: relative; }
/* условная тень = ровное лёгкое затемнение (opacity управляется из custom.js) */
.vd-dim {
  position: absolute; inset: 0; border-radius: inherit;
  background: #0b1424; opacity: 0; pointer-events: none;
  z-index: 6; will-change: opacity;
}

/* ===== Моб-футер: контент не должен прилипать к правому краю ===== */
@media (max-width: 767px) {
  .footer .f-grid { grid-template-columns: 1fr !important; justify-items: start !important; }
  .footer .f-1, .footer .f-2, .footer .f-3 {
    width: 100%; justify-self: start !important; text-align: left;
  }
  .footer .f-1, .footer .f-social__wrap, .footer .f-social-links__wrap,
  .footer .form-wrap-footer, .footer .frorm__row { justify-content: flex-start !important; }
  .footer .f-nav { align-items: flex-start !important; }
  .footer .f-nav__item, .footer .f-nav__link { text-align: left !important; }
}

/* ===== Отложенный попап (.modal-d_popup) — плавное появление ===== */
.modal-d_popup { opacity: 0; transition: opacity .4s ease; }
.modal-d_popup.vd-pop-ready { opacity: 1 !important; } /* !important — перебивает inline opacity:0 от внешнего скрипта */
.modal-d_popup .modal-form {
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.modal-d_popup.vd-pop-ready .modal-form { opacity: 1; transform: none; }
/* плавное закрытие: фон гаснет, форма уезжает обратно */
.modal-d_popup.vd-pop-closing { opacity: 0 !important; pointer-events: none; }
.modal-d_popup.vd-pop-closing .modal-form { opacity: 0 !important; transform: translateY(18px) scale(.97) !important; }
/* Крестик закрытия ОБОИХ попапов — как на фронте Обліка (.uim__close): в покое без подложки/рамки,
   на hover серая подсветка #f7f7f7 + внутренняя обводка 1px чёрный 10%, скругление 8px, плавно. */
.fs_modal-3_close {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: var(--size--8px);
  transition: background-color .12s ease, color .12s ease !important;
}
.fs_modal-3_close:hover {
  background-color: #f7f7f7 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10) !important; /* внутренняя обводка 1px, чёрный 10% */
}

/* «Плавающая» тень + внутренняя обводка 1px чёрный 10%.
   Консультация — обычным inset. Зелёный .modal-form: обводка через outline (рисуется ПОВЕРХ,
   не перекрывается внутренним слоем .div-block-82 и не режется overflow:hidden), тень усилена. */
/* Обводку и тень с попапов убрали (давали квадратную рамку). Форму переверстают отдельно. */
/* иконка крестика у зелёного попапа — того же размера, что у консультации (1rem) */
.modal-form__close-icon { width: 1rem !important; height: 1rem !important; }

/* таймерный попап держим скрытым, пока открыт другой (opacity — НЕ display, чтобы детект видимости работал) */
.modal-d_popup.vd-pop-hold { opacity: 0 !important; pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) {
  .modal-d_popup, .modal-d_popup .modal-form { transition: none; transform: none; }
}