/* Базові стилі для контейнера вкладок */
.tabs {
    margin: 0; /* Remove any margins */
    padding: 0; /* Remove any padding */
}

/* Список вкладок */
.nav-tab {
    display: flex;
    border-bottom: 1px solid #ddd; /* Лінія між вкладками і контентом */
    margin: 0; /* Ensure no margins */
    padding: 0; /* Ensure no padding */
    list-style-type: none;
}

/* Стилі для кожної вкладки */
.nav-item {
    margin-right: 10px;
}

.nav-link {
    background-color: #fff; /* Білий фон для вкладок */
    padding: 10px 15px;
    color: #007bff;
    cursor: pointer;
    border-radius: 4px 4px 0 0; /* Закруглення верхніх кутів для вкладок */
    transition: background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    border: none; /* Прибираємо обводку для неактивних вкладок */
}

.nav-link.active {
    background-color: #fff;
    border: 1px solid #ddd; /* Обводка тільки для активної вкладки */
    border-bottom: none; /* Забираємо нижню межу для активної вкладки */
    color: #000;
}

.nav-link:hover {
    background-color: #f7f7f7; /* Легке затемнення фону при наведенні */
}

/* Стилі для контенту вкладки */
.tab-pane {
    display: none;
    padding: 20px;
    background-color: #fff; /* Білий фон контенту */
    /* Прибираємо обводки контенту */
    border: none;
}

/* Показуємо активний контент */
.tab-pane.active {
    display: block;
}

/* Ensure wide-tab spans the full width */
.wide-tab {
    flex-grow: 1; /* Make sure the tab grows to occupy available space */
    text-align: center; /* Center the text */
}