/**
 * Rosenberg Product Table — Stylesheet
 *
 * Migrated from Avada Custom CSS and extended.
 * Keeps the original .br-* class names for compatibility,
 * adds .rpt-* classes for new plugin functionality.
 *
 * NOTE: Some values (colors, exact sizes) may need fine-tuning
 * against the live Avada Custom CSS on the server.
 *
 * @version 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (easy to tune per-site)
   ========================================================================== */

:root {
    --rpt-border-color: #d0d0d0;
    --rpt-header-bg: #333;
    --rpt-header-color: #fff;
    --rpt-row-alt-bg: #f9f9f9;
    --rpt-row-hover-bg: #f0f4f8;
    --rpt-expand-bg: #fafafa;
    --rpt-text-color: #333;
    --rpt-link-color: #c00;
    --rpt-link-hover: #900;
    --rpt-btn-primary-bg: #c00;
    --rpt-btn-primary-color: #fff;
    --rpt-btn-secondary-bg: #555;
    --rpt-btn-secondary-color: #fff;
    --rpt-font-size: 14px;
    --rpt-font-family: inherit;
}

/* ==========================================================================
   Table Wrapper — horizontal scroll on overflow
   ========================================================================== */

.rpt-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 20px;
    width: 100%;
}

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

.br-product-table,
.rpt-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: var(--rpt-font-size);
    font-family: var(--rpt-font-family);
    color: var(--rpt-text-color);
    table-layout: auto;
    line-height: 1.4;
}

/* ==========================================================================
   Table Header
   ========================================================================== */

.br-product-table thead,
.rpt-table thead {
    background: var(--rpt-header-bg);
    color: var(--rpt-header-color);
}

.rpt-th {
    padding: 10px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border-bottom: 2px solid var(--rpt-border-color);
}

.rpt-th--image {
    width: 80px;
    min-width: 80px;
}

.rpt-th--title {
    text-align: left;
    min-width: 180px;
}

.rpt-th--more {
    width: 70px;
    min-width: 70px;
}

/* ==========================================================================
   Table Body — Product Rows
   ========================================================================== */

.rpt-product-row {
    border-bottom: 1px solid var(--rpt-border-color);
    transition: background-color 0.15s ease;
}

.rpt-product-row:nth-child(4n+1) {
    background-color: var(--rpt-row-alt-bg);
}

.rpt-product-row:hover {
    background-color: var(--rpt-row-hover-bg);
}

/* ==========================================================================
   Table Cells
   ========================================================================== */

.rpt-cell {
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--rpt-border-color);
    font-size: var(--rpt-font-size);
}

.rpt-cell--image {
    width: 80px;
    padding: 4px 8px;
}

.rpt-cell--title {
    text-align: left;
    font-weight: 500;
    min-width: 180px;
}

.rpt-cell--more {
    width: 70px;
    text-align: center;
}

/* ==========================================================================
   Product Image
   ========================================================================== */

.rpt-product-img,
.br-product-img {
    width: 70px;
    height: auto;
    max-width: 70px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.rpt-cell--image a {
    display: block;
    text-decoration: none;
}

/* ==========================================================================
   Product Title
   ========================================================================== */

.rpt-product-title,
.br-product-title a {
    color: var(--rpt-link-color);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--rpt-font-size);
    line-height: 1.3;
}

.rpt-product-title:hover,
.br-product-title a:hover {
    color: var(--rpt-link-hover);
    text-decoration: underline;
}

/* ==========================================================================
   "More" Toggle Button
   ========================================================================== */

.rpt-more-toggle,
.br-table-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: var(--rpt-btn-primary-bg);
    color: var(--rpt-btn-primary-color);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background-color 0.15s ease;
    white-space: nowrap;
    line-height: 1.2;
}

.rpt-more-toggle:hover {
    background: var(--rpt-link-hover);
}

.rpt-more-toggle:focus-visible {
    outline: 2px solid var(--rpt-btn-primary-bg);
    outline-offset: 2px;
}

.rpt-more-icon {
    font-size: 10px;
    transition: transform 0.2s ease;
    display: inline-block;
}

.rpt-more-toggle.rpt-active .rpt-more-icon {
    transform: rotate(180deg);
}

.rpt-more-toggle.rpt-active .rpt-more-label::after {
    content: none;
}

/* ==========================================================================
   Expandable Details Row
   ========================================================================== */

.rpt-expand-row {
    background: var(--rpt-expand-bg);
    border-bottom: 2px solid var(--rpt-border-color);
}

.rpt-expand-row.rpt-hidden,
.br-hide {
    display: none;
}

.rpt-expand-cell {
    padding: 20px 24px;
}

.rpt-expand-content {
    max-width: 900px;
}

.rpt-short-description {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.7;
}

.rpt-description {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.7;
}

.rpt-description p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Action Buttons (Inquiry / Application Assistance)
   ========================================================================== */

.rpt-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
}

.rpt-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: none;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.rpt-btn--inquiry {
    background: var(--rpt-btn-primary-bg);
    color: var(--rpt-btn-primary-color);
}

.rpt-btn--inquiry:hover {
    background: var(--rpt-link-hover);
    color: var(--rpt-btn-primary-color);
    text-decoration: none;
}

.rpt-btn--assist {
    background: var(--rpt-btn-secondary-bg);
    color: var(--rpt-btn-secondary-color);
}

.rpt-btn--assist:hover {
    background: #444;
    color: var(--rpt-btn-secondary-color);
    text-decoration: none;
}

