/* Общие стили для ВСЕХ размеров экрана */
body {
    background-color: #D3D3D3; /* Устанавливаем основной цвет */
    background-image: url('/static/deps/icons/head/cap_head.jpg');
    background-size: contain;
    background-position: center;
    height: 750px; /* Настройте высоту баннера по вкусу */
    /* border-bottom: 2px solid #ccc; /* Граница для отделения от NAV */
    /* По умолчанию для больших экранов (Desktop) используем cover */
}

html {
    scrollbar-width: none;
}

/* 2. Для Chrome, Safari, Edge */
html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Гарантируем, что он исчезнет */
}

/* 🌟 МЕДИАЗАПРОС: Стиль для маленьких экранов (max-width: 767.98px) 🌟 */
@media (max-width: 756.98px) {
    body {
        /* На маленьких экранах используем contain, чтобы не обрезать изображение */
        background-size: cover;
    }
}
/* Стилизация "телефонов" (визуальные элементы) */
.product-device {
    position: absolute;
    right: 10%;
    width: 300px;
    height: 540px;
    background-color: #3e3e3e;
    border-radius: 21px;
    transform: rotate(30deg);
    z-index: 1; /* Для заднего плана */
}
.product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
}
.product-device-2 {
    top: -3rem;
    right: auto;
    bottom: -3rem;
    left: 5%;
    background-color: #e5e5e5;
    transform: rotate(-30deg);
    z-index: 1; /* Для заднего плана */
}
.product-device-2::before {
    background-color: rgba(0, 0, 0, .1);
}

/* Медиа-запрос для скрытия "телефонов" на маленьких экранах */
@media (max-width: 767.98px) {
    .product-device {
        display: none !important;
    }
}

/* Зеленый ховер для выпадающего меню */
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus {
    background-color: #198754; /* Это стандартный зеленый 'success' от Bootstrap */
    color: #fff; /* Делаем текст на зеленом фоне белым для читаемости */
}

/* Селектор для полей ввода, select, textarea и т.д. в состоянии фокуса */
.form-select:focus,
.form-control:focus {
    /* Цвет тени (свечения) в формате RGBA - делаем его зеленым */
    border-color: #198754; /* Зеленый цвет обводки */
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;/* Полупрозрачное зеленое свечение */
}

/* Изменяем цвет значка выбора в select-полях, когда они активны */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23198754' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Изменяем синее выделение для элементов списка SELECT (option) */
select option:checked {
    /* Меняем фон выделенного элемента */
    background-color: #198754; /* Зеленый цвет */
    /* Меняем цвет текста выделенного элемента */
    color: #fff; /* Белый текст для читаемости */
}

.navbar-nav .nav-link {
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    border-radius: 0.375rem; /* Закругление для имитации кнопки */
    padding: 0.5rem 1rem; /* Стандартный padding для кнопки */
    color: #000 !important; /* УСТАНОВЛЕН ЧЕРНЫЙ ЦВЕТ */
    font-weight: 500; /* Полужирный, чтобы выглядело как активный элемент */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link[aria-expanded="true"] {
    /* Имитация .btn-secondary при наведении или в активном состоянии */
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}

/* ========================================================= */
/* МОБИЛЬНОЕ МЕНЮ: НА ВСЮ ШИРИНУ (ИСПРАВЛЕНИЕ СКРЫТИЯ) */
/* ========================================================= */

@media (max-width: 991.98px) {

    /* 1. Контейнер выпадающего меню */
    .navbar-collapse {
        /* position: static нужен, чтобы сдвигать контент вниз, когда меню открыто */
        position: static !important;
    }

    /* 🔑 ИСПРАВЛЕНИЕ: Применяем стили отображения ТОЛЬКО когда меню открыто (.show) */
    .navbar-collapse.show {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Растягиваем на всю ширину */
    }

    /* 2. Сам блок меню (Серый фон) */
    .navbar-nav {
        /* Ширина 100% */
        width: 100% !important;

        /* Убираем внешние отступы по бокам */
        margin: 10px 0 !important;

        /* --- Визуал --- */
        background-color: rgba(211, 211, 211, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        border-radius: 1rem;
        padding: 1rem;

        text-align: center !important;
    }

    /* 3. Пункты меню */
    .navbar-nav .nav-item {
        justify-content: center !important;
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding-left: 0 !important;
        color: #000 !important;
        font-weight: 500;
        width: 100%;

        /* Полоска-разделитель (опционально) */
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    .dropdown-menu {
        /* Главный фикс: отменяем абсолютное позиционирование, чтобы он выезжал вертикально, сдвигая контент вниз */
        position: static !important;
        width: 100% !important;

        /* СБРОС ГОРИЗОНТАЛЬНЫХ СМЕЩЕНИЙ */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;

        /* Визуальные сбросы */
        margin: 0.5rem 0 0.5rem 0 !important;
        padding: 0 !important;
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Выравниваем пункты внутри дропдауна по центру */
    .dropdown-menu .dropdown-item {
        text-align: center !important;
        /* Убираем лишние паддинги для мобильного вида */
        padding: 0.5rem 1rem !important;
        /* Опционально: можно добавить здесь границу для разделения, если нужно */
    }


/* ПОЛУПРОЗРАЧНОЕ СВЕЧЕНИЕ ПРИ НАВЕДЕНИИ/НАЖАТИИ */
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link[aria-expanded="true"] {
        /* Сброс десктопных стилей: */
        color: #000 !important; /* Сохраняем черный цвет текста */
        background-color: transparent !important; /* Удаляем серый фон */
        border-color: transparent !important; /* Удаляем серую обводку */
    }
}


/* ------------------------------------------------ */
/* АДАПТАЦИЯ КАРТОЧЕК ДЛЯ ЭКРАНОВ МЕНЬШЕ 768px */
/* ------------------------------------------------ */

@media (max-width: 768px) {


    /* 2. Адаптация контейнера изображения */
    /* Селектор .flex-shrink-0 нацелен на блок с фиксированным размером 200x200px */
    .card > .d-flex > .flex-shrink-0 {
        width: 50% !important;
        height: 50% !important;
        max-width: 150px; /* Ограничиваем размер изображения */
        margin-bottom: 10px !important; /* Отступ после изображения */
        margin-right: 10px !important; /* Убираем правый отступ */
    }
}

#loginModal {
    /* Устанавливаем z-index выше, чем у стандартного модального окна (1060) */
    z-index: 5070;
}

/* 2. Бэкдроп (затемнение фона) для этого модального окна */
.modal-backdrop.show {
    /* Устанавливаем z-index выше, чем у стандартного бэкдропа (1055) */
    z-index: 5069;
}

/* Устанавливает z-index для самого модального окна активации */
#activationModal {
    z-index: 5070; /* Выше, чем у других стандартных модальных окон (1060) */
}

/* Устанавливает z-index для бэкдропа (затемнения) этого модального окна */
/* Обратите внимание: класс .modal-backdrop является общим, но мы можем его переопределить */

/* Более точный селектор, если это необходимо, или просто переопределяем общий: */
.modal-backdrop {
    z-index: 5069; /* Должно быть выше, чем все, кроме самого модального окна */
}