/* bs5-compat.css — прежний вид BS 4.1.1 на Bootstrap 5.3.8 (22.10.2026).
   Подключается СРАЗУ после bootstrap-5.3.8.min.css, до css шаблона — эмулирует
   дефолты BS4, которые шаблон молча наследовал. У li-индикаторов каруселей убран
   data-bs-target (клики работают через data-bs-slide-to), поэтому «полоски» BS5
   (.carousel-indicators [data-bs-target]) на них не действуют — каскад как при BS4.
   План: site_qa/LIBS-2026-10-PLAN.md */

/* корневые переменные BS4 (в BS5 их нет; шаблон использует var(--white) у кнопки play) */
:root {
  --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c;
  --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745;
  --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d;
  --gray-dark: #343a40; --primary: #007bff; --secondary: #6c757d;
  --success: #28a745; --info: #17a2b8; --warning: #ffc107; --danger: #dc3545;
  --light: #f8f9fa; --dark: #343a40;
}

/* контейнер как в BS4: максимум 1140px и на ≥1400 (BS5 даёт 1320px) */
@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

/* межколоночные отступы как в BS4: 30px (BS5 — 24px) */
.row { --bs-gutter-x: 30px; }
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
  --bs-gutter-x: 30px;
}

/* ссылки как в BS4 reboot: без подчёркивания, подчёркивание на hover */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* индикаторы каруселей — ровно как в BS4; дальше css шаблона переопределяет, как и раньше */
.carousel-indicators { bottom: 10px; z-index: 15; }
.carousel-indicators li {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5);
}
.carousel-indicators .active { background-color: #fff; }

/* формы: классы BS4, которых в BS5 нет / дефолты BS4 */
.form-group { margin-bottom: 1rem; }
label { margin-bottom: 0.5rem; }
.form-control { border-radius: 0.25rem; }
.btn { border-radius: 0.25rem; }