/* ==========================================================================
   GOM Tools — Advanced Responsive Table widget
   Block: .gtea-table-container / .gtea-table
   Elements: __header, __body, __row, __cell, __header-cell
   Modifiers: --responsive-scroll, --responsive-stacked, --striped
   ==========================================================================
   Border-radius architecture:

     The Elementor `table_border_radius` control writes the corner radius
     directly to `.gtea-table-container`. For the radius to actually clip
     internal cell backgrounds (header bands, striped rows, hover states),
     the container needs `overflow: hidden` and the inner table needs
     `border-collapse: separate; border-spacing: 0;` (per CSS spec,
     `border-radius` is ignored on tables that have `border-collapse:
     collapse` — the previous source of the visual bug).

     The Elementor `table_overflow` control defaults to empty, so no
     `overflow` is written from the panel and the `overflow: hidden`
     declared below takes effect. Users who explicitly need visible
     overflow can flip the control to "Visible" without further changes.
   ========================================================================== */

.gtea-table-container {
    box-sizing: border-box;
    width: 100%;
    position: relative;
    z-index: 1;
    /* CRITICAL: clips internal cell backgrounds to the rounded perimeter
       written by Elementor's `table_border_radius` control. */
    overflow: hidden;
}

.gtea-table-container *,
.gtea-table-container *::before,
.gtea-table-container *::after {
    box-sizing: border-box;
}

.gtea-table {
    width: 100%;
    /* Separate + zero spacing is the only combo where the container's
       border-radius clip renders cleanly for cell backgrounds. The
       Elementor `table_border_collapse` responsive control (default
       "separate") can still flip this back to "collapse" — the
       container clipping continues to work; only the inner cell
       border-merging behavior changes. */
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.gtea-table__header,
.gtea-table__body,
.gtea-table__row,
.gtea-table__header-cell,
.gtea-table__cell {
    margin: 0;
}

.gtea-table__header-cell,
.gtea-table__cell {
    text-align: left;
    vertical-align: middle;
    /* Optional internal grid lines, off by default so existing tables
       keep their previous appearance. Themes / future Elementor
       controls can set the custom property to a real color to draw
       thin separators between cells. */
    border-bottom: 1px solid var(--gtea-table-border-color, transparent);
    border-right:  1px solid var(--gtea-table-border-color, transparent);
}

/* Trim trailing borders on the perimeter so they don't double up with
   the table-level Border group control. */
.gtea-table__row:last-child > .gtea-table__cell,
.gtea-table__row:last-child > .gtea-table__header-cell,
.gtea-table__body  .gtea-table__row:last-child > .gtea-table__cell,
.gtea-table__header .gtea-table__row:last-child > .gtea-table__header-cell {
    border-bottom: none;
}

.gtea-table__cell:last-child,
.gtea-table__header-cell:last-child {
    border-right: none;
}

/* ── Horizontal-scroll mode ─────────────────────────────────────────── */
/*
 * `overflow-x: auto` is enough to scroll horizontally — the parent
 * `overflow: hidden` keeps vertical clipping intact, which still respects
 * the border-radius corners while showing a horizontal scrollbar.
 */
.gtea-table-container--responsive-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gtea-table--responsive-scroll {
    min-width: max-content;
}

/* ── Striped rows (default palette; overridden by Elementor controls) ── */
.gtea-table--striped .gtea-table__row:nth-child(odd) .gtea-table__cell {
    background-color: rgba(0, 0, 0, 0.025);
}

/* ── Stacked label (mobile) — hidden on desktop ─────────────────────── */
.gtea-table--responsive-stacked .gtea-table__cell::before {
    content: attr(data-th);
    display: none;
}

/* ==========================================================================
   Stacked transformation — structural layout shift on mobile.
   Hardcoded breakpoint is intentional: it is the documented behavior of the
   responsive mode, not a per-property responsive value (which would come
   from Elementor controls).
   ========================================================================== */
@media (max-width: 767px) {
    .gtea-table--responsive-stacked,
    .gtea-table--responsive-stacked .gtea-table__header,
    .gtea-table--responsive-stacked .gtea-table__body,
    .gtea-table--responsive-stacked .gtea-table__row,
    .gtea-table--responsive-stacked .gtea-table__header-cell,
    .gtea-table--responsive-stacked .gtea-table__cell {
        display: block;
        width: 100%;
    }

    .gtea-table--responsive-stacked .gtea-table__header {
        display: none;
    }

    .gtea-table--responsive-stacked .gtea-table__row--body {
        margin-bottom: 1rem;
    }

    .gtea-table--responsive-stacked .gtea-table__cell {
        display: flex;
        align-items: center;
        text-align: right;
    }

    .gtea-table--responsive-stacked .gtea-table__cell::before {
        content: attr(data-th);
        display: inline-block;
        flex: 0 0 auto;
        width: 40%;
        font-weight: 700;
        text-align: left;
        padding-right: 1rem;
    }

    .gtea-table--responsive-stacked .gtea-table__cell[data-th=""]::before {
        display: none;
    }
}