/* Comparison Table Block Frontend Styles */
.comparison-table-block {
    margin: 2rem 0;
    overflow-x: auto;
    position: relative; /* Добавляем для изоляции */
}

/* Изоляция для каждого блока */
.comparison-table-block[data-block-id] {
    isolation: isolate;
}

.comparison-table-block[data-block-id] * {
    box-sizing: border-box;
}

.comparison-table-wrapper {
    min-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #252833;
    border-radius: 8px;
    overflow: hidden;
}

.comparison-table thead tr th {
    padding: 1.5rem 1rem;
    text-align: center;
    color: #E9ECFC;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--tcm-table-header-bg, linear-gradient(135deg, #1a1d29 0%, #2a2d39 100%)) !important;
}

.comparison-table thead th.feature-column {
    text-align: left;
    min-width: 200px;
    font-weight: 700;
    background: var(--tcm-table-header-bg, linear-gradient(135deg, #1a1d29 0%, #2a2d39 100%)) !important;
}

.comparison-table tbody tr {
    border-bottom: 1px solid #2a2d3a;
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

.comparison-table tbody td {
    padding: 1.25rem 1rem;
    text-align: center;
    color: #E9ECFC;
    background-color: #1a1d29;
}


.comparison-table tbody td.feature-name {
    text-align: left;
    font-weight: 500;
    color: #E9ECFC;
    background-color: #1a1d29;
}

.comparison-table .check-icon,
.comparison-table .cross-icon {
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    color: #1E202A !important;
}

.comparison-table .check-icon {
    background-color: #2CD8B9;
}

.comparison-table .cross-icon {
    background-color: #FF4757;
}

/* Скрываем мобильные карточки на десктопе */
.mobile-cards-container {
    display: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .comparison-table-block {
        margin: 0 20px;
    }
    
    .comparison-table-wrapper {
        overflow-x: visible;
    }
    
    /* Скрываем оригинальную таблицу только на мобильных */
    .comparison-table {
        display: none;
    }
    
    /* Контейнер для мобильных карточек */
    .mobile-cards-container {
        display: block;
    }
    
    /* Стили для мобильных карточек */
    .mobile-service-card {
        background-color: #1a1d29;
        padding: 0;
        margin: 0 20px;
        overflow: hidden;
        border: 1px solid #2a2d3a;
    }
    
    .mobile-service-card:last-child {
        margin-bottom: 0;
        border-radius: 0 0 12px 12px;
    }
    
    /* Первая карточка с скругленными углами только сверху */
    .mobile-service-card:first-child {
        border-radius: 12px 12px 0 0;
    }
    
    .mobile-service-title {
        background-color: #2D303E;
        padding: 10px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #E9ECFC;
        text-align: center;
        margin: 0;
    }
    
    .mobile-service-features {
        padding: 1.5rem;
    }
    
    .mobile-feature-item {
        display: flex;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #2a2d3a;
        color: #E9ECFC;
        font-size: 14px;
        gap: 1rem;
    }
    
    .mobile-feature-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    .mobile-feature-item:first-child {
        padding-top: 0;
    }
    
    .mobile-feature-status {
        order: -1; /* Перемещаем иконку в начало */
        flex-shrink: 0;
    }
    
    .mobile-feature-name {
        flex: 1;
        font-weight: 400;
    }
    
    .mobile-feature-status .check-icon,
    .mobile-feature-status .cross-icon {
        font-size: 12px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 50%;
        background-color: #2CD8B9; /* Цвет для галочки по умолчанию */
        display: inline-block;
        text-align: center;
        color: #1E202A !important;
    }
    
    .mobile-feature-status .cross-icon {
        background-color: #FF4757; /* Цвет для крестика */
    }
}

/* Hover effects */
.comparison-table tbody tr:hover {
    background-color: rgba(44, 216, 185, 0.05);
}

/* Animation */
.comparison-table-block.animate-in .comparison-table tbody tr {
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
}

.comparison-table-block.animate-in .comparison-table tbody tr:nth-child(1) { animation-delay: 0.1s; }
.comparison-table-block.animate-in .comparison-table tbody tr:nth-child(2) { animation-delay: 0.2s; }
.comparison-table-block.animate-in .comparison-table tbody tr:nth-child(3) { animation-delay: 0.3s; }
.comparison-table-block.animate-in .comparison-table tbody tr:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}