/* Base styles for Altair Menu */
.altair-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.altair-menu li {
  position: relative;
  margin: 0;
  padding: 0;
}

.altair-menu > li {
  display: inline-block;
}

.altair-menu > li > a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.altair-menu .parent > a .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.altair-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 200px;
  padding: 5px 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

/* Исправление для отображения всех пунктов подменю с непрозрачным фоном */
.altair-submenu li {
  background-color: inherit; /* Наследует цвет фона от родителя */
  width: 100%; /* Гарантирует, что элемент занимает всю ширину подменю */
}

.altair-submenu li a {
  display: block;
  padding: 8px 20px;
  clear: both;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.altair-submenu .parent > a .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.altair-submenu .altair-submenu {
  top: 0;
  left: 100%;
  margin-top: -5px;
}

/* Добавляем стили для пунктов меню без ссылок (сепараторы и заголовки) */
.altair-menu .separator,
.altair-menu .nav-header {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  color: inherit; /* Наследует цвет от родителя */
}

/* Стили для hover-эффекта на пунктах без ссылок */
.altair-menu > li:hover .separator,
.altair-menu > li:hover .nav-header {
  background-color: inherit; /* Наследует цвет фона при наведении от родителя */
  color: inherit; /* Наследует цвет текста при наведении от родителя */
}

/* Стили для подменю без ссылок */
.altair-submenu li .separator,
.altair-submenu li .nav-header {
  display: block;
  padding: 8px 20px;
  clear: both;
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* Стили для hover-эффекта на пунктах подменю без ссылок */
.altair-submenu li:hover .separator,
.altair-submenu li:hover .nav-header {
  background-color: inherit; /* Наследует цвет фона при наведении от родителя */
  color: inherit; /* Наследует цвет текста при наведении от родителя */
}

/* Выравнивание модуля по горизонтали */
.altair-menu-container {
  display: flex;
  width: 100%;
}

.altair-menu-container.align-left {
  justify-content: flex-start;
}

.altair-menu-container.align-center {
  justify-content: center;
}

.altair-menu-container.align-right {
  justify-content: flex-end;
}

.altair-menu-container.align-justify .altair-menu {
  width: 100%;
}

.altair-menu-container.align-justify .altair-menu > li {
  flex: 1;
  text-align: center;
}

/* Active state */
.altair-menu li.active > a {
  font-weight: bold;
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

.slide-down {
  animation: slideDown 0.3s ease-in-out;
}

.slide-left {
  animation: slideLeft 0.3s ease-in-out;
}

.slide-right {
  animation: slideRight 0.3s ease-in-out;
}

.zoom-in {
  animation: zoomIn 0.3s ease;
}

/* Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Адаптивное меню */
.altair-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  color: inherit;
}

.altair-menu-toggle span {
  display: inline-block;
}

.altair-menu-toggle .menu-text {
  display: none; /* Скрываем текст кнопки */
}

/* Медиа-запросы для адаптивности */
@media (max-width: 768px) {
  .altair-menu-toggle {
    display: block;
    width: 100%;
    text-align: left; /* Выравнивание кнопки-гамбургера по левому краю */
    cursor: pointer;
  }

  .altair-menu {
    display: none;
    width: 100%;
  }

  /* Когда меню активно, отображаем его */
  .altair-menu.active {
    display: block !important; /* !important для перезаписи любых других стилей */
  }

  .altair-menu > li {
    display: block;
    width: 100%;
  }

  .altair-submenu {
    position: static;
    display: none;
    width: 100%;
    box-shadow: none;
    padding-left: 20px;
    border-left: 3px solid; /* добавляем левую границу для вложенности */
    border-radius: 0 !important; /* сбрасываем border-radius для мобильной версии */
    margin-left: 10px;
  }

  .altair-menu .parent.show-submenu > .altair-submenu {
    display: block;
  }

  .altair-menu .parent > a .caret {
    float: right;
    margin-top: 8px;
  }

  .altair-submenu .parent > a .caret {
    transform: rotate(90deg);
  }

  /* Выравнивание контейнера в мобильной версии */
  .altair-menu-container.align-left,
  .altair-menu-container.align-center,
  .altair-menu-container.align-right,
  .altair-menu-container.align-justify {
    justify-content: flex-start;
  }

  .altair-menu-container.align-justify .altair-menu > li {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* Стили для различных тем меню */
/* Default style */
.altair-menu-default {
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #e7e7e7;
}

.altair-menu-default > li > a,
.altair-menu-default > li > .separator,
.altair-menu-default > li > .nav-header {
  color: #333333;
}

.altair-menu-default > li:hover > a,
.altair-menu-default > li:hover > .separator,
.altair-menu-default > li:hover > .nav-header {
  background-color: #f8f8f8;
  color: #000000;
}

.altair-menu-default .altair-submenu {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.altair-menu-default .altair-submenu li a,
.altair-menu-default .altair-submenu li .separator,
.altair-menu-default .altair-submenu li .nav-header {
  color: #333333;
}

.altair-menu-default .altair-submenu li:hover > a,
.altair-menu-default .altair-submenu li:hover > .separator,
.altair-menu-default .altair-submenu li:hover > .nav-header {
  background-color: #f8f8f8;
  color: #000000;
}

/* Dark style */
.altair-menu-dark {
  background-color: #222222;
  border-radius: 4px;
}

.altair-menu-dark > li > a,
.altair-menu-dark > li > .separator,
.altair-menu-dark > li > .nav-header {
  color: #9d9d9d;
}

.altair-menu-dark > li:hover > a,
.altair-menu-dark > li:hover > .separator,
.altair-menu-dark > li:hover > .nav-header {
  background-color: #080808;
  color: #ffffff;
}

.altair-menu-dark .altair-submenu {
  background-color: #222222;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.altair-menu-dark .altair-submenu li a,
.altair-menu-dark .altair-submenu li .separator,
.altair-menu-dark .altair-submenu li .nav-header {
  color: #9d9d9d;
}

.altair-menu-dark .altair-submenu li:hover > a,
.altair-menu-dark .altair-submenu li:hover > .separator,
.altair-menu-dark .altair-submenu li:hover > .nav-header {
  background-color: #080808;
  color: #ffffff;
}

/* Primary style */
.altair-menu-primary {
  background-color: #337ab7;
  border-radius: 4px;
}

.altair-menu-primary > li > a,
.altair-menu-primary > li > .separator,
.altair-menu-primary > li > .nav-header {
  color: #ffffff;
}

.altair-menu-primary > li:hover > a,
.altair-menu-primary > li:hover > .separator,
.altair-menu-primary > li:hover > .nav-header {
  background-color: #286090;
  color: #ffffff;
}

.altair-menu-primary .altair-submenu {
  background-color: #337ab7;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.altair-menu-primary .altair-submenu li a,
.altair-menu-primary .altair-submenu li .separator,
.altair-menu-primary .altair-submenu li .nav-header {
  color: #ffffff;
}

.altair-menu-primary .altair-submenu li:hover > a,
.altair-menu-primary .altair-submenu li:hover > .separator,
.altair-menu-primary .altair-submenu li:hover > .nav-header {
  background-color: #286090;
  color: #ffffff;
}

/* Success style */
.altair-menu-success {
  background-color: #5cb85c;
  border-radius: 4px;
}

.altair-menu-success > li > a,
.altair-menu-success > li > .separator,
.altair-menu-success > li > .nav-header {
  color: #ffffff;
}

.altair-menu-success > li:hover > a,
.altair-menu-success > li:hover > .separator,
.altair-menu-success > li:hover > .nav-header {
  background-color: #449d44;
  color: #ffffff;
}

.altair-menu-success .altair-submenu {
  background-color: #5cb85c;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.altair-menu-success .altair-submenu li a,
.altair-menu-success .altair-submenu li .separator,
.altair-menu-success .altair-submenu li .nav-header {
  color: #ffffff;
}

.altair-menu-success .altair-submenu li:hover > a,
.altair-menu-success .altair-submenu li:hover > .separator,
.altair-menu-success .altair-submenu li:hover > .nav-header {
  background-color: #449d44;
  color: #ffffff;
}

/* Info style */
.altair-menu-info {
  background-color: #5bc0de;
  border-radius: 4px;
}

.altair-menu-info > li > a,
.altair-menu-info > li > .separator,
.altair-menu-info > li > .nav-header {
  color: #ffffff;
}

.altair-menu-info > li:hover > a,
.altair-menu-info > li:hover > .separator,
.altair-menu-info > li:hover > .nav-header {
  background-color: #31b0d5;
  color: #ffffff;
}

.altair-menu-info .altair-submenu {
  background-color: #5bc0de;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.altair-menu-info .altair-submenu li a,
.altair-menu-info .altair-submenu li .separator,
.altair-menu-info .altair-submenu li .nav-header {
  color: #ffffff;
}

.altair-menu-info .altair-submenu li:hover > a,
.altair-menu-info .altair-submenu li:hover > .separator,
.altair-menu-info .altair-submenu li:hover > .nav-header {
  background-color: #31b0d5;
  color: #ffffff;
}

/* Warning style */
.altair-menu-warning {
  background-color: #f0ad4e;
  border-radius: 4px;
}

.altair-menu-warning > li > a,
.altair-menu-warning > li > .separator,
.altair-menu-warning > li > .nav-header {
  color: #ffffff;
}

.altair-menu-warning > li:hover > a,
.altair-menu-warning > li:hover > .separator,
.altair-menu-warning > li:hover > .nav-header {
  background-color: #ec971f;
  color: #ffffff;
}

.altair-menu-warning .altair-submenu {
  background-color: #f0ad4e;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.altair-menu-warning .altair-submenu li a,
.altair-menu-warning .altair-submenu li .separator,
.altair-menu-warning .altair-submenu li .nav-header {
  color: #ffffff;
}

.altair-menu-warning .altair-submenu li:hover > a,
.altair-menu-warning .altair-submenu li:hover > .separator,
.altair-menu-warning .altair-submenu li:hover > .nav-header {
  background-color: #ec971f;
  color: #ffffff;
}

/* Danger style */
.altair-menu-danger {
  background-color: #d9534f;
  border-radius: 4px;
}

.altair-menu-danger > li > a,
.altair-menu-danger > li > .separator,
.altair-menu-danger > li > .nav-header {
  color: #ffffff;
}

.altair-menu-danger > li:hover > a,
.altair-menu-danger > li:hover > .separator,
.altair-menu-danger > li:hover > .nav-header {
  background-color: #c9302c;
  color: #ffffff;
}

.altair-menu-danger .altair-submenu {
  background-color: #d9534f;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.altair-menu-danger .altair-submenu li a,
.altair-menu-danger .altair-submenu li .separator,
.altair-menu-danger .altair-submenu li .nav-header {
  color: #ffffff;
}

.altair-menu-danger .altair-submenu li:hover > a,
.altair-menu-danger .altair-submenu li:hover > .separator,
.altair-menu-danger .altair-submenu li:hover > .nav-header {
  background-color: #c9302c;
  color: #ffffff;
}

/* Transparent style */
.altair-menu-transparent {
  background-color: transparent;
  border-radius: 0;
}

.altair-menu-transparent > li > a,
.altair-menu-transparent > li > .separator,
.altair-menu-transparent > li > .nav-header {
  color: #333333;
}

.altair-menu-transparent > li:hover > a,
.altair-menu-transparent > li:hover > .separator,
.altair-menu-transparent > li:hover > .nav-header {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000000;
}

.altair-menu-transparent .altair-submenu {
  background-color: #ffffff; /* Непрозрачный белый фон */
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.altair-menu-transparent .altair-submenu li a,
.altair-menu-transparent .altair-submenu li .separator,
.altair-menu-transparent .altair-submenu li .nav-header {
  color: #333333;
}

.altair-menu-transparent .altair-submenu li:hover > a,
.altair-menu-transparent .altair-submenu li:hover > .separator,
.altair-menu-transparent .altair-submenu li:hover > .nav-header {
  background-color: rgba(0, 0, 0, 0.1);
  color: #000000;
}