/* ===============================
   Верхняя шапка и футер
================================ */
header,
.navbar {
    background: rgba(20, 30, 45, 0.35) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    transition: all 0.3s ease;
}

header:hover,
.navbar:hover {
    box-shadow: 0 0 25px rgba(95, 169, 255, 0.7);
}

/* ===============================
   Магазин (Shop) + внутренние элементы
================================ */
.Shop-module__wrapper,
.Shop-module__wrapper > div,
.Shop-module__wrapper > div > div,
.Shop-module__wrapper h2.boxHeader.Shop-module__header,
.Shop-module__wrapper div.boxBody,
.Shop-module__wrapper div.Categories-module__categories,
.Shop-module__wrapper div.Products-module__wrapper,
.Shop-module__wrapper div.boxFooter,
.Shop-module__wrapper button {
    background: rgba(15, 25, 40, 0.35) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 10px;
    color: #e8f3ff;
    border: 1px solid rgba(95,169,255,0.6);
    transition: all 0.25s ease;
}

/* Hover glow для блоков магазина */
.Shop-module__wrapper:hover,
.Shop-module__wrapper > div:hover,
.Shop-module__wrapper > div > div:hover,
.Shop-module__wrapper h2.boxHeader.Shop-module__header:hover,
.Shop-module__wrapper div.boxBody:hover,
.Shop-module__wrapper div.Categories-module__categories:hover,
.Shop-module__wrapper div.Products-module__wrapper:hover,
.Shop-module__wrapper div.boxFooter:hover {
    box-shadow: 0 0 20px rgba(95,169,255,0.7), 0 0 40px rgba(95,169,255,0.5);
    transform: translateY(-2px);
}

/* ===============================
   Кнопки в Products (role="button") - прозрачные
================================ */
.Shop-module__wrapper div.Products-module__wrapper [role="button"] {
    background: rgba(20, 30, 45, 0.4) !important;
    border: 1px solid rgba(95,169,255,0.6);
    color: #e8f3ff;
    border-radius: 4px;
    padding: 8px 14px;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(95,169,255,0.3);
    transition: all 0.25s ease;
}

.Shop-module__wrapper div.Products-module__wrapper [role="button"]:hover {
    background: rgba(20, 30, 45, 0.6) !important;
    box-shadow: 0 0 18px rgba(95,169,255,0.8), 0 0 40px rgba(95,169,255,0.6);
    transform: translateY(-2px);
}

/* ===============================
   Виджеты (Widgets) + внутренние элементы
================================ */
.Widgets-module__wrapper,
.Widgets-module__wrapper > div,
.Widgets-module__wrapper > div > div,
.Widgets-module__wrapper h2.boxHeader,
.Widgets-module__wrapper div.MonitoringWidget-module__body.boxBody,
.Widgets-module__wrapper div.monitoringServer,
.Widgets-module__wrapper div.boxFooter,
.Widgets-module__wrapper button {
    background: rgba(15, 25, 40, 0.35) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 10px;
    color: #e8f3ff;
    border: 1px solid rgba(95,169,255,0.6);
    transition: all 0.25s ease;
}

/* Hover glow для виджетов */
.Widgets-module__wrapper:hover,
.Widgets-module__wrapper > div:hover,
.Widgets-module__wrapper > div > div:hover,
.Widgets-module__wrapper h2.boxHeader:hover,
.Widgets-module__wrapper div.MonitoringWidget-module__body.boxBody:hover,
.Widgets-module__wrapper div.monitoringServer:hover,
.Widgets-module__wrapper div.boxFooter:hover {
    box-shadow: 0 0 20px rgba(95,169,255,0.7), 0 0 40px rgba(95,169,255,0.5);
    transform: translateY(-2px);
}

/* ===============================
   Кнопки — глянцевые прямоугольные
================================ */
button,
a,
[class*="Button"] {
    background: rgba(20, 30, 45, 0.85);
    color: #e8f3ff;
    border: 2px solid rgba(95,169,255,0.8);
    border-radius: 4px; /* прямоугольные углы */
    padding: 8px 14px;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 0 8px rgba(95,169,255,0.3);
}

