/* === 1. ШАПКА (полностью обновленный код) === */

/* Сам фон шапки (оставляем как есть) */
.navbar {
    background-color: #1a1a1a !important; /* Был #1e1e2f */
}

/* ЗАГОЛОВОК (сайт или название) - ярко-белый */
.navbar-brand {
    color: #ffffff !important; /* Ярко-белый */
    font-weight: bold !important; /* Можно сделать жирным для акцента */
}

/* Если заголовок является ссылкой, добавим и это */
.navbar-brand a,
a.navbar-brand {
    color: #ffffff !important;
}

/* КНОПКИ СО ССЫЛКАМИ - приглушенный белый/серый */
.navbar-links {
    color: #cccccc !important; /* Светло-серый, менее яркий */
}

/* Сами ссылки внутри блока navbar-links */
.navbar-links a,
.navbar-links .nav-link,
.navbar-links button {
    color: #cccccc !important; /* Приглушенный цвет для всех ссылок */
    transition: color 0.2s ease; /* Плавное изменение цвета */
}

/* Эффект при наведении на ссылки - делаем ярче */
.navbar-links a:hover,
.navbar-links .nav-link:hover {
    color: #ffffff !important; /* Становятся ярко-белыми при наведении */
}

/* Если есть активная/текущая ссылка, можно выделить её */
.navbar-links .active,
.navbar-links .current-menu-item a {
    color: #ffffff !important; /* Ярко-белая для активной страницы */
}

/* === 1. БЛОКИ МОНИТОРИНГА (Общий фон) === */
/* Красим контейнеры monitoring, в которых лежат серверы */
.monitoring.monitoring--active {
    background-color: #1a1a1a !important; /* Был #1e1e2f */
}

/* === 2. БЛОК banners-above-monitoring (Родитель) === */
.banners-above-monitoring {
    background-color: #1a1a1a !important; /* Был #1e1e2f */
}

/* === 3. ВНУТРЕННИЕ ЭЛЕМЕНТЫ (Сами баннеры) === */
/* Этот код применится к любым элементам с классом banner-elem,
   которые находятся ВНУТРИ блоков banners-above-monitoring ИЛИ banners-after-monitoring */
.banners-above-monitoring .banner-elem,
.banners-after-monitoring .banner-elem {
    /* Убираем белый фон из атрибута style и ставим свой */
    background-color: #2d2d2d !important; /* Был #2d2d3a */
    /* Меняем цвет текста на белый, если он остался черным */
    color: #ffffff !important;
    /* Убираем background-image, если там написано "null" или что-то мешает */
    background-image: none !important;
}

/* === 4. БЛОК banners-after-monitoring (Родитель) === */
/* Красим фон самого блока */
.banners-after-monitoring {
    background-color: #1a1a1a !important; /* Был #1e1e2f */
}

/* (Необязательно) Если текст внутри баннеров стал плохо виден, можно сделать его светлее */
.banner-elem a, /* Если внутри баннеров есть ссылки */
.banner-elem p, /* Если внутри параграфы */
.banner-elem div {
    color: #ffffff !important;
}

/* === 5. КНОПКИ ПРИЛОЖЕНИЙ (app-button) === */
.app-button.app-button--primary {
    background-color: #3a3a3a !important; /* Был #3a3a4f */
    color: #ffffff !important;            /* Белый текст */
    border: none !important;              /* Убираем обводку, если она есть */
}

/* Эффект при наведении для красоты */
.app-button.app-button--primary:hover {
    background-color: #4f4f4f !important; /* Был #4f4f6f */
    transition: background-color 0.3s ease; /* Плавное появление */
}

/* === 6. ПОЛЕ ПОИСКА (search-input) === */
.search-input {
    background-color: #2d2d2d !important; /* Был #2d2d3a */
    color: #ffffff !important;            /* Цвет вводимого текста */
    border: 1px solid #404040 !important; /* Был #4f4f6f */
}

/* Меняем цвет текста-подсказки (placeholder) внутри поля */
.search-input::placeholder {
    color: #aaaaaa !important; /* Светло-серый, чтобы было видно на темном фоне */
    opacity: 1; /* Убираем полупрозрачность по умолчанию */
}

