@font-face 
{
  font-family: "JollyLodgerCyrillic"; 
  src: url("../fonts/JollyLodgerCyrillic.otf") format("truetype"); /*адрес шрифта и тип */
  font-style: normal; 
  font-weight: normal; 
} 

@font-face 
{
  font-family: "Fredoka One (RUS BY ME)"; 
  src: url("../fonts/FredokaOne-Regular.otf") format("truetype"); /*адрес шрифта и тип */
  font-style: normal; 
  font-weight: normal; 
} 

@font-face 
{
  font-family: "SummerFontBold"; 
  src: url("../fonts/SummerFontBold.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}

@font-face 
{
  font-family: "ZubiloShadow"; 
  src: url("../fonts/ZubiloShadow.otf") format("truetype"); 
  font-style: normal; 
  font-weight: normal; 
}
 
/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.custom-breadcrumbs 
{
position: fixed;
top: 0;

display: flex;
align-items: center;
gap: 0px;
padding: 0.8rem 1.2rem;

background: transparent;
z-index: 900;

overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}

.custom-breadcrumbs::-webkit-scrollbar 
{
height: 6px;
}

.custom-breadcrumbs::-webkit-scrollbar-thumb 
{
background: #333;
border-radius: 3px;
}

.crumb 
{
display: inline-block;
flex: 1 1 auto;
min-width: 0;
padding: 0.55rem 0.85rem;
border-radius: 1rem;
border: 0.5rem solid #222;
background: #fff;
color: #000;
text-decoration: none;
transition: 0.2s ease;
font-weight: 800;
font-family: "EB Garamond", serif;
}

.crumb-dot
{
display: inline-block;
border: 0.5rem solid #222;
background: #fff;
color: #000;
text-decoration: none;
transition: 0.2s ease;
padding: 0.35rem 0.55rem;
border-radius: 1rem;
font-family: "EB Garamond", serif;
}

.crumb:hover 
{
background: #444;
}

.crumb.current 
{
border: 0.5rem solid #e63946;
background: #fff;
cursor: default;
color: #000;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.pager-menu
{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: left;
background: transparent;
z-index: 900;
overflow: visible;
margin-top: 1rem;
}

.checker-page .pager-menu 
{
    width: max-content !important;  /* 🔥 обязательно */
/*    left: 50% !important;
    transform: translateX(-50%) !important;*/
}

.pager-menu a 
{
display: flex;
align-items: center;
justify-content: center;
width:clamp(80px, 10vw, 112px);
height:clamp(80px, 10vw, 112px);
font-size: 0; /* скрыть текст */
background-size: contain;
}

.pager-menu ul 
{
display: flex;
list-style: none;
}

.pager-menu li::marker 
{
content: none !important;
}

.nav-item
{
margin-right: clamp(8px, 1.8vw, 40px);
}

.pager-menu img 
{
transition: transform 0.3s ease;
}

.pager-menu a:hover 
{
transform: scale(1.6);
}

.pager-menu li.current, .pager-menu a[aria-current="page"] 
{
display: none;
}

.more-button {
    position: relative;
}

.more-dropdown {
    position: absolute;
    top: 100%;
    left: 0;              /* 🔥 ключевая строка */
    transform: none;      /* 🔥 убрать */

    display: none !important;
    flex-direction: column !important;

    background: transparent !important;
    padding: 0.5rem 0;

    z-index: 1000;
}

.more-button.open .more-dropdown {
    display: flex !important;
}

.more-dropdown li {
    display: block !important;
    width: max-content;   /* 🔥 чтобы ширина по содержимому */
}

.more-dropdown a {
    display: flex;
    justify-content: flex-start;  /* 🔥 не по центру */
    padding: 0;
}

.pager-menu a.icon-home 
{
display: block;
background: url('/media/templates/site/ratman/img/menu/toIndex.png') no-repeat center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-indent: -9999px; /* скрыть текст */
}

.pager-menu a.icon-reader 
{
display: block;
background: url('/media/templates/site/ratman/img/menu/toReader.png') no-repeat center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-indent: -9999px; /* скрыть текст */
}

.pager-menu a.icon-checker 
{
display: block;
background: url('/media/templates/site/ratman/img/menu/toGame.png') no-repeat center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-indent: -9999px; /* скрыть текст */
}

.pager-menu a.icon-ifrank 
{
display: block;
background: url('/media/templates/site/ratman/img/menu/toFrank.png') no-repeat center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-indent: -9999px; /* скрыть текст */
}

.pager-menu a.icon-science
{
display: block;
background: url('/media/templates/site/ratman/img/menu/toScience.png') no-repeat center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-indent: -9999px; /* скрыть текст */
}

.pager-menu a.icon-recipes 
{
display: block;
background: url('/media/templates/site/ratman/img/menu/toRecipes.png') no-repeat center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-indent: -9999px; /* скрыть текст */
}

.pager-menu a.icon-profile 
{
display: block;
background: url('/media/templates/site/ratman/img/menu/toProfile.png') no-repeat center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-indent: -9999px; /* скрыть текст */
}

.pager-menu a.icon-more 
{
display: block;
background: url('/media/templates/site/ratman/img/menu/toMenu.png') no-repeat center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
text-indent: -9999px; /* скрыть текст */
}

.more-dropdown {
    position: absolute;
    top: 100%;
    right: 0;

    display: none;
    flex-direction: column;

    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    padding: 10px;
}

.more-button.open .more-dropdown {
    display: flex;
}

/* чтобы не обрезалось */
.pager-menu {
    overflow: visible;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.container 
{
display: flex;
height: 100dvh;
}

.sidebar 
{
  position: fixed;   /* фиксируем слева, всегда на экране */
  top: 0;            /* от верхнего края */
  left: 0;           /* от левого края */
  width: 250px;      /* ширина меню */
  height: 100vh;     /* высота на весь экран */
  background-color: #2c3e50;
  color: white;
  overflow-y: auto;
  padding: 10px 0;
  z-index: 1000;     /* чтобы меню было поверх контента */
}

  .menu-item {
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
  }

  .menu-item:hover {
    background-color: #34495e;
  }

  .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: #34495e;
  }

  .submenu-item {
    padding: 10px 40px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.2s;
  }

  .submenu-item:hover {
    background-color: #3b566e;
  }

  .menu-item.active + .submenu {
    max-height: 500px;
  }

  .content {
  margin-left: 250px;  /* равна ширине меню */
  padding: 20px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

html
{
box-sizing:border-box;      /*чтобы отступы и рамки не искажали размеры элемента*/
}

*,
*::after,
*::before
{
box-sizing:inherit;       /*унаследовать алгоритм расчета размеров (box-sizing) от своего родителя, а не использовать значение по умолчанию (content-box)*/
}

.body
{

}

.hidden 
{
display: none;
}

header 
{
padding-top: 10px;	/*сдвиг сверху всего содержимого блока, для 1го блока сверху страницы*/
}

.container
{
max-width: 1024px;	/*шире растягиваться не будет*/
margin: 0 auto; 	/*позиционирование по центру*/
padding: 0 10px; 	/*отступы по краям, чтобы не прижималось к границам устройств*/
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.border-shadow-top
{
max-width: 1024px;	/*!!!!!шире растягиваться не будет*/
margin: 0 auto; 	/*позиционирование по центру*/
border-radius: 50px;
box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
height:105%;
}

.border-shadow-bottom
{
max-width: 1024px;	/*шире растягиваться не будет*/
margin: 0 auto; 	/*позиционирование по центру*/
box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
border-radius: 40px;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////*/

.close-circle                   /*круг с крестом Закрыть для меню и боковой панели слева*/
{
border-radius: 50%;             /* Делает div круглым */
position: relative;             /* Для позиционирования креста внутри */
cursor: pointer;
overflow: hidden;               /* Скроет части, выходящие за предель круга, если нужно */

width: 6rem;
height: 6rem;
border: 0.5rem solid #333;    /* Цвет и толщина круга */
}

.close-circle::before,
.close-circle::after 
{
content: '';
position: absolute;
background-color: #666; /* Цвет крестика */
  
width: 1rem;                 /* Размеры полосок креста */
height: 80%;                /* Или больше, чем половина круга */
top: 50%;
left: 50%;
transform-origin: center;   /* Центрирование вращения */
}

.close-circle::before 
{
transform: translate(-50%, -50%) rotate(45deg); /* Поворот первой полоски */
}

.close-circle::after 
{
transform: translate(-50%, -50%) rotate(-45deg); /* Поворот второй полоски */
}

.close-circle:hover         /*эффект при наведении*/
{
background-color: #f0f0f0;
}


/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////*/
@media (orientation: portrait)
{

.crumb, .crumb-dot 
{
font-size:4vh;
}

}

@media (orientation: landscape)
{

.crumb, .crumb-dot 
{
font-size:2vw;
}

}