/* ============================================================
   VI MODE — topbar и панель: СТАТИЧЕСКИЕ, в потоке документа
   ============================================================ */

.vi-topbar {
  display: none;
  width: 100%;
  background: #222;
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 15px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}
.vi-topbar.is-open { display: flex; }

.vi-topbar__link {
  color: #fff; text-decoration: underline; cursor: pointer;
  background: none; border: none; font-size: 15px; font-weight: bold;
  margin: 0 auto;
}
.vi-topbar__link:hover { color: #ff0; }

.vi-topbar__close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff; font-size: 20px; cursor: pointer;
}
.vi-topbar__close:hover { color: #f00; }

/* Панель управления */
.vi-panel {
  display: none;
  width: 100%;
  background: #1a1a1a;
  color: #fff;
  padding: 10px 20px;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  box-sizing: border-box;
}
.vi-panel.is-open { display: flex; }
.vi-panel__group { display: flex; align-items: center; gap: 8px; }
.vi-panel__label { font-size: 13px; color: #ccc; }
.vi-panel__sep { width: 1px; height: 30px; background: #444; }

/* Кнопки шрифта */
.vi-font-btn {
  background: #333; color: #fff; border: 2px solid #555;
  border-radius: 4px; cursor: pointer; padding: 4px 10px; font-weight: bold;
}
.vi-font-btn:nth-child(2) { font-size: 14px; }
.vi-font-btn:nth-child(3) { font-size: 18px; }
.vi-font-btn:nth-child(4) { font-size: 22px; }
.vi-font-btn:hover, .vi-font-btn.is-active { background: #fff; color: #000; border-color: #fff; }

/* Кнопки цвета */
.vi-color-btn {
  width: 30px; height: 30px; border-radius: 4px; cursor: pointer;
  border: 2px solid #888; display: inline-block;
}
.vi-color-btn:hover, .vi-color-btn.is-active { border-color: #fff; border-width: 3px; }
.vi-color-btn--white  { background: #fff; }
.vi-color-btn--black  { background: #000; }
.vi-color-btn--blue   { background: #063462; }
.vi-color-btn--yellow { background: #f5e642; }
.vi-color-btn--green  { background: #1a6b1a; }

/* Кнопка обычная версия */
.vi-normal-btn {
  margin-left: auto; background: #555; color: #fff; border: 2px solid #888;
  border-radius: 4px; cursor: pointer; padding: 4px 14px; font-size: 13px;
}
.vi-normal-btn:hover { background: #c00; border-color: #c00; }

/* ============================================================
   ОБЩИЕ ПРАВИЛА ДЛЯ ВСЕХ VI-СХЕМ
   ============================================================ */
/* Скрываем декоративные фоны */
body[class*="vi-"] .page-bg,
body[class*="vi-"] .page-bg-video { display: none !important; }

/* Жирный текст везде */
body[class*="vi-"] p,
body[class*="vi-"] li,
body[class*="vi-"] span,
body[class*="vi-"] div,
body[class*="vi-"] h1, body[class*="vi-"] h2, body[class*="vi-"] h3,
body[class*="vi-"] h4, body[class*="vi-"] h5, body[class*="vi-"] h6,
body[class*="vi-"] a,
body[class*="vi-"] label { font-weight: 700 !important; }

/* Убираем тени */
body[class*="vi-"] * { box-shadow: none !important; text-shadow: none !important; }

/* ============================================================
   РАЗМЕРЫ ШРИФТА
   ============================================================ */
body.vi-font-2 { font-size: 18px !important; }
body.vi-font-3 { font-size: 22px !important; }

body.vi-font-2 p, body.vi-font-2 li, body.vi-font-2 span,
body.vi-font-2 a, body.vi-font-2 div, body.vi-font-2 label { font-size: 18px !important; }
body.vi-font-2 h1 { font-size: 32px !important; }
body.vi-font-2 h2 { font-size: 26px !important; }
body.vi-font-2 h3, body.vi-font-2 h4 { font-size: 22px !important; }

body.vi-font-3 p, body.vi-font-3 li, body.vi-font-3 span,
body.vi-font-3 a, body.vi-font-3 div, body.vi-font-3 label { font-size: 22px !important; }
body.vi-font-3 h1 { font-size: 38px !important; }
body.vi-font-3 h2 { font-size: 30px !important; }
body.vi-font-3 h3, body.vi-font-3 h4 { font-size: 26px !important; }

/* ============================================================
   БЕЛАЯ СХЕМА (vi-white)
   ============================================================ */
body.vi-white { background: #fff !important; color: #000 !important; }

/* Шапка */
body.vi-white .site-header { background: #fff !important; border-bottom: 3px solid #000 !important; }
body.vi-white .site-header__inner { background: #fff !important; }
body.vi-white .site-header__phone,
body.vi-white .site-header__phones { color: #000 !important; }
body.vi-white .nav-toggle span { background: #000 !important; }

/* Логотип — не трогаем цвет */
body.vi-white .site-header__logo-img { filter: none !important; }

/* Весь текст чёрный */
body.vi-white h1, body.vi-white h2, body.vi-white h3,
body.vi-white h4, body.vi-white h5, body.vi-white h6 { color: #000 !important; }
body.vi-white p, body.vi-white span, body.vi-white div,
body.vi-white li, body.vi-white td, body.vi-white th { color: #000 !important; }

/* Ссылки */
body.vi-white a { color: #00008b !important; text-decoration: underline !important; }

/* Кнопки */
body.vi-white .btn,
body.vi-white .btn-primary,
body.vi-white a.btn { background: #000 !important; color: #fff !important; border: 2px solid #000 !important; }

/* Карточки новостей — белая схема */
body.vi-white .news-card {
  background: #fff !important;
  border: 2px solid #000 !important;
  border-radius: 4px !important;
}
body.vi-white .news-card__title,
body.vi-white .news-card__excerpt,
body.vi-white .news-card__date { color: #000 !important; }
body.vi-white .news-card__category {
  background: #000 !important; color: #fff !important;
}
body.vi-white .news-card__more { color: #00008b !important; }

/* Feature карточки — белая */
body.vi-white .feature-card {
  background: #f0f0f0 !important;
  border: 2px solid #000 !important;
  border-radius: 4px !important;
}
body.vi-white .feature-card__label { color: #000 !important; }
body.vi-white .feature-card__icon { filter: brightness(0) !important; }

/* Секции и основной контент */
body.vi-white .section,
body.vi-white .site-main { background: #fff !important; }
body.vi-white .hero { background: #fff !important; }
body.vi-white .hero__text,
body.vi-white .hero__subtitle,
body.vi-white .hero__subtitle2 { color: #000 !important; }

/* Подвал */
body.vi-white .site-footer {
  background: #e8e8e8 !important; color: #000 !important;
  border-top: 3px solid #000 !important;
}
body.vi-white .site-footer a { color: #00008b !important; text-decoration: underline !important; }
body.vi-white .site-footer h1, body.vi-white .site-footer h2,
body.vi-white .site-footer h3, body.vi-white .site-footer h4,
body.vi-white .site-footer p, body.vi-white .site-footer span,
body.vi-white .site-footer div { color: #000 !important; }

/* Боковое меню */
body.vi-white .side-menu { background: #fff !important; border-right: 2px solid #000 !important; }
body.vi-white .side-menu a { color: #000 !important; border-bottom: 1px solid #ccc !important; }
body.vi-white .side-menu__close { color: #000 !important; }

/* ============================================================
   ЧЁРНАЯ СХЕМА (vi-black)
   ============================================================ */
body.vi-black { background: #000 !important; color: #fff !important; }

body.vi-black .site-header { background: #111 !important; border-bottom: 3px solid #fff !important; }
body.vi-black .site-header__inner { background: #111 !important; }
body.vi-black .site-header__phone,
body.vi-black .site-header__phones { color: #fff !important; }
body.vi-black .nav-toggle span { background: #fff !important; }
body.vi-black .site-header__logo-img { filter: brightness(0) invert(1) !important; }

body.vi-black h1, body.vi-black h2, body.vi-black h3,
body.vi-black h4, body.vi-black h5, body.vi-black h6 { color: #fff !important; }
body.vi-black p, body.vi-black span, body.vi-black div,
body.vi-black li, body.vi-black td, body.vi-black th { color: #fff !important; }

body.vi-black a { color: #ffff00 !important; text-decoration: underline !important; }

body.vi-black .btn,
body.vi-black .btn-primary,
body.vi-black a.btn { background: #fff !important; color: #000 !important; border: 2px solid #fff !important; }

body.vi-black .news-card {
  background: #1a1a1a !important;
  border: 2px solid #fff !important;
  border-radius: 4px !important;
}
body.vi-black .news-card__title,
body.vi-black .news-card__excerpt,
body.vi-black .news-card__date { color: #fff !important; }
body.vi-black .news-card__category { background: #fff !important; color: #000 !important; }
body.vi-black .news-card__more { color: #ffff00 !important; }

body.vi-black .feature-card {
  background: #1a1a1a !important; border: 2px solid #fff !important; border-radius: 4px !important;
}
body.vi-black .feature-card__label { color: #fff !important; }
body.vi-black .feature-card__icon { filter: brightness(0) invert(1) !important; }

body.vi-black .section,
body.vi-black .site-main { background: #000 !important; }
body.vi-black .hero { background: #000 !important; }
body.vi-black .hero__text,
body.vi-black .hero__subtitle,
body.vi-black .hero__subtitle2 { color: #fff !important; }

body.vi-black .site-footer {
  background: #111 !important; color: #fff !important; border-top: 3px solid #fff !important;
}
body.vi-black .site-footer a { color: #ffff00 !important; text-decoration: underline !important; }
body.vi-black .site-footer h1, body.vi-black .site-footer h2,
body.vi-black .site-footer h3, body.vi-black .site-footer h4,
body.vi-black .site-footer p, body.vi-black .site-footer span,
body.vi-black .site-footer div { color: #fff !important; }

body.vi-black .side-menu { background: #111 !important; border-right: 2px solid #fff !important; }
body.vi-black .side-menu a { color: #ffff00 !important; border-bottom: 1px solid #444 !important; }
body.vi-black .side-menu__close { color: #fff !important; }

/* ============================================================
   СИНЯЯ СХЕМА (vi-blue)
   ============================================================ */
body.vi-blue { background: #063462 !important; color: #fff !important; }

body.vi-blue .site-header { background: #042347 !important; border-bottom: 3px solid #7ec8e3 !important; }
body.vi-blue .site-header__inner { background: #042347 !important; }
body.vi-blue .site-header__phone,
body.vi-blue .site-header__phones { color: #fff !important; }
body.vi-blue .nav-toggle span { background: #fff !important; }
body.vi-blue .site-header__logo-img { filter: brightness(0) invert(1) !important; }

body.vi-blue h1, body.vi-blue h2, body.vi-blue h3,
body.vi-blue h4, body.vi-blue h5, body.vi-blue h6 { color: #fff !important; }
body.vi-blue p, body.vi-blue span, body.vi-blue div,
body.vi-blue li, body.vi-blue td, body.vi-blue th { color: #fff !important; }

body.vi-blue a { color: #7ec8e3 !important; text-decoration: underline !important; }

body.vi-blue .btn,
body.vi-blue .btn-primary,
body.vi-blue a.btn { background: #7ec8e3 !important; color: #000 !important; border: 2px solid #7ec8e3 !important; }

body.vi-blue .news-card {
  background: #0a3d6e !important;
  border: 2px solid #7ec8e3 !important;
  border-radius: 4px !important;
}
body.vi-blue .news-card__title,
body.vi-blue .news-card__excerpt,
body.vi-blue .news-card__date { color: #fff !important; }
body.vi-blue .news-card__category { background: #7ec8e3 !important; color: #000 !important; }
body.vi-blue .news-card__more { color: #7ec8e3 !important; }

body.vi-blue .feature-card {
  background: #0a3d6e !important; border: 2px solid #7ec8e3 !important; border-radius: 4px !important;
}
body.vi-blue .feature-card__label { color: #fff !important; }
body.vi-blue .feature-card__icon { filter: brightness(0) invert(1) !important; }

body.vi-blue .section,
body.vi-blue .site-main { background: #063462 !important; }
body.vi-blue .hero { background: #063462 !important; }
body.vi-blue .hero__text,
body.vi-blue .hero__subtitle,
body.vi-blue .hero__subtitle2 { color: #fff !important; }

body.vi-blue .site-footer {
  background: #042347 !important; color: #fff !important; border-top: 3px solid #7ec8e3 !important;
}
body.vi-blue .site-footer a { color: #7ec8e3 !important; text-decoration: underline !important; }
body.vi-blue .site-footer h1, body.vi-blue .site-footer h2,
body.vi-blue .site-footer h3, body.vi-blue .site-footer h4,
body.vi-blue .site-footer p, body.vi-blue .site-footer span,
body.vi-blue .site-footer div { color: #fff !important; }

body.vi-blue .side-menu { background: #042347 !important; border-right: 2px solid #7ec8e3 !important; }
body.vi-blue .side-menu a { color: #7ec8e3 !important; border-bottom: 1px solid #1a5280 !important; }
body.vi-blue .side-menu__close { color: #fff !important; }

/* ============================================================
   ЖЁЛТАЯ СХЕМА (vi-yellow)
   ============================================================ */
body.vi-yellow { background: #f5e642 !important; color: #000 !important; }

body.vi-yellow .site-header { background: #e8d800 !important; border-bottom: 3px solid #000 !important; }
body.vi-yellow .site-header__inner { background: #e8d800 !important; }
body.vi-yellow .site-header__phone,
body.vi-yellow .site-header__phones { color: #000 !important; }
body.vi-yellow .nav-toggle span { background: #000 !important; }
body.vi-yellow .site-header__logo-img { filter: brightness(0) !important; }

body.vi-yellow h1, body.vi-yellow h2, body.vi-yellow h3,
body.vi-yellow h4, body.vi-yellow h5, body.vi-yellow h6 { color: #000 !important; }
body.vi-yellow p, body.vi-yellow span, body.vi-yellow div,
body.vi-yellow li, body.vi-yellow td, body.vi-yellow th { color: #000 !important; }

body.vi-yellow a { color: #00008b !important; text-decoration: underline !important; }

body.vi-yellow .btn,
body.vi-yellow .btn-primary,
body.vi-yellow a.btn { background: #000 !important; color: #f5e642 !important; border: 2px solid #000 !important; }

body.vi-yellow .news-card {
  background: #fffbb0 !important;
  border: 2px solid #000 !important;
  border-radius: 4px !important;
}
body.vi-yellow .news-card__title,
body.vi-yellow .news-card__excerpt,
body.vi-yellow .news-card__date { color: #000 !important; }
body.vi-yellow .news-card__category { background: #000 !important; color: #f5e642 !important; }
body.vi-yellow .news-card__more { color: #00008b !important; }

body.vi-yellow .feature-card {
  background: #fffbb0 !important; border: 2px solid #000 !important; border-radius: 4px !important;
}
body.vi-yellow .feature-card__label { color: #000 !important; }
body.vi-yellow .feature-card__icon { filter: brightness(0) !important; }

body.vi-yellow .section,
body.vi-yellow .site-main { background: #f5e642 !important; }
body.vi-yellow .hero { background: #f5e642 !important; }
body.vi-yellow .hero__text,
body.vi-yellow .hero__subtitle,
body.vi-yellow .hero__subtitle2 { color: #000 !important; }

body.vi-yellow .site-footer {
  background: #e8d800 !important; color: #000 !important; border-top: 3px solid #000 !important;
}
body.vi-yellow .site-footer a { color: #00008b !important; text-decoration: underline !important; }
body.vi-yellow .site-footer h1, body.vi-yellow .site-footer h2,
body.vi-yellow .site-footer h3, body.vi-yellow .site-footer h4,
body.vi-yellow .site-footer p, body.vi-yellow .site-footer span,
body.vi-yellow .site-footer div { color: #000 !important; }

body.vi-yellow .side-menu { background: #fffbb0 !important; border-right: 2px solid #000 !important; }
body.vi-yellow .side-menu a { color: #000 !important; border-bottom: 1px solid #888 !important; }
body.vi-yellow .side-menu__close { color: #000 !important; }

/* ============================================================
   ЗЕЛЁНАЯ СХЕМА (vi-green)
   ============================================================ */
body.vi-green { background: #1a6b1a !important; color: #fff !important; }

body.vi-green .site-header { background: #145214 !important; border-bottom: 3px solid #a8ffa8 !important; }
body.vi-green .site-header__inner { background: #145214 !important; }
body.vi-green .site-header__phone,
body.vi-green .site-header__phones { color: #fff !important; }
body.vi-green .nav-toggle span { background: #fff !important; }
body.vi-green .site-header__logo-img { filter: brightness(0) invert(1) !important; }

body.vi-green h1, body.vi-green h2, body.vi-green h3,
body.vi-green h4, body.vi-green h5, body.vi-green h6 { color: #fff !important; }
body.vi-green p, body.vi-green span, body.vi-green div,
body.vi-green li, body.vi-green td, body.vi-green th { color: #fff !important; }

body.vi-green a { color: #a8ffa8 !important; text-decoration: underline !important; }

body.vi-green .btn,
body.vi-green .btn-primary,
body.vi-green a.btn { background: #a8ffa8 !important; color: #000 !important; border: 2px solid #a8ffa8 !important; }

body.vi-green .news-card {
  background: #1f7e1f !important;
  border: 2px solid #a8ffa8 !important;
  border-radius: 4px !important;
}
body.vi-green .news-card__title,
body.vi-green .news-card__excerpt,
body.vi-green .news-card__date { color: #fff !important; }
body.vi-green .news-card__category { background: #a8ffa8 !important; color: #000 !important; }
body.vi-green .news-card__more { color: #a8ffa8 !important; }

body.vi-green .feature-card {
  background: #1f7e1f !important; border: 2px solid #a8ffa8 !important; border-radius: 4px !important;
}
body.vi-green .feature-card__label { color: #fff !important; }
body.vi-green .feature-card__icon { filter: brightness(0) invert(1) !important; }

body.vi-green .section,
body.vi-green .site-main { background: #1a6b1a !important; }
body.vi-green .hero { background: #1a6b1a !important; }
body.vi-green .hero__text,
body.vi-green .hero__subtitle,
body.vi-green .hero__subtitle2 { color: #fff !important; }

body.vi-green .site-footer {
  background: #145214 !important; color: #fff !important; border-top: 3px solid #a8ffa8 !important;
}
body.vi-green .site-footer a { color: #a8ffa8 !important; text-decoration: underline !important; }
body.vi-green .site-footer h1, body.vi-green .site-footer h2,
body.vi-green .site-footer h3, body.vi-green .site-footer h4,
body.vi-green .site-footer p, body.vi-green .site-footer span,
body.vi-green .site-footer div { color: #fff !important; }

body.vi-green .side-menu { background: #145214 !important; border-right: 2px solid #a8ffa8 !important; }
body.vi-green .side-menu a { color: #a8ffa8 !important; border-bottom: 1px solid #1f7e1f !important; }
body.vi-green .side-menu__close { color: #fff !important; }

/* Скрытие изображений (опционально) */
body.vi-images-off img:not(.site-header__logo-img):not(.vi-no-hide) {
  display: none !important;
}