/* Стиль для поля, когда оно в фокусе (когда вы начали вводить текст) */
.search-input:focus {
    outline: none !important; /* Убираем стандартную обводку браузера (часто синюю) */
    border-color: #5a5a5a !important; /* Был #6f6f9f - тоже серый */
}

/* === 7. КАРТОЧКИ ТОВАРОВ === */

/* Вариант А: Если нужно изменить фон всей карточки (скорее всего) */
.product-card,
.product-card-footer {
    background-color: rgba(58, 58, 58, 0.6) !important; /* 58,58,58 - это наш #3a3a3a в RGB */
    color: #ffffff !important;
}

/* Вариант Б: Если нужен только фон подвала (footer) */
.product-card-footer {
    background-color: rgba(58, 58, 58, 0.9) !important; /* Был #3a3a4f */
    /* Добавим отступы, чтобы текст не прилипал к краям */
    padding: 15px !important;
}

/* Дополнительно: красим цену, название и другие элементы внутри карточки */
.product-card .price,
.product-card .title,
.product-card .product-title,
.product-card .product-price {
    color: #ffffff !important; /* Делаем текст белым */
}

/* Стили для кнопок внутри карточки, если они там есть */
.product-card .button,
.product-card .btn,
.product-card .app-button {
    background-color: #4f4f4f !important; /* Был #4f4f6f */
    border: none !important;
}

.product-card .button:hover,
.product-card .btn:hover {
    background-color: #5a5a5a !important; /* Был #6f6f9f */
}

/* Меняем цвет фона модального окна */
.modal {
    background-color: #2d2d2d !important; /* Был #2d2d3a */
}

/* Текст на кнопке "Закрыть" делаем белым */
.modal-close-button-text {
    color: #ffffff !important;
}

/* Эффект при наведении (одинаковый для обеих кнопок) */
.modal-close-button:hover {
    background-color: #4f4f4f !important; /* Был #4f4f6f */
}

/* === 10. КНОПКА ЗАКРЫТИЯ (крестик) === */
/* Обычно это либо × символ, либо элемент с классом close */
.modal-header .close,
.modal-header button.close {
    color: #ffffff !important; /* Делаем крестик белым */
    opacity: 1;
}

/* === 11. ЗАГОЛОВКИ В БЛОКАХ МОНИТОРИНГА === */

/* Сам блок мониторинга (фон уже должен быть темным) */
.monitoring.monitoring--active {
    background-color: #1a1a1a !important; /* Был #1e1e2f */
}

/* Заголовок в блоке мониторинга - правильный класс */
.monitoring-title {
    color: #ffffff !important; /* Ярко-белый, как navbar-brand */
    font-weight: bold !important; /* Жирный */
    font-size: 1.2em !important; /* Можно изменить или убрать */
}

/* Если заголовок является ссылкой */
.monitoring-title a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* При наведении на заголовок-ссылку */
.monitoring-title a:hover {
    color: #cccccc !important; /* Чуть приглушаем */
    text-decoration: underline !important;
}
/* === УВЕЛИЧИВАЕМ ШРИФТ НА КНОПКАХ СЕРВЕРОВ === */

/* === КНОПКИ СЕРВЕРОВ === */

/* Обычные кнопки серверов */
.servers-buttons .app-button {
    background-color: #4a4a4a !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border: none !important;
    color: #ffffff !important;
}

/* Эффект при наведении на обычные кнопки */
.servers-buttons .app-button:hover {
    background-color: #5a5a5a !important;
}

/* АКТИВНАЯ КНОПКА (текущий сервер) — ЯРКАЯ */
.servers-buttons .app-button--active {
    background-color: #6a6a6a !important; /* Заметно ярче обычных */
    /* Можно добавить небольшую рамку для выделения */
    border: 1px solid #ffffff !important;
    /* Или добавить тень */
    /* box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important; */
}

/* Эффект при наведении на активную кнопку */
.servers-buttons .app-button--active:hover {
    background-color: #7a7a7a !important; /* Еще ярче при наведении */
}

/* === ИНДИКАТОР ЗАПОЛНЕННОСТИ === */

