/* =========================================
   ВЕРХНІЙ РЯДОК (TOPBAR)
   ========================================= */

.container-topbar {
    background-color: #00376b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
}

/* Ставимо модуль з телефонами на ПЕРШЕ місце (зліва) */
.container-topbar .mod-custom {
    order: 1;
}

/* Ставимо перемикач мов на ДРУГЕ місце (справа) */
.container-topbar .mod-languages {
    order: 2;
    margin: 0;
    padding: 0;
}

.top-phones {
    display: flex;
    gap: 25px;
}

.top-phones a {
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease;
}

.top-phones a:hover {
    color: #ffb800 !important; 
}
/* =========================================
   БІЛА ШАПКА 
   ========================================= */
header.container-header {
    background-color: #ffffff !important;
    background-image: none !important;
    border-bottom: 3px solid #00376b;
    padding-bottom: 10px;
}

/* =========================================
   ЄДИНИЙ РЯДОК: ЛОГО + ПОШУК + КОШИК (Позиція search)
   ========================================= */
.container-search {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    gap: 30px; /* Відстань між пошуком, серцем і кошиком */
}

/* 1. Зменшуємо логотип в 2 рази (був 150px) */
.custom-logo img {
    max-width: 75px !important; 
    height: auto;
}

/* 2. Залізно відштовхуємо логотип вліво, а всі інші блоки полетять вправо */
.custom-logo {
    margin-right: auto !important;
}

/* Знімаємо зайві відступи з форми пошуку */
.container-search form {
    margin: 0;
    display: flex;
}

/* =========================================
   ГОЛОВНЕ ГОРИЗОНТАЛЬНЕ МЕНЮ
   ========================================= */
.container-menu {
    background-color: #ffffff !important;
    border-bottom: 3px solid #00376b !important;
    padding: 5px 0 !important;
}

/* Стиль посилань у десктопній версії */
.container-menu .navbar-nav a, .container-header .mod-menu>li>a, .container-header .mod-menu>li>span  {
    color: #00376b !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 15px !important;
    transition: color 0.3s ease;
}

.container-menu .navbar-nav a:hover, .container-header .mod-menu>li>a:hover, .container-header .mod-menu>li>span  {
    color: #ffb800 !important;
}

/* Стиль кнопки-бутерброда на мобільних */
.container-menu .navbar-toggler {
    border-color: #00376b !important;
    color: #00376b !important;
    margin: 5px;
}

/* =========================================
   СТИЛІЗАЦІЯ МОДУЛЯ КАТЕГОРІЙ (JoomShopping)
   ========================================= */
/* Робимо синій заголовок для модуля категорій в обох позиціях */
#sidebar-left .moduletable h3,
#sidebar-right .moduletable h3 {
    background-color: #00376b !important;
    color: #ffffff !important;
    padding: 12px 20px;
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Оформлення самих посилань у списку категорій */
#sidebar-left .moduletable ul,
#sidebar-right .moduletable ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #00376b; /* Синя рамка навколо всього списку */
}

#sidebar-left .moduletable li a,
#sidebar-right .moduletable li a {
    display: block;
    padding: 10px 15px;
    color: #00376b !important;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #eef2f7;
    transition: background 0.2s ease;
}

/* Ефект при наведенні на категорію */
#sidebar-left .moduletable li a:hover,
#sidebar-right .moduletable li a:hover {
    background-color: #f0f4fb;
    color: #ffb800 !important;
}

/* =========================================
   СТРІЛОЧКИ ТА ПІДКАТЕГОРІЇ (JoomShopping)
   ========================================= */

/* 1. Змінюємо старий display: block на display: flex, 
   щоб текст і стрілочка розійшлися по краях */
#sidebar-left .moduletable li a,
#sidebar-right .moduletable li a {
    display: flex !important;
    justify-content: space-between; /* Розсовує текст вліво, стрілку вправо */
    align-items: center;
    padding: 10px 15px;
    color: #00376b !important;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #eef2f7;
    transition: background 0.2s ease, color 0.2s ease;
}

/* 2. Додаємо стрілочку вправо (❯) до всіх пунктів */
#sidebar-left .moduletable li > a::after,
#sidebar-right .moduletable li > a::after {
    content: "\276F"; /* Юнікод-символ кутової стрілочки */
    font-size: 12px;
    color: inherit; /* Стрілочка буде того ж кольору, що й текст */
    transition: transform 0.3s ease; /* Плавний поворот */
}

/* 3. Обертаємо стрілочку вниз (v) для відкритого/активного пункту. 
   JoomShopping маркує відкриті пункти класами .active або .curr */
#sidebar-left .moduletable li.active > a::after,
#sidebar-right .moduletable li.active > a::after,
#sidebar-left .moduletable li.curr > a::after,
#sidebar-right .moduletable li.curr > a::after {
    transform: rotate(90deg);
}

/* 4. Наводимо красу для підкатегорій (AUDI, BMW...), як на макеті */
#sidebar-left .moduletable ul ul,
#sidebar-right .moduletable ul ul {
    padding-left: 15px; /* Зсуваємо список марок авто трохи вправо */
    border: none;
}

#sidebar-left .moduletable ul ul li a,
#sidebar-right .moduletable ul ul li a {
    border-bottom: none; /* Прибираємо лінії під марками авто */
    font-size: 14px; /* Робимо шрифт трохи меншим за головні категорії */
    font-weight: 400;
    padding: 6px 15px; /* Зменшуємо вертикальні відступи */
}