/* =============================================================
 * Bethplanet — compat.css
 *
 * Слой совместимости, заведён 22.08.2026 (этап 3 аудита дизайна).
 *
 * Часть разметки на сайте приходит не из шаблонов, а из самого
 * движка uCoz: формы входа и регистрации, страницы поиска,
 * галереи, служебные списки. В ней используются классы Bootstrap,
 * которые мы не можем переименовать. Раньше их оформлял
 * bootstrap.min.css целиком — 22 000 строк ради двух десятков
 * классов.
 *
 * Здесь эти классы описаны заново, на токенах сайта. После этого
 * bootstrap.min.css отключается: всё, что от него оставалось
 * нужным, лежит в этом файле.
 *
 * Правило: сюда попадает ТОЛЬКО то, что реально встречается в
 * разметке движка. Список сверялся обходом всех типов страниц.
 * ============================================================= */

/* --- Сетка (остатки в шаблонах, которые ещё не переписаны) ---- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding: 0 15px;
  box-sizing: border-box;
}

.col-lg-12, .col-md-12, .col-sm-12, .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
.col-lg-9,  .col-md-9  { flex: 0 0 75%;    max-width: 75%; }
.col-lg-8,  .col-md-8, .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-lg-7,  .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-lg-6,  .col-md-6, .col-sm-6, .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-5,  .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-lg-4,  .col-md-4, .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-lg-3,  .col-md-3  { flex: 0 0 25%;    max-width: 25%; }

@media (max-width: 991px) {
  [class*="col-lg-"] { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 767px) {
  [class*="col-md-"],
  [class*="col-sm-"] { flex: 0 0 100%; max-width: 100%; }
}

/* --- Утилиты -------------------------------------------------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-muted  { color: var(--bp-text-muted); }
.text-danger { color: var(--bp-neg); }
.text-success{ color: var(--bp-pos); }
.pull-right  { float: right; }
.pull-left   { float: left; }
.clearfix::after { content: ""; display: table; clear: both; }
.img-responsive { display: block; max-width: 100%; height: auto; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  .hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
  .hidden-lg { display: none !important; }
}

/* --- Кнопки движка ------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--bp-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  color: var(--bp-text);
  background: var(--bp-bg);
  border: 1px solid var(--bp-line-strong);
  border-radius: var(--bp-radius-pill);
  transition: color var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease);
}

.btn:hover,
.btn:focus {
  color: var(--bp-brand);
  background: var(--bp-brand-soft);
  border-color: var(--bp-brand-line);
  text-decoration: none;
}

.btn-primary,
.btn-success,
.btn-info {
  color: #ffffff;
  background: var(--bp-brand);
  border-color: var(--bp-brand);
}

.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
.btn-info:hover,    .btn-info:focus {
  color: #ffffff;
  background: var(--bp-brand-hover);
  border-color: var(--bp-brand-hover);
}

.btn-danger {
  color: #ffffff;
  background: var(--bp-neg);
  border-color: var(--bp-neg);
}

.btn-danger:hover,
.btn-danger:focus {
  color: #ffffff;
  filter: brightness(0.92);
}

.btn-warning {
  color: #ffffff;
  background: var(--bp-warn);
  border-color: var(--bp-warn);
}

.btn-warning:hover { color: #ffffff; filter: brightness(0.92); }

.btn-link {
  color: var(--bp-brand);
  background: none;
  border-color: transparent;
}

.btn-xs { padding: 4px 10px; font-size: 12px; }
.btn-sm { padding: 6px 13px; font-size: 13px; }
.btn-lg { padding: 11px 22px; font-size: 15px; font-weight: 600; }
.btn-block { display: flex; width: 100%; }

/* --- Поля форм ------------------------------------------------ */
.form-control {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-family: var(--bp-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--bp-text);
  background: var(--bp-bg);
  border: 1px solid var(--bp-line-strong);
  border-radius: var(--bp-radius-sm);
  box-sizing: border-box;
  transition: border-color var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}

.form-control:focus {
  outline: none;
  border-color: var(--bp-brand);
  box-shadow: var(--bp-focus-ring);
}

select.form-control { width: auto; max-width: 100%; }

.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.form-inline .form-control { width: auto; }

