/*** TOP MENU ****/
#header #top-menu.uk-navbar-container {
    background-color: #000;
}
#header #top-menu .uk-navbar-item,
#header #top-menu .uk-navbar-nav > li > a,
#header #top-menu .uk-navbar-toggle {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    min-height: 50px;
}
#header #top-menu img {
    margin: 0 5px 0 0;
}


/*** MAIN MENU ********************************************************************************************************/
#header #main-menu.uk-navbar-nav {
    background-color: #fff;
}
#header #main-menu .uk-navbar-nav {
    display:flex;
    width:100%;
    justify-content:space-between;
}
#header #main-menu .uk-navbar-item,
#header #main-menu .uk-navbar-nav > li > a,
#header #main-menu .uk-navbar-item,
#header #main-menu .uk-navbar-toggle {
    color: #000;
    /*font-size: 24px;
    line-height: 24px;*/
    min-height: 55px;
}
#header #main-menu img {
    margin: 0 5px 0 0;
}

@media (min-width: 960px) {
    #header #main-menu .uk-navbar-item,
    #header #main-menu .uk-navbar-nav > li > a {
        min-height: 60px;
    }
}

@media (min-width: 1200px) {
    #header #main-menu .uk-navbar-item,
    #header #main-menu .uk-navbar-nav > li > a {
        min-height: 65px;
    }
}

@media (min-width: 1600px) {
    #header #main-menu .uk-navbar-item,
    #header #main-menu .uk-navbar-nav > li > a {
        min-height: 70px;
    }
}

/*** DROPNAV MENU *****************************************************************************************************/
#header #dropnav {
    background-color: #fff;
}
#header #dropnav .uk-subnav {
    display:flex;
    width:100%;
    justify-content:space-between;
}
#header #dropnav .uk-subnav,
#header #dropnav .uk-subnav > li > a {
    color: #000;
    font-size: 18px;
    line-height: 18px;
    min-height: 50px;
}
#header #dropnav .uk-subnav > li > a > .tm-icon {
    width: 20px;
    margin-right: 5px;
}

#header #dropnav .uk-subnav > * {
    padding-left: 0;
}

@media (min-width: 960px) {
    #header #dropnav {
        background-color: #fff;
    }
    #header #dropnav .uk-subnav,
    #header #dropnav .uk-subnav > li > a {
        color: #000;
        font-size: 18px;
        line-height: 18px;
        min-height: 50px;
    }
    #header #dropnav .uk-subnav > li > a > .tm-icon {
        width: 22px;
        margin-right: 5px;
    }
}

@media (min-width: 1200px) {
    #header #dropnav .uk-subnav,
    #header #dropnav .uk-subnav > li > a {
        color: #000;
        font-size: 20px;
        line-height: 20px;
        min-height: 55px;
    }
    #header #dropnav .uk-subnav > li > a > .tm-icon {
        width: 24px;
        margin-right: 5px;
    }
}

@media (min-width: 1600px) {
    #header #dropnav .uk-subnav,
    #header #dropnav .uk-subnav > li > a {
        color: #000;
        font-size: 22px;
        line-height: 22px;
        min-height: 60px;
    }
    #header #dropnav .uk-subnav > li > a > .tm-icon {
        width: 30px;
        margin-right: 5px;
    }
}

/*** MOBNAV MENU ******************************************************************************************************/
#header #mobnav {
    background-color: #000;
}
#header #mobnav .uk-navbar-nav,
#header #mobnav .uk-navbar-toggle,
#header #mobnav .uk-navbar-nav > li > a {
    color: #fff;
    font-size: 20px;
    /*line-height: 20px;*/
    min-height: 40px;
}
#header #mobnav .uk-navbar-nav .uk-icon-button {
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    background-color: rgba(255,255,255,0.2);
    font-size: 28px;
    margin: 10px 0;
    width: 40px;
    height: 30px;
}

/*#modal-full .uk-nav-primary > li > a {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0;
}*/

/*** CATALOG MENU *****************************************************************************************************/
#header #catalog-menu {
    border-top: 3px solid #FFA800;
}

#header #catalog-menu .uk-navbar-item,
#header #catalog-menu .uk-navbar-nav > li > a,
#header #catalog-menu .uk-navbar-toggle {
    min-height: 38px;
}
#header #catalog-menu .uk-navbar-item button {
    border: 1px solid transparent;
    border-radius: 0 0 15px 15px;
    background-color: #FFA800;
    color: #000;
    font-size: 17px;
    font-weight: 500;
    line-height: 25px;
    margin-bottom: 8px;
    padding: 3px 40px 5px;
    text-transform: uppercase   ;
}



