/**
 * Weller Hire - Product Specification Table Styling
 * Version: 1.4.0
 */

/* 1. The Wrapper - Unified width and centering to match Video/Text */
.price-table-wrapper {
    display: block !important;
    width: 94% !important;      /* Consistent gap on both sides */
    max-width: 1100px !important; /* Prevents tables getting too wide on desktop */
    margin: 30px auto !important; /* Centers the table */
    overflow-x: auto !important;  /* Essential for mobile swiping */
    -webkit-overflow-scrolling: touch;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    clear: both !important;
}

/* 2. Base Table Styling */
table.seven-column-table, 
table.three-column-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 2px solid #1B62AA !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-family: Arial, sans-serif;
    background-color: #1B62AA !important;
    margin: 0 !important;
}

/* 3. Header Styling (Blue background, Yellow text) */
.seven-column-table th, 
.three-column-table th {
    background-color: #1B62AA !important;
    color: #F9DE2D !important;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 800;
    padding: 12px 15px !important;
    border: none !important;
    box-shadow: inset 0 -4px 0 0 #F9DE2D !important;
    text-align: center;
}

/* 4. First Column "Label" Styling (Light Blue background) */
.seven-column-table td:first-child, 
.three-column-table td:first-child {
    background-color: #f0f4fa !important;
    color: #1B62AA !important;
    font-weight: bold;
    font-size: 13px;
    border-right: 2px solid #1B62AA !important;
    text-align: left !important;
    white-space: nowrap; 
}

/* 5. Data Cell Styling (White background) */
.seven-column-table td, 
.three-column-table td {
    background: #ffffff !important;
    color: #333 !important;
    font-size: 14px;
    padding: 10px 15px !important;
    border: none !important;
    box-shadow: inset 0 -1px 0 0 #eee;
    text-align: center;
}

/* 6. Row Hover Effect */
.seven-column-table tr:hover td {
    background-color: #e6eef7 !important;
}

/* 7. Mobile Font Size Tweak */
@media screen and (max-width: 600px) {
    .seven-column-table td, .three-column-table td,
    .seven-column-table th, .three-column-table th {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
}