/* Comparison Table Block Styles - Theme Override */

/* Reset och isolera tabellen från tema-CSS */
.comparison-table-block {
    max-width: 100% !important;
    margin: 2rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
    line-height: 1.5 !important;
}

.comparison-table-block * {
    box-sizing: border-box !important;
}

.comparison-table-title {
    text-align: center !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    color: #1a1a1a !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-family: inherit !important;
}

.comparison-table-intro {
    text-align: center !important;
    color: #666 !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    font-weight: normal !important;
    font-family: inherit !important;
}

.comparison-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.comparison-table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    min-width: 800px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    font-family: inherit !important;
}

.comparison-table thead {
    background-color: #f8f9fa !important;
    border: none !important;
}

.comparison-table thead tr {
    background-color: #f8f9fa !important;
    border: none !important;
}

.comparison-table th {
    padding: 1rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #333 !important;
    border: none !important;
    border-bottom: 2px solid #e0e0e0 !important;
    cursor: pointer !important;
    user-select: none !important;
    white-space: nowrap !important;
    background: #f8f9fa !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.comparison-table th.sortable:hover {
    background-color: #e9ecef !important;
}

.comparison-table th.sorted-asc::after {
    content: ' ▲' !important;
    font-size: 0.7rem !important;
    color: #007bff !important;
}

.comparison-table th.sorted-desc::after {
    content: ' ▼' !important;
    font-size: 0.7rem !important;
    color: #007bff !important;
}

.comparison-table tbody {
    background: #fff !important;
    border: none !important;
}

.comparison-table tbody tr {
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    transition: background-color 0.2s !important;
    background: #fff !important;
}

.comparison-table tbody tr:hover {
    background-color: #f8f9fa !important;
}

.comparison-table tbody tr:last-child {
    border-bottom: none !important;
}

