/* ФАЙЛ: style.css (ПОЛНАЯ ВЕРСИЯ - с вашими стилями + стили из ПРИМЕРА для нового меню и флагов) */

/* ======================================== */
/* 1. Ваши базовые стили */
/* ======================================== */
body {
    font-family: 'Poppins', sans-serif; /* Или 'Segoe UI' из примера */
    scroll-behavior: smooth;
    /* Стили цвета фона/текста из примера (можно раскомментировать) */
    /* --background-color: #ffffff; */
    /* --foreground-color: #1f2937; */
    /* color: var(--foreground-color); */
    /* background-color: var(--background-color); */
}
.hero {
    background-size: cover;
    background-position: center;
    position: relative;
}
.property-card { /* Ваши стили + стили из примера */
    transition: all 0.3s ease;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.property-image { /* Из примера */
    height: 200px;
    overflow: hidden;
}
.property-image img { /* Из примера */
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;
}
.property-card:hover .property-image img { /* Из примера */
    transform: scale(1.1);
}

/* ======================================== */
/* 2. Стили для НОВОГО ДЕСКТОПНОГО МЕНЮ (Из Примера) */
/* ======================================== */
:root { /* Переменные из примера */
    --primary-color: #3b82f6;
    --secondary-color: #f97316;
    --accent-color: #22c55e;
    --danger-color: #ef4444;
    /* --background-color: #ffffff; */ /* Уже есть в body? */
    /* --foreground-color: #1f2937; */ /* Уже есть в body? */
    --border-color: rgba(229, 231, 235, 0.4);
}
/* Темная тема (если нужна) */
/* .dark { ... } */

/* Menu animations */
.glow-menu {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    overflow: visible; /* Изменено с hidden */
    position: relative;
}
.menu-item {
    position: relative;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    overflow: hidden;
    cursor: pointer; /* Добавлено */
}
.menu-item::before {
    content: ''; position: absolute; inset: 0; border-radius: 0.75rem; opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease; z-index: 0; /* Изменено с -1 */
    transform: scale(0.8); pointer-events: none;
}
/* Цвета свечения */
.menu-item.home::before { background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(37,99,235,0.06) 50%, rgba(29,78,216,0) 100%); }
.menu-item.properties::before { background: radial-gradient(circle, rgba(239,68,68,0.15) 0%, rgba(220,38,38,0.06) 50%, rgba(185,28,28,0) 100%); }
.menu-item.area::before { background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, rgba(124,58,237,0.06) 50%, rgba(109,40,217,0) 100%); }
.menu-item.how-to-buy::before { background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, rgba(234,88,12,0.06) 50%, rgba(194,65,12,0) 100%); }
/* .menu-item.sell::before { ... } */
.menu-item.about::before { background: radial-gradient(circle, rgba(20,184,166,0.15) 0%, rgba(13,148,136,0.06) 50%, rgba(15,118,110,0) 100%); }
.menu-item.contact::before { background: radial-gradient(circle, rgba(234,179,8,0.15) 0%, rgba(202,138,4,0.06) 50%, rgba(161,98,7,0) 100%); }
/* Активация свечения */
.menu-item:hover::before, .menu-item.active::before { opacity: 1; transform: scale(2); }
/* Контейнер иконки/текста */
.menu-item > div { position: relative; z-index: 1; }
/* Иконки */
.menu-icon, .menu-back-icon { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.menu-icon { transform-origin: center bottom; transform: rotateX(0) translateY(0); opacity: 1; }
.menu-back-icon { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; /* justify-content: center; */ transform-origin: center top; transform: rotateX(90deg) translateY(100%); opacity: 0; }
/* Анимация иконок */
.menu-item:hover .menu-icon, .menu-item.active .menu-icon { transform: rotateX(-90deg) translateY(-100%); opacity: 0; }
.menu-item:hover .menu-back-icon, .menu-item.active .menu-back-icon { transform: rotateX(0) translateY(0); opacity: 1; }
/* Выравнивание */
.desktop-menu .menu-back-icon { justify-content: center; } /* Для десктопа */
.mobile-menu-item .menu-icon { justify-content: flex-start; } /* Для мобильного (если будете использовать анимированное) */
.mobile-menu-item .menu-back-icon { justify-content: flex-start; } /* Для мобильного (если будете использовать анимированное) */


/* ======================================== */
/* 3. Стили для Флажков (Из Примера) */
/* ======================================== */
.flag-icon {
    width: 24px; height: 18px; border-radius: 3px; object-fit: cover;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    cursor: pointer; border: 1px solid rgba(0,0,0,0.1); opacity: 0.65;
}
.flag-icon:hover { transform: scale(1.15); opacity: 1; }
.flag-icon.lang-active {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-color); /* Используем переменную */
    opacity: 1; transform: scale(1.1);
}

/* ======================================== */
/* 4. Стили для ВАШЕГО МОБИЛЬНОГО МЕНЮ (НЕ из примера) */
/* ======================================== */
#mobile-menu-button { padding: 0.5rem; }
/* Стили контейнера (управляется JS и Tailwind 'hidden') */
#mobile-menu {
    /* background-color: #ffffff; */ /* Задается классом Tailwind bg-white */
    /* color: #1f2937; */ /* Задается классом Tailwind text-gray-700 */
    border-color: #e5e7eb; /* gray-200 */
    border-top-width: 1px; /* Граница появляется когда меню видимо (класс hidden убран) */
    /* Анимация больше не нужна, используется Tailwind 'hidden' */
    /* transition: ... */
    /* max-height: ... */
    /* overflow: ... */
}
/* Класс .open больше не используется для этого меню */


/* ======================================== */
/* 5. Другие стили из ПРИМЕРА (можно адаптировать или удалить) */
/* ======================================== */

/* Стили для дропдауна фильтров (если используется) */
.filter-dropdown { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; opacity: 0; }
.filter-dropdown.active { max-height: 500px; opacity: 1; }

/* Стили для фильтров из примера */
.filter-container { background: white; border-radius: 1rem; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
.input-group { position: relative; }
.input-group label { position: absolute; top: -10px; left: 10px; background-color: white; padding: 0 5px; font-size: 0.75rem; color: #6b7280; }

/* Стили для Feature boxes из примера */
.feature-box { border-radius: 1rem; background: white; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature-box:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.feature-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; margin-left: auto; margin-right: auto; background: var(--primary-color); color: white; font-size: 1.5rem; }

/* Анимация fadeIn из примера */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fadeIn { animation: fadeIn 0.5s ease forwards; }

/* ======================================== */
/* 6. Остальные ВАШИ стили (если были) */
/* ======================================== */
/* ... (Добавьте сюда любые другие ваши стили, если они были удалены) ... */