/* table section - start */
/* Table CSS Variables */
.table {
    --table-row-min-height: 62px;
    --table-column-gap: 15px;
    --table-cell-padding-y: 15px;
    --table-cell-padding-x: 1rem;
    --table-first-col-width: 200px;
}

.table .container {
    max-width: 100%;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.table .title {
    margin-bottom: 46px;
}

.table .table-wrapper {
    overflow-x: auto;
    margin: 2rem 0;
}

.table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.table caption {
    caption-side: top;
    text-align: left;
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0 0 1rem 0;
    color: #1a1a1a;
}

/* Header row */
.table thead th {
    min-height: var(--table-row-min-height);
    font-size: 20px;
    line-height: 130%;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
    letter-spacing: 0em;
    padding: calc(var(--table-cell-padding-y)  + 20px) var(--table-cell-padding-x) calc(var(--table-cell-padding-y)  + 10px);
    border-bottom: 2px solid var(--gray-table-border)
}

/* Gap columns - NO min-width to allow shrinking */
.table thead th.gap-col,
.table tbody td.gap-col {
    width: var(--table-column-gap);
}

/* Gap columns - header */
.table thead th.gap-col {
    padding: 0;
    background-color: transparent !important;
    border-bottom: 2px solid var(--gray-table-border);
}

/* Gap columns - body */
.table tbody td.gap-col {
    padding: 0;
    background-color: transparent !important;
    border-top: 1px solid var(--gray-table-border);
}

/* First row gap - no top border */
.table tbody tr:first-child td.gap-col {
    border-top: none;
}

/* Data columns (3, 5, 7, 9) - equal width */
.table thead th:nth-child(3),
.table thead th:nth-child(5),
.table thead th:nth-child(7),
.table thead th:nth-child(9),
.table tbody td:nth-child(3),
.table tbody td:nth-child(5),
.table tbody td:nth-child(7),
.table tbody td:nth-child(9) {
    width: calc((100% - var(--table-first-col-width) - (var(--table-column-gap) * 4)) / 4);
}

/* Data column backgrounds (excluding gap columns) */
/* Column 1 - Category - NO min-width to allow shrinking */
.table thead th:nth-child(1),
.table tbody td:nth-child(1) {
    width: var(--table-first-col-width);
    background-color: transparent;
}

/* Column 3 - Primary Use Case */
.table thead th:nth-child(3),
.table tbody td:nth-child(3) {
    background-color: rgba(var(--blue-table-bg-rgb), 0.2);
}

/* Column 5 - Benefit to Shoppers */
.table thead th:nth-child(5),
.table tbody td:nth-child(5) {
    background-color: rgba(var(--blue-table-bg-rgb), 0.4);
}

/* Column 7 - Benefit to Merchants */
.table thead th:nth-child(7),
.table tbody td:nth-child(7) {
    background-color: rgba(var(--blue-table-bg-rgb), 0.71);
}

/* Column 9 - Integrated Vendors */
.table thead th:nth-child(9),
.table tbody td:nth-child(9) {
    background-color: rgba(var(--darker-blue-table-bg-rgb), 0.3);
}

/* Header border radius - first row data columns only */
.table thead th:nth-child(1) {
    border-radius: var(--radius) 0 0 0;
}

.table thead th:nth-child(3),
.table thead th:nth-child(5),
.table thead th:nth-child(7) {
    border-radius: var(--radius) var(--radius) 0 0;
}

.table thead th:nth-child(9) {
    border-radius: var(--radius) var(--radius) 0 0;
}

/* Body rows */
.table tbody tr {
    min-height: var(--table-row-min-height);
}

/* Body cells */
.table tbody td {
    min-height: var(--table-row-min-height);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    vertical-align: top;
    border-top: 1px solid var(--gray-table-border);
}

/* First column - labels */
.table tbody td:first-of-type {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    text-align: left;
}

/* Other data cells (odd columns, excluding first) */
.table tbody td:nth-child(3),
.table tbody td:nth-child(5),
.table tbody td:nth-child(7),
.table tbody td:nth-child(9) {
    white-space: normal;
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    text-align: left;
}

/* First row - no top border */
.table tbody tr:first-child td {
    border-top: none;
}

/* Last row - no bottom border */
.table tbody tr:last-child td {
    border-bottom: none;
    padding-bottom: calc(var(--table-cell-padding-y) + 15px);
}

.table tbody td:first-child {
    font-size: 16px !important;
}

/* Last row - border radius for data columns */
.table tbody tr:last-child td:nth-child(1) {
    border-radius: 0 0 0 var(--radius);
}

.table tbody tr:last-child td:nth-child(3),
.table tbody tr:last-child td:nth-child(5),
.table tbody tr:last-child td:nth-child(7) {
    border-radius: 0 0 var(--radius) var(--radius);
}

.table tbody tr:last-child td:nth-child(9) {
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Bold cells */
.table .cell-bold,
.table .cell-bold strong {
    font-weight: 700;
}

/* Empty state */
.table td[colspan] {
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    padding: 2rem;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Large screens (1250px and below) */
@media (max-width: 1250px) {
    .table {
        --table-column-gap: 10px;
        --table-cell-padding-y: 12px;
        --table-cell-padding-x: 0.75rem;
        --table-first-col-width: 170px;
    }

    .table .title {
        margin-bottom: 46px;
    }
}

/* Medium-large screens (1100px and below) */
@media (max-width: 1100px) {
    .table {
        --table-column-gap: 8px;
        --table-row-min-height: 50px;
        --table-cell-padding-y: 10px;
        --table-cell-padding-x: 0.6rem;
        --table-first-col-width: 150px;
    }

    .table thead th {
        font-size: 18px;
    }

    .table tbody td:first-of-type {
        font-size: 14px;
    }

    .table tbody td:nth-child(3),
    .table tbody td:nth-child(5),
    .table tbody td:nth-child(7),
    .table tbody td:nth-child(9) {
        font-size: 14px;
    }
}

@media (max-width: 1024px) {
    .table .title {
        margin-bottom: 22px;
    }
}

/* Medium screens (1000px and below) */
@media (max-width: 1000px) {
    .table {
        --table-column-gap: 6px;
        --table-cell-padding-y: 8px;
        --table-cell-padding-x: 0.5rem;
        --table-first-col-width: 130px;
    }
}

/* Small-medium screens (900px and below) */
@media (max-width: 900px) {
    .table {
        --table-column-gap: 5px;
        --table-cell-padding-x: 0.4rem;
        --table-first-col-width: 110px;
    }

    .table thead th {
        font-size: 16px;
        padding: calc(var(--table-cell-padding-y) + 15px) var(--table-cell-padding-x) calc(var(--table-cell-padding-y) + 8px);
    }
}

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .table {
        --table-column-gap: 4px;
        --table-row-min-height: 46px;
        --table-cell-padding-y: 8px;
        --table-cell-padding-x: 0.35rem;
        --table-first-col-width: 90px;
    }
}


/* ============================================
   MOBILE - STACKED CARD LAYOUT (740px and below)
   ============================================ */

@media (max-width: 740px) {
    .table .table-wrapper {
        overflow-x: visible;
        margin: 1rem 0;
    }

    /* Caption takes full width */
    .table caption {
        width: 100vw;
        margin-left: calc(-1 * var(--content-padding));
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
    }

    /* Hide table header */
    .table thead {
        display: none;
    }

    /* Make table elements block-level */
    .table table,
    .table tbody,
    .table tbody tr,
    .table tbody td {
        display: block;
        width: 100%;
    }

    /* Hide gap columns on mobile */
    .table tbody td.gap-col {
        display: none;
    }

    /* Each row becomes a card - base styles */
    .table tbody tr {
        border-radius: var(--radius);
        padding: 16px 20px;
        margin-bottom: 16px;
    }

    /* Card background colors - 6 color loop */
    /* Blue colors: opacity 0.2, 0.4, 0.71 */
    .table tbody tr:nth-child(6n+1) {
        background-color: rgba(var(--blue-table-bg-rgb), 0.2);
    }
    .table tbody tr:nth-child(6n+2) {
        background-color: rgba(var(--blue-table-bg-rgb), 0.4);
    }
    .table tbody tr:nth-child(6n+3) {
        background-color: rgba(var(--blue-table-bg-rgb), 0.71);
    }
    /* Darker blue colors: opacity 0.3, 0.45, 0.6 */
    .table tbody tr:nth-child(6n+4) {
        background-color: rgba(var(--darker-blue-table-bg-rgb), 0.3);
    }
    .table tbody tr:nth-child(6n+5) {
        background-color: rgba(var(--darker-blue-table-bg-rgb), 0.45);
    }
    .table tbody tr:nth-child(6n+6) {
        background-color: rgba(var(--darker-blue-table-bg-rgb), 0.6);
    }

    /* Reset all td backgrounds and styles */
    .table tbody td {
        background: transparent !important;
        padding: 12px 0 !important;
        border-top: none !important;
        border-bottom: 1px solid rgb(224, 224, 224);
        border-radius: 0 !important;
        display: flex;
        justify-content: flex-start;
        text-align: left;
        align-items: flex-start;
        gap: 12px;
        min-height: auto;
        width: 100% !important;
    }

    .table tbody td:last-child {
        border-bottom: none;
        padding-bottom: 15px !important;
    }

    /* First cell (Category) becomes card header */
    .table tbody td:first-child {
        display: block !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--black);
        padding: 19px 0 12px 0 !important;
        margin-bottom: 8px;
        border-bottom: 2px solid rgb(215, 215, 215) !important;
        text-align: left;
    }

    /* Data cells styling - right column */
    .table tbody td:not(:first-child):not(.gap-col) {
        font-size: 14px !important;
        line-height: 1.3em !important;
        white-space: normal;
        padding-top: 14px !important;

    }

    /* Add labels before each data cell using data-label attribute */
    .table tbody td:not(:first-child):not(.gap-col)::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--black);
        font-size: 14px;
        line-height: 1.3;
        flex: 0 0 35%;
        padding-right: 8px;
    }
}


/* ============================================
   EXTRA SMALL MOBILE (450px and below)
   ============================================ */

@media (max-width: 450px) {
    .table tbody tr {
        padding: 12px var(--content-padding);
        margin-bottom: 12px;
    }

    .table tbody td:first-child {
        font-size: 16px !important;
        padding-bottom: 10px !important;
    }

    .table tbody td:not(:first-child):not(.gap-col) {
        flex-direction: column;
        gap: 6px;
    }

    .table tbody td:not(:first-child):not(.gap-col)::before {
        flex: none;
        margin-bottom: 2px;
    }
}

/* table section - end */