/**
 * Ninebot Components Override Styles
 * Стили для интеграции новых header/footer и скрытия старых элементов
 */

/* Скрываем старую навигацию */
.segway-topnav-container,
.top-nav-pc,
.segway-topnav-container-m,
.top-nav-mobile,
.top-nav-mobile-head,
.sec__header_content,
.sec__header_content_fixed,
.segway-special-header .top-nav,
.topnav,
.navbar {
    display: none !important;
}

/* Скрываем фиксированный логотип Segway (он будет в новом header) */
.fixed-segway-logo {
    display: none !important;
}

/* Контейнеры для компонентов */
#ninebot-header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
}

/* Header на главной странице - прозрачный над hero */
#home-page #ninebot-header-container header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease;
}

/* Header становится непрозрачным при скролле */
#home-page #ninebot-header-container header.scrolled {
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Footer контейнер */
#ninebot-footer-container {
    position: relative;
    width: 100%;
    margin-top: 0; /* Убран отступ сверху */
}

/* НЕ добавляем padding к body - hero секция должна начинаться от верха */
body {
    padding-top: 0 !important;
}

/* Hero секция на главной странице */
#home-page .home-primary-banner {
    margin-top: 0;
    padding-top: 0;
    height: 100vh;
    position: relative;
}

/* Контент после hero должен иметь нормальный отступ */
#home-page main > div:nth-child(2) {
    margin-top: 40px;
}

/* Для внутренних страниц (не главная) добавляем отступ */
body:not(#home-page) {
    padding-top: 80px !important;
}

/* Мобильная адаптация */
@media (max-width: 1024px) {
    body:not(#home-page) {
        padding-top: 70px !important;
    }
}

@media (max-width: 640px) {
    body:not(#home-page) {
        padding-top: 60px !important;
    }
}

/* Z-index управление */
#ninebot-header-container {
    z-index: 9999;
}

#ninebot-header-container .modal,
#ninebot-footer-container .modal {
    z-index: 10000;
}

/* Убираем возможные конфликты с существующими модальными окнами */
.modal-backdrop,
.modal-background {
    z-index: 9998;
}

/* Корректировка для страниц продуктов */
.product_page #ninebot-header-container header {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* Убедимся, что контент не перекрывается */
.root.container,
main.container,
.main-content {
    position: relative;
    z-index: 1;
}

/* Убираем дублирование отступов */
.languageselectionbar {
    margin-top: 0 !important;
}

/* Smooth scroll при клике на якорные ссылки */
html {
    scroll-behavior: smooth;
}

/* Анимация появления компонентов */
#ninebot-header-container,
#ninebot-footer-container {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Фикс для правильного позиционирования dropdown меню */
#ninebot-header-container .mega-menu {
    position: fixed;
    margin-top: 0;
}

/* Корректировка для мобильного меню */
#ninebot-header-container .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Стили для элементов header на главной странице */
#home-page #ninebot-header-container .models-btn,
#home-page #ninebot-header-container .phone,
#home-page #ninebot-header-container a {
    color: #fff !important;
    opacity: 0.9;
}

#home-page #ninebot-header-container .models-btn:hover,
#home-page #ninebot-header-container .phone:hover,
#home-page #ninebot-header-container a:hover {
    opacity: 1 !important;
}

/* Делаем текст более читаемым на прозрачном фоне */
#home-page #ninebot-header-container:not(.scrolled) .header-container {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}