/*** MODALS ***********************************************************************************************************/
.uk-modal-dialog {
    width: auto;
}
.uk-modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 auto;
    text-align: center;
}
.uk-modal-body {
    padding: 10px 15px;
}
.uk-modal-footer {
    padding: 10px 15px;
}



/*#modal-full .uk-modal-dialog,*/
#modal-cart .uk-modal-dialog,
#modal-search .uk-modal-dialog,
#modal-catalog .uk-modal-dialog{
    backdrop-filter: blur(20px);
    background-color: rgba(255,255,255,0.75);
}

#modal-cart .uk-modal-header,
#modal-search .uk-modal-header,
#modal-catalog .uk-modal-header{
    background-color: transparent;
    border-bottom: 0 solid transparent;
}

#modal-cart .uk-modal-dialog .uk-modal-title,
#modal-search .uk-modal-dialog .uk-modal-title,
#modal-catalog  .uk-modal-dialog .uk-modal-title {
    color: #000; /*#FFA800;*/
    font-size: 50px;
    font-weight: 500;
    line-height: 50px;
    letter-spacing: 0;
    margin-bottom: 0;
}

/*#modal-full .uk-modal-close-full,*/
#modal-cart .uk-modal-close-full,
#modal-search .uk-modal-close-full,
#modal-catalog .uk-modal-close-full {
    top: 12px;
    right: 17px;
    padding: 15px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    color: #000;
}


#modal-catalog .uk-nav-default > li > a {
    color: #000;
    font-size: 24px;
    border-bottom: 1px solid #000;
}
#modal-catalog .uk-nav-default .uk-nav-sub a {
    color: #000;
    font-size: 24px;
    border-bottom: 1px solid #000;
}

/*** OFFCANVAS MENU ***************************************************************************************************/
#offcanvas-menu .uk-nav > li > a {
    font-size: 20px;
}
#offcanvas-menu .uk-navbar-dropdown-nav > li > a {
    color: #eeeeee;
    font-size: 18px;
    margin-left: 15px;
}

/*** FOOTER MENU ******************************************************************************************************/
#footer {
    background-color: #141414;
}

#footer .uk-card .uk-card-title {
    color: #FFA800;
    font-size: 20px;
}
#footer h3 {
    color: #fff;
    font-size: 17px;
}

#footer #footer-menu.uk-navbar-container {
    background-color: #000;
}
#footer #footer-menu .uk-navbar-item,
#footer #footer-menu .uk-navbar-nav > li > a,
#footer #footer-menu .uk-navbar-toggle {
    color: #fff;
    font-size: 15px;
    line-height: 25px;
    min-height: 60px;
}
#footer #footer-menu .uk-navbar-nav {
    display: flex;
    justify-content: center; /* или space-between если нужно растянуть */
    align-items: center;
    gap: 15px;
}
#footer #footer-menu .uk-navbar-nav > li {
    display: flex;
    align-items: center;
}
#footer #footer-menu .uk-navbar-nav > li + li > a::before {
    content: "|";
    margin-right: 30px;
    color: #888;
}

/******************************/
/*** ALERTS & NOTIFICATIONS ***/
/******************************/
.uk-alert {
    border-radius: 7px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    padding: 15px 40px 15px 15px;
}
.uk-alert-close {
    opacity: 1;
}

.uk-notification-message {
    border-radius: 7px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    padding: 15px 35px 15px 15px !important;
    font-size: 1rem;
    line-height: 1.25;
}
.uk-notification-close {
    color: #fff;
    display: block !important;
    position: absolute;
    top: 13px;
    right: 12px;
}

.uk-alert-primary,
.uk-notification-message-primary {
    background: var(--primary);
    backdrop-filter: blur(5px);
    color: #ffffff;
}
.uk-alert-success,
.uk-notification-message-success {
    background: var(--success);
    backdrop-filter: blur(5px);
    color: #ffffff;
}
.uk-alert-warning,
.uk-notification-message-warning {
    background: var(--warning);
    backdrop-filter: blur(5px);
    color: #ffffff;
}
.uk-alert-danger,
.uk-notification-message-danger {
    background: var(--danger);
    backdrop-filter: blur(5px);
    color: #ffffff;
}

.uk-alert-checkout {
    background: var(--orange-10);
    backdrop-filter: blur(5px);
    border: 1px solid var(--orange);
    border-radius: 7px;
    color: #000;
}

