/* СТИЛИ ДЛЯ КАСТОМНЫХ ТАБОВ */

.custom-tab-btn {
    /* Размеры и выравнивание */
    width: 380px !important;
    height: 63px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    
    /* Отступы */
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
    
    /* Стили для неактивного состояния */
    background-color: #F2F0F7 !important;
    color: #000000 !important;
    border: 1px solid transparent !important;
    
    /* Закругление */
    border-radius: 100px !important;
    
    /* Шрифт */
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 1.4 !important;
    
    /* Курсор и анимация */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    
    /* Отключаем стандартные стили Тильды */
    text-decoration: none !important;
    box-shadow: none !important;
    position: relative !important;
}

/* Активное состояние */
.custom-tab-btn.active {
    background-color: #121212 !important;
    border: 1px solid #5C5C5C !important;
    color: #ffffff !important;
}

/* Hover состояние */
.custom-tab-btn:hover {
    background-color: #121212 !important;
    border: 1px solid #5C5C5C !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Контейнер для контента кнопки */
.custom-tab-btn .t-btn-text {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 16px 0 0 !important;
    margin: 0 !important;
}

/* Иконка через псевдоэлемент */
.custom-tab-btn .t-btn-text::before {
    content: "" !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 16px 0 16px !important;
    flex-shrink: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Индивидуальные иконки для каждой кнопки */
.custom-tab-btn[href="#tab-1"] .t-btn-text::before {
    background-image: url('https://static.tildacdn.com/tild3863-3432-4130-b164-323961323032/photo.png') !important;
}

.custom-tab-btn[href="#tab-1"].active .t-btn-text::before,
.custom-tab-btn[href="#tab-1"]:hover .t-btn-text::before {
    background-image: url('https://static.tildacdn.com/tild3366-3137-4736-b764-656662663966/photo.png') !important;
}

.custom-tab-btn[href="#tab-2"] .t-btn-text::before {
    background-image: url('https://static.tildacdn.com/tild3863-3432-4130-b164-323961323032/photo.png') !important;
}

.custom-tab-btn[href="#tab-2"].active .t-btn-text::before,
.custom-tab-btn[href="#tab-2"]:hover .t-btn-text::before {
    background-image: url('https://static.tildacdn.com/tild3366-3137-4736-b764-656662663966/photo.png') !important;
}

.custom-tab-btn[href="#tab-3"] .t-btn-text::before {
    background-image: url('https://static.tildacdn.com/tild3863-3432-4130-b164-323961323032/photo.png') !important;
}

.custom-tab-btn[href="#tab-3"].active .t-btn-text::before,
.custom-tab-btn[href="#tab-3"]:hover .t-btn-text::before {
    background-image: url('https://static.tildacdn.com/tild3366-3137-4736-b764-656662663966/photo.png') !important;
}

/* Добавьте аналогично для кнопок 4,5,6 */

/* Индивидуальная ширина текста для каждой кнопки */
.custom-tab-btn[href="#tab-1"] .t-btn-text {
    max-width: 100% !important;
}

.custom-tab-btn[href="#tab-2"] .t-btn-text {
    max-width: 262px !important;
}

.custom-tab-btn[href="#tab-3"] .t-btn-text {
    max-width: 162px !important;
}

.custom-tab-btn[href="#tab-4"] .t-btn-text {
    max-width: 200px !important;
}

.custom-tab-btn[href="#tab-5"] .t-btn-text {
    max-width: 100% !important;
}

.custom-tab-btn[href="#tab-6"] .t-btn-text {
    max-width: 216px !important;
}

/* Стиль для текста внутри кнопки */
.custom-tab-btn .t-btn-text {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: hidden !important;
}

/* Адаптивность */
@media (max-width: 480px) {
    .custom-tab-btn {
        width: 100% !important;
        min-height: 56px !important;
        height: auto !important;
    }
    
    .custom-tab-btn .t-btn-text::before {
        width: 24px !important;
        height: 24px !important;
        margin: 0 12px 0 12px !important;
    }
    
    /* На мобильных убираем ограничения по ширине */
    .custom-tab-btn .t-btn-text {
        max-width: 100% !important;
    }
}

/* Стили для встроенных иконок Тильды */
.custom-tab-btn .t-btn__icon {
    width: 28px !important;
    height: 28px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

/* Скрываем стандартные иконки для активного состояния */
.custom-tab-btn .t-btn__icon:last-child {
    display: none !important;
}

.custom-tab-btn.active .t-btn__icon:first-child,
.custom-tab-btn:hover .t-btn__icon:first-child {
    display: none !important;
}

.custom-tab-btn.active .t-btn__icon:last-child,
.custom-tab-btn:hover .t-btn__icon:last-child {
    display: block !important;
}