/* ==========================================================================
   rtk-comparison-table.css
   Competitor comparison table output by the [competitor_table] shortcode
   on the legacy State pages (functions.php). Row labels and True RTK stay
   fixed; Virtual RTK and competitor columns scroll sideways.
   ========================================================================== */

/* 1) Outer scroll container */
.competitor-table-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-transform: translateZ(0);
    max-width: 100%;
    margin-top: 20px;
}

/* 2) Inner width wrapper */
.competitor-table-wrapper {
    min-width: 1000px;
}

/* 3) Base table */
.competitor-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: auto;
}

/* 4) All cells */
.competitor-table th,
.competitor-table td {
    padding: 10px 15px;
    text-align: left;
    white-space: normal;
    border: 1px solid #ccc;
    background: transparent;
    box-sizing: border-box;
    vertical-align: top;
}

/* 5) Brand column (1st, fixed) */
.competitor-table th.sticky-col:first-child,
.competitor-table td.sticky-col:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    min-width: 180px;
    max-width: 180px;
    background: #f2f2f0 !important;
    z-index: 5;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.competitor-table th.sticky-col:first-child::before,
.competitor-table td.sticky-col:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 6;
}

/* 6) Point One True RTK column (2nd, fixed) */
.competitor-table th.sticky-col:nth-child(2),
.competitor-table td.sticky-col:nth-child(2) {
    position: -webkit-sticky;
    position: sticky;
    left: 180px; /* width of column 1 */
    min-width: 160px;
    max-width: 160px;
    background: var(--color-white-a100) !important;
    z-index: 10;
    box-shadow: 6px 0 10px rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.competitor-table th.sticky-col:nth-child(2) {
    background: var(--color-brand-60) !important;
    color: var(--color-white-a100) !important;
}
.competitor-table th.sticky-col:nth-child(2)::after,
.competitor-table td.sticky-col:nth-child(2)::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 6px;
    height: 100%;
    box-shadow: 6px 0 10px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

/* Point One Virtual RTK is in the scrollable area (3rd column). */
.competitor-table th.pointone-plan-virtual,
.competitor-table td.pointone-plan-virtual {
    min-width: 180px;
    max-width: 220px;
    word-break: normal;
}
.competitor-table th.pointone-plan-virtual {
    background: var(--color-brand-60) !important;
    color: var(--color-white-a100) !important;
}

.competitor-table-availability {
    margin-top: 12px;
    font-size: 0.875rem;
}

/* 7) Remaining competitor columns */
.competitor-table th:not(.sticky-col):not(.pointone-plan-virtual),
.competitor-table td:not(.sticky-col):not(.pointone-plan-virtual) {
    min-width: 150px;
    max-width: 190px;
    word-break: break-word;
}

/* 8) Slimmer scrollbar */
.competitor-table-outer::-webkit-scrollbar {
    height: 6px;
}
.competitor-table-outer::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* 9) Mobile (under 768px) */
@media (max-width: 767px) {
    /* first column */
    .competitor-table th.sticky-col:first-child,
    .competitor-table td.sticky-col:first-child {
        min-width: 120px;
        max-width: 120px;
    }
    /* second column */
    .competitor-table th.sticky-col:nth-child(2),
    .competitor-table td.sticky-col:nth-child(2) {
        left: 120px; /* width of column 1 on mobile */
        min-width: 120px;
        max-width: 120px;
    }
    /* Virtual RTK remains scrollable; protect room for competitor columns. */
    .competitor-table th.pointone-plan-virtual,
    .competitor-table td.pointone-plan-virtual {
        min-width: 145px;
        max-width: 180px;
    }
    /* all competitor columns */
    .competitor-table th:not(.sticky-col):not(.pointone-plan-virtual),
    .competitor-table td:not(.sticky-col):not(.pointone-plan-virtual) {
        min-width: 120px;
        max-width: 160px;
    }
}