/* ======================================================
   ОСНОВНЫЕ ПЕРЕМЕННЫЕ
====================================================== */
:root {
  --primary-color: #ff8800;           /* Основной оранжевый для кнопок */
  --primary-hover-color: #ff9933;     /* Подсветка кнопок при наведении */
  --primary-border-color: #cc6600;    /* Рамка кнопок */
  --transition-speed: 0.3s;           /* Плавность всех переходов */
  --border-radius: 25px;              /* Закругления для кнопок, блоков и полей */
  --font-family: sans-serif;          /* Основной шрифт страницы */
}

/* ======================================================
   ПЛАВНЫЕ ПЕРЕХОДЫ
====================================================== */
* {
  transition: all var(--transition-speed) ease-in-out; /* Плавное изменение всех свойств */
  box-sizing: border-box; /* Чтобы padding и border не ломали размеры элементов */
}

/* ======================================================
   ОБЩИЕ СТИЛИ
====================================================== */
body {
  font-family: var(--font-family); /* Основной шрифт */
  margin: 0;                       /* Убираем внешние отступы */
  padding: 0;                      /* Убираем внутренние отступы */
  padding-top: 60px;               /* Отступ сверху для фиксированного navbar */
}

/* Фон под услугами и сервисами  */
.category-wrapper,
#service_description,
.well {
  width: 100vw;                  /* тянем фон на всю ширину экрана */
  margin-left: calc(50% - 50vw); /* выравниваем по центру */
  padding-left: calc(50vw - 50% + 10px); /* сохраняем выравнивание контента */
  padding-right: calc(50vw - 50% + 10px);/* тоже справа */
  border: none !important;         /* убираем рамку/линию сверху */
  border-radius: 0 !important;     /* прямые углы */
  box-shadow: none !important;     /* убираем тень */
}

/* Исправление смещения ширины у блока "Описание услуги" */

.form-group.fields .panel-body.border-solid.border-rounded {
  width: calc(100% + 30px);     /* расширяем блок обратно на ~15px с каждой стороны */
  margin-left: -15px;           /* выравниваем влево */
  margin-right: -15px;          /* выравниваем вправо */
  box-sizing: border-box;       /* чтобы padding не влиял на ширину */
}


