header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    padding-right: 20px;
    background-color: #2C3333;
    border-bottom: 1px solid #CBE4DE;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ======= Панель керування ======= */
.navbar {
    display: flex; /* Використовуємо flexbox для вирівнювання елементів у рядок. */
    align-items: center; /* Центрує елементи по вертикалі. */
    margin: 1px auto; /* Встановлює відступи зверху та знизу, центроване вирівнювання горизонтально. */

    /*padding: 20px var(--logo-width, 10px); /* Відступи: фіксовані зверху/знизу, змінна для відступів по боках. */
    background-color: #2C3333; /* Колір фону плашки. */
    border-radius: 15px; /* Заокруглені кути плашки. */
    position: relative; /* Задає контекст для позиціонування дочірніх елементів. */
    z-index: 2; /* Встановлює пріоритет накладання над іншими елементами. */
    color: #2C3333; /* Колір тексту (хоча він збігається з фоном, ймовірно, не використовується). */
    opacity: 0; /* Початково невидимий. */
    transform: translateY(-20px); /* Зрушення плашки вгору (ефект анімації при появі). */
    transition: opacity 3s ease, transform 3s ease; /* Додає плавний перехід для появи/зникнення. */
    min-height: 40px; /* Мінімальна висота для забезпечення стабільності плашки. */
    justify-content: flex-end;
}

/* Контейнер для кнопок */
.navbar-buttons {
    display: flex; /* Розташування кнопок у рядок за допомогою flexbox. */
    gap: 10px; /* Відстань між кнопками. */
    transition: opacity 0.3s ease; /* Плавний перехід при зміні прозорості. */
    width: 50vw;   /* 50% ширини вʼюпорту (видимої області браузера) */
    min-width: 100px;
    justify-content: flex-end;
}

.navbar-buttons form {
    display: flex; /* Робимо форму флекс-елементом */
}

.navbar-buttons form .control-button {
    width: 100%; /* Примусово вирівнюємо розмір */
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 8px;
}

.navbar.visible {
    opacity: 1; /* Робить плашку повністю видимою. */
    transform: translateY(0); /* Повертає плашку до початкового положення. */
    z-index: 10; /* Встановлює вищий пріоритет для накладання. */
}

/* Кнопки панелі */
.navbar button {
    flex-grow: 0; /* Встановлює рівний розмір кнопок. */
    max-width: 180px; /* Встановлюємо максимальну ширину кнопки */
    margin: 0 10px; /* Відступ між кнопками по боках. */
    text-align: center; /* Текст у центрі кнопок. */
    background: transparent; /* Прозорий фон. */
    border: 1px solid #CBE4DE; /* Сірий контур кнопки. */
    border-radius: 10px; /* Заокруглені кути кнопок. */
    color: #CBE4DE; /* Колір тексту кнопок. */
    font-size: 1rem; /* Розмір шрифту кнопок. */
    white-space: nowrap; /* Забороняє перенесення тексту на новий рядок. */
    padding: 10px 10px; /* Відступи зверху/знизу тексту всередині кнопки. */
    cursor: pointer; /* Курсор у вигляді руки при наведенні. */
    transition: all 0.5s ease-in-out; /* Плавний перехід для всіх змін стилю. */
    font-family: 'Roboto', sans-serif; /* Шрифт для тексту кнопок. */
}

.navbar button:hover {
    color: #0E8388; /* Колір тексту при наведенні. */
    border-color: #0E8388; /* Колір контуру при наведенні. */
    background: #CBE4DE; /* Напівпрозорий фон при наведенні. */
    /*box-shadow: box-shadow: 0 0 12px rgba(11, 131, 136, 0.8);*/

}

.navbar button.active {
    background-color: #CBE4DE;
    color:#0E8388; /* або інший контрастний колір */
    border-color: #0E8388;
    /*box-shadow:#0E8388;*/
}

.header {
    position: sticky; /* Фіксує плашку у верхній частині екрана під час прокрутки. */
    top: 0; /* Початкове розташування у верхній частині екрана. */
    left: 0; /* Початкове розташування зліва. */
    width: 100%; /* Розтягує плашку на всю ширину сторінки. */
    z-index: 2; /* Пріоритет накладання. */
    background-color: #2C3333; /* Колір фону плашки. */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Тінь для додаткового об'єму. */
}
.navbar-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: auto;
}

.navbar-logo img {
    height: 40px; /* або 50px, залежно від бажаного розміру */
    width: auto;
    max-width: 100%;
    margin-left: 20px;
}

/* Адаптивність */
@media (max-width:700px) {
    .navbar-buttons {
        display: none; /* Ховає кнопки на малих екранах. */
    }
}