/**
 * KK Table Builder - Frontend Styles
 * Author: KK Bhardwaj | bhardwajweb.com
 * Version: 2.0.0
 */

/* Icon font - kept for backward compatibility with existing tables */
@font-face {
    font-family: 'wpsm-icons';
    src: url('../font/wpsm-icons.eot?-jgkfsj');
    src: url('../font/wpsm-icons.eot?#iefix-jgkfsj') format('embedded-opentype'),
         url('../font/wpsm-icons.woff?-jgkfsj') format('woff'),
         url('../font/wpsm-icons.ttf?-jgkfsj') format('truetype'),
         url('../font/wpsm-icons.svg?-jgkfsj#wpsm-icons') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Icons */
.wpsm-comptable i.wpsm-table-icon {
    font-family: 'wpsm-icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wpsm-icon-heart:before   { content: "\e601"; color: #cc0000; font-size: 22px; }
.wpsm-icon-star:before    { content: "\e602"; color: #FFBF00; font-size: 22px; }
.wpsm-icon-star-empty:before { content: "\e607"; color: #FFBF00; font-size: 22px; }
.wpsm-icon-lock:before    { content: "\e600"; font-size: 18px; }
.wpsm-icon-tick:before    { content: "\e603"; color: #06C29F; font-size: 22px; }
.wpsm-icon-cross:before   { content: "\e604"; color: #cc0000; font-size: 22px; }
.wpsm-icon-info:before    { content: "\e605"; color: #13B3E3; font-size: 16px; }
.wpsm-icon-warning:before { content: "\e606"; color: #FF6A00; font-size: 18px; }

/* Table Wrapper */
.wpsm-comptable-wrap,
.kk-ct-wrap {
    margin: 25px 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table Base */
.wpsm-comptable,
.kk-ct-table {
    border-collapse: separate;
    margin: 0;
    width: 100%;
    border-spacing: 0;
    max-width: 100%;
    border: 1px solid transparent;
    table-layout: auto;
}

.wpsm-comptable th,
.wpsm-comptable td {
    padding: 15px;
    box-sizing: border-box;
}

/* Table Header */
.wpsm-comptable th {
    border-right: 1px solid rgba(255,255,255,0.15);
    text-align: left;
    font-weight: 700;
    border: none;
    color: #fff;
}

/* Table Cells */
.wpsm-comptable td {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-width: 0 1px 1px 0;
    color: #111;
    min-width: 120px;
    vertical-align: middle;
    position: relative;
}

.wpsm-comptable.center-table-align td,
.wpsm-comptable.center-table-align th {
    text-align: center;
    vertical-align: middle;
}

.wpsm-comptable td ul li,
.wpsm-comptable td ul {
    margin: 0;
    list-style: disc inside none;
}

.wpsm-comptable td:first-child {
    border-left-width: 1px;
}

.wpsm-comptable td img {
    max-width: 250px;
    max-height: 250px;
    padding: 15px;
}

/* Hover Effects */
.wpsm-comptable td:hover,
.wpsm-comptable td.betterhover,
.wpsm-comptable tr:hover td {
    background-color: #f8f8f8;
}

/* Sub-headers */
.wpsm-comptable .subheader td {
    font-weight: 600;
}

/* First Column Highlight */
.hover-col1 tr td:first-child {
    background-color: #f8f8f8;
    min-width: 140px;
    text-align: left;
}

/* Buttons inside tables */
.wpsm-comptable td .wpsm-button {
    margin: 10px 15px;
    white-space: nowrap;
}

/* ============ Color Schemes ============ */
.wpsm-thead-default th  { background-color: #707070; color: #fff; border-color: #f8f8f8; }
.wpsm-thead-default th:last-child { border-right-color: #707070; }

.wpsm-thead-black th    { background-color: #000; color: #fff; border-color: #e2e2e2; }
.wpsm-thead-black th:last-child { border-right-color: #000; }

.wpsm-thead-yellow th   { background-color: #fd0; color: #000; border-color: #e2e2e2; }
.wpsm-thead-yellow th:last-child { border-right-color: #fd0; }

.wpsm-thead-blue th     { background-color: #00aae9; color: #fff; border-color: #e2e2e2; }
.wpsm-thead-blue th:last-child { border-right-color: #00aae9; }

.wpsm-thead-red th      { background-color: #dd0007; color: #fff; border-color: #e2e2e2; }
.wpsm-thead-red th:last-child { border-right-color: #dd0007; }

.wpsm-thead-green th    { background-color: #77bb0f; color: #fff; border-color: #e2e2e2; }
.wpsm-thead-green th:last-child { border-right-color: #77bb0f; }

.wpsm-thead-orange th   { background-color: #fb7203; color: #fff; border-color: #e2e2e2; }
.wpsm-thead-orange th:last-child { border-right-color: #fb7203; }

.wpsm-thead-purple th   { background-color: #662d91; color: #fff; border-color: #e2e2e2; }
.wpsm-thead-purple th:last-child { border-right-color: #662d91; }

/* Sub-header backgrounds */
.wpsm-comptable .subheader td:first-child,
.hover-col1 .subheader td:first-child {
    background-color: #eaeaea;
}

/* Featured Column / Row Badges */
.wpsm-comptable td.editor_selected_col,
.wpsm-comptable th.editor_selected_col {
    border-left: 3px solid #77B21D;
    border-right: 3px solid #77B21D;
}

.wpsm-comptable th.editor_selected_col {
    background-color: #77B21D !important;
    color: #fff !important;
}

.wpsm-comptable tr:last-child td.editor_selected_col {
    border-bottom: 3px solid #77B21D;
}

.wpsm-comptable .editor_selected_row td:first-child  { border-left: 3px solid #77B21D; }
.wpsm-comptable .editor_selected_row td:last-child   { border-right: 3px solid #77B21D; }
.wpsm-comptable .editor_selected_row td:not(.st-key):not(.st-val) {
    border-bottom: 3px solid #77B21D;
    border-top: 3px solid #77B21D;
}

/* Progress bars inside tables */
.wpsm-comptable .wpsm-bar,
.wpsm-comptable .wpsm-bar-title span,
.wpsm-comptable .wpsm-bar-bar,
.wpsm-comptable .wpsm-bar-percent {
    height: 20px;
    line-height: 20px;
}

.wpsm-comptable .wpsm-bar {
    margin-bottom: 10px;
}

.wpsm-comptable .wpsm-bar-title span {
    padding: 0 12px;
}

/* ============ Responsive - Horizontal Scroll ============ */
@media (max-width: 800px) {
    .wpsm-comptable-wrap,
    .kk-ct-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
    }

    .wpsm-comptable {
        min-width: 600px;
    }

    .wpsm-comptable td img {
        max-width: 120px;
        max-height: 120px;
        padding: 5px;
    }

    .hover-col1 tr:hover {
        background-color: #f8f8f8;
    }
}

/* ============ Lazy Loading ============ */
.kk-ct-lazy-loader {
    text-align: center;
    padding: 20px 15px;
    color: #787c82;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
}

.kk-ct-lazy-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #e0e0e0;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: kk-ct-spin 0.7s linear infinite;
}

.kk-ct-lazy-loader:not(.kk-ct-loading) .kk-ct-lazy-spinner {
    animation: kk-ct-spin 1.5s linear infinite;
}

.kk-ct-loading .kk-ct-lazy-spinner {
    border-top-color: #2271b1;
    animation: kk-ct-spin 0.5s linear infinite;
}

@keyframes kk-ct-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fade-in animation for lazy loaded rows */
.wpsm-comptable tbody tr {
    transition: opacity 0.3s ease;
}

/* Hide any old stacktable clones that might exist in cached pages */
.stacktable.small-only,
table.stacktable:not(.large-only) {
    display: none !important;
}