/*
 * Home page blocks for template/default.
 * Extracted from inline Blade styles to keep default/css clean.
 */
.main_content_all {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-direction: row-reverse; /* переносим новости вправо */
}

.news_block,
#server-status {
    width: calc(50% - 10px); /* Вычитаем половину gap (20px / 2 = 10px) */
}

/* Адаптив */
@media only screen and (max-width: 960px) {
    .main_content_all {
        flex-direction: column; /* на планшетах/мобилках блоки в колонку */
    }
    .news_block,
    #server-status {
        width: 100%;
    }
    .main-start {
        margin-top: -20px; /* Уменьшаем отрицательный отступ */
    }

    .main-text p {
        margin-top: -10px; /* Уменьшаем отступ под текстом */
    }

    .main_content_all {
        margin-top: -50px; /* Дополнительно уменьшаем отступ сверху, если требуется */
    }
}

.server-block {
    position: relative;
    background-color: #241e1d;
    border-radius: 12px;
    border: 1px solid rgb(255 255 255 / 10%);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 280px;
}
.server-i-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 50px;
    padding-left: 10px;
    padding-bottom: 10px;
}
.server_img {
    position: relative;
    cursor: pointer;
    background-image: url("../img/servers-list-item.png");
    background-size: cover;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.server_img img {
    max-width: 50px;
}
.server_img:hover img {
    display: none;
}
.server_img:hover .server_online_count {
    opacity: 1;
    transition: 0.3s;
}
.server_online_count {
    line-height: 1.1;
    opacity: 0;
    position: absolute;
    top: -7px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.server_online_count span {
    font-family: var(--font-accent-regular), sans-serif;
    color: #ffbd01;
    font-size: 16px;
}
.server_online_count p {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 12px;
}

.server_title {
    font-family: Philosopher-Bold;
    font-size: 14px;
    color: #eee4d9;
    line-height: 1.1;
}
.server_t b {
    
    font-size: 18px;
    text-transform: uppercase;
    color: #e3e9e9;
    margin-left: 10px
}

.server_t span {
    color: #fff;
}
.server_t p {
    color: #999;
    font-size: 12px;
}
.server_t a {
    font-size: 14px;
    text-decoration: underline;
}
.server_t a:hover {
    text-decoration: none;
}

.server_block {
    width: 32%
}

.server_stat {
    background-color: rgba(52, 59, 86, .25);
    padding: 10px;
    box-sizing: border-box;
    position: relative
}
.server_item {
    position: relative;
    width: 50%;
    box-sizing: border-box;
    /* background: #311a0b; /* color fon*/
}
.server_item:nth-child(1) {
    border-right: 1px solid rgb(255 255 255 / 20%);
    border-bottom: 1px solid rgb(255 255 255 / 20%);
}
.server_item:nth-child(2) {
    border-bottom: 1px solid rgb(255 255 255 / 20%);
}
.server_item:nth-child(3) {
    border-right: 1px solid rgb(255 255 255 / 20%);
}
/*.server_item:last-child {*/
/*    margin-bottom: 0;*/
/*    padding-bottom: 0;*/
/*    border: none;*/
/*}*/
.server_brand {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    box-sizing: content-box;
	font-family: var(--font-accent-regular), sans-serif;
}
.server-status-switch {
    position: absolute;
    right: 15px;
    top: 0;
}
.server-brand-i {
    
    text-transform: uppercase;
    font-size: 10px;
    background-color: #007d22;
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
}
.server-brand-i.sb-orange {
    background: #ffb300;
    color: #000;
}
.server-brand-i.sb-new-server {
    animation: pulse 2s infinite;
    background-color: #8600ff;
}
.server-brand-i.server-brand-i-single {
    background-color: #323232;
}
.server-brand-i.sb-brand-red {
    background-color: #a30000;
}

@keyframes pulse {
    0% {
        background-color: #8600ff;
    }
    50% {
        background-color: #b380ff; /* более светлый оттенок */
    }
    100% {
        background-color: #8600ff;
    }
}

.server_progress {
    background-color: rgba(255, 255, 255, .3);
    height: 6px;
    border-radius: 5px;
    margin: 5px 0
}

.server_bar {
    background-color: #d5d0ff;
    height: 6px;
    border-radius: 5px
}

/* Медиазапрос для маленьких экранов (смартфоны) */
@media only screen and (max-width: 600px) {
    .swiper-info {
        position: static; /* Возвращаем блок в обычный поток */
        left: auto;
        right: auto;
        bottom: auto;
        padding: 10px; /* Добавляем внутренний отступ, чтобы текст не прилипал к краям */
    }
}

@media only screen and (max-width: 550px) {
    .swiper-info {
        /* Убираем абсолютное позиционирование, чтобы блок занял свое место */
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        
        display: flex;
        flex-direction: column;
        align-items: center; /* Кнопка и текст остаются по центру */
        text-align: center;
        
        /* Можно увеличить отступы, так как места больше */
        padding: 15px;
        padding-bottom: 40px; /* Достаточно места для пагинации, которая будет справа */
    }

    .sisic__title {
        font-size: 16px; /* Немного увеличим заголовок */
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .sisic__text {
        font-size: 13px; /* Увеличим текст */
        margin-bottom: 15px;
    }

    .btn-golden {
        width: auto; /* Возвращаем автоширину, чтобы кнопка не растягивалась на 80% */
        max-width: none; /* Убираем ограничение максимальной ширины */
        padding: 10px 20px; /* Возвращаем более привычные отступы */
    }

    /* Перемещение пагинации вправо */
    .swiper-pagination {
        position: absolute; /* Теперь пагинация будет позиционироваться абсолютно */
        bottom: 15px !important; /* Разместим немного выше нижнего края слайда */
        right: 0px !important; /* Сдвинем вправо */
        left: auto !important; /* Убираем центрирование */
        z-index: 11;
        text-align: right; /* Выравниваем точки вправо */
    }

    .swiper-pagination .swiper-pagination-bullet {
        margin: 0 5px !important; /* Увеличим расстояние между точками */
        width: 8px !important;
        height: 8px !important;
    }
}


.swiper-container {
    overflow: hidden;
}
.swiper-container .swiper-slide {
    position: relative;
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.swiper-info {
    position: absolute;
    bottom: 20px; /* или другое значение, чтобы поднять блок с текстом и кнопками */
    left: 20px;
    right: 20px;
}
.swiper-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 45%);
    border-radius: 8px;
}
.sisic__title {
    font-family: var(--font-accent-bold), sans-serif;
    font-size: 24px;
    color: #fff;
}
.sisic__text {
    margin-bottom: 30px;
    color: rgb(211, 201, 191);
    line-height: 1.1;
}
.n-block {
    position: relative;	
}
.swiper-pagination {
    position: absolute;
    bottom: 32px !important; /* Здесь ключевое изменение. Увеличьте значение, чтобы поднять кнопки-индикаторы. Например, с 20px до 80px */
    left: 0;
    right: 0;
    text-align: center;
}
.swiper-pagination-bullet {
    width: 15px !important;  /* Задает ширину квадрата */
    height: 15px !important; /* Задает высоту квадрата */
    opacity: .8 !important;
    background-color: #fff !important; /* Белый цвет для неактивных кнопок */
    border-radius: 4px !important; /* Слегка закругляет углы, чтобы они не были слишком острыми */
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5); /* Добавляет тень для объёма */
}
.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background-color: #00BFFF !important; /* Ярко-голубой цвет для активной кнопки */
    border-radius: 4px !important;
    box-shadow: 0px 0px 10px 3px rgba(0,191,255,0.7); /* Яркая тень для активной кнопки */
}
.sb-open-server span {
    color: #fff;
}
.sb-open-server {
    background-color: transparent;
    padding: 3px;
}
.swiper-main {
    height: 280px;
}
.server_worked.sb-brand-red {
    background-color: #8a1313;
}
.open-date {
    border-radius: 3px;
    background-color: #0000ff;
    padding: 2px 5px;
}
.server_worked {
    border-radius: 3px;
    background-color: #447f2b;
    padding: 2px 5px;
}



