/* =========================
   Base
   ========================= */
body {
  font-family: "Open Sans", Arial, sans-serif;
  background: linear-gradient(135deg, #e2e8f0 0%, #f8fafc 100%);
  color: #243146;
}

.font-mont { font-family: "Montserrat", Arial, sans-serif; }

.hero-bg {
  background:
    linear-gradient(105deg, rgba(36,49,100,0.74) 55%, rgba(58,222,220,0.12)),
    url("/inc/images/photo-1506744038136-46273834b3fb.webp")
    center/cover no-repeat;
}

.project-img { object-fit: cover; }

.blur-bg {
  backdrop-filter: blur(4px) saturate(145%);
  background: rgba(255,255,255,0.79);
}



.nowrap-address { white-space: nowrap; }
.addressfix { word-break: break-word; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* =========================
   Navigation links (common)
   ========================= */
.nav-link {
  position: relative;
  transition: color 0.3s;
}

.nav-link:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #4299e1;
  transition: width 0.3s ease;
}

.nav-link:hover:after,
.nav-link.active:after {
  width: 100%;
}

.nav-link:hover { color: #4299e1; }

.nav-link.active {
  color: #4299e1;
  font-weight: 600;
}

/* =========================
   Mobile menu
   ========================= */
html.menu-open,
body.menu-open {
  overflow: hidden !important;
}

.mobile-menu .nav-link {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.mobile-menu .nav-link:last-child {
  border-bottom: none;
}

.mobile-menu .nav-link:hover { color: #2563eb; }

/* Parent toggles: Недвижимость / ВНЖ */
#mobile-realestate-toggle,
#mobile-permit-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.6rem 0;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
}

#mobile-realestate-toggle:hover,
#mobile-permit-toggle:hover {
  color: #2563eb;
}

/* Parent panels link style */
#mobile-realestate-menu .nav-link,
#mobile-permit-menu .nav-link {
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.4rem 0;
  color: #374151;
  border-bottom: none;
}

#mobile-realestate-menu .nav-link:hover,
#mobile-permit-menu .nav-link:hover {
  color: #2563eb;
}

#mobile-realestate-menu .nav-link.active,
#mobile-permit-menu .nav-link.active {
  font-weight: 600;
  color: #4299e1;
}

/* Nested accordion (countries) */
.mobile-subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.55rem 0;
  cursor: pointer;
  font-size: 1.0rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.mobile-subtoggle.active { color: #4299e1; }

.mobile-sublinks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 14px;
  padding-top: 6px;
}

.mobile-sublinks .nav-link {
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.25rem 0;
  color: #374151;
  border-bottom: none;
}

/* =========================
   Desktop dropdown + mega menu
   ========================= */
.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  min-width: 240px;
  border-radius: 12px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 10px 35px rgba(0,0,0,.10);
  padding: 12px;

  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 50;

  font-size: 0.95rem;
  line-height: 1.35;
}

.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Hover gap under dropdown */
.dropdown::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 12px;
}


/* Chevron rotation ONLY for dropdown trigger chevron (.chev) */
.dropdown > button .chev { transition: transform .18s ease; }

.dropdown:hover > button .chev,
.dropdown:focus-within > button .chev {
  transform: rotate(180deg);
}

/* =========================
   Desktop mega menu (VERTICAL headings)
   ========================= */

/* Mega menu sizing/layout */
.dropdown-menu--mega{
  min-width: 520px;   /* было 720px — для вертикального меню достаточно меньше */
  padding: 14px;
  max-height: 70vh;   /* чтобы длинные списки не вываливались за экран */
  overflow: auto;
}

/* ВАЖНО: делаем подзаголовки вертикальными (одна колонка) */
.mega-grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mega-col{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* На всякий случай: на любых ширинах остаёмся в вертикальном варианте */
@media (max-width: 1279px){
  .dropdown-menu--mega{ min-width: 480px; }
}
@media (max-width: 1023px){
  .dropdown-menu--mega{ min-width: 420px; }
}

/* Accordion headers inside mega menu */
.mega-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0 0 6px 0;
  margin: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  color: #111827;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.mega-toggle.active { color: #4299e1; }

.mega-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

/* =========================
   Accordion: icon rotation
   ========================= */
.acc-chev { transition: transform .18s ease; }
.rotate-180 { transform: rotate(180deg); }

/* IMPORTANT:
   НЕ переопределяем Tailwind .hidden глобально (иначе ломаем hidden lg:flex).
   Скрываем только наши панели, где JS реально добавляет/убирает .hidden.
*/
#mobile-realestate-menu.hidden,
#mobile-permit-menu.hidden,
.mobile-sublinks.hidden,
.mega-panel.hidden {
  display: none !important;
}

/* =========================
   Cards / misc
   ========================= */
.article-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 25px -5px rgba(0,0,0,0.1),
    0 10px 10px -5px rgba(0,0,0,0.04);
}

.price--old {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(66,153,225,.55);
  position: relative;
}

.price--old::before {
  content: "продано";
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: -5px;
  font: inherit;
  font-size: 0.90em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  color: #3B82F6;
}