/* ======= Кнопки ======= */
.btn {
  position: relative;                  /* Контекст для псевдоэлемента свечения */
  display: inline-block;               /* Блочно-строчный элемент */
  padding: 10px 20px;                  /* Внутренние отступы кнопки */
  min-height: 24px;                    /* Минимальная высота кнопки */
  border: none;                        /* Без стандартной рамки */
  border-radius: var(--border-radius); /* Закругления кнопки */
  font-weight: 500;                    /* Полужирный текст */
  cursor: pointer;                     /* Курсор при наведении */
  color: #fff;                         /* Цвет текста */
  background: linear-gradient(45deg, #ff9800, #ffb74d); /* Градиент фона */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Лёгкая тень */
  overflow: hidden;                    /* Обрезаем псевдоэлемент свечения */
  transition: transform 0.2s ease-in-out; /* Плавное изменение при наведении */
  z-index: 0;                           /* Контекст для текста выше свечения */
}

.btn::before {
  content: "";                      /* Псевдоэлемент для анимации свечения */
  position: absolute;               /* Абсолютное позиционирование */
  top: -2px; left: -2px; right: -2px; bottom: -2px; /* Выход за границы кнопки */
  border-radius: var(--border-radius); /* Закругления как у кнопки */
  background: linear-gradient(120deg, #ff9800, #ffb74d, #ff9800, #ffb74d); /* Градиент свечения */
  background-size: 300% 300%;        /* Масштаб градиента для анимации */
  z-index: -1;                       /* Под кнопкой */
  opacity: 0;                        /* Скрыт по умолчанию */
  filter: blur(4px);                 /* Размытие свечения */
  transition: opacity 0.3s ease-in-out; /* Плавное появление */
}

.btn:hover::before {
  opacity: 1;                             /* Появление при наведении */
  animation: glowMove 2s linear infinite; /* Анимация движения света */
}

@keyframes glowMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn span, .btn i, .btn strong {
  position: relative; /* Чтобы текст был выше псевдоэлемента */
  z-index: 1;
}

.btn:hover {
  background-color: var(--primary-hover-color); /* Цвет кнопки при наведении */
  box-shadow: 0 0 8px rgba(255,136,0,0.4);      /* Тень свечения */
  transform: none;
}

.btn:active {
  background-color: #e67e00;       /* Цвет при клике */
  box-shadow: 0 0 6px rgba(255,136,0,0.4);
  transform: none;
}

/* ======= Поля ввода и textarea ======= */
.form-control {
  border-radius: var(--border-radius); /* Закругление полей */
  padding: 7px 12px;                   /* Внутренние отступы */
  border: 0.5px solid #ccc;            /* Рамка */
  height: 40px;                        /* Высота */
  line-height: 1.2;
}

textarea.form-control {
  border-radius: 25px; /* Меньшее закругление */
}


/* ======= Панели и категории (Единые отступы для всех блоков) ======= */
.panel-body.border-solid.border-rounded,
#service_description .panel-body,
.category-wrapper {
  padding: 12px;           /* Внутренние отступы одинаковые */
  margin-bottom: 12px;     /* Расстояние между блоками одинаковое */
  border-radius: var(--border-radius); /* Закругления */
}

/* ======== NAVBAR Базовые стили: одинаковые для всех тем ======== */
.navbar {
  position: fixed;          /* Фиксированное положение */
  width: 100%;              /* Растягиваем на всю ширину */
  top: 0;                   /* Прилеплен к верхней части */
  z-index: 3000;            /* Поверх всех элементов */
}

.navbar .btn {
  margin: 7px 0;            /* Отступ сверху/снизу */
  padding: 5px 12px;        /* Внутренние отступы кнопки в navbar */
  height: auto;             /* Автовысота под контент */
  line-height: normal;      /* Стандартный line-height */
  display: flex;            /* Flex для выравнивания текста */
  align-items: center;      /* Вертикальное центрирование */
  justify-content: center;  /* Горизонтальное центрирование */
}

/* ============================
   Оранжевое подчёркивание в navbar
   - действует только на верхние пункты меню (top-level)
   - не затрагивает кнопки (.btn) и пункты в выпадающем меню
   ============================ */

/* цель: только топ-уровень (ul.navbar-nav > li > a) */
.navbar .navbar-nav > li > a:not(.btn) {
  position: relative;           /* нужно для абсолютного псевдоэлемента */
  display: inline-block;        /* чтобы ::after точно позиционировался */
  padding-bottom: 6px;          /* место под линию, чтобы не смещать navbar */
  color: inherit;               /* сохранить текущий цвет текста */
  text-decoration: none;        /* убрать дефолтное подчеркивание */
  -webkit-font-smoothing: antialiased;
}

/* сама линия (скрытая по ширине) */
.navbar .navbar-nav > li > a:not(.btn)::after {
  content: "";                                          /* пустой элемент */
  position: absolute;                                   /* позиционируем относительно ссылки */
  left: 0;                                              /* от левого края ссылки */
  bottom: 0;                                            /* внизу ссылки (внутри padding-bottom) */
  height: 2px;                                          /* толщина линии */
  width: 0;                                             /* 0 -> при наведении расширится */
  background: linear-gradient(90deg, var(--primary-color), var(--primary-hover-color)); /* градиент оранжевый */
  transition: width 440ms cubic-bezier(.2,.8,.2,1);     /* плавность */
  border-radius: 5px;                                   /* слегка закруглённый край */
}

/* при наведении / фокусе расширяем линию */
.navbar .navbar-nav > li > a:not(.btn):hover::after,
.navbar .navbar-nav > li > a:not(.btn):focus::after,
.navbar .navbar-nav > li.active > a::after {             /* активный пункт — линия видима */
  width: 80%;                                            /* занимать всю ширину ссылки */
  margin-left: 12px;                                     /* отступ от левого края */
}

/* вспомогательно: немного подсветить текст при ховере (по желанию) */
.navbar .navbar-nav > li > a:not(.btn):hover,
.navbar .navbar-nav > li > a:not(.btn):focus {
  color: inherit; /* можно поменять цвет, например: color:  var(--primary-color); */
  outline: none;
}

.navbar li {
  display: flex;
  align-items: center;
}

#theme-toggle {
  display: flex;
  align-items: center;
  margin-right: 15px; /* отступ от правого края */
  margin-left: 15px; /* отступ от левого края */
  justify-content: center;
  height: 33px; /* можно чуть больше, если Navbar высокий */
  padding: 6px 10px;
  background: none;
  border: 1px solid var(--border-color, transparent);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

#theme-toggle:hover {
  border-color: orange; /* легкий эффект при наведении */
}

/* === Базовый стиль кнопки темы === */
.navbar-theme-btn {
  margin-left: 10px;
  padding: 1px 1px;
  font-size: 12px;
  line-height: 1;
  border-radius: 25px;
  border: 1px solid transparent;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Ховер — лёгкое свечение */
.navbar-theme-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.navbar-theme-btn i {
  transition: transform 0.4s ease;
}

.navbar-theme-btn.rotating i {
  transform: rotate(180deg);
}

/* Кнопка темы слева, рядом с логотипом */
.navbar-header {
  display: block;
  align-items: center;
  gap: 10px; /* расстояние между логотипом и кнопкой */
}

/* Кнопка темы рядом с логотипом, но "плавает" справа от него */
.navbar-theme-btn {
  float: left;          /* ставим рядом с логотипом */
  margin: 12px 0 0 8px; /* отступ сверху и слева */
  padding: 4px 8px;     /* Внутренние отступы кнопки */
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======================================================
   ПАНЕЛЬ БЫСТРОГО ВЫБОРА КАТЕГОРИЙ
   ------------------------------------------------------
   Размещается сразу под навбаром.
   При клике выбирает категорию в выпадающем списке.
====================================================== */

/* === Контейнер панели кнопок === */
.quick-categories {
  margin-top: 0px;                     /* Отступ сверху, чтобы не перекрывало navbar */
  display: flex;                        /* Включаем flex для горизонтального расположения кнопок */
  justify-content: center;              /* Центрируем кнопки по горизонтали */
  flex-wrap: wrap;                      /* Разрешаем перенос кнопок на новую строку при узком экране */
  gap: 10px;                            /* Расстояние между кнопками */
  padding: 15px;                        /* Внутренние отступы вокруг кнопок */
  background: rgba(0, 0, 0, 0.05);      /* Светлый прозрачный фон панели */
  backdrop-filter: blur(6px);           /* Лёгкий блюр позади панели */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Тонкая линия снизу панели для разделения */
  z-index: 2500;                        /* Располагаем поверх основного контента */
}

/* === Стиль отдельной кнопки === */
.quick-btn {
  background: linear-gradient(45deg, #ff8800, #ffb74d); /* Градиентный оранжево-жёлтый фон */
  color: #fff;                         /* Белый текст */
  border: none;                        /* Убираем стандартную рамку */
  border-radius: 25px;                 /* Закруглённые углы кнопки */
  padding: 8px 18px;                   /* Внутренние отступы: сверху/снизу 8px, слева/справа 18px */
  cursor: pointer;                     /* Указатель при наведении (рука) */
  transition: transform 0.2s ease, box-shadow 0.3s; /* Плавные переходы для анимации при наведении */
}

/* === Эффект при наведении === */
.quick-btn:hover {
  transform: translateY(-2px);         /* Приподнимаем кнопку чуть вверх при hover */
  box-shadow: 0 2px 6px rgba(255,136,0,0.4); /* Добавляем лёгкую тень оранжевого свечения */
}

/* === Активная кнопка (после клика) === */
.quick-btn.active {
  background: linear-gradient(45deg, #ffb74d, #ff8800); /* Инвертируем направление градиента */
  box-shadow: 0 0 8px rgba(255,136,0,0.6); /* Более сильное свечение вокруг активной кнопки */
}

/* === Фон для блока быстрых категорий === */

/* Светлая тема */
html.light-theme .quick-categories {
  background-color: #ffffff;   /* Чисто белый */
  border-radius: 0;            /* Без закруглений */
  padding: 15px 0;             /* Вертикальный отступ */
}

/* Тёмная тема */
html.dark-theme .quick-categories {
  background-color: #111111;   /* Почти чёрный */
  border-radius: 0;
  padding: 15px 0;
}

/* === Поддержка тёмной темы === */
html.dark-theme .quick-categories {
  background: rgba(26,26,26,0.7);      /* Тёмный полупрозрачный фон вместо светлого */
  border-bottom: 1px solid rgba(255,255,255,0.05); /* Едва заметная белая граница снизу */
}

/* === Линия загрузки вверху сайта === */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #ff8800, #ffb74d);
  box-shadow: 0 0 8px rgba(255,136,0,0.6);
  z-index: 9999;
  transition: width 0.4s ease-out, opacity 0.3s ease;
}

/* Красная форма ошибки */
.alert-danger {
  border-radius: 50px;
}

/* Минималистичный бургер без рамки и фона */
.navbar-toggle {
  background: none !important;       /* убираем серый фон */
  border: none !important;           /* убираем рамку */
  box-shadow: none !important;       /* убираем тень */
  padding: 10px 8px;                  /* немного уменьшаем отступы */
  outline: none !important;          /* убираем обводку при клике */
}

/* Линии-бургера — делаем тоньше и современнее */
.navbar-toggle .icon-bar {
  background-color: currentColor;    /* цвет линий совпадает с текстом */
  height: 2px;                       /* толщина линий */
  border-radius: 1px;                /* чуть скругляем концы */
  transition: all 0.3s ease;         /* плавность при hover */
}

/* Эффект при наведении */
.navbar-toggle:hover .icon-bar {
  background-color: var(--primary-color);
}

/* Убираем белую полоску между navbar и выпадающим меню */
.navbar-collapse {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.navbar {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Когда меню раскрыто — оно прилипает к navbar без зазора */
.navbar-collapse.in {
  margin-top: 0 !important;
}

/* Убираем возможный фон-просвет при анимации */
.navbar-collapse,
.navbar-collapse.collapsing {
  background-color: inherit !important;
}

/* Подстраховка для обеих тем */
html.light-theme .navbar-collapse,
html.dark-theme .navbar-collapse {
  background-color: inherit !important;
}

/* Полностью устраняем микрополоску между navbar и меню */
.navbar,
.navbar-collapse,
.navbar-collapse.in,
.navbar-collapse.collapsing {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Подгонка фона, чтобы не было разницы по яркости */
.navbar-collapse {
  background-color: transparent !important;
}

/* Исправляем полоску без снятия фиксации */
.navbar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: inherit; /* полностью сливаем по цвету */
  z-index: 3999; /* ниже основного navbar */
}


/* ==================================================
   START (!) СТИЛЬ ЗАГОЛОВКОВ НА СТРАНИЦАХ
====================================================== */

/* Основной заголовок */
.page-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 29px;
  text-align: center;
  letter-spacing: 1px;
  color: #333; /* ⚫ Тёмно-серый, ближе к чёрному */
  margin-bottom: 35px;
}

/* Подзаголовок */
.page-subtitle {
  font-size: 1.1em;
  font-weight: 400;
  color: #777;
  margin-bottom: 25px;
}

/* === Поддержка тёмной темы === */
html.dark-theme .page-title {
  color: #fff; /* белый текст */
}

/* === Добавим эффект появления заголовка при загрузке === */

.page-title {
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInDown 0.8s ease forwards;
}

@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==================================================
   FINISH (!) СТИЛЬ ЗАГОЛОВКОВ НА СТРАНИЦАХ
====================================================== */



/* ======================================================
   START (!) ПОДВАЛ (FOOTER)
   ====================================================== */

/* === Общий контейнер подвала === */
.site-footer {
  background-color: rgba(0, 0, 0, 0.85);  /* Тёмный фон по умолчанию */
  color: #ddd;                            /* Светлый текст */
  padding: 40px 0 20px;                   /* Отступ сверху и снизу */
  font-size: 14px;                        /* Размер шрифта */
  line-height: 1.6;                       /* Межстрочный интервал для удобства чтения */
  text-align: center;                     /* Центрируем общий контент */
}

/* === Ссылки внутри подвала === */
.site-footer a {
  color: var(--primary-color);            /* Основной фирменный цвет ссылок */
  text-decoration: none;                  /* Убираем стандартное подчёркивание */
  transition: color 0.3s ease;            /* Плавное изменение цвета при наведении */
}

/* === Эффект при наведении на ссылку === */
.site-footer a:hover {
  color: var(--primary-hover-color);      /* Светлее оттенок при наведении */
}

/* === Верхняя часть подвала (ссылки и колонки) === */
.footer-top {
  display: flex;                          /* Размещаем колонки в одну линию */
  flex-wrap: wrap;                        /* Разрешаем перенос строк на узких экранах */
  justify-content: center;                /* Центрируем колонки по горизонтали */
  gap: 10px;                              /* Расстояние между колонками */
  margin-bottom: 30px;                    /* Отступ между верхом и низом подвала */
}

/* === Каждая колонка подвала === */
.footer-column {
  flex: 0 1 auto;                         /* Колонка подстраивается под содержимое */
  margin: 10px 20px;                      /* Отступы вокруг колонок */
}

/* === Списки внутри колонок === */
.footer-column ul {
  list-style: none;                       /* Убираем стандартные маркеры списка */
  padding: 0;                             /* Убираем внутренние отступы */
  margin: 0;                              /* Убираем внешние отступы */
  display: inline-block;                  /* Чтобы список занимал ширину контента */
  text-align: left;                       /* Текст внутри списка выровнен влево */
}

/* === Элементы списка (ссылки) === */
.footer-column li {
  margin-bottom: 6px;                     /* Отступ между ссылками */
}

/* === Нижняя часть подвала (копирайт и разделительная линия) === */
.footer-bottom {
  text-align: center;                     /* Центрируем текст */
  font-size: 13px;                        /* Чуть меньший шрифт */
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Лёгкая разделительная линия */
  padding-top: 15px;                      /* Отступ от линии до текста */
  color: #aaa;                            /* Более мягкий цвет текста */
}

/* === ПОДДЕРЖКА СВЕТЛОЙ ТЕМЫ === */
html.light-theme .site-footer {
  background-color: #f5f5f5;              /* Светло-серый фон */
  color: #333;                            /* Тёмный текст */
}

html.light-theme .footer-bottom {
  border-top-color: rgba(0, 0, 0, 0.1);   /* Более тёмная линия в светлой теме */
  color: #555;                            /* Более мягкий серый текст */
}

/* === ПОДДЕРЖКА ТЁМНОЙ ТЕМЫ === */
html.dark-theme .site-footer {
  background-color: #111;                 /* Почти чёрный фон */
  color: #ccc;                            /* Светло-серый текст */
}

html.dark-theme .footer-bottom {
  color: #999;                            /* Более светлый оттенок текста */
}

/* === Адаптив для мобильных устройств (исправленный) === */
@media (max-width: 768px) {
  .footer-top {
    flex-wrap: wrap;                /* Разрешаем перенос строк, если не помещается */
    flex-direction: row;            /* Сохраняем горизонтальное расположение */
    justify-content: center;        /* Центрируем по горизонтали */
    gap: 20px;                      /* Расстояние между колонками */
  }

  .footer-column {
    flex: 0 1 auto;                 /* Колонки подстраиваются под ширину контента */
    min-width: 120px;               /* Минимальная ширина, чтобы не слипались */
  }

  .footer-column ul {
    text-align: center;             /* Центрируем текст ссылок */
  }
}

/* ======================================================
   FINISH (!) ПОДВАЛ (FOOTER)
   ====================================================== */




/* ======================================================
   СВЕТЛАЯ ТЕМА
====================================================== */
html.light-theme {
  background-color: #ffffff; /* Фон страницы */
  color: #333;               /* Цвет текста */
}

/* Контейнеры формы */
html.light-theme .well,
html.light-theme .form-group {
  background-color: #f5f5f5;
  border: none;
}

/* Поля ввода и select */
html.light-theme .form-control {
  background-color: #fff;
  color: #333;
  border: 0.1px solid #ccc;
}

/* Поле инструкции в платежах */
html.light-theme .form-group.instruction .panel-body.border-solid.border-rounded.text-center {
  background-color: #fff;
  color: #333;
  border: 0.2px solid #ccc;
}

html.light-theme .navbar {
  background-color: rgba(245,245,245,0.7); /* Прозрачный светлый navbar */
  backdrop-filter: blur(4px);              /* Блюр */
  border: none;
  box-shadow: none;
}

html.light-theme .navbar .dropdown-menu {
  background-color: rgba(245,245,245,0.7); /* Меню прозрачное */
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: none;
}

/* Цвета блоков в светлой теме */
html.light-theme #service_description .panel-body,
html.light-theme .category-wrapper {
  background-color: #f5f5f5; /* Светлый фон */
  color: #333;               /* Цвет текста */
}

html.light-theme .navbar-btn {
  border: 1px solid #ccc;    /* Рамка кнопки */
  color: #333;
  background-color: transparent;
}

/* Поле описание услуги */
html.light-theme .form-group.fields .panel-body.border-solid.border-rounded {
  border: 0.5px;
  background-color: #fff !important;
}

/* === Кнопка смены темы === */
html.light-theme .navbar-theme-btn {
  color: #333;
  border-color: rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.6);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}




/* ======================================================
   ТЁМНАЯ ТЕМА
====================================================== */

html.dark-theme body {
  background: radial-gradient(circle at top, #181818, #0d0d0d); /* Фон страницы */
  color: #eee;               /* Цвет текста */
}

/* Контейнеры формы */
html.dark-theme .well,
html.dark-theme .form-group {
  background-color: #1e1e1e;
  border: none;
}

/* Поля ввода и select */
html.dark-theme .form-control {
  background-color: #2a2a2a;
  color: #eee;
  border: 0.2px solid #444;
}

/* Поле инструкции в платежах */
html.dark-theme .form-group.instruction .panel-body.border-solid.border-rounded.text-center {
  background-color: #2a2a2a;
  color: #eee;
  border: 0.2px solid #444;
}


html.dark-theme .navbar {
  background-color: rgba(26,26,26,0.7); /* Прозрачный темный navbar */
  backdrop-filter: blur(4px);           /* Блюр */
  border: none;
  box-shadow: none;
}

html.dark-theme .navbar .dropdown-menu {
  background-color: rgba(26,26,26,0.7); /* Меню прозрачное */
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: none;
}

/* Цвета блоков в тёмной теме */
html.dark-theme #service_description .panel-body,
html.dark-theme .category-wrapper {
  background-color: #2a2a2a; /* Тёмный фон */
  color: #eee;               /* Цвет текста */
}

html.dark-theme .navbar-btn {
  border-color: #888;
  color: #fff;
}

/* Поле описание услуги */
html.dark-theme .form-group.fields .panel-body.border-solid.border-rounded {
  border: 0.5px;
}

/* === Кнопка смены темы === */
html.dark-theme .navbar-theme-btn {
  color: #eee;
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 4px rgba(255,255,255,0.1);
}

/* Ховер в тёмной теме — лёгкая подсветка */
html.dark-theme .navbar-theme-btn:hover {
  background: rgba(255,255,255,0.12);
}