:root {
  --basePagePadding: 0 16px;
  --basePageMargin: 0 auto;
  --buttonsBorderRadius: 6px;
  --buttonsPadding: 10px;
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  min-width: 400px;
}

body {
  margin: 0;
  background: var(--fontColor);
  color: var(--textColor);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Общие отступы слева и справа */
.site-inner {
  max-width: var(--desktopSize);
  margin: var(--basePageMargin);
  padding: var(--basePagePadding);
}

.site-background {
  position: fixed;
  top: 0;
/*  max-width: var(--desktopSize); */
  width: 100%; /* Полная ширина */
  height: 100vh; /* Полная высота */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
/*  filter: blur(2px); /* Размытие только фона */
  opacity: 0.2; /* Полупрозрачность */
  z-index: -1; /* Фон уходит под основной контент */
}

.site-body {
  width: 100%;
  min-height: calc(100vh - var(--headerHeight) - var(--footerHeight) - 2px); /* - 2px */
  padding: 24px 0;
}

/* Шапка сайта */
.site-header {
  position: relative;
  width: 100%;
  height: var(--headerHeight);
  border-bottom: var(--debugBorderWidth) solid var(--debugBorderColor); /* Дэбаг див блока */
  overflow: visible;
}

/* Заливка подложки для шапки и футера*/
.site-header-fill,
.site-footer-fill {
  position: absolute;
  inset: 0; /* top:0 right:0 bottom:0 left:0 */
  opacity: 0.7; /* Полупрозрачность */
  background: var(--mainColor);
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.site-header-inner,
.site-footer-inner{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;     /* вертикальный центр */
  max-width: var(--desktopSize);
  margin: var(--basePageMargin);
  padding: var(--basePagePadding);
  z-index: 2 /* отрисовка для перекрытия подложки с прозрачностью */
}

/* Подчеркивание шапки градиентной линией */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 10%,
    var(--accentColor) 50%,
    rgba(255, 255, 255, 0.0) 90%,
    transparent 100%
  );
  z-index: 2 /* отрисовка для перекрытия подложки с прозрачностью */
}

/* Отрисовка логотипа */
/* Общие стили логотипов */
.site-desktop-logo,
.site-mobile-logo {
  margin-left: 5px;
  height: 100%;
  padding: 10px;
}

.site-desktop-logo img,
.site-mobile-logo img {
  height: 100%;
  object-fit: contain;
}

.site-logo-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* Курсор как у кнопки */
.site-logo-link:hover {
  cursor: pointer;
}

/* Чтобы img не ломался */
.site-logo-link img {
  pointer-events: none;
}

.site-desktop-logo { display: block;}
.site-mobile-logo { display: none; }

/* Отрисовка генерируемых ссылок */
/* Общие стили блоков */
.site-desktop-header-content,
.site-mobile-header-content {
  height: 100%;
  padding: 6px;
  margin-left: 20px;
  width: 100%;
  justify-content: center; /* горизонтально по центру */
  gap: 10px;
}

.site-desktop-header-content { display: inline-flex; }
.site-mobile-header-content { display: none; }

/* Кнопки модулей в шапке */
.site-module-button {
  padding: var(--buttonsPadding);
  cursor: pointer;
  color: var(--textColor);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.site-module-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--buttonsBorderRadius);
}

/* Общий контейнер блока языка */
.langSelect {
  display: inline-flex;
  height: 100%;
  padding: 6px;
  margin-right: 10px;
  justify-content: center; /* горизонтально по центру */
}

/* Общий стиль для ссылок и пунктов */
.langSelect-item,
.langSelect-dd-item,
.langSelect-current {
  font-weight: 700;                /* жирнее */
  color: var(--textColor);         /* белый текст */
  text-decoration: none;           /* убрать подчеркивание */
}

/* Убрать стандартные состояния ссылок */
.langSelect-item:visited,
.langSelect-item:hover,
.langSelect-item:active,
.langSelect-dd-item:visited,
.langSelect-dd-item:hover,
.langSelect-dd-item:active {
  color: var(--textColor);
  text-decoration: none;
}

/* Активный язык */
.langSelect-item.is-active,
.langSelect-dd-item.is-active {
  color: var(--accentColor);
}

/* Desktop ряд */
.langSelect-desktop {
  display: flex;
  gap: 10px;
  align-items: center;  /* выравнивание по центру высоты */
}

/* Чтобы кликабельная зона была комфортнее */
.langSelect-item {
  padding: var(--buttonsPadding);
  border-radius: var(--buttonsBorderRadius);
  line-height: 1;
}

/* Mobile dropdown */
.langSelect-mobile {
  display: none;
  position: relative; /* якорь для выпадашки */
}

/* Убираем маркер summary и делаем вид "обычного текста" */
.langSelect-current {
  cursor: pointer;
  list-style: none;
  line-height: 1;
  padding: 8px 14px;  /* удобнее тапать */
  border-radius: var(--buttonsBorderRadius);
  color: var(--accentColor);
  font-size: 1.3em; /* текс крупнее примерно в 1.3 раза */
}

/* Убираем стандартный маркер details */
.langSelect-current::-webkit-details-marker {
  display: none;
}

