/* ============================================================
   1. ГЛОБАЛЬНЫЙ НАВБАР (ЭФФЕКТ СТЕКЛА)
   ============================================================ */
.navbar {
    background: rgba(15, 15, 15, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Границы для контура стекла */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8) !important;
    padding: 10px 0 !important;
    transition: background 0.3s ease;
}

/* Логотип */
.navbar-brand {
    color: #e0e0e0 !important;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    font-weight: bold;
}

/* ============================================================
   2. КНОПКИ МЕНЮ (ПОЛНАЯ ПРОЗРАЧНОСТЬ И ПЛАВНЫЙ ЦВЕТ)
   ============================================================ */
.auth-btn, 
.profile-btn, 
.balance-btn, 
.admin-btn,
.language-switcher .lang-label,
.navbar-nav .nav-link {
    /* Сбрасываем все "коробки" */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    
    /* Текст и анимация */
    color: #ffffff !important;
    padding: 8px 12px !important;
    text-transform: uppercase;
    font-size: 12px !important;
    cursor: pointer;
    transition: all 0.4s ease-in-out !important;
}

/* Эффект при наведении (Ховер) */
.auth-btn:hover, 
.profile-btn:hover, 
.admin-btn:hover,
.language-switcher .lang-label:hover {
    color: #ff9d00 !important; /* Сталкерский оранжевый */
    text-shadow: 0 0 15px rgba(255, 157, 0, 0.7), 0 0 5px rgba(255, 157, 0, 0.5) !important;
    background: transparent !important;
}

/* Особый стиль для баланса (всегда оранжевый) */
.balance-btn {
    color: #ff9d00 !important;
    font-weight: 800 !important;
}

/* Убираем контейнерные разделители */
.auth-btns {
    border: none !important;
    gap: 15px !important;
}

/* ============================================================
   3. ВЫПАДАЮЩИЕ СПИСКИ (ЯЗЫКИ И ПРОЧЕЕ)
   ============================================================ */
.language-switcher ul, 
.language-switcher div[style*="position: absolute"],
.dropdown-menu {
    background: rgba(20, 20, 20, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    padding: 5px 0 !important;
}

/* Пункты внутри выпадашки */
.language-switcher li, 
.language-switcher a {
    color: #cecece !important;
    padding: 8px 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    transition: background 0.2s ease !important;
}

.language-switcher li:hover, 
.language-switcher a:hover {
    background: rgba(255, 157, 0, 0.15) !important;
    color: #fff !important;
}

/* Иконки флагов */
.language-switcher .flag {
    filter: grayscale(0.4) contrast(1.1);
}

/* ============================================================
   4. ПРОЧИЕ ЭЛЕМЕНТЫ (БАННЕРЫ И Т.Д.)
   ============================================================ */
.banner-elem {
    border: 1px solid #333 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 4px !important;
}

/* ============================================================
   5. КАРТОЧКИ ТОВАРОВ (GLASSMORPHISM)
   ============================================================ */

/* Сама карточка */
.product-card {
    background: rgba(15, 15, 15, 0.6) !important; /* Полупрозрачный темный фон */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important; /* Минимальное закругление */
    transition: all 0.4s ease-in-out !important;
    overflow: hidden;
}

/* Эффект при наведении на всю карточку */
.product-card:hover {
    border-color: rgba(255, 157, 0, 0.4) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 157, 0, 0.1) !important;
    transform: translateY(-3px); /* Легкий подъем карточки */
}

