/* Основной контейнер, чтобы ничего не вылетало */
.monitoring {
    background: #121212;
    padding: 15px;
    border-radius: 15px;
    width: 320px;
    font-family: 'Arial', sans-serif;
}

/* Название сервера и карты */
.monitoring-header { color: #3498db; font-weight: bold; font-size: 18px; }
.monitoring-header { color: #2ecc71; font-size: 14px; margin-left: 8px; }

/* Сама полоска онлайна */
.monitoring-progress-bar {
    width: 100%;
    height: 35px;
    background: #cdcdcb; /* Светлый фон из скриншота */
    border-radius: 20px;
    margin-top: 10px;
    position: relative;
    overflow: hidden; /* КРИТИЧНО: обрезает всё, что выходит за скругления */
    display: flex;
    align-items: center;
}

/* Красная полоска заполнения */
.monitoring-progress-fill {
    height: 100% !important;
    background-color: #2ecc71 !important; /* Насыщенный зеленый цвет */
    background-image: repeating-linear-gradient(
        45deg,
        rgba(46, 204, 113, 0.2),
        rgba(46, 204, 113, 0.2) 10px,
        transparent 10px,
        transparent 20px
    ) !important; 
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 20px 0 0 20px !important;
    z-index: 1 !important;
}

/* Текст "2 / 60" */
.monitoring-progress-text {
    position: relative;
    z-index: 2;
    margin-left: 20px;
    color: #ffffff;
    font-weight: 900;
    font-size: 18px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
/* Эффект для кнопок категорий и карточек товаров */
/* Замените селекторы ниже на те, что используются на вашем сайте, 
   если эти не сработают автоматически */

.app-button, 
.product-card, 
[class*="button"], 
[class*="item"] {
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Состояние при наведении */
.app-button:hover, 
.product-card:hover, 
[class*="button"]:hover, 
[class*="item"]:hover {
    border-color: #ff0000 !important; /* Цвет рамки */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; /* Красное свечение */
    cursor: pointer;
}
/* Применяем свечение только к самому контейнеру кнопки */
.app-button:hover, 
.app-card:hover {
    border-color: #ff0000 !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important;
    background-color: #ed0202 !important; /* Укажите здесь цвет фона вашей кнопки */
}
.app-button, 
.app-card,
button, 
div[style*="background-color"] {
    border: none !important;         /* Убирает стандартную рамку */
    outline: none !important;        /* Убирает контур при фокусе/нажатии */
    box-shadow: none !important;     /* Убирает тени, которые могут казаться обводкой */
}
.category-active, 
.category-button.active, 
div[style*="background-color: rgb(255, 255, 255)"] {
    background-color: #1a1a1a !important; /* Тот же темный цвет, что у других кнопок */
    color: #ffffff !important;           /* Белый текст */
    border: none !important;             /* Убираем рамку, если она есть */
}

/* Если при наведении она снова становится белой — исправляем */
.category-active:hover {
    background-color: #1a1a1a !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8) !important; /* Твое красное свечение */
}
/* Перекрашиваем активную кнопку в красный */
.app-button--active, 
.app-button.active, 
div[style*="background-color: rgb(255, 255, 255)"],
div[style*="background-color: #ffffff"] {
    background-color: #ff0000 !important; /* Ярко-красный фон */
    color: #ffffff !important;           /* Белый текст */
    border: none !important;             /* Убираем лишние рамки */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6) !important; /* Добавляем небольшое свечение для акцента */
}

/* Эффект при наведении на уже выбранную красную кнопку */
.app-active:hover, 
.app-button.active:hover {
    background-color: #cc0000 !important; /* Чуть темнее при наведении */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.9) !important;
}
/* Убираем фон и свечение у любого текста и вложенных блоков внутри кнопок */
.app-button *, 
.product-card *, 
button *, 
div[style*="background-color"] * {
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Если ты используешь стандартные теги uCoz для кнопок, добавим и их */
.shop-item-btn *, .u-button * {
    box-shadow: none !important;
    background: transparent !important;
}