/* public/category-menu.css */

#category-menu { 
  min-height: 20px;
}

.category-menu-1 {
position: relative;
margin: auto;
}
.category-menu {
color: white;
display: flex;
align-items: center;
justify-content: center;

/* вместо top:40px — реальный отступ, который резервирует место */
margin: 60px auto 20px;

flex-wrap: wrap;
max-width: 1400px;
}
.category-menu a, .category-menu__icon {
margin: 0;
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 6px;
transition: 0.2s;
}
.category-menu a img, .category-menu__icon img {
display: block;
width: 29px;
height: 23px;
object-fit: contain;
}
.category-menu a:hover, .category-menu__icon:hover {
background: #161a25;
background: #ffffff1f;
transition: 0s;
opacity: 1;
}
.category-menu-modals {
text-decoration: none;
}
.category-menu-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: #edf2fae0;
z-index: 1000;
padding: 5px;
backdrop-filter: blur(4px);
}
.category-menu-modal:target {
display: flex;
}
.category-menu-modal__overlay {
position: absolute;
inset: 0;
display: block;
}
.category-menu-modal__dialog {
position: relative;
background: #c5ccd8;
/* background: #dbe0eb; */
border-radius: 20px;
overflow: hidden;
padding: 15px;
width: 1070px;
}
.category-menu-modal__header {
padding: 0 10px;
display: flex;
justify-content: flex-start;
position: relative;
}
.category-menu-modal__title {
font-size: 24px;
font-weight: 600;
margin: 0;
}
.category-menu-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 0px 10px 0px 9px;
text-decoration: none;
color: #fff;
font-size: 30px;
line-height: 1;
background: #bfc8d5;
position: absolute;
right: -15px;
top: -15px;
}
.category-menu-modal__close:hover {
background: #000;
}
.category-menu-modal__main-link {
margin-bottom: 12px;
font-size: 14px;
padding: 0 10px;
}
.category-menu-modal__main-link a {
color: #000;
}
.category-menu-modal__main-link a:hover {
text-decoration: underline;
}
.category-menu-modal__content {
display: flex;
flex-direction: column;
max-height: 75vh;
scrollbar-color: #4b4b4b #3c424d00;
scrollbar-gutter: stable both-edges;
scrollbar-width: thin;
overflow-y: auto;
}
.category-menu-modal__subcategory {
padding: 0;
}
.category-menu-modal__subcategory:first-of-type {
border-top: none;
}
.category-menu-modal__subcategory-title {
font-size: 22px;
text-align: center;
font-weight: 400;
color: #0ae6ff !important;
line-height: 1.2;
margin: 30px 0;
}
.category-menu-modal__subcategory-title a {
color: #000000;
text-decoration: none;
}
.category-menu-modal__subcategory-title a:hover {
color: #000;
}
.category-menu-modal__subitems-row {
gap: 9px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(97px, 1fr));
}
.category-menu-modal__subitem {
text-decoration: none;
color: #000;
position: relative;
background: #fff;
border-radius: 7px;
overflow: hidden;
border: none;
padding: 0;
cursor: pointer;
display: flex;
flex-direction: column;
height: 96px;
}
.category-menu-modal__subitem-img {
border-radius: 7px 7px 0 0;
background: #f3f4f60d;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.category-menu-modal__subitem-img img {
transition: 0.2s ease;
}
.category-menu-modal__subitem-img img:hover {
scale: 140%;
}
.category-menu-modal__subitem-title {
text-align: center;
line-height: 1.2;
font-size: 13px;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
height: 16px;
overflow: hidden;
display: block;
padding: 3px;
width: -webkit-fill-available;
bottom: 0;
position: absolute;
background: #fff;
color: #000000;
z-index: 1;
transition: 0.1s ease;
}
.category-menu-modal__subitem-title:hover {
height: 80%;
transition: 0.1s ease;
}
.category-menu-modal__subitem:hover .category-menu-modal__subitem-img {
background: #e5e7eb;
}


.category-menu__view-toggle {
border: 1px solid;
border-radius: 6px;
color: #000;
background: #65656500;
cursor: pointer;
font-size: 13px;
padding: 6px 10px;
}











/* модалка в профиле */
.globalCatMainList {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(147px, 1fr));
gap: 2px;
height: 154px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-color: #696969 #3c424d00;
scrollbar-gutter: stable both-edges;
scrollbar-width: thin;
margin: 0 0 20px 0px;
}
.globalCatMainList-but {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
padding: 6px 13px;
border: 0px solid #ffffff24;
border-radius: 6px;
background: #00000042;
color: #fff;
cursor: pointer;
}
.globalCatMainList-but > :first-child {
flex: 0 0 150px;
}
.globalCatMainList-but:hover {
background: #00000080;
}
.globalCatMainList-but span {
font-size: 12px;
color: #ffffffb5;
text-align: left;
}
.globalCatMainList-but img {
max-width: 30px;
max-height: 30px;
}
@media (max-width: 768px) {
.category-menu-modal {
padding: 0;
}
}