/* =========================================================
   OZEON — MAP PAGE
   ========================================================= */


/* =========================================================
   ПАНЕЛЬ HEADER
   ========================================================= */

.map-header-panel {
  width: 100%;                                      /* Ширина панели */
  max-width: 1440px;                                /* Максимальная ширина */
  min-height: 60px;                                 /* Минимальная высота */
  height: 60px;                                     /* Высота панели */

  margin-top: 10px;                                 /* Отступ сверху */
  margin-bottom: 0px;                               /* Отступ снизу */
  margin-left: auto;                                /* Центрирование */
  margin-right: auto;                               /* Центрирование */

  position: relative;                               /* Основа панели */
  overflow: hidden;                                 /* Скрываем выходящие элементы */

  background: rgba(255, 255, 255, 0.05);            /* Фон панели */

  background-image: none;                           /* Картинка панели */
  background-size: cover;                           /* Размер картинки */
  background-position: center;                      /* Положение картинки */
  background-repeat: no-repeat;                     /* Без повторения */

  border: 1px solid rgba(255, 255, 255, 0.10);      /* Рамка */
  border-radius: 10px;                              /* Скругление */

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);       /* Тень */

  backdrop-filter: blur(5px);                       /* Размытие */
  -webkit-backdrop-filter: blur(5px);               /* Размытие WebKit */

  padding: 0;                                       /* Внутренний отступ */

  box-sizing: border-box;                           /* Учитываем рамку и padding */
}


/* =========================================================
   ЗАТЕМНЕНИЕ HEADER
   ========================================================= */

.map-header-panel::before {
  content: '';                                      /* Создаём слой */

  position: absolute;                               /* Положение слоя */
  inset: 0;                                         /* На всю панель */

  background: rgba(0, 0, 0, 0.15);                  /* Затемнение */

  pointer-events: none;                             /* Не мешает взаимодействию */

  z-index: 1;                                       /* Слой затемнения */
}


/* =========================================================
   HEADER ВНУТРИ ПАНЕЛИ
   ========================================================= */

.map-header-panel .site-header {
  position: absolute;                               /* Header внутри панели */

  left: 0;                                          /* Положение слева */
  top: 0;                                           /* Положение сверху */

  width: 100%;                                      /* Ширина Header */
  height: 100%;                                     /* Высота Header */

  transform: none;                                  /* Без дополнительного центрирования */

  padding-left: 22px;                               /* Отступ слева */
  padding-right: 22px;                              /* Отступ справа */

  display: flex;                                    /* Элементы в ряд */
  align-items: center;                              /* Вертикальное выравнивание */

  box-sizing: border-box;                           /* Учитываем размеры */

  z-index: 2;                                       /* Поверх затемнения */
}


/* =========================================================
   ПАНЕЛЬ DYNMAP
   ========================================================= */

.map-panel {
  width: 100%;                                      /* Ширина панели */
  max-width: 1440px;                                /* Максимальная ширина */
  min-height: 1000px;                               /* Минимальная высота */
  height: 1000px;                                   /* Высота панели */

  margin-top: 20px;                                 /* Расстояние от Header */
  margin-bottom: 20px;                              /* Отступ снизу */
  margin-left: auto;                                /* Центрирование */
  margin-right: auto;                               /* Центрирование */

  position: relative;                               /* Основа панели */
  overflow: hidden;                                 /* Скрываем выходящие элементы */

  background: rgba(255, 255, 255, 0.05);            /* Фон панели */

  background-image: none;                           /* Картинка панели */
  background-size: cover;                           /* Размер картинки */
  background-position: center;                      /* Положение картинки */
  background-repeat: no-repeat;                     /* Без повторения */

  border: 1px solid rgba(255, 255, 255, 0.10);      /* Рамка */
  border-radius: 10px;                              /* Скругление */

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);       /* Тень */

  backdrop-filter: blur(5px);                       /* Размытие */
  -webkit-backdrop-filter: blur(5px);               /* Размытие WebKit */

  padding: 10px;                                    /* Внутренний отступ карты */

  box-sizing: border-box;                           /* Учитываем рамку и padding */

  display: flex;                                    /* Растягиваем содержимое */
}


/* =========================================================
   ЗАТЕМНЕНИЕ DYNMAP
   ========================================================= */

.map-panel::before {
  content: '';                                      /* Создаём слой */

  position: absolute;                               /* Положение слоя */
  inset: 0;                                         /* На всю панель */

  background: rgba(0, 0, 0, 0.15);                  /* Затемнение */

  pointer-events: none;                             /* Не мешает взаимодействию */

  z-index: 1;                                       /* Слой затемнения */
}


/* =========================================================
   DYNMAP
   ========================================================= */

.map-frame {
  width: 100%;                                      /* Ширина по внутренней области */
  height: 100%;                                     /* Высота по внутренней области */

  margin: 0;                                        /* Внешний отступ */
  padding: 0;                                       /* Внутренний отступ */

  border: none;                                     /* Без рамки */

  box-sizing: border-box;                           /* Учитываем размеры */

  position: relative;                               /* Положение карты */

  z-index: 2;                                       /* Поверх затемнения */

  flex: 1;                                          /* Заполняет всю внутреннюю область */
}