/* ============================================================
   BE Responsive Table – Featured Box Style + Hover + Stripes
   ============================================================ */

.be-responsive-table {
    border-radius: 12px;              /* rounded corners */
    overflow: hidden;                 /* header & rows follow rounding */
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    margin-bottom: 2rem;

    /* NEW: gradient header vars (block.js sets these on wrapper inline style) */
    --be-rt-header-start: #008a3f;
    --be-rt-header-end: #027001;
    --be-rt-header-text: #ffffff;
}

/* Make the table fill the wrapper cleanly */
.be-responsive-table table {
    width: 100%;
    border-collapse: collapse;
}

/* Header row uses gradient */
.be-responsive-table thead tr {
    background-image: linear-gradient(90deg, var(--be-rt-header-start), var(--be-rt-header-end));
    color: var(--be-rt-header-text);
}

/* Header cells */
.be-responsive-table thead th {
    padding: 14px 12px;
    font-weight: 700;
    font-size: 1rem;
    border: none !important;                  /* neutralize theme borders */
    border-bottom: 3px solid rgba(0,0,0,0.08);/* slightly thicker divider */
}

/* Body cells */
.be-responsive-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #ededed;
    font-size: 0.97rem;
    vertical-align: top;
    background: #ffffff;                      /* base white for all rows */
}

/* Remove bottom border on last row (desktop intent) */
.be-responsive-table tbody tr:last-child td {
    border-bottom: none;
}

/* ------------------------------------------------------------
   Zebra striping (optional)
   Add class .be-responsive-table--alt-rows on wrapper.
   ------------------------------------------------------------ */
.be-responsive-table--alt-rows tbody tr:nth-child(even) td {
    background: #f7f7f7;     /* soft grey */
}

.be-responsive-table--alt-rows tbody tr:nth-child(odd) td {
    background: #ffffff;     /* keep odd rows clean white */
}

/* ------------------------------------------------------------
   Hover highlighting (desktop / pointer devices)
   ------------------------------------------------------------ */
@media (hover: hover) {
    .be-responsive-table tbody tr:hover td {
        background: #f1faf5;                          /* light green-ish tint */
        transition: background 0.15s ease;
    }
}

/* ===============================
   MOBILE STACKING STYLES
   =============================== */
@media (max-width: 768px) {

    .be-responsive-table table,
    .be-responsive-table thead,
    .be-responsive-table tbody,
    .be-responsive-table th,
    .be-responsive-table td,
    .be-responsive-table tr {
        display: block;
        width: 100%;
    }

    /* Hide header row on mobile; labels come from data-label */
    .be-responsive-table thead {
        display: none;
    }

    /* On mobile, we keep only the outer card.
       Rows themselves don't get extra borders/shadows. */
    .be-responsive-table tbody tr {
        margin-bottom: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        border: none;
    }

    .be-responsive-table td {
        position: relative;
        /* give room for the label strip on the left */
        padding: 14px 12px 14px 52%;
        border-bottom: 1px solid #e5e5e5;
        background: #ffffff;
    }

    /* Re-enable borders that desktop rule removed,
       then only remove for the last cell in the stack. */
    .be-responsive-table tbody tr:last-child td {
        border-bottom: 1px solid #e5e5e5;
    }
    .be-responsive-table tbody tr td:last-child {
        border-bottom: none;
    }

    /* Zebra striping on mobile – tint the value area slightly if desired */
    .be-responsive-table--alt-rows tbody tr:nth-child(even) td {
        background: #f9f9f9;
    }
    .be-responsive-table--alt-rows tbody tr:nth-child(odd) td {
        background: #ffffff;
    }

    /* Label before each stacked cell:
       - uses SAME gradient as header (via CSS vars)
       - white text
       - occupies the left strip of the row
    */
    .be-responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 46%;
        display: flex;
        align-items: center;
        padding: 14px 12px;
        font-weight: 600;

        background-image: linear-gradient(90deg, var(--be-rt-header-start), var(--be-rt-header-end));
        color: var(--be-rt-header-text);
    }

    /* Vertical divider between label strip and value area */
    .be-responsive-table td::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 46%;
        border-left: 1px solid #e5e5e5;  /* same as other borders */
        pointer-events: none;
    }
}

/* ============================================
   BE Responsive Table – Add gap between mobile rows
   ============================================ */
@media (max-width: 768px) {

    /* Add spacing between each stacked row card */
    .be-responsive-table tbody tr {
        margin-bottom: 18px !important; /* nice breathing room */
    }

    /* Optional: reduce padding inside cards for cleaner spacing */
    .be-responsive-table tbody tr td {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Keep last row from having extra gap if desired */
    .be-responsive-table tbody tr:last-child {
        margin-bottom: 0 !important;
    }
}

.be-responsive-table thead tr {
  background-image: linear-gradient(90deg, var(--be-rt-header-start), var(--be-rt-header-end)) !important;
}

.be-responsive-table thead th {
  background: transparent !important;
  color: var(--be-rt-header-text) !important;
}