﻿.provider-comparison-section {
    margin: 1.5rem 0 3rem 0;
    max-width: 100%;
    overflow: hidden;
}

    .provider-comparison-section h2 {
        margin-bottom: 0.75rem;
    }

    .provider-comparison-section p {
        margin-bottom: 1.5rem;
    }

    .provider-comparison-section .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .provider-comparison-section .comparison-note {
        margin-top: 1rem;
        color: #6b7280;
        font-size: 0.95rem;
    }

/* =========================================================
   OLD FEATURE MATRIX TABLE
   ========================================================= */

.provider-compare-grid {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: #fff;
    margin-bottom: 0;
}

    .provider-compare-grid th,
    .provider-compare-grid td {
        padding: 1rem 0.9rem;
        border: 1px solid #d9dde3;
        vertical-align: middle;
        background: #fff;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .provider-compare-grid thead th {
        background: #f7f8fa;
        font-weight: 700;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .provider-compare-grid .feature-col {
        width: 180px;
        min-width: 180px;
        text-align: left;
        background: #f7f8fa;
        position: sticky;
        left: 0;
        z-index: 4;
    }

    .provider-compare-grid .plan-col {
        min-width: 140px;
    }

    .provider-compare-grid .feature-name {
        font-weight: 600;
        text-align: left;
        background: #fbfbfc;
        position: sticky;
        left: 0;
        z-index: 2;
        width: 180px;
        min-width: 180px;
    }

    .provider-compare-grid tbody td {
        text-align: center;
    }

    .provider-compare-grid thead .feature-col {
        z-index: 5;
    }

    .provider-compare-grid tbody tr:nth-child(even) td:not(.feature-name) {
        background: #fcfcfd;
    }

    .provider-compare-grid tbody tr:hover td:not(.feature-name) {
        background: #f5f9ff;
    }

    .provider-compare-grid .provider-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .provider-compare-grid .provider-logo {
        height: 32px;
        max-width: 100px;
        object-fit: contain;
        margin-bottom: 6px;
    }

    .provider-compare-grid .provider-name {
        display: block;
        font-weight: 700;
        color: #111827;
        margin-bottom: 0.25rem;
    }

        .provider-compare-grid .provider-name.subtle {
            font-size: 0.9rem;
            font-weight: 500;
            color: #6b7280;
        }

    .provider-compare-grid .plan-name {
        display: block;
        font-size: 0.95rem;
        color: #6b7280;
        font-weight: 600;
    }

/* =========================================================
   SHARED STATUS BADGES
   ========================================================= */

.status-badge {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

    .status-badge.included {
        background: #e7f6ec;
        color: #1f7a45;
    }

    .status-badge.optional {
        background: #fff3d6;
        color: #9a6700;
    }

    .status-badge.unavailable {
        background: #eef1f4;
        color: #6b7280;
    }

/* =========================================================
   NEW SUMMARY TABLE
   ========================================================= */

.compare-summary-table {
    table-layout: auto;
    width: 100%;
    margin-bottom: 0;
}

    .compare-summary-table th,
    .compare-summary-table td {
        vertical-align: middle;
        padding: 0.65rem;
        border-color: #d9dee5;
    }

    .compare-summary-table th {
        white-space: nowrap;
        font-weight: 600;
    }

    .compare-summary-table td {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

        .compare-summary-table td:nth-child(1) {
            width: 170px;
        }

        .compare-summary-table td:nth-child(2) {
            width: 150px;
        }

        .compare-summary-table td:nth-child(3),
        .compare-summary-table td:nth-child(4),
        .compare-summary-table td:nth-child(5) {
            white-space: nowrap;
        }

        .compare-summary-table td:nth-child(5),
        .compare-summary-table td:nth-child(6),
        .compare-summary-table th:nth-child(5),
        .compare-summary-table th:nth-child(6) {
            width: 150px;
            max-width: 150px;
        }

        .compare-summary-table td:nth-child(5),
        .compare-summary-table td:nth-child(6) {
            white-space: normal;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        .compare-summary-table td:nth-child(7) {
            width: 170px;
            white-space: nowrap;
        }

    .compare-summary-table .highlight {
        font-weight: 700;
        background-color: #eaf4ee;
    }

    .compare-summary-table .badge,
    .compare-summary-table .status-badge,
    .compare-summary-table .pill,
    .compare-summary-table .rounded-pill {
        display: inline-block;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.2;
        text-align: center;
    }

    .compare-summary-table td.text-nowrap {
        white-space: nowrap;
    }

        .compare-summary-table td.text-nowrap .btn {
            margin-bottom: 0.25rem;
        }

    /* =========================================================
   NEW SUMMARY TABLE PROVIDER CELL
   ========================================================= */

    .compare-summary-table .provider-cell {
        text-align: center;
        vertical-align: middle;
    }

    .compare-summary-table .provider-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .compare-summary-table .provider-logo {
        width: 44px;
        height: 44px;
        padding: 4px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        object-fit: contain;
        margin-bottom: 4px;
    }

    .compare-summary-table .provider-name {
        font-size: 0.85rem;
        line-height: 1.2;
        word-break: break-word;
        overflow-wrap: anywhere;
        font-weight: 500;
        color: #111827;
    }

/* =========================================================
   DETAIL PANEL
   ========================================================= */

.plan-detail-row td {
    background: #fff;
}

.plan-detail-panel {
    background: #f8f9fa;
}

    .plan-detail-panel h3 {
        color: #1f2937;
    }

    .plan-detail-panel ul {
        padding-left: 1rem;
        margin-bottom: 0;
    }

    .plan-detail-panel li {
        margin-bottom: 0.4rem;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .plan-detail-panel p,
    .plan-detail-panel li,
    .plan-detail-panel strong {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .plan-detail-panel hr {
        border-color: #d9dee5;
    }

/* =========================================================
   GLOBAL HIGHLIGHT UTILITY
   ========================================================= */

.highlight {
    background: #e8f7ee !important;
    font-weight: 700;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .compare-summary-table td:nth-child(1) {
        width: 155px;
    }

    .compare-summary-table td:nth-child(2) {
        width: 135px;
    }

    .compare-summary-table td:nth-child(5),
    .compare-summary-table td:nth-child(6),
    .compare-summary-table th:nth-child(5),
    .compare-summary-table th:nth-child(6) {
        width: 135px;
        max-width: 135px;
    }

    .compare-summary-table td:nth-child(7) .btn {
        display: block;
        width: 100%;
        margin-right: 0 !important;
    }
}

@media (max-width: 991.98px) {
    .provider-compare-grid {
        min-width: 760px;
    }

        .provider-compare-grid th,
        .provider-compare-grid td {
            padding: 0.85rem 0.75rem;
        }

        .provider-compare-grid .feature-col,
        .provider-compare-grid .feature-name {
            width: 150px;
            min-width: 150px;
        }

    .compare-summary-table {
        font-size: 0.95rem;
    }

        .compare-summary-table .provider-logo {
            width: 38px;
            height: 38px;
        }
}

@media (max-width: 767.98px) {
    .provider-comparison-section {
        margin: 2rem 0;
    }

    .provider-compare-grid {
        min-width: 680px;
    }

        .provider-compare-grid th,
        .provider-compare-grid td {
            padding: 0.75rem 0.65rem;
            font-size: 0.95rem;
        }

        .provider-compare-grid .feature-col,
        .provider-compare-grid .feature-name {
            width: 135px;
            min-width: 135px;
        }

    .status-badge {
        font-size: 0.8rem;
        padding: 0.28rem 0.55rem;
    }

    .compare-summary-table {
        font-size: 0.9rem;
    }

        .compare-summary-table td,
        .compare-summary-table th {
            padding: 0.6rem;
        }

            .compare-summary-table td:nth-child(1) {
                width: 145px;
            }

            .compare-summary-table td:nth-child(2) {
                width: 125px;
            }

            .compare-summary-table td:nth-child(5),
            .compare-summary-table td:nth-child(6),
            .compare-summary-table th:nth-child(5),
            .compare-summary-table th:nth-child(6) {
                width: 120px;
                max-width: 120px;
            }

            .compare-summary-table td:nth-child(7) {
                width: 150px;
            }
}