.comparison-table td {
    padding: 1rem !important;
    font-size: 0.9rem !important;
    color: #333 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.5 !important;
    vertical-align: top !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.comparison-table .product-cell {
    min-width: 200px !important;
    padding: 1rem !important;
}

.comparison-table .product-name {
    font-weight: 600 !important;
    margin: 0 0 0.25rem 0 !important;
    padding: 0 !important;
    color: #1a1a1a !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    display: block !important;
}

.comparison-table .product-brand {
    font-size: 0.85rem !important;
    color: #666 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal !important;
    line-height: 1.3 !important;
    display: block !important;
}

.comparison-table .check-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

.comparison-table .checkmark {
    color: #28a745 !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Responsive Design - Scrollable Table on Mobile */
@media screen and (max-width: 768px) {
    .comparison-table-block {
        padding: 0 !important;
        margin: 1.5rem 0 !important;
    }

    .comparison-table-wrapper {
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        /* Gradient overlay to indicate scrollability */
        background: linear-gradient(to right, white 30%, rgba(255,255,255,0)),
                    linear-gradient(to left, white 30%, rgba(255,255,255,0)) 100% 0,
                    linear-gradient(to right, rgba(0,0,0,0.15), rgba(255,255,255,0)),
                    linear-gradient(to left, rgba(0,0,0,0.15), rgba(255,255,255,0)) 100% 0 !important;
        background-repeat: no-repeat !important;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100% !important;
        background-attachment: local, local, scroll, scroll !important;
    }

    .comparison-table {
        min-width: max-content !important;
        width: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        display: table !important;
    }

    .comparison-table thead {
        display: table-header-group !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #f8f9fa !important;
    }

    .comparison-table thead tr {
        display: table-row !important;
    }

    .comparison-table th {
        padding: 0.875rem 1rem !important;
        font-size: 0.8125rem !important;
        white-space: nowrap !important;
        position: relative !important;
        min-width: 100px !important;
        background: #f8f9fa !important;
        border-bottom: 2px solid #e0e0e0 !important;
    }

    /* Sticky first column (Product) */
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        position: sticky !important;
        left: 0 !important;
        z-index: 20 !important;
        background: #fff !important;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05) !important;
    }

    .comparison-table th:first-child {
        background: #f8f9fa !important;
        z-index: 30 !important;
        min-width: 180px !important;
    }

    .comparison-table tbody {
        display: table-row-group !important;
    }

    .comparison-table tbody tr {
        display: table-row !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .comparison-table tbody tr:hover {
        background-color: #f8f9fa !important;
    }

    .comparison-table tbody tr:hover td:first-child {
        background-color: #f8f9fa !important;
    }

    .comparison-table td {
        display: table-cell !important;
        padding: 1rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        border-bottom: 1px solid #e0e0e0 !important;
        min-width: 100px !important;
    }

    .comparison-table .product-cell {
        min-width: 180px !important;
        white-space: normal !important;
        padding: 1rem !important;
    }

    .comparison-table .product-name {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.25rem !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    .comparison-table .product-brand {
        font-size: 0.8125rem !important;
        color: #666 !important;
        display: block !important;
    }

    .comparison-table .check-cell {
        text-align: center !important;
        min-width: 90px !important;
    }

    .comparison-table .checkmark {
        font-size: 1.3rem !important;
        color: #28a745 !important;
    }

    .comparison-table-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0 1rem !important;
    }

    .comparison-table-intro {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
        padding: 0 1rem !important;
    }

    /* Touch-friendly sorting indicators */
    .comparison-table th.sortable {
        cursor: pointer !important;
        user-select: none !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }

    .comparison-table th.sortable:active {
        background-color: #e9ecef !important;
    }
}

@media screen and (max-width: 480px) {
    .comparison-table-block {
        margin: 1.5rem 0 !important;
    }

    .comparison-table-title {
        font-size: 1.25rem !important;
        padding: 0 0.75rem !important;
    }

    .comparison-table-intro {
        font-size: 0.8125rem !important;
        padding: 0 0.75rem !important;
    }

    .comparison-table th {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.75rem !important;
        min-width: 90px !important;
    }

    .comparison-table th:first-child {
        min-width: 160px !important;
    }

    .comparison-table td {
        padding: 0.875rem !important;
        font-size: 0.8125rem !important;
        min-width: 90px !important;
    }

    .comparison-table .product-cell {
        min-width: 160px !important;
        padding: 0.875rem !important;
    }

    .comparison-table .product-name {
        font-size: 0.875rem !important;
    }

    .comparison-table .product-brand {
        font-size: 0.75rem !important;
    }

    .comparison-table .check-cell {
        min-width: 80px !important;
    }

    .comparison-table .checkmark {
        font-size: 1.2rem !important;
    }
}

/* Extra specificity för att överskrida tema-styles */
.wp-block-comparison-table-block .comparison-table-block,
.entry-content .comparison-table-block,
article .comparison-table-block,
main .comparison-table-block {
    max-width: 100% !important;
    margin: 2rem 0 !important;
}

.wp-block-comparison-table-block .comparison-table,
.entry-content .comparison-table,
article .comparison-table,
main .comparison-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #fff !important;
}

.wp-block-comparison-table-block .comparison-table th,
.entry-content .comparison-table th,
article .comparison-table th,
main .comparison-table th {
    background-color: #f8f9fa !important;
    padding: 1rem !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.wp-block-comparison-table-block .comparison-table td,
.entry-content .comparison-table td,
article .comparison-table td,
main .comparison-table td {
    padding: 1rem !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Reset vanliga tema-störningar */
.comparison-table-block table,
.comparison-table-block th,
.comparison-table-block td {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.comparison-table-block a {
    text-decoration: none !important;
}

/* Wrapper styles - simplified to avoid conflicts */
.comparison-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Basic table reset */
.comparison-table-wrapper table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Reapply our table styles */
.comparison-table-wrapper .comparison-table {
    width: 100% !important;
    border-collapse: collapse !important;
    min-width: 800px !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
    font-size: 16px !important;
}

.comparison-table-wrapper .comparison-table thead {
    background-color: #f8f9fa !important;
}

.comparison-table-wrapper .comparison-table th {
    padding: 1rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #333 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    background: #f8f9fa !important;
}

.comparison-table-wrapper .comparison-table td {
    padding: 1rem !important;
    font-size: 0.9rem !important;
    color: #333 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.comparison-table-wrapper .comparison-table tbody tr:last-child td {
    border-bottom: none !important;
}