.sub_item {
    width: calc(50% - 12.5px); /* Теперь блоки будут ровно по 50% минус половина gap */
    height: 174px;
    background-size: cover;
    border-radius: 16px;
    font-family: Philosopher-Bold;
    display: flex;
    align-items: center;
    padding-left: 30px;
    box-sizing: border-box;
}

@media only screen and (max-width: 960px) {
    .sub_item {
        width: 48%; /* Немного уменьшим ширину, чтобы оставить место для отступов */
    }
}

/* Медиа-запрос для мобильных телефонов (до 675px) */
@media only screen and (max-width: 675px) {
    .sub_item {
        width: 100%; /* Блоки займут всю ширину экрана */
        margin-bottom: 20px; /* Добавим отступ снизу, чтобы блоки не сливались */
    }
}

.sub_item:last-child {
    margin-bottom: 0
}

.subscribers {
    margin: 40px 0;
}

.title-center {
    text-align: center;
    margin-bottom: 10px;
    font-family: Philosopher-Bold, sans-serif;
}

.subs-all {
    display: flex;
    justify-content: center; /* Центрируем блоки */
    flex-wrap: wrap;
    gap: 25px; /* Добавляем фиксированный отступ между блоками */
    margin-top: 20px;
	font-family: Philosopher-Bold;
}