/* Фон */
.monitoring-status-overlay {
    background-color: rgba(11, 11, 11, 0.5) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Заполнение зеленым */
.monitoring-progress-fill {
    background-color: #4CAF50 !important;
    height: 100% !important;
}
/* === ПАНЕЛЬ ПОПОЛНЕНИЯ (recharge-panel) === */
.recharge-panel {
    background-color: #4a4a4a !important; /* Самый темный фон как у шапки */
    /* или можно использовать средний фон: */
    /* background-color: #2d2d2d !important; */
    color: #ffffff !important; /* Белый текст для всего внутри */
}

/* Если внутри есть отдельные элементы с белым фоном */
.recharge-panel div,
.recharge-panel .panel-item,
.recharge-panel .recharge-item {
    background-color: transparent !important; /* Делаем прозрачными */
    color: #ffffff !important;
}

/* Если есть кнопки внутри панели */
.recharge-panel .button,
.recharge-panel .btn,
.recharge-panel button {
    background-color: #3a3a3a !important; /* Цвет кнопок */
    border: none !important;
    color: #ffffff !important;
}

.recharge-panel .button:hover,
.recharge-panel .btn:hover {
    background-color: #4f4f4f !important;
}

/* === ПОЛЕ ВВОДА В ПАНЕЛИ ПОПОЛНЕНИЯ === */

/* Сам текст, который вводит пользователь */
.recharge-panel-input-raw {
    color: #ffffff !important; /* Ярко-белый для вводимого текста */
    background-color: transparent !important; /* Прозрачный фон (если нужно) */
}

/* Текст-подсказка (placeholder) внутри поля */
.recharge-panel-input-raw::placeholder {
    color: #cccccc !important; /* Светло-серый для подсказки */
    opacity: 1 !important; /* Убираем полупрозрачность по умолчанию */
}

/* Если поле в фокусе (когда кликнули) */
.recharge-panel-input-raw:focus {
    color: #ffffff !important;
    outline: none !important;
}

/* === ПРОВАЙДЕРЫ В ПАНЕЛИ ПОПОЛНЕНИЯ === */

/* Все провайдеры — темный фон для контраста с картинками */
.recharge-panel-provider {
    background-color: #1a1a1a !important; /* Самый темный фон (как шапка) */
    color: #ffffff !important;
    border: 1px solid #3a3a3a !important; /* Тонкая рамка */
    transition: all 0.2s ease !important;
}

/* При наведении чуть светлее */
.recharge-panel-provider:hover {
    background-color: #2d2d2d !important;
    border-color: #4f4f4f !important;
}

/* АКТИВНЫЙ ПРОВАЙДЕР — остается ярким */
.recharge-panel-provider.selected {
    background-color: #6a6a6a !important;
    border: 1px solid #ffffff !important;
}

/* === ЛИЧНЫЙ КАБИНЕТ === */

/* Основная информация профиля */
.profile-info {
    background-color: #1a1a1a !important; /* Самый темный фон */
    color: #ffffff !important;
    border: 1px solid #3a3a3a !important;
}

/* Заголовок в сайдбаре */
.profile-sidebar__header {
    background-color: #1a1a1a !important; /* Темный фон */
    color: #ffffff !important;
    border-bottom: 1px solid #3a3a3a !important;
    padding: 15px !important; /* Если нужны отступы */
}

/* Текст заголовка */
.profile-sidebar__title {
    color: #ffffff !important; /* Ярко-белый */
    font-weight: bold !important;
}

/* Элементы меню (кнопки) */
.profile-sidebar__item {
    background-color: #2d2d2d !important; /* Средний фон */
    border: 1px solid #3a3a3a !important;
    transition: all 0.2s ease !important;
}

.profile-sidebar__item:hover {
    background-color: #3a3a3a !important;
    border-color: #4f4f4f !important;
}

/* Ссылки внутри кнопок */
.profile-sidebar__link {
    color: #ffffff !important; /* Белый текст */
    text-decoration: none !important;
    font-size: 14px !important;
}

.profile-sidebar__link:hover {
    color: #ffffff !important;
}

/* Активный элемент меню (если есть) */
.profile-sidebar__item.active,
.profile-sidebar__item--active {
    background-color: #3a3a3a !important;
    border-left: 3px solid #6a6a6a !important; /* Маркер активного */
}

/* === ФИНАЛЬНЫЕ ПРАВКИ === */

/* Заголовок рулетки — белым */
.roulette-prizes-title {
    color: #ffffff !important;
}
/* === ФОН РУЛЕТКИ === */
.roulette-wrapper {
    background-color: #1a1a1a !important; /* Самый тёмный фон */
}