/* Контейнер изображения (убираем лишние фоны) */
.product-card-image-container {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Нижняя часть карточки (где цена и название) */
.product-card-footer {
    background: transparent !important;
    padding: 12px !important;
}

/* Название товара */
.product-card-name {
    color: #ffffff !important;
    font-size: 14px !important;
    text-transform: uppercase;
    transition: color 0.4s ease !important;
}

/* Цена товара */
.product-card-price {
    color: #ff9d00 !important; /* Цена сразу оранжевая для акцента */
    font-weight: 800 !important;
    transition: text-shadow 0.4s ease !important;
}

/* "Подгорание" текста при наведении на карточку */
.product-card:hover .product-card-name {
    color: #ff9d00 !important;
    text-shadow: 0 0 8px rgba(255, 157, 0, 0.6);
}

.product-card:hover .product-card-price {
    text-shadow: 0 0 12px rgba(255, 157, 0, 0.8);
}

/* Контейнер картинки: добавляем внутренние отступы (запас) */
.product-card-image-container {
    padding: 12px !important; /* Тот самый запас в пикселях со всех сторон */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important; /* Убираем лишние фоны, если мешают */
}

/* Сама картинка внутри контейнера */
.product-card-image-container img {
    border-radius: 8px !important; /* Закругляем углы самой картинки */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* Чтобы картинка не растягивалась криво */
    transition: transform 0.4s ease !important; /* Плавный зум при наведении */
}

/* Добавим эффект: при наведении на карточку картинка чуть увеличивается */
.product-card:hover .product-card-image-container img {
    transform: scale(1.05); /* Легкий зум товара внутри "рамки" */
}

/* ============================================================
   6. КАТЕГОРИИ И ПОИСК (ТАКТИЧЕСКИЙ СТИЛЬ)
   ============================================================ */

/* Контейнер кнопок */
.products-types-buttons {
    gap: 10px !important;
    margin-bottom: 15px !important;
}

/* Общий стиль кнопок категорий */
.app-button {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important; /* Четкие углы */
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 500 !important;
    transition: all 0.3s ease-in-out !important;
    padding: 10px 20px !important;
}

/* Эффект при наведении на категорию */
.app-button:hover {
    border-color: #ff9d00 !important;
    color: #ff9d00 !important;
    text-shadow: 0 0 10px rgba(255, 157, 0, 0.6);
    background: rgba(255, 157, 0, 0.05) !important;
}

/* АКТИВНАЯ КАТЕГОРИЯ (Выбранная) */
.app-button--active {
    background: rgba(255, 157, 0, 0.15) !important;
    border-color: #ff9d00 !important;
    color: #ff9d00 !important;
    box-shadow: 0 0 15px rgba(255, 157, 0, 0.2), inset 0 0 5px rgba(255, 157, 0, 0.2) !important;
}

/* ИНПУТ ПОИСКА (Поиск товара...) */
.search-input {
    background: rgba(10, 10, 10, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important;
    color: #ffffff !important;
    padding: 12px 15px !important;
    transition: all 0.3s ease !important;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    text-transform: uppercase;
    font-size: 12px;
}

.search-input:focus {
    border-color: #ff9d00 !important;
    box-shadow: 0 0 10px rgba(255, 157, 0, 0.3) !important;
    outline: none !important;
}

/* ============================================================
   7. МОНИТОРИНГ И БОКОВАЯ ПАНЕЛЬ
   ============================================================ */

/* Основной контейнер мониторинга */
.monitoring {
    background: rgba(15, 15, 15, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    padding: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    transition: transform 0.3s ease !important;
}

.monitoring:hover {
    transform: scale(1.02); /* Легкая пульсация при наведении */
    border-color: rgba(255, 157, 0, 0.3) !important;
}

/* Заголовок мониторинга (Название сервера) */
.monitoring-title {
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    letter-spacing: 1px;
}

.monitoring-title-span {
    color: #ff9d00 !important; /* Название карты/мода оранжевым */
    opacity: 0.8;
}

/* Полоска прогресса (Progress Bar) */
.monitoring-progress-bar {
    background: rgba(255, 255, 255, 0.05) !important; /* Фон шкалы */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    height: 12px !important;
    border-radius: 2px !important;
    overflow: hidden;
}

/* Заполнение шкалы (Сам онлайн) */
.monitoring-progress-fill {
    background: linear-gradient(90deg, #ff9d00, #ffb700) !important; /* Оранжевый градиент */
    box-shadow: 0 0 15px rgba(255, 157, 0, 0.6) !important; /* Свечение шкалы */
    transition: width 1s ease-in-out !important;
}

/* Текст цифр (1 / 60) */
.monitoring-status-text {
    color: #ffffff !important;
    font-family: 'monospace' !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------
   ИНФОРМАЦИОННЫЙ БАННЕР (Как получить товар?!)
   ------------------------------------------------------------ */
.banner-elem {
    background: rgba(15, 15, 15, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.bunner-title {
    color: #ff9d00 !important; /* Заголовок сразу оранжевый */
    text-transform: uppercase;
    font-weight: 800 !important;
}

.banner-content p {
    color: rgba(255, 255, 255, 0.8) !important;
}

@keyframes pulse-orange {
    0% { box-shadow: 0 0 10px rgba(255, 157, 0, 0.4); }
    50% { box-shadow: 0 0 20px rgba(255, 157, 0, 0.8); }
    100% { box-shadow: 0 0 10px rgba(255, 157, 0, 0.4); }
}

.monitoring-progress-fill {
    animation: pulse-orange 2s infinite ease-in-out;
}

/* Увеличиваем общую высоту контейнера шкалы */
.monitoring-progress-bar {
    height: 24px !important; /* Увеличили с 12px до 24px */
    background: rgba(0, 0, 0, 0.5) !important; /* Делаем подложку темнее для контраста */
    border: 1px solid rgba(255, 157, 0, 0.3) !important; /* Оранжевый контур шкалы */
    position: relative !important;
    display: flex !important;
    align-items: center !important; /* Центрируем содержимое по вертикали */
    justify-content: center !important; /* Центрируем по горизонтали */
}

/* Настраиваем слой с цифрами */
.monitoring-status-overlay {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important; /* Цифры поверх заливки */
}

/* Сами цифры (1 / 60) */
.monitoring-status-text {
    color: #ffffff !important;
    font-size: 14px !important; /* Оптимальный размер под новую высоту */
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9) !important; /* Тень, чтобы не терялись на светлом фоне */
    line-height: 1 !important; /* Убираем лишние отступы строк */
}

/* Заливка (сама полоска онлайна) */
.monitoring-progress-fill {
    height: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
}

/* ============================================================
   8. ФУТЕР (ПОДВАЛ САЙТА)
   ============================================================ */

.footer {
    /* Наводим матовое стекло */
    background: rgba(10, 10, 10, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    
    /* Верхняя рамка, чтобы отделить подвал от контента */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    padding: 30px 20px !important;
    margin-top: 50px !important;
    color: rgba(255, 255, 255, 0.6) !important; /* Основной текст делаем приглушенным */
    text-align: center !important;
}

/* Ссылки в футере (Политика, Условия и т.д.) */
.footer-link a, 
.footer-links a {
    color: #cecece !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 13px !important;
    margin: 0 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Плавное "подгорание" ссылок при наведении */
.footer-link a:hover, 
.footer-links a:hover {
    color: #ff9d00 !important; /* Наш фирменный оранжевый */
    text-shadow: 0 0 10px rgba(255, 157, 0, 0.6) !important;
}

/* Текст дисклеймера (про DayZ и разработчиков) */
.footer p {
    font-size: 11px !important;
    line-height: 1.6 !important;
    max-width: 800px !important;
    margin: 10px auto !important;
    opacity: 0.7;
}

/* Копирайт и технические ссылки в самом низу */
.footer-links {
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ============================================================
   9. АНИМАЦИЯ ЛОГОТИПА
   ============================================================ */

/* ЛОГОТИП: Fear of the Dark с постоянным переливом */
.navbar-brand {
    font-family: 'Impact', 'Arial Black', sans-serif !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    
    /* Создаем градиент для перелива */
    background: linear-gradient(90deg, #ffffff, #ff9d00, #ffffff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Контур букв, чтобы они не терялись */
    filter: drop-shadow(2px 2px 0px #000) !important;
    
    /* Запуск бесконечного перелива */
    animation: shine 4s linear infinite !important;
    
    position: relative !important;
    display: inline-block !important;
    transition: none !important; /* Убираем все переходы */
}

/* Анимация движения градиента */
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* При наведении — только легкое усиление свечения, без изменения размера */
.navbar-brand:hover {
    filter: drop-shadow(0 0 10px rgba(255, 157, 0, 0.8)) drop-shadow(2px 2px 0px #000) !important;
    transform: none !important; /* Жестко отключаем любое увеличение */
    letter-spacing: -1px !important; /* Сохраняем плотность букв */
}