/* Hover glow для кнопок */
button:hover,
a:hover,
[class*="Button"]:hover {
    background: rgba(20, 30, 45, 0.95);
    box-shadow: 0 0 18px rgba(95,169,255,0.8), 0 0 40px rgba(95,169,255,0.6);
    transform: translateY(-2px);
}

/* ===============================
   INPUTS / TEXTAREAS / SELECT (GLASS)
================================ */
input,
textarea,
select {
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(95,169,255,0.4);
    color: #e8f3ff;
    border-radius: 6px;
    padding: 6px 10px;
    transition: all 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 12px rgba(95,169,255,0.6);
    outline: none;
}

/* ===============================
   MODAL WINDOW (GLASS)
================================ */
.glassModal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.glassModal.active {
    display: flex;
}

.glassBox {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 30px 35px;
    border-radius: 22px;
    border: 1px solid rgba(95,169,255,0.5);
    box-shadow: 0 0 40px rgba(95,169,255,0.7);
    color: #e8f3ff;
    max-width: 420px;
    text-align: center;
}

.glassBox h3 {
    margin-bottom: 10px;
}

.glassBox button {
    margin-top: 15px;
    background: rgba(20,30,45,0.85);
    border: 2px solid rgba(95,169,255,0.8);
    border-radius: 4px;
    padding: 8px 14px;
    color: #e8f3ff;
}

/* ===============================
   Полностью скрываем поиск
================================ */
.Search-module__wrapper,
.Search-module__wrapper * {
    display: none !important;
}

/* ===============================
   Прогресс мониторинга в синем цвете + живой glow
================================ */
.MonitoringServer-module__progressWrapper {
    background: rgba(20, 60, 120, 0.6) !important; /* синий фон */
    border: 1px solid rgba(95,169,255,0.8);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 12px rgba(95,169,255,0.5);
    animation: neonProgressGlow 2s infinite ease-in-out;
    transition: all 0.25s ease;
}

/* Прозрачный внутренний progress-bar, оставляем на месте */
.MonitoringServer-module__progressBarWrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===============================
   Анимация glow для прогресс-бара
================================ */
@keyframes neonProgressGlow {
    0% {
        box-shadow: 0 0 6px rgba(95,169,255,0.4), 0 0 12px rgba(95,169,255,0.2);
    }
    50% {
        box-shadow: 0 0 12px rgba(95,169,255,0.7), 0 0 24px rgba(95,169,255,0.5);
    }
    100% {
        box-shadow: 0 0 6px rgba(95,169,255,0.4), 0 0 12px rgba(95,169,255,0.2);
    }
}

/* ===============================
   MENU BUTTONS (HEADER)
================================ */
.HeaderNav-module__link.customMenuButton {
    background: rgba(20, 30, 45, 0.75) !important;
    border: 2px solid rgba(95,169,255,0.8);
    color: #e8f3ff !important;
    padding: 6px 14px;
    margin-left: 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
    box-shadow: 0 0 10px rgba(95,169,255,0.4);
    transition: all 0.25s ease;
}

.HeaderNav-module__link.customMenuButton:hover {
    background: rgba(20, 30, 45, 0.95) !important;
    box-shadow:
        0 0 20px rgba(95,169,255,0.9),
        0 0 45px rgba(95,169,255,0.6);
    transform: translateY(-2px);
}

/* подсветка активной страницы */
.HeaderNav-module__link.customMenuButton[href*="/page"]:hover {
    text-shadow: 0 0 6px rgba(95,169,255,0.8);
}

/* ===============================
   ABOUT PAGE (Glass / Neon)
================================ */

.Page-module__wrapper,
.Page-module__wrapper > div,
.Page-module__wrapper h2.boxHeader.Page-module__header,
.Page-module__wrapper div.boxBody {
    background: rgba(15, 25, 40, 0.35) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 18px 22px;
    color: #e8f3ff;
    border: 1px solid rgba(95,169,255,0.6);
    transition: all 0.25s ease;
}

