/* === Поведение вкладок === */
.tab-content .tab-pane {
    display: none;
}
.tab-content .tab-pane.active {
    display: block;
}

/* === Контейнер вкладок === */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    border-bottom: none;
}

.nav-tabs li {
    margin: 0;
}

/* Общие стили для всех вкладок – единая толщина рамки 1px */
.nav-tabs a {
    display: inline-block;
    padding: 8px 20px;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;   /* рамка 1px, прозрачная */
    color: var(--main-color);
    font-weight: normal;
    cursor: pointer;
    transition: all 0.2s linear;
    border-radius: 0;
}

/* Активная вкладка – рамка 1px серая + внутренняя тень сверху 5px (имитирует толстый верхний бордер) */
.nav-tabs .active a {
    border-color: #e0e0e0;
    background: var(--white);
    color: var(--text-dark);
    box-shadow: inset 0 2px 0 0 var(--main-color); /* визуально 5px розовая полоса сверху */
}

/* Hover для НЕактивных вкладок – появляется серая рамка 1px со всех сторон, скругление верхних углов */
.nav-tabs li:not(.active) a:hover {
    border-color: #e0e0e0;
    background: var(--bg-light);
    color: var(--text-light);
    border-radius: 8px 8px 0 0;
}

/* .nav-tabs .active a:hover {
    background: var(--white);
    color: var(--text-dark);
    border-color: #e0e0e0;
    border-top-color: var(--main-color);
} */

.tab-content .tab-pane {
    text-align: center;
}
.tab-content .tab-pane p {
    margin: 0;
}
.tab-content .tab-pane iframe {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
}

/* === Мобильная адаптация === */
@media (max-width: 768px) {
    /* Уменьшаем отступы между вкладками */
    .nav-tabs {
        gap: 8px;
        margin-bottom: 20px;
    }
    
    /* Уменьшаем внутренние отступы и шрифт вкладок */
    .nav-tabs a {
        padding: 6px 12px;
        font-size: 14px;
    }
    
    /* Центрируем iframe, убираем лишние отступы */
    .tab-content .tab-pane {
        text-align: center;
    }
    
    /* Для очень маленьких экранов (до 480px) вкладки можно сделать на всю ширину */
    @media (max-width: 480px) {
        .nav-tabs {
            flex-direction: column;
            gap: 5px;
        }
        .nav-tabs li {
            width: 100%;
        }
        .nav-tabs a {
            display: block;
            text-align: center;
            border-radius: 8px !important;
        }
        /* У неактивных вкладок при hover в мобильной версии тоже скругление */
        .nav-tabs li:not(.active) a:hover {
            border-radius: 8px;
        }
        /* Активной вкладке в мобильной версии убираем внутреннюю тень, чтобы не ломалась геометрия */
        .nav-tabs .active a {
            box-shadow: none;
            border-top-width: 1px;
            border-top-color: var(--main-color);
        }
    }
}