/* header_sidebar.css */

body.menu-type-sidebar-top {
    overflow-x: hidden !important;
}

:root {
    --sidebar-width: 187px;
    --sidebar-height: 114px;
    --sidebar-height-fix: var(--sidebar-height);
    --sidebar-footer: 90px;
}

/* sm (≥576px) */
@media (min-width: 576px) {
    :root {
        --sidebar-width: 187px;
    }
}

/* md (≥768px) */
@media (min-width: 768px) {
    :root {
        --sidebar-width: 231px;
    }
}

/* lg (≥992px) */
@media (min-width: 992px) {
    :root {
        --sidebar-width: 325px;
    }
}

/* xl (≥1200px) */
@media (min-width: 1200px) {
    :root {
        --sidebar-width: 375px;
    }
}


.sidebar .btn-close  {opacity: 1;  background: none;}
.sidebar .btn-close .bi-x-lg {  color: var(--navbar-color);}

.tree-classic .tree-item-1 .nav-item {font-size:90%;}

.sidebar-header {
    padding-right: 0px !important;
}

.menu-type-sidebar-top .sidebar {
    top: calc(var(--sidebar-height) + 50px) !important;
    margin-top: 165px;
}


.menu-type-sidebar-top .sidebar-nav {
    height: unset !important;
    max-height: calc(100vh - var(--sidebar-height) - 100px) !important;
    overflow-y: auto !important;
}

.logo img {
    max-height: 79px !important;
    width: auto;
}

/* Zabota header buttons with text */
@media (min-width: 768px) {
    .header-btn-items .bookmarks a,
    .header-btn-items a[data-site-tour="alerts"],
    .header-btn-items button[data-site-tour="profile"] {
        background: transparent !important;
        border: none !important;
        color: var(--light) !important;
        text-transform: uppercase;
        font-weight: 500;
        font-size: 16px;
        display: flex !important;
        align-items: center;
        gap: 8px;
    }

    .header-btn-items .bookmarks a .bi-star::before {
        content: "\f417";
    }

    .header-btn-items button[data-site-tour="profile"].dropdown-toggle::after {
        display: none;
    }
}

/* Текст кнопок только на lg и выше */
@media (min-width: 992px) {
    .header-btn-items .bookmarks a::after {
        content: "Избранное";
    }

    .header-btn-items a[data-site-tour="alerts"]::after {
        content: "Уведомления";
    }
}

.zabota-phone {
    font-weight: 500;
    font-size: 16px;
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo {
    flex-shrink: 1;
    min-width: 100px;
}

.header-btn-comments {
    margin-left: auto !important;
}

.zabota-phone .bi-telegram {
    font-size: 24px;
}

/* Zabota search */
#inputSearch {
    width: 308px;
}

/* xl (≥1200px) - полная ширина поиска */
@media (min-width: 1200px) {
    #inputSearch {
        width: 358px;
    }
}

/* применяем стили btn-lg к поисковой форме только на lg и выше */
@media (min-width: 992px) {
    #inputSearch .input-group > .btn,
    #inputSearch .input-group > .form-control {
        --bs-btn-padding-y: 0.5rem;
        --bs-btn-padding-x: 1rem;
        --bs-btn-border-radius: 0.5rem;
        padding: 0.5rem 1rem;
    }
    #inputSearch .input-group > .form-control {
        --bs-btn-font-size: 1.25rem;
        font-size: 1.25rem;
        height: 100%;
    }
    #inputSearch .input-group {
        height: 60px;
    }
}

/* временно закомментировано - меняет высоту поисковой формы
#inputSearch .input-group {
    height: 60px;
}
*/

#inputSearch .form-control {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    /* height: 100%; */
}

#inputSearch .form-control:hover,
#inputSearch .form-control:focus,
#inputSearch .form-control:active {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#inputSearch .btn-secondary {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--dark) !important;
    font-size: 0;
    /* height: 100%; */
}

#inputSearch .btn-secondary:hover,
#inputSearch .btn-secondary:focus,
#inputSearch .btn-secondary:active {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--dark) !important;
    box-shadow: none !important;
}

#inputSearch .btn-secondary::before {
    font-family: "bootstrap-icons";
    content: "\f52a";
    font-size: 16px;
}

/* Zabota sidebar menu */
.sidebar .tree-item-0 > .tree-title > .tree-item-body > div > .nav-item {
    background: var(--primary) !important;
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 20px;
    min-height: 60px;
    display: flex;
    align-items: center;
    max-height: 60px;
}

.sidebar .tree-item-0 > .tree-title > .tree-item-body > div > .nav-item a,
.sidebar .tree-item-0 > .tree-title > .tree-item-body > div > .nav-item > div {
    color: var(--light) !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
}

.sidebar .tree-item-0 > .tree-title > .tree-item-body > div > .nav-item .bi-dot {
    display: none;
}

/* исключаем категории с заголовками (with text-muted) */
.sidebar .tree-item-0 > .tree-title > .tree-item-body > div > .nav-item:has(.text-muted) {
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
    max-height: none !important;
}

.sidebar .tree-item-0 > .tree-title > .tree-item-body > div > .nav-item .text-muted {
    color: inherit !important;
}

/* Zabota sidebar nested items */
.sidebar .tree-modern .tree-item-1 .nav-item,
.sidebar .tree-modern .tree-item-2 .nav-item {
    background: var(--navbar-nested) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    padding: 20px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    display: flex !important;
    align-items: center !important;
}

.sidebar .tree-modern .tree-item-1 .nav-item a,
.sidebar .tree-modern .tree-item-2 .nav-item a {
    color: var(--dark) !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
}

.sidebar .tree-modern .tree-item-1 .nav-item .bi-dot,
.sidebar .tree-modern .tree-item-2 .nav-item .bi-dot,
.sidebar .tree-modern .tree-item-1 .nav-item .bi-plus,
.sidebar .tree-modern .tree-item-2 .nav-item .bi-plus {
    display: none !important;
}

/* Zabota sidebar arrows for expandable items */
.sidebar .tree-modern .nav-item.tree-action > a {
    display: flex !important;
    align-items: center !important;
}

.sidebar .tree-modern .nav-item.tree-action > a::after {
    font-family: "bootstrap-icons" !important;
    content: "\F235" !important;
    margin-left: auto !important;
    font-size: 12px !important;
    display: inline-block !important;
    position: static !important;
    height: auto !important;
    width: auto !important;
    border: none !important;
    right: auto !important;
    top: auto !important;
    transform: rotate(0deg) !important;
    transition: transform 0.2s ease !important;
}

.sidebar .tree-modern .nav-item.tree-action.show > a::after {
    transform: rotate(180deg) !important;
}

/* Zabota sidebar active page highlight */
.sidebar .tree-item-0 > .tree-title > .tree-item-body > div > .nav-item.active {
    background: var(--primary-hover) !important;
}

.sidebar .tree-modern .tree-item-1 .nav-item.active a,
.sidebar .tree-modern .tree-item-2 .nav-item.active a {
    font-weight: bold !important;
}

.sidebar .tree-nav .tree-frame {
    margin-left: 0 !important;
}

.sidebar .tree-nav .tree-frame-1,
.sidebar .tree-nav .tree-frame-2 {
    margin-left: 4.438rem !important;
}