/* Выпадающий контейнер */
.langSelect-dd {
  position: absolute;
  top: calc(100% + 8px);           /* выпадает под текущим языком */
  padding: 6px 6px;
  border-radius: var(--buttonsBorderRadius);
  background: rgba(0, 0, 0, 0.80); /* фон 90% черного */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
  border: 1px solid color-mix(in srgb, var(--accentColor), transparent 80%);

}

/* Важно: чтобы текст не становился прозрачным из-за opacity контейнера */
.langSelect-dd-item {
  opacity: 1;
  padding: 8px 8px;     /* удобнее тап */
  border-radius: 8px;
  line-height: 1;       /* стилистика как десктоп, размер обычный */
  font-size: 1.1em;
}

/* Можно чуть подсветить при наведении на десктопе, но без смены цвета */
.langSelect-dd-item:hover,
.langSelect-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.site-footer {
/*  text-align: center;*/
  position: relative;
  width: 100%;
  height: var(--footerHeight);
  border-top: var(--debugBorderWidth) solid var(--debugBorderColor); /* Дэбаг див блока */
  overflow: visible;
}

.site-footer-mobile {
  display: none;
}

/* Подчеркивание футера градиентной линией */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 10%,
    var(--accentColor) 50%,
    rgba(255, 255, 255, 0.0) 90%,
    transparent 100%
  );
  z-index: 2 /* отрисовка для перекрытия подложки с прозрачностью */
}

.site-footer-desktop {
  display: flex;
  align-items: center;
  height: var(--footerHeight);
  width: 100%;
  padding: var(--basePagePadding);
}

.site-footer-title {
  padding-left: 50px;
  white-space: nowrap;
}

.site-footer-policy {
  display: flex;
  gap: 20px;
  margin-left: auto;
  margin-right: 40px;
  font-size: 10pt;
}

.site-footer-policy a,
.site-footer-policy a:visited {
  color: var(--textColor);
  text-decoration: none;
}

.core-policy-link,
.core-policy-link:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.core-policy-link:hover {
  color: var(--accentColor);
}

.core-policy-open {
  overflow: hidden;
}

.core-policy-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-policy-overlay[hidden] {
  display: none;
}

.core-policy-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.core-policy-modal {
  position: relative;
  width: min(calc(100% - 32px), var(--viewSize));
  max-height: calc(100vh - 48px);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.8);
  color: #111;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 24px 24px;
}

.core-policy-content {
  overflow: auto;
  min-height: 0;
  padding-right: 10px;
  line-height: 1.45;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.core-policy-close {
  align-self: flex-end;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin: -6px 0 8px 0;
}

.core-policy-close:hover,
.core-policy-close:focus-visible {
  color: var(--accentColor);
}

.core-policy-content p,
.core-policy-content li,
.core-policy-content h1,
.core-policy-content h2,
.core-policy-content h3,
.core-policy-content h4 {
  color: #111;
}

.site-footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 50px 7px 7px;
  height: 100%;
}

.site-footer-link-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--textColor);
  transition: color 0.5s ease;
}

.site-footer-link-image svg {
  max-height: 100%;
  width: auto;
  display: block;
}

.site-footer-link-image:hover {
  color: var(--accentColor);
}

/* Mobile правила */
@media (max-width: 768px) {

  /* Отрисовка логотипа */
  .site-desktop-logo { display: none; }
  .site-mobile-logo { display: block; }

  /* отрисовка генерируемых ссылок */
  .site-desktop-header-content { display: none; }
  .site-mobile-header-content { display: inline-flex; }

  .langSelect-desktop { display: none; }
  .langSelect-mobile {
    display: block;
    border-radius: var(--buttonsBorderRadius);
  }

  /* убираем отступы в шапке слева и справа в мобильной версии */
  .site-mobile-logo { margin-left: 0px; }
  .site-langSelect { margin-right: 0px; }

  .site-footer {
    height: auto;
    margin-top: 30px;
  }

  .site-footer-desktop {
    display: none;
  }

  .site-footer-mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 10px 20px 10px;
    width: 100%;
  }

  .site-footer-policy {
    margin: 0px;
    justify-content: center;
  }

  .site-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--footerHeight);
  }

  .site-footer-title {
    padding-left: 0px;
    font-size: 14pt;
  }

  .site-footer-links {
    padding-right: 0px;
  }

  .site-footer-link {
    padding: 1px;
  }

  .core-policy-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
  }

  .core-policy-modal {
    width: calc(100% - 16px);
    max-height: calc(100svh - 16px);
    padding: 14px 14px 16px 14px;
  }

  .core-policy-content {
    padding-right: 4px;
    font-size: 0.95rem;
  }
}




/*

/*
.btn-top {
  position: fixed;
  right: 50px;
  bottom: calc(var(--footerHeight) + 30px);
  width: 30px;
  height: 30px;
  border: 1px solid var(--accentСolor);
  background: var(--mainColor);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
}

.btn-top::before {
  content: "↑";
  font-size: 16px;
  line-height: 1;
}

@media (max-width: var(--mobileSize)) {
  .btn-top {
    right: 20px;
    bottom: calc(var(--footerHeight) + 20px);
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  .btn-top::before {
    font-size: 18px;
  }
}
*/