/* Base Layout */
.tc-comparison-table-wrapper {
    width: 100%;
    overflow-x: auto;
    /* Scroll on small screens */
}

.tc-comparison-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 600px;
    /* Force min width to prevent squishing */
}

.tc-ct-header,
.tc-ct-row {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.tc-ct-col {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.tc-ct-feature-head,
.tc-ct-feature-name {
    flex: 2;
    font-weight: 500;
    justify-content: flex-start;
}

.tc-ct-us-col,
.tc-ct-them-col {
    flex: 1;
    justify-content: center;
    text-align: center;
    font-weight: bold;
}

/* Header Specifics */
.tc-ct-header .tc-ct-col {
    border-bottom: 2px solid #ddd;
    flex-direction: column;
    justify-content: center;
}

.tc-ct-icon {
    font-size: 24px;
    margin-bottom: 10px;
}

.tc-ct-title {
    margin: 0;
    font-size: 18px;
}

/* Status Icons */
.tc-status-check {
    color: #27ae60;
    font-size: 18px;
}

.tc-status-cross {
    color: #e74c3c;
    font-size: 18px;
}

.tc-status-text {
    font-size: 14px;
    color: #666;
}


/* --- Styles --- */

/* Style 1: Classic Table (Default) */
.tc-ct-style-1 .tc-ct-col {
    border-right: 1px solid #eee;
}

.tc-ct-style-1 .tc-ct-col:last-child {
    border-right: none;
}

.tc-ct-style-1 .tc-ct-row:nth-child(even) {
    background-color: #fafafa;
}

/* Style 2: Modern Shadow */
.tc-ct-style-2 .tc-comparison-table {
    background: #fff;
}

.tc-ct-style-2 .tc-ct-us-col {
    background-color: #f8faff;
    /* Light highlight */
    position: relative;
    border-top: 3px solid #3498db;
    /* Highlight Color */
}

/* Lift the Us column visually? 
   Hard with flex row structure. better to just highlight background.
*/
.tc-ct-style-2 .tc-ct-them-col {
    opacity: 0.7;
}

/* Style 3: Minimal */
.tc-ct-style-3 .tc-ct-col {
    border: none;
    border-bottom: 1px solid #f0f0f0;
}

.tc-ct-style-3 .tc-ct-header .tc-ct-col {
    border-bottom: 2px solid #333;
}

.tc-ct-style-3 .tc-ct-feature-name {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #888;
}

/* Style 4: Dark Mode */
.tc-ct-style-4 .tc-comparison-table {
    background-color: #1a1a1a;
    color: #eee;
}

.tc-ct-style-4 .tc-ct-col {
    border-color: #333;
}

.tc-ct-style-4 .tc-ct-title {
    color: #fff;
}

.tc-ct-style-4 .tc-status-text {
    color: #ccc;
}

.tc-ct-style-4 .tc-ct-us-col {
    background-color: #222;
}

/* Style 5: Badge Style */
.tc-ct-style-5 .tc-status-check,
.tc-ct-style-5 .tc-status-cross {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
}

/* Background colors handled by inline styles controls in PHP or defaults */
.tc-ct-style-5 .tc-status-check {
    background-color: #27ae60;
}

.tc-ct-style-5 .tc-status-cross {
    background-color: #e74c3c;
}


/* Responsive */
@media (max-width: 767px) {
    .tc-comparison-table {
        min-width: 0;
    }

    .tc-ct-col {
        padding: 10px;
        font-size: 14px;
    }

    .tc-ct-icon {
        font-size: 20px;
    }

    .tc-ct-title {
        font-size: 16px;
    }

    /* Stacked Layout for very small screens? 
       Actually horizontal scroll is improved UX for tables usually.
       Keeping wrapper overflow-x: auto.
    */
}