/*
=============================================================================
MEEL.RU - Адаптивная навигация
=============================================================================
Файл: static/css/adaptive_header.css
Назначение: Стили для адаптивной шапки сайта с поэтапным скрытием элементов
Breakpoints:
- xl (≥1200px): все элементы видны
- lg (≥992px): скрыть "услуги" и "авто", оставить в бургере  
- md (≥768px): скрыть также мессенджеры
- sm (<768px): оставить только логотип + бургер
=============================================================================
*/

/* =============================================================================
   ОСНОВНЫЕ СТИЛИ НАВИГАЦИИ
   ============================================================================= */

.navbar {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-bottom: 2px solid #ffcc02;
    transition: all 0.3s ease;
}

.navbar-brand {
    color: #ffcc02 !important;
    transition: color 0.3s ease;
}

.navbar-brand:hover {
    color: #ffffff !important;
}

/* =============================================================================
   ПОИСК В НАВИГАЦИИ
   ============================================================================= */

.search-container {
    position: relative;
    min-width: 300px;
    max-width: 400px;
    margin: 0 20px;
}

.search-form .form-control {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 6px 0 0 6px;
}

.search-form .form-control:focus {
    border-color: #ffcc02;
    box-shadow: 0 0 0 0.2rem rgba(255, 204, 2, 0.25);
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.search-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-form .btn-outline-warning {
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffcc02;
    border-radius: 0 6px 6px 0;
}

.search-form .btn-outline-warning:hover {
    background-color: #ffcc02;
    border-color: #ffcc02;
    color: #1a1a1a;
}

/* Результаты поиска */
.search-results {
    top: 100%;
    left: 0;
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-category-header {
    font-size: 0.875rem;
    font-weight: 600;
}

.search-item {
    padding: 8px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-item:hover {
    background-color: rgba(255, 204, 2, 0.1);
}

.search-item:last-child {
    border-bottom: none;
}

/* =============================================================================
   АДАПТИВНЫЕ BREAKPOINTS
   ============================================================================= */

/* XL - Desktop (≥1200px): Все элементы видны */
@media (min-width: 1200px) {
    .navbar-nav-desktop {
        display: flex !important;
    }
    
    .search-container {
        display: block !important;
    }
    
    .messenger-icons {
        display: flex !important;
    }
    
    .services-dropdown,
    .cars-link {
        display: block !important;
    }
}

/* LG - Large tablet (≥992px, <1200px): Скрыть услуги/авто, убрать мессенджеры */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .search-container {
        display: block !important;
        min-width: 250px;
        max-width: 300px;
    }
    
    .messenger-icons {
        display: none !important;
    }
    
    /* Услуги и автомобили переносятся в бургер */
    .services-dropdown,
    .cars-link {
        display: none !important;
    }
    
    .navbar-toggler {
        display: block !important;
    }
}

/* MD - Tablet (≥768px, <992px): Скрыть поиск из основной навигации */
@media (min-width: 768px) and (max-width: 991.98px) {
    .search-container {
        display: none !important;
    }
    
    .messenger-icons {
        display: none !important;
    }
    
    .services-dropdown,
    .cars-link {
        display: none !important;
    }
    
    /* Поиск будет в collapse меню */
    .mobile-search {
        display: block !important;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 10px;
    }
}

/* SM - Mobile (<768px): Только логотип + бургер */
@media (max-width: 767.98px) {
    .search-container {
        display: none !important;
    }
    
    .region-selector {
        order: 1;
    }
    
    .phone-link {
        order: 2;
    }
    
    .mobile-search {
        display: block !important;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 15px;
    }
    
    /* Все элементы в collapse */
    .navbar-collapse .navbar-nav {
        flex-direction: column;
    }
    
    .navbar-collapse .nav-item {
        width: 100%;
        text-align: left;
    }
    
    /* Региональный selector упрощенный */
    .region-selector .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        box-shadow: none;
        border: none;
        background-color: rgba(255, 255, 255, 0.05);
        margin-top: 5px;
    }
}

/* =============================================================================
   БУРГЕР-МЕНЮ И COLLAPSE
   ============================================================================= */

.navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 8px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 204, 2, 0.25);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Стили для collapse меню */
.navbar-collapse {
    background-color: rgba(0, 0, 0, 0.95);
    border-radius: 8px;
    margin-top: 10px;
    padding: 15px;
}

.navbar-collapse .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.3s ease;
}

.navbar-collapse .nav-link:hover {
    color: #ffcc02 !important;
}

.navbar-collapse .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-collapse .dropdown-item {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease;
}

.navbar-collapse .dropdown-item:hover {
    background-color: rgba(255, 204, 2, 0.1);
    color: #ffcc02 !important;
}

/* =============================================================================
   АНИМАЦИИ И ПЕРЕХОДЫ
   ============================================================================= */

.navbar-nav .nav-link,
.navbar-nav .dropdown-toggle {
    transition: all 0.3s ease;
}

.dropdown-menu {
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth transitions для элементов */
.search-container,
.messenger-icons,
.services-dropdown,
.cars-link {
    transition: all 0.3s ease;
}

/* =============================================================================
   КАСТОМНЫЕ УТИЛИТЫ
   ============================================================================= */

/* Кнопка телефона */
.phone-link {
    font-weight: 600;
    color: #ffcc02 !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.phone-link:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 204, 2, 0.6);
}

/* Региональный селектор */
.region-selector .dropdown-toggle {
    color: rgba(255, 255, 255, 0.9) !important;
}

.region-selector .dropdown-toggle:hover {
    color: #ffcc02 !important;
}

/* Responsive utilities */
.show-on-lg {
    display: none;
}

@media (min-width: 992px) {
    .show-on-lg {
        display: block !important;
    }
}

.hide-on-lg {
    display: block;
}

@media (min-width: 992px) {
    .hide-on-lg {
        display: none !important;
    }
}