/* =========================================
   SPECS TABLE STYLING
   ========================================= */

.specs-section .table-wrapper {
    width: 100%;
    overflow-x: auto;
    position: relative;
    border: 1px solid #D9D9D8;
    background: #fff;
}

/* Table Reset */
.specs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    /* Removed min-width here, we control it via cells now */
}

/* Common Cell Styling */
.specs-table th,
.specs-table td {
    padding: 12px 16px;
    text-align: center;
    font-size: var(--step--2);
    line-height: 1.4;
    vertical-align: middle;

    border-bottom: 1px solid #D9D9D8;
    border-right: none;
    border-left: none;
    border-top: none;

    background-clip: padding-box;
    box-sizing: border-box;
}

/* =========================================
   COLUMN WIDTH CONTROL (New)
   ========================================= */

/* 1. Sticky First Column (Labels) */
.specs-table tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    width: 150px;
    min-width: 150px; /* Hard set width */
    max-width: 150px;
    text-align: left;
    font-weight: 600;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
    /* Colors handled in row sections below */
}

/* 2. Data Columns (Everything else) */
/* This forces them all to be the same size */
.specs-table th:not(:first-child),
.specs-table td:not(:first-child) {
    width: 220px;      /* Desired width */
    min-width: 220px;  /* Force scroll if screen is small */
    max-width: 220px;  /* Keep them equal */
    white-space: normal; /* Allow wrapping text */
}

/* Remove border from very bottom row */
.specs-table tbody tr:last-child th,
.specs-table tbody tr:last-child td {
    border-bottom: none;
}

/* =========================================
   1. THE RED TOP BAR (Header Row 1)
   ========================================= */
.specs-table thead tr:first-child th,
.specs-table thead tr:first-child td {
    background-color: #ed1d23;
    color: #FFFFFF;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.specs-table .checkbox-cell {
    text-align: center;
    position: relative;
    vertical-align: middle;
}

/* Top Left Corner Sticky Fix */
.specs-table thead tr:first-child th:first-child {
    background-color: #ed1d23;
    z-index: 20;
    box-shadow: none;
}

/* =========================================
   2. MODEL & PART NUMBER ROWS (Rows 2 & 3)
   ========================================= */
.specs-table thead tr:nth-child(2) th,
.specs-table thead tr:nth-child(2) td,
.specs-table thead tr:nth-child(3) th,
.specs-table thead tr:nth-child(3) td {
    background-color: #FFFFFF;
    color: #222;
}

.specs-table thead tr:nth-child(2) td strong {
    font-size: var(--step--2);
}

/* =========================================
   SCROLLBAR STYLING
   ========================================= */

/* Firefox (supports standard property) */
.specs-section .table-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #ed1d23 #f0f0f0;
}

/* Webkit Browsers (Chrome, Safari, Edge) */
.specs-section .table-wrapper::-webkit-scrollbar {
    height: 8px; /* Height for horizontal scrollbar */
    width: 8px;  /* Width for vertical scrollbar (if ever needed) */
}

.specs-section .table-wrapper::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.specs-section .table-wrapper::-webkit-scrollbar-thumb {
    background-color: #ed1d23; /* Your Red */
    border-radius: 4px;
}

.specs-section .table-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #c41217; /* Darker red on hover */
}

/* =========================================
   3. ALTERNATING ROWS (Body)
   ========================================= */

/* Odd Rows - White */
.specs-table tbody tr:nth-child(odd) th,
.specs-table tbody tr:nth-child(odd) td {
    background-color: #FFFFFF;
}

/* Even Rows - Grey */
.specs-table tbody tr:nth-child(even) th,
.specs-table tbody tr:nth-child(even) td {
    background-color: #F8F8F7;
}

/* =========================================
   5. SELECTED COLUMN (Red Dashed Border)
   ========================================= */

/* General Selected Cell */
.specs-table tbody td.is-selected,
.specs-table thead td.is-selected {
    border-left: 1px dashed #ed1d23 !important;
    border-right: 1px dashed #ed1d23 !important;
    position: relative;
    z-index: 5;
}

/* Top Cell (Header Row 1) - White Dashed on Red */
.specs-table thead tr:first-child td.is-selected {
    border-top: 1px dashed #FFFFFF !important;
    border-left: 1px dashed #FFFFFF !important;
    border-right: 1px dashed #FFFFFF !important;
    border-bottom: none !important;
}

/* Bottom Cell (Last Row) */
.specs-table tbody tr:last-child td.is-selected {
    border-bottom: 1px dashed #ed1d23 !important;
}

/* =========================================
   6. CUSTOM "X" CHECKBOX
   ========================================= */

/* Hide the default browser checkbox */
.specs-table input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 22px;
    height: 22px;

    background-color: transparent;
    border: 2px solid #FFFFFF; /* White border */
    border-radius: 4px; /* Optional: Slight rounded corners */

    cursor: pointer;
    position: relative;
    vertical-align: bottom; /* Aligns nicely in the cell */
    outline: none;
}

/* Create the X using pseudo-elements */
.specs-table input[type="checkbox"]::before,
.specs-table input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;  /* Size of the X relative to box */
    height: 3px; /* Thickness of the X lines */
    background-color: #FFFFFF;

    /* Center and rotate */
    transform-origin: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.1s ease;
}

/* Line 1 of X */
.specs-table input[type="checkbox"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Line 2 of X */
.specs-table input[type="checkbox"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Show X when checked */
.specs-table input[type="checkbox"]:checked::before,
.specs-table input[type="checkbox"]:checked::after {
    opacity: 1;
}

/* Optional: Hover state for the box */
.specs-table input[type="checkbox"]:hover {
    background-color: rgba(255,255,255,0.1);
}