/**
 * Information Table Frontend Styles
 *
 * Styles for information tables displayed on the frontend.
 * Supports multiple header layouts: top, left, both, or none.
 *
 * @package ReviewPro
 * @since 1.2.0
 */

/* ===================================
   Base Table Wrapper
   =================================== */

.rp-info-table-wrapper {
    margin: 2em 0;
    clear: both;
}

.rp-table-description {
    margin: 0 0 1em 0;
    color: #666;
    font-size: 0.95em;
    line-height: 1.6;
}

.rp-table-footer {
    margin: 1em 0 0 0;
    color: #666;
    font-size: 0.9em;
    line-height: 1.6;
    font-style: italic;
}

.rp-table-scroll-container {
    overflow-x: auto;
    margin: 0 0 1em 0;
}

/* ===================================
   Base Table Styles
   =================================== */

.rp-info-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.95em;
}

.rp-info-table th,
.rp-info-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #ddd;
}

.rp-info-table th {
    font-weight: 600;
    background: #f8f9fa;
    color: #333;
}

.rp-info-table td {
    background: #fff;
}

/* ===================================
   Layout Variations
   =================================== */

/* Compact Layout */
.rp-info-table-layout-compact th,
.rp-info-table-layout-compact td {
    padding: 8px 12px;
    font-size: 0.9em;
}

/* Spacious Layout */
.rp-info-table-layout-spacious th,
.rp-info-table-layout-spacious td {
    padding: 16px 20px;
}

/* ===================================
   Header Layout Variations
   =================================== */

/* Headers on Top (Default) */
.rp-info-table-header-top thead th {
    background: #2271b1;
    color: #fff;
    border-color: #135e96;
}

/* Headers on Left */
.rp-info-table-header-left tbody th {
    background: #2271b1;
    color: #fff;
    border-color: #135e96;
    width: 30%;
    font-weight: 600;
}

/* Headers on Top & Left (Both) */
.rp-info-table-header-both thead th,
.rp-info-table-header-both tbody th {
    background: #2271b1;
    color: #fff;
    border-color: #135e96;
}

.rp-info-table-header-both tbody th {
    width: 25%;
}

/* No Headers */
.rp-info-table-header-none td {
    font-weight: normal;
}

/* ===================================
   Style Variations
   =================================== */

/* Modern Style */
.rp-info-table-style-modern {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.rp-info-table-style-modern th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.rp-info-table-style-modern.rp-info-table-header-left tbody th,
.rp-info-table-style-modern.rp-info-table-header-both tbody th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Minimal Style */
.rp-info-table-style-minimal {
    border: none;
}

.rp-info-table-style-minimal th,
.rp-info-table-style-minimal td {
    border: none;
    border-bottom: 1px solid #eee;
}

.rp-info-table-style-minimal th {
    background: transparent;
    color: #2271b1;
    border-bottom: 2px solid #2271b1;
}

.rp-info-table-style-minimal.rp-info-table-header-left tbody th {
    background: transparent;
    color: #2271b1;
    border-right: 2px solid #2271b1;
    border-bottom: 1px solid #eee;
}

/* Dark Style */
.rp-info-table-style-dark {
    background: #1e1e1e;
    color: #e0e0e0;
}

.rp-info-table-style-dark th {
    background: #2d2d2d;
    color: #fff;
    border-color: #404040;
}

.rp-info-table-style-dark td {
    background: #1e1e1e;
    border-color: #404040;
}

.rp-info-table-style-dark.rp-info-table-header-left tbody th,
.rp-info-table-style-dark.rp-info-table-header-both tbody th {
    background: #2d2d2d;
}

/* ===================================
   Table Options
   =================================== */

/* Striped Rows */
.rp-info-table.rp-table-striped tbody tr:nth-child(even) td {
    background: #f9f9f9;
}

.rp-info-table-style-dark.rp-table-striped tbody tr:nth-child(even) td {
    background: #252525;
}

/* Bordered */
.rp-info-table.rp-table-bordered {
    border: 2px solid #ddd;
}

.rp-info-table-style-dark.rp-table-bordered {
    border-color: #404040;
}

/* Hover Effect */
.rp-info-table.rp-table-hover tbody tr:hover td {
    background: #f0f7ff;
}

.rp-info-table-style-dark.rp-table-hover tbody tr:hover td {
    background: #2d2d2d;
}

/* ===================================
   Responsive Mode
   =================================== */

@media screen and (max-width: 768px) {
    .rp-info-table.rp-table-responsive {
        border: 0;
    }

    .rp-info-table.rp-table-responsive thead {
        display: none;
    }

    .rp-info-table.rp-table-responsive tbody th {
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #ddd;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .rp-info-table.rp-table-responsive tr {
        display: block;
        margin-bottom: 2em;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
    }

    .rp-info-table.rp-table-responsive td {
        display: flex;
        align-items: flex-start;
        padding: 12px;
        border: none;
        border-bottom: 1px solid #eee;
        text-align: left;
    }

    .rp-info-table.rp-table-responsive td:last-child {
        border-bottom: none;
    }

    .rp-info-table.rp-table-responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 1em;
        min-width: 100px;
        flex-shrink: 0;
        color: #2271b1;
    }

    /* Header on left - show as regular table on mobile */
    .rp-info-table.rp-table-responsive.rp-info-table-header-left tbody th {
        display: table-cell;
        width: 40%;
    }

    .rp-info-table.rp-table-responsive.rp-info-table-header-left td {
        display: table-cell;
    }

    .rp-info-table.rp-table-responsive.rp-info-table-header-left td::before {
        content: none;
    }
}