.rpt-btn:focus-visible {
    outline: 2px solid var(--rpt-btn-primary-bg);
    outline-offset: 2px;
}

/* ==========================================================================
   Flattened Tabs (Single Product)
   ========================================================================== */

.rpt-product-tabs {
    margin-bottom: 30px;
}

.rpt-tab-panel {
    padding: 0 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rpt-border-color);
}

.rpt-tab-panel:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.rpt-tab-panel h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    padding: 0;
    color: var(--rpt-text-color);
}

/* Hide the WC tab navigation if it somehow renders */
.rpt-product-tabs .wc-tabs,
.rpt-product-tabs .tabs {
    display: none !important;
}

/* ==========================================================================
   WooCommerce Integration Overrides
   ========================================================================== */

/* Remove Avada's default product grid gap */
.woocommerce ul.products,
.woocommerce-page ul.products {
    /* Override only when our table is present */
}

/* Ensure our table isn't affected by Avada's flex layout */
.rpt-table-wrap .br-product-table,
.rpt-table-wrap .rpt-table {
    display: table;
}

/* Override any Avada wrappers that may still render */
.fusion-woocommerce-container .rpt-table-wrap {
    width: 100%;
}

/* Single product image sizing on shop page */
.rpt-cell--image .attachment-thumbnail,
.rpt-cell--image .wp-post-image {
    width: 70px;
    height: auto;
    max-width: 70px;
}

/* ==========================================================================
   Sidebar / Layout Adjustments
   ========================================================================== */

/* Ensure sidebar doesn't compress the table too much */
.woocommerce .sidebar .widget {
    /* Sidebar filters (BeRocket) can stay default */
}

/* ==========================================================================
   Responsive — 1600px
   ========================================================================== */

@media (max-width: 1600px) {
    :root {
        --rpt-font-size: 13px;
    }

    .rpt-th {
        padding: 8px 6px;
        font-size: 12px;
    }

    .rpt-cell {
        padding: 7px 6px;
    }
}

/* ==========================================================================
   Responsive — 1400px
   ========================================================================== */

@media (max-width: 1400px) {
    .rpt-product-img,
    .br-product-img {
        width: 60px;
        max-width: 60px;
    }

    .rpt-cell--image {
        width: 68px;
    }

    .rpt-th--image {
        width: 68px;
        min-width: 68px;
    }
}

/* ==========================================================================
   Responsive — 1350px
   ========================================================================== */

@media (max-width: 1350px) {
    .rpt-th {
        padding: 8px 5px;
        font-size: 11px;
    }

    .rpt-cell {
        padding: 6px 5px;
    }

    .rpt-cell--title {
        min-width: 150px;
    }
}

/* ==========================================================================
   Responsive — 1236px
   ========================================================================== */

@media (max-width: 1236px) {
    :root {
        --rpt-font-size: 11px;
    }

    .rpt-product-img,
    .br-product-img {
        width: 50px;
        max-width: 50px;
    }

    .rpt-cell--image {
        width: 58px;
    }

    .rpt-th--image {
        width: 58px;
        min-width: 58px;
    }

    .rpt-more-toggle {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* ==========================================================================
   Responsive — 1140px
   ========================================================================== */

@media (max-width: 1140px) {
    .rpt-cell--title {
        min-width: 120px;
    }

    .rpt-th {
        padding: 6px 4px;
        font-size: 10px;
    }

    .rpt-cell {
        padding: 5px 4px;
    }
}

/* ==========================================================================
   Responsive — 1060px
   ========================================================================== */

@media (max-width: 1060px) {
    .rpt-product-img,
    .br-product-img {
        width: 45px;
        max-width: 45px;
    }

    .rpt-cell--image {
        width: 53px;
    }

    .rpt-th--image {
        width: 53px;
        min-width: 53px;
    }
}

/* ==========================================================================
   Responsive — 900px (tablet)
   ========================================================================== */

@media (max-width: 900px) {
    :root {
        --rpt-font-size: 11px;
    }

    .rpt-table-wrap {
        margin: 0 -15px 20px;
        padding: 0 15px;
    }

    /* Keep table scrollable horizontally */
    .br-product-table,
    .rpt-table {
        min-width: 900px;
    }
}

/* ==========================================================================
   Responsive — 808px
   ========================================================================== */

@media (max-width: 808px) {
    .rpt-expand-cell {
        padding: 15px 16px;
    }

    .rpt-action-buttons {
        flex-direction: column;
    }

    .rpt-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Responsive — 735px (large mobile)
   ========================================================================== */

@media (max-width: 735px) {
    .rpt-table-wrap {
        margin: 0 -10px 20px;
        padding: 0;
    }

    .br-product-table,
    .rpt-table {
        min-width: 800px;
    }

    .rpt-expand-cell {
        padding: 12px;
    }

    .rpt-product-tabs .rpt-tab-panel h2 {
        font-size: 16px;
    }
}

/* ==========================================================================
   Responsive — 480px (small mobile)
   ========================================================================== */

@media (max-width: 480px) {
    .br-product-table,
    .rpt-table {
        min-width: 750px;
    }

    .rpt-product-img,
    .br-product-img {
        width: 40px;
        max-width: 40px;
    }
}

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

@media print {
    .rpt-more-toggle,
    .rpt-action-buttons {
        display: none;
    }

    .rpt-expand-row.rpt-hidden {
        display: table-row;
    }

    .rpt-product-row:hover {
        background: none;
    }
}