/* Hover glow для всей секции About */
.Page-module__wrapper:hover,
.Page-module__wrapper > div:hover,
.Page-module__wrapper h2.boxHeader.Page-module__header:hover,
.Page-module__wrapper div.boxBody:hover {
    box-shadow: 0 0 20px rgba(95,169,255,0.7),
                0 0 40px rgba(95,169,255,0.5);
    transform: translateY(-2px);
}

/* ===============================
   Подпись IP под названием сервера
================================ */
.MonitoringServer-module__name {
    display: block; /* чтобы текст ниже шёл на новой строке */
    position: relative;
    font-weight: 600;
}

/* добавляем IP:PORT через ::after */
.MonitoringServer-module__name::after {
    content: "connect 64.40.9.221:28046";
    display: block; /* на новой строке */
    font-size: 0.85em;
    font-weight: 400;
    color: #5fa9ff; /* синий glow-акцент */
    margin-top: 2px;
    text-shadow: 0 0 6px rgba(95,169,255,0.6);
}

/* Ссылка становится контейнером для картинки + текста */
.Page-module__wrapper .boxBody a[href*="discord"] {
    display: inline-block;      /* контейнер для картинки и текста */
    text-align: center;         /* текст под картинкой по центру */
    position: relative;         /* чтобы ::after позиционировался относительно ссылки */
}

/* Текст под картинкой */
.Page-module__wrapper .boxBody a[href*="discord"]::after {
    content: "DISCORD";
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: #5fa9ff;
    margin-top: 4px;               /* отступ от картинки */
    text-shadow: 0 0 6px rgba(95,169,255,0.7);
    pointer-events: none;          /* текст не мешает клику */
}

/* Telegram */
.Page-module__wrapper .boxBody a[href*="t.me"] {
    display: inline-block;
    text-align: center;
    position: relative;
}

.Page-module__wrapper .boxBody a[href*="t.me"]::after {
    content: "Telegram";
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: #5fa9ff;
    margin-top: 4px;
    text-shadow: 0 0 6px rgba(95,169,255,0.7);
    pointer-events: none;
}

/* PayPal */
.Page-module__wrapper .boxBody a[href*="paypal"] {
    display: inline-block;
    text-align: center;
    position: relative;
}

.Page-module__wrapper .boxBody a[href*="paypal"]::after {
    content: "PAYPAL";
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    color: #5fa9ff;
    margin-top: 4px;
    text-shadow: 0 0 6px rgba(255,215,106,0.8);
    pointer-events: none;
}

/* Скрываем третий язык в списке переключателя */
.LangSwitcher-module__list.LangSwitcher-module__active li.LangSwitcher-module__lang:nth-child(3) {
    display: none !important;
}

/* Меню fixed, но рассчитываем координаты через left/right */
.LangSwitcher-module__wrapper.PlayerMenu-module__langSwitcher > div {
    position: fixed !important;
    top: 77px;       /* под хедером, подгони под себя */
    left: auto;
    right: calc(100vw - 685px - 1370px); /* = 100vw - 450px */
}

/* ===============================
   Выпадающий список языков - стекло / glow
================================ */
.LangSwitcher-module__list.LangSwitcher-module__active,
.LangSwitcher-module__list.LangSwitcher-module__active > li {
    background: rgba(15, 25, 40, 0.35) !important; /* прозрачный фон */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 10px;
    color: #e8f3ff;
    border: 1px solid rgba(95,169,255,0.6);
    transition: all 0.25s ease;
    list-style: none; /* убираем маркеры списка */
}

/* Hover glow для пунктов списка */
.LangSwitcher-module__list.LangSwitcher-module__active > li:hover {
    box-shadow: 0 0 20px rgba(95,169,255,0.7),
                0 0 40px rgba(95,169,255,0.5);
    transform: translateY(-2px);
    cursor: pointer;
}

/* Скрываем заголовок About */
.Page-module__wrapper > h2.boxHeader.Page-module__header {
    display: none !important;
}