/* ===================================
   Block Alignment Support
   =================================== */

.wp-block-reviewpro-information-table {
    margin: 1.5em 0;
}

.wp-block-reviewpro-information-table.alignwide {
    max-width: var(--wp--style--global--wide-size, 1200px);
}

.wp-block-reviewpro-information-table.alignfull {
    max-width: none;
    width: 100%;
}

.wp-block-reviewpro-information-table.alignfull .rp-info-table-wrapper {
    padding: 0 2em;
}

/* ===================================
   Custom Label Cells
   =================================== */

/* Label cells that are marked by user (not part of standard header layout) */
.rp-info-table th.rp-label-cell,
.rp-info-table td.rp-label-cell {
    font-weight: 600;
    background: #2271b1;
    color: #fff;
    border-color: #135e96;
}

/* Style overrides for different table styles */
.rp-info-table-style-modern th.rp-label-cell,
.rp-info-table-style-modern td.rp-label-cell {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

.rp-info-table-style-minimal th.rp-label-cell,
.rp-info-table-style-minimal td.rp-label-cell {
    background: transparent;
    color: #2271b1;
    border-bottom: 2px solid #2271b1;
}

.rp-info-table-style-dark th.rp-label-cell,
.rp-info-table-style-dark td.rp-label-cell {
    background: #2d2d2d;
    color: #fff;
    border-color: #404040;
}

/* ===================================
   Content Formatting Inside Cells
   =================================== */

.rp-info-table td strong,
.rp-info-table td b {
    font-weight: 600;
    color: #000;
}

.rp-info-table-style-dark td strong,
.rp-info-table-style-dark td b {
    color: #fff;
}

.rp-info-table td em,
.rp-info-table td i {
    font-style: italic;
}

.rp-info-table td a {
    color: #2271b1;
    text-decoration: underline;
}

.rp-info-table td a:hover {
    color: #135e96;
}

.rp-info-table-style-dark td a {
    color: #7ab4ff;
}

.rp-info-table-style-dark td a:hover {
    color: #9ec9ff;
}

/* ===================================
   Print Styles
   =================================== */

@media print {
    .rp-info-table-wrapper {
        page-break-inside: avoid;
    }

    .rp-info-table {
        border: 1px solid #000;
    }

    .rp-info-table th {
        background: #f0f0f0 !important;
        color: #000 !important;
    }

    .rp-info-table td {
        background: #fff !important;
    }
}