/* Tab Content Block Styles */
.tab-content-wrapper {
    margin-top: var(--tab-margin-top, 20px) !important;
    margin-bottom: var(--tab-margin-bottom, 20px) !important;
    position: relative !important;
    z-index: 1 !important;
}

.tab-content-button {
    width: 100% !important;
    background: var(--tab-button-bg, #4ecdc4) !important;
    color: var(--tab-button-text, #ffffff) !important;
    border: none !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    font-size: var(--tab-font-size, 16px) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.tab-content-button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s !important;
}

.tab-content-button:hover::before {
    left: 100% !important;
}

.tab-content-button:hover {
    background: var(--tab-button-hover, #3bb5a7) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.tab-content-button.tab-button-active {
    background: var(--tab-button-hover, #3bb5a7) !important;
    border-radius: 8px 8px 0 0 !important;
}

.tab-button-text {
    flex: 1 !important;
    text-align: left !important;
}

.tab-button-icon {
    font-size: 14px !important;
    transition: transform 0.3s ease !important;
    margin-left: 10px !important;
}

.tab-content-button.tab-button-active .tab-button-icon {
    transform: rotate(180deg) !important;
}

.tab-content-list {
    background: var(--tab-list-bg, #ffffff) !important;
    border: 1px solid var(--tab-list-border, #e0e0e0) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.tab-content-list.tab-content-open {
    max-height: 900px !important;
    opacity: 1 !important;
    padding: 15px 0 !important;
}

.tab-content-loading {
    padding: 20px !important;
    text-align: center !important;
    color: #666 !important;
    font-style: italic !important;
}

.tab-content-empty {
    padding: 20px !important;
    text-align: center !important;
    color: #999 !important;
    font-style: italic !important;
}

.tab-content-wrapper .tab-content-link {
    display: block !important;
    padding: 12px 20px !important;
    color: var(--tab-list-text-color, #333333) !important;
    text-decoration: none !important;
    font-size: var(--tab-font-size, 16px) !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
    position: relative !important;
}

/* Цвет текста теперь устанавливается через inline стили в JavaScript */

.tab-content-wrapper .tab-content-link:hover {
    background: rgba(78, 205, 196, 0.1) !important;
    color: var(--tab-link-hover, #4ecdc4) !important;
    border-left-color: var(--tab-link-hover, #4ecdc4) !important;
    transform: translateX(5px) !important;
}

.tab-content-wrapper .tab-content-link:active {
    background: rgba(78, 205, 196, 0.2) !important;
    transform: translateX(3px) !important;
}

/* Анимация появления ссылок - убрана, так как скрывала текст */

/* Задержки анимации убраны */
/* Все задержки анимации убраны */

/* Keyframes анимация убрана */

/* Responsive Design */
@media (max-width: 768px) {
    .tab-content-button {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    .tab-content-link {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    .tab-content-list.tab-content-open {
        max-height: 900px !important;
    }
}

@media (max-width: 480px) {
    .tab-content-button {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    .tab-content-link {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    .tab-content-list.tab-content-open {
        max-height: 900px !important;
    }
}

/* Стили для подсветки заголовков при скролле */
.tab-content-wrapper ~ * h2[id] {
    scroll-margin-top: 80px !important;
    transition: background-color 0.3s ease !important;
}

/* Улучшенная прокрутка только для страниц с Tab Content */
.tab-content-wrapper {
    scroll-behavior: smooth !important;
}

/* Стили для широких экранов */
@media (min-width: 1200px) {
    .tab-content-wrapper {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Размеры шрифта для разных экранов */
@media (max-width: 768px) {
    .tab-content-wrapper {
        font-size: 15px !important;
    }
    
    .tab-content-wrapper .tab-content-link {
        font-size: 15px !important;
    }
}

@media (min-width: 769px) {
    .tab-content-wrapper {
        font-size: 24px !important;
    }
    
    .tab-content-wrapper .tab-content-link {
        font-size: 24px !important;
    }
}