.form-group { margin-bottom: 14px; }

.input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.input-group .form-control { flex: 1 1 auto; }
.input-group-btn { display: flex; }

.checkbox-inline,
.radio-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  font-size: 14px;
}

.checkbox-inline input,
.radio-inline input {
  margin-right: 6px;
  accent-color: var(--bp-brand);
}

/* --- Таблицы, списки, бейджи --------------------------------- */
.table {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
  font-size: 14px;
}

.table th,
.table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--bp-line);
}

.table th { font-weight: 600; color: var(--bp-text-muted); }

.list-group {
  overflow: hidden;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
}

.list-group-item {
  display: block;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  text-decoration: none;
  color: var(--bp-text);
  border-bottom: 1px solid var(--bp-line);
}

.list-group-item:last-child { border-bottom: 0; }

.list-group-item:hover {
  background: var(--bp-surface-2);
  color: var(--bp-brand);
  text-decoration: none;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #ffffff;
  background: var(--bp-text-dim);
  border-radius: var(--bp-radius-pill);
}

.label-danger  { color: #fff; background: var(--bp-neg); padding: 2px 8px; border-radius: var(--bp-radius-pill); }
.label-success { color: #fff; background: var(--bp-pos); padding: 2px 8px; border-radius: var(--bp-radius-pill); }
.label-warning { color: #fff; background: var(--bp-warn); padding: 2px 8px; border-radius: var(--bp-radius-pill); }

.bg-danger  { background: var(--bp-neg-soft); color: var(--bp-neg); padding: 10px 14px; border-radius: var(--bp-radius-sm); }
.bg-success { background: var(--bp-pos-soft); color: var(--bp-pos); padding: 10px 14px; border-radius: var(--bp-radius-sm); }

.well,
.panel {
  padding: 16px;
  margin-bottom: 16px;
  background: var(--bp-surface-2);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
}

.progress {
  height: 10px;
  overflow: hidden;
  background: var(--bp-surface-2);
  border-radius: var(--bp-radius-pill);
}

.progress-bar {
  height: 100%;
  background: var(--bp-brand);
}

/* --- Вспомогательные классы новых шаблонов ------------------- */
.bp-card-page {
  padding: 22px;
  margin-bottom: 22px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  box-shadow: var(--bp-shadow-card);
}

.bp-headRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.bp-headRow__title {
  margin: 0;
  font-family: var(--bp-font);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
}

.bp-searchRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.bp-searchRow .bp-input { flex: 1 1 220px; }

.bp-checkRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 14px;
  font-size: 14px;
}

/* --- Хлебные крошки старых шаблонов --------------------------
 * Шаблоны, которые ещё не переведены на .bp-crumbs, используют
 * бутстраповский .breadcrumb. Без Bootstrap он превращался в
 * нумерованный список («1. Главная 2. Галерея»). */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 18px 0 6px;
  margin: 0;
  list-style: none;
  font-size: 13px;
  color: var(--bp-text-muted);
}

.breadcrumb > li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb > li + li::before {
  content: "›";
  padding: 0 6px;
  color: var(--bp-text-dim);
}

.breadcrumb a {
  color: var(--bp-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--bp-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumb > .active {
  color: var(--bp-text);
}

/* Списки движка, которым Bootstrap снимал маркеры */
ol.breadcrumb,
ul.nav,
ul.switches,
ul.forum-pages {
  list-style: none;
}

/* Блок .article — базовая карточка старых шаблонов */
.article {
  padding: 20px;
  margin-bottom: 20px;
  background: var(--bp-bg);
  border: 1px solid var(--bp-line);
  border-radius: var(--bp-radius-md);
  box-shadow: var(--bp-shadow-card);
}

.article-top { margin-top: 0; }

/* Правая колонка ($GLOBAL_DRIGHTER$) переведена на .bp-page__side и
 * больше не носит класс col-lg-4. В шаблонах, которые ещё живут на
 * старой сетке (.row + .col-lg-8), ей нужно вернуть ширину колонки,
 * иначе она сваливается под контент. */
.row > .bp-page__side {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 0 15px;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .row > .bp-page__side {
    flex: 0 0 100%;
    max-width: 100%;
  }
}