.link-border {
    font-size: 14px;
    border-radius: 6px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #fff;
    padding: 5px 10px;
    transition: .3s;
	font-family: Philosopher-Bold;
}

.link-border:hover {
    color: #000;
    background-color: #fff
}




.logo-top {
    transition: filter .3s ease-in-out, transform .3s ease-in-out
}

.logo-top:hover {
    filter: brightness(120%);
    transform: scale(1.06)
}
.logo {
    text-align: center;
}
.logo img {
    height: 300px;
	margin-top: 15px;
}




.sub-title {
    margin-left: 10px
}

.sub-title p {
    font-family: Philosopher-Bold;
    font-weight: 400;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 8px
}

.main-start {
    margin-top: 1px;
    text-align: center;
    line-height: 1.6;
    margin-top: -45px; /* Отрицательный отступ поднимает блок вверх */
}




.main-text p {
    font-family: var(--font-accent-regular), sans-serif;
    font-size: 24px;
    color: #fff;
	text-align: center;
	margin-top: -20px;
}



.logo1 {
    text-align: left;
	position: absolute;
}
.logo1 img {
    height: 450px;
	margin-top: -320px;
}

@media only screen and (max-width: 960px) {
    /* ...существующие стили... */
    .logo1 {
        position: static; /* Возвращаем блок в обычный поток */
        text-align: center; /* Центрируем изображение, если оно находится в потоке */
        margin-top: 20px; /* Добавляем отступ сверху, чтобы отделить от предыдущего блока */
    }
    .logo1 img {
        height: 300px; /* Уменьшаем высоту изображения для маленьких экранов */
        margin-top: 0; /* Убираем отрицательный отступ */
    }
}


/* Кнопка открытия */
.video-toggle-btn {
  position: fixed;
  top: 25%;
  left: 30px;
  z-index: 10000;
  background: transparent; /* убираем фон */
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
  transform: translateX(-35%);
  transition: transform 0.3s ease;
}

.video-toggle-btn img {
  width: 78px;   /* ширина лого */
  height: auto;  /* сохраняем пропорции */
  display: block;
  transition: filter 0.3s ease-in-out;
}

.video-toggle-btn:hover img {
  filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 189, 1, 0.8));
  transform: scale(1.1);
}

/* Панель видео */
.video-panel {
  position: fixed;
  top: 28px;
  right: -100%;
  width: 70%;
  max-width: 400px;
  height: 100%;
  background: rgba(0,0,0,0.0); /* только блок, без overlay */
  z-index: 9999;
  padding: 30px;
  box-sizing: border-box;
  transition: right 0.5s ease;
  overflow-y: auto;
}
.video-panel.active {
  right: 0;
}

/* Закрыть */
.close-video {
  position: absolute;
  top: 15px; right: 12px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
}

/* Видео внутри */
.video-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 10px;
}
.video-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
 
  /* добавляем увеличение, чтобы убрать поля */
  transform: scale(1.05);
  transform-origin: center;
}

/* Адаптация для мобильных устройств (смартфоны, планшеты) */
@media only screen and (max-width: 768px) {
    /* Изменяем саму видеопанель, чтобы она занимала весь экран */
    .video-panel {
        width: 80%; /* Устанавливаем ширину на 100% */
        max-width: none; /* Убираем ограничение по максимальной ширине */
        height: 100%; /* Делаем панель на всю высоту экрана */
        top: 60px; /* Прикрепляем к верхнему краю */
        right: -100%; /* Начальное положение — полностью за экраном справа */
        padding: 10px; /* Добавляем внутренние отступы */
    }

    /* Когда панель активна, она будет выезжать справа и занимать 100% экрана */
    .video-panel.active {
        right: 0;
    }
    .video-toggle-btn img {
        width: 56px;   /* ширина лого */
    }
    .video-toggle-btn {
       left: 15px;
    }
}