/* =========================================================
   OZEON — ОНЛАЙН HERO
   ========================================================= */


/* ===== ОНЛАЙН ===== */

.hero_online {
  position: absolute;                               /* Независимый слой */

  top: 400px;                                       /* Позиция сверху */
  right: 20px;                                      /* Позиция справа */

  z-index: 4;                                       /* Слой */

  display: flex;                                    /* Элементы в ряд */
  align-items: center;                              /* Выравнивание по центру */
  justify-content: flex-end;                        /* Выравнивание по правому краю */

  width: 100px;                                     /* Ширина блока */

  gap: 6px;                                         /* Расстояние между кружком и текстом */

  pointer-events: none;                             /* Не мешает взаимодействию */
}


/* ===== КРУЖОЧЕК ===== */

.hero_online_dot {
  display: block;                                   /* Показываем кружочек */

  width: 8px;                                       /* Размер кружочка */
  height: 8px;                                      /* Размер кружочка */

  flex-shrink: 0;                                   /* Не сжимать кружочек */

  border-radius: 50%;                               /* Круглая форма */

  background-color: #00ff55;                        /* Зелёный цвет */

  box-shadow: 0 0 6px rgba(0, 255, 85, 0.75);       /* Свечение */
}


/* ===== ТЕКСТ ===== */

.hero_online_text {
  font-family: Arial, sans-serif;                   /* Шрифт */
  font-size: 12px;                                  /* Размер текста */
  font-weight: 700;                                 /* Толщина текста */

  color: #ffffff;                                   /* Цвет текста */

  opacity: 0.85;                                    /* Прозрачность */

  white-space: nowrap;                              /* Не переносить текст */
}


/* ===== СЕРВЕР ОНЛАЙН ===== */

.hero_online.online .hero_online_dot {
  background-color: #00ff55;                        /* Зелёный кружочек */

  box-shadow: 0 0 6px rgba(0, 255, 85, 0.75);       /* Зелёное свечение */
}


/* ===== СЕРВЕР ОФЛАЙН ===== */

.hero_online.offline .hero_online_dot {
  background-color: #ff3030;                        /* Красный кружочек */

  box-shadow: 0 0 6px rgba(255, 48, 48, 0.75);      /* Красное свечение */
}


/* =========================================================
   АДАПТАЦИЯ HERO
   ========================================================= */


/* ===== НОУТБУКИ ===== */

@media (max-width: 1200px) {

  .hero_online {
    right: 20px;                                    /* Отступ справа */
  }

}