/*
  Bridge styles: помогает вашим секциям (vip/stats/bans/rules) аккуратно
  вписаться в layout из maincs без полной переделки.
*/

body.theme-maincs {
  /* Фон как в maincs, но НЕ двигается при скролле */
  background-color: #191e22;
  background-image: url("../../maincs/images/bg.jpg");
  background-repeat: no-repeat;
  background-position: center 0;
  background-attachment: fixed;
  /* Увеличиваем фон, чтобы персонажи ушли к краям (а не под белый контент) */
  background-size: 126% auto;
}

/* На очень широких экранах можно добавить ещё немного масштаба */
@media (min-width: 1600px) {
  body.theme-maincs {
    background-size: 138% auto;
  }
}

/* На узких экранах лучше cover, иначе появятся пустые поля */
@media (max-width: 900px) {
  body.theme-maincs {
    background-size: cover;
  }
}

/* maincs задаёт достаточно агрессивные стили ссылкам/спискам — слегка смягчим */
.with_code a {
  text-decoration: none;
}

/* Ваши секции уже используют .container из bootstrap-grid — в maincs есть свой bootstrap.
   Дадим контейнеру разумную ширину, чтобы всё не расползалось. */
.with_code .container {
  width: 100%;
  max-width: 1200px;
}

/* Компактнее кнопки соцсетей в сайдбаре */
.footer-links--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-links--compact .footer-link-button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

/* Верх шапки: Telegram слева, LOG справа */
.h_telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 26px;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  border-radius: 4px;
  background: rgba(34, 158, 217, 0.8);
}
.h_telegram:hover {
  background: #229ED9;
  color: #fff;
}
.h_menu .h_menu-shortcuts{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.h_feedback--right{
  margin-left: auto;
}
.h_top_btn{
  display: inline-block;
  min-width: 44px;
  height: 26px;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.45);
  color: #fff !important;
  font: 700 11px/24px tahoma, Arial, sans-serif;
  letter-spacing: .5px;
  text-align: center;
  text-decoration: none;
  background: rgba(0,0,0,.2);
}
.h_top_btn:hover{
  background: rgba(255,255,255,.15);
}

/* Чтобы ваши секции не “прилипали” к краям */
.with_code > *:first-child {
  margin-top: 10px;
}
.with_code > *:last-child {
  margin-bottom: 10px;
}

/* Слайдер сразу под меню (в левом блоке) */
.under-menu-slider {
  margin: 12px 0 18px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

/* Минимальные стили слайдера (раньше они были в assets/css/main.css) */
.under-menu-slider .header-slider { position: relative; }
.under-menu-slider .header-slider-item {
  background-size: cover;
  background-position: center;
}
.under-menu-slider .header-slider-item-overlay{
  background: rgba(0,0,0,0.35);
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
}
.under-menu-slider .header-slider-content{
  color:#fff;
  text-align:center;
}
.under-menu-slider .header-slider-content h2{
  margin: 0;
  font-weight: 800;
  letter-spacing: .4px;
}
.under-menu-slider .header-slider-content h4{
  margin: 6px 0 0;
  font-weight: 500;
  opacity: .9;
}
.under-menu-slider .header-slider-arrows .header-slider-arrow-prev,
.under-menu-slider .header-slider-arrows .header-slider-arrow-next{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color:#fff;
  cursor:pointer;
  opacity:.9;
}
.under-menu-slider .header-slider-arrows .header-slider-arrow-prev:hover,
.under-menu-slider .header-slider-arrows .header-slider-arrow-next:hover{ opacity: 1; }
.under-menu-slider .header-slider-arrow-prev{ left: 14px; }
.under-menu-slider .header-slider-arrow-next{ right: 14px; }
.under-menu-slider .header-slider-dots{
  position:absolute;
  left:0;
  right:0;
  bottom: 10px;
  display:flex;
  justify-content:center;
  gap: 8px;
  list-style:none;
  padding:0;
  margin:0;
}
.under-menu-slider .header-slider-dots li button{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.45);
  font-size: 0;
  cursor: pointer;
}
.under-menu-slider .header-slider-dots li.slick-active button{ background: rgba(255,255,255,0.95); }

.under-menu-slider .header-slider-item {
  height: 240px !important;      /* перебиваем 650px из assets/css/main.css */
  min-height: 240px !important;
  background-size: cover;
  background-position: center;
}
.under-menu-slider .header-slider-item-overlay {
  height: 240px !important;
  display: flex;
  align-items: center;
}
.header-slider-content--under-menu {
  padding: 14px 0;
}

/* Фикс для описания в сайдбаре (чтобы "Игровое сообщество..." не уезжало) */
.site-side-info {
  opacity: 0.92;
  line-height: 1.45;
  word-break: break-word;
}
.site-description {
  margin-top: 6px;
}

/* Toast для "Скопировать IP" */
.copy-toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10000;
  background: rgba(0,0,0,0.82);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.copy-toast.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Заголовок-бар для контента страницы (как у блока серверов) */
.page-block{
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  margin: 0 0 14px;
}
.page-block-head{
  background: #3b3b3b;
  color: #fff;
  padding: 10px 12px;
  font: 12px/1 "tahoma";
  text-transform: uppercase;
  letter-spacing: .6px;
  display:flex;
  gap: 8px;
  align-items:center;
}
.page-block-body{
  padding: 12px;
}