.tm-alert-success {
    /*background: var(--success);*/
    background: linear-gradient(135deg, var(--success), rgba(0,160,70,0.8), rgba(0,160,70,0.6));
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 35px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
.tm-alert-warning {
    /*background: var(--success);*/
    background: linear-gradient(135deg, var(--warning), rgba(255,165,0,0.8), rgba(255,165,0,0.6));
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 35px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
.tm-alert-danger {
    /*background: var(--success);*/
    background: linear-gradient(135deg, var(--danger), rgba(255,0,0,0.8), rgba(255,0,0,0.6));
    backdrop-filter: blur(5px);
    border-radius: 8px;
    padding: 35px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
.tm-alert-success *,
.tm-alert-warning *,
.tm-alert-danger * {
    color: #fff;
}
.tm-alert-success-icon,
.tm-alert-warning-icon,
.tm-alert-danger-icon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* 👈 вынос наполовину */
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.tm-alert-success-icon i {
    color: var(--success);
}
.tm-alert-warning-icon i {
    color: var(--warning);
}
.tm-alert-danger-icon i {
    color: var(--danger);
}



/*********************************/
/*** BACKEND SIDEBAR COMPONENT ***/
/*********************************/
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Растягиваем контейнер на всю высоту окна */
    overflow-y: auto; /* Добавляем прокрутку при необходимости */
}
.sidebar-top, .sidebar-bottom {
    height: auto;
}
.sidebar-middle {
    flex-grow: 1; /* Занимает всю оставшуюся высоту */
    /* overflow-y: auto; Добавляем прокрутку при необходимости */
}
.sidebar-top {
    align-self: center; /* Центрируем по горизонтали внутри flex-контейнера */
}
.sidebar .uk-nav-header {
    font-size: .875rem;
    padding: 0 15px 15px 25px;
    text-transform: none;
}
.sidebar .uk-nav a {
    font-size: 1.1rem;
    padding: 15px 25px;
}
/*.sidebar .uk-nav .uk-active a {
    background-color: var(--blue);
}*/
.sidebar .uk-nav .uk-active a {
    background-color: #1E91CF;
}

.sidebar .uk-nav .uk-active a svg path {
    fill: white; /* Замените на нужный цвет */
}
.sidebar .uk-nav .uk-active a img {
    /*filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(746%) hue-rotate(360deg) brightness(90%) contrast(91%);*/
    filter: brightness(100%) invert(100%);
}
.uk-nav .uk-nav-divider {
    margin: 0;
}

/*************************************/
/*** BACKEND USER FILTER COMPONENT ***/
/*************************************/
#filterProduct .uk-inline input,
#filterProduct .uk-inline select,
#filterUser .uk-inline input,
#filterUser .uk-inline select {
    padding-left: 50px !important;
    padding-right: 35px !important;
}

#filterUserRole, #filterUserStatus,
#filterCategory, #filterProductStatus,
#userStatus {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    /* Добавляем фоновую картинку, чтобы заменить стрелки */
    /*background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M301.7 170.7L160 312.3 18.3 170.7c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l160 160c9.4 9.4 24.6 9.4 33.9 0l160-160c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.4-9.4-24.6-9.4-33.9 0z"></path></svg>');
    background-repeat: no-repeat;
    background-position: right center;*/
    /* Добавляем отступ, чтобы текст не налазил на картинку */
    /*padding-right: 20px;*/
    /* Убираем стандартные стили фокуса */
    /*outline: none;*/
    /* Устанавливаем курсор в виде указателя */
    /*cursor: pointer;*/
}

#userStatus {
    width: 150px;
}

/*****************************/
/*** BACKEND LANGUAGE TABS ***/
/*****************************/
.tm-lang.uk-subnav {
    display: flex;
}
.tm-lang.uk-subnav > * {
    padding-left: 5px;
}
.tm-lang.uk-subnav li:first-child {
    font-size: 1rem;
    /*font-weight: 500;*/
    margin-right: auto;
    padding-left: 0;
    /*display: flex;*/
}
.tm-lang.uk-subnav.uk-subnav-pill > li > a {
    text-transform: none !important;
}
.tm-lang.uk-subnav-pill > .uk-active > a {
    background-color: #1e91cf;
    color: #fff;
}
.tm-lang.uk-subnav-pill > .uk-active > a {
    background-color: #1e91cf;
    color: #fff;
}
.tm-lang.uk-subnav-pill > .uk-active > a.red {
    background-color: red;
    color: #fff;
}