/* English label for sold cards */
html[lang="en"] .price--old::before {
  content: "sold";
}


.price--muted { color: rgba(66,153,225,.55); }

/* =========================
   DESKTOP: Mega-menu "Недвижимость" — ссылки как в мобилке
   ========================= */

/* 1) Убираем underline-эффект именно внутри mega-panel */
.dropdown-menu--mega .mega-panel .nav-link:after{
  display:none !important;
}

/* 2) Базовый стиль ссылок (как mobile submenu) */
.dropdown-menu--mega .mega-panel .nav-link{
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.25rem 0;
  color: #374151;
}

/* 3) Hover/Active как в мобилке */
.dropdown-menu--mega .mega-panel .nav-link:hover{
  color:#2563eb;
}

.dropdown-menu--mega .mega-panel .nav-link.active{
  color:#4299e1;
  font-weight:600;
}

/* =========================
   DESKTOP: "Недвижимость" — стиль ссылок как в "ВНЖ"
   (вставить в самый конец файла)
   ========================= */

/* Убираем underline-эффект (псевдолинию) только внутри mega-панелей */
.dropdown-menu--mega .mega-panel a.nav-link::after{
  display: none !important;
}

/* Базовый вид ссылок как в "ВНЖ": обычный вес, спокойный цвет */
.dropdown-menu--mega .mega-panel a.nav-link{
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: #111827 !important;
  padding: 0.25rem 0 !important;
  text-decoration: none !important;
}

/* Hover как везде */
.dropdown-menu--mega .mega-panel a.nav-link:hover{
  color: #2563eb !important;
}

/* Active — как везде */
.dropdown-menu--mega .mega-panel a.nav-link.active{
  color: #4299e1 !important;
  font-weight: 600 !important;
}

/* Если “чёрная линия” была под заголовками стран — убираем её */
.dropdown-menu--mega .mega-toggle{
  border-bottom: none !important;
  font-weight: 600 !important;   /* чуть мягче, как в меню */
}

/* =========================
   Mobile menu (only visuals + iOS scroll)
   ========================= */

/* Визуал — без transform/opacity/pointer-events/position */
.mobile-menu{
  z-index: 10000; /* чтобы точно было поверх всего */
  background: linear-gradient(to bottom right, #ffffff, #f0f6ff);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  padding: 1rem 1.25rem;

  -webkit-overflow-scrolling: touch;
}

/* блокируем фон, но НЕ запрещаем touch вообще */
html.menu-open,
body.menu-open{
  overflow: hidden !important;
  touch-action: auto !important;
}

/* меню можно скроллить пальцем */
#mobile-menu{
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;           /* важно */
  touch-action: pan-y;        /* разрешаем вертикальный свайп */
}

#mobile-menu{
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@supports (height: 100dvh){
  #mobile-menu{
    max-height: calc(100dvh - 7rem);
  }
}

/* Когда открыто мобильное меню — виджет не должен перекрывать меню */
body.menu-open .whatsapp-call-widget{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(12px);
}

/* WhatsApp widget — base */
.whatsapp-call-widget{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  font-family: "Open Sans", Arial, sans-serif;
}

/* Panel */
.whatsapp-call-panel{
  width: 320px;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  overflow: hidden;
  background: #fff;
  transform: translateY(0);
  opacity: 1;
  transition: transform .25s ease, opacity .25s ease;
}

/* Header */
.whatsapp-call-header{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(59,130,246,.12));
}

.whatsapp-call-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid rgba(59,130,246,.25);
}

.whatsapp-call-text{
  font-size: 14px;
  line-height: 1.25;
  color: #0f172a;
  padding-right: 34px; /* место под крестик */
}

.whatsapp-call-close{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.8);
  cursor: pointer;
  font-size: 22px;
  line-height: 26px;
  color: #0f172a;
}

.whatsapp-call-button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  background: #22c55e;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.whatsapp-call-icon{
  font-size: 18px;
}

/* FAB (круг) */
.whatsapp-call-fab{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #22c55e;
  color: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  opacity: 0;
  pointer-events: none;
  transform: scale(.9);
  transition: opacity .2s ease, transform .2s ease;
}

/* Collapsed state */
.whatsapp-call-widget.is-collapsed .whatsapp-call-panel{
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.whatsapp-call-widget.is-collapsed .whatsapp-call-fab{
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Mobile tweaks */
@media (max-width: 420px){
  .whatsapp-call-panel{ width: 290px; }
  .whatsapp-call-widget{ right: 12px; bottom: 12px; }
}

/* FIX: убираем наследие старого виджета */
#waWidget .whatsapp-call-button{
  position: static !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  display: flex !important;
}

#waWidget .whatsapp-call-panel{
  display: block !important;
  background: #fff !important;
}

#waWidget .whatsapp-call-header{
  display: flex !important;
}


/* EN override: sold label on old price */
html[lang="en"] .price--old::before,
body[data-lang="en"] .price--old::before {
  content: "sold" !important;
}