/* Пагинация (в стиле light-шаблона) */
.pagination{
  margin: 12px 0 0;
  text-align: center;
}
.pagination a,
.pagination span{
  display: inline-block;
  margin: 0 3px;
  padding: 6px 10px;
  border: 1px solid #d5d5d5;
  background: #f4f4f4;
  color: #1765ae;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
}
.pagination a:hover{ background:#eaeaea; }
.pagination .current{
  background: #1765ae;
  border-color: #1765ae;
  color: #fff;
  font-weight: 700;
}
.pagination .dots{
  border-color: transparent;
  background: transparent;
  color: #666;
}

/* Статистика: колонка Игрок не переносится, ники видны полностью */
.stats-table .stats-col-player {
  white-space: nowrap;
  min-width: 100px;
}

/* Блок «Статистика посещений» над таблицей статов (lr_population) */
.population-stats-block {
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 18px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.population-stats-head {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  color: #fff;
  padding: 10px 14px;
  font: 12px/1.2 "tahoma", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .6px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.population-stats-head i {
  opacity: .9;
}
.population-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 14px;
  background: #f8f9fa;
}
.population-stat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.population-stat-card:hover {
  border-color: #1765ae;
  box-shadow: 0 2px 8px rgba(23, 101, 174, 0.12);
}
.population-stat-top{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2px;
}
.population-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #1765ae;
  line-height: 1.2;
  margin-bottom: 0;
}
.population-stat-diff{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
  border: 1px solid transparent;
  transform: translateY(-1px);
}
.population-stat-diff--plus{
  color: #0f5132;
  background: rgba(25, 135, 84, 0.12);
  border-color: rgba(25, 135, 84, 0.22);
}
.population-stat-diff--minus{
  color: #842029;
  background: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.22);
}
.population-stat-diff--zero{
  color: #374151;
  background: rgba(107, 114, 128, 0.10);
  border-color: rgba(107, 114, 128, 0.20);
}
.population-stat-split{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  font-size: 11px;
  line-height: 1.25;
  color: #6b7280;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease, margin-top .2s ease, padding-top .2s ease, max-height .2s ease;
}
.population-stat-card:hover .population-stat-split{
  max-height: 60px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0,0,0,0.12);
  opacity: 1;
}
.population-stat-left{ text-align:left; flex: 1; min-width: 0; }
.population-stat-right{ text-align:right; flex: 1; min-width: 0; }
}
.population-stat-label {
  display: block;
  font-size: 11px;
  color: #4b5563;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.population-stat-card--peak .population-stat-value {
  color: #059669;
}
@media (max-width: 600px) {
  .population-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
  }
  .population-stat-top{ gap: 6px; }
  .population-stat-value { font-size: 18px; }
  .population-stat-label { font-size: 10px; }
  .population-stat-card:hover .population-stat-split{
    margin-top: 6px;
    padding-top: 6px;
    max-height: 56px;
  }
  .population-stat-split{
    font-size: 10px;
  }
}

/* Правила */
.rules-inner{
  max-width: 950px;
  margin: 0 auto;
}
.rules-title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 16px;
  text-align: center;
}
.rules-tabs{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rule-box{
  background: #f7f7f7;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  padding: 12px 14px;
}
.rule-box h4{
  margin-top: 0;
}
.rule-box ul{
  margin: 8px 0 14px;
  padding-left: 18px;
  line-height: 1.55;
}

/* Банлист: сообщение «Вы не в бане» — зелёный текст, прозрачный фон */
.bans-not-banned {
  margin: 0 0 12px;
  padding: 10px 12px;
  color: #1e7e34;
  background: transparent;
  font-weight: 600;
  border: none;
}
/* Банлист: строка с баном по IP посетителя — выделена первой */
.ban-row-visitor {
  border-left: 3px solid #d39e00;
}
.ban-row-visitor td {
  font-weight: 600;
}
/* Банлист: ещё забанен — красный прозрачный фон (перебиваем .table-striped) */
.table-responsive .table tbody tr.ban-row-active td,
.table-responsive .table tbody tr.ban-row-active th {
  background: rgba(220, 53, 69, 0.35) !important;
}
/* Банлист: разбанен (срок истёк/снят) — зелёный прозрачный фон */
.table-responsive .table tbody tr.ban-row-expired td,
.table-responsive .table tbody tr.ban-row-expired th {
  background: rgba(40, 167, 69, 0.35) !important;
}
/* Правый блок: инфо о посетителе (найден в банлисте) */
.visitor-ban-info { font-size: 13px; line-height: 1.5; }
.visitor-ban-info p { margin: 0 0 6px; }
.visitor-ban-info p:last-child { margin-bottom: 0; }
.visitor-ban-info-ip { word-break: break-all; }

/* ===== Адаптив (на телефоне упрощаем, на десктопе — как в оригинале MAINCS) ===== */
@media (max-width: 992px) {
  body { min-width: 0 !important; }
  .inner {
    width: 100% !important;
    padding: 0 12px;
  }
  header { width: 100% !important; }

  .left_block,
  .right_block {
    float: none !important;
    width: 100% !important;
  }
  .right_block {
    margin-top: 12px !important;
  }
  .side_content {
    padding: 0 6px !important;
  }

  /* На мобиле фоновые шапка/футер-картинки часто “ломают” вёрстку — упрощаем */
  .logo { background-size: cover; }
  footer {
    background: rgba(0,0,0,.55) !important;
    height: auto !important;
    padding: 14px 12px;
    border-radius: 0 0 6px 6px;
  }
  .f_logo { background: none !important; width:auto !important; height:auto !important; position: static !important; }
  .f_text, .f_banners { position: static !important; left:auto !important; top:auto !important; }
}