/* ============================================================
   Firebrand Table  |  fbt-style.css
   ============================================================ */

/* ── Custom property defaults ──────────────────────────────────────────────── */
.fbt-outer {
    --fbt-header-bg:        #174044;
    --fbt-header-fg:        #ffffff;
    --fbt-row-bg:           #ffffff;
    --fbt-outer-border:     #d0cdc8;
    --fbt-outer-border-w:   1px;
    --fbt-border:           #d0cdc8;
    --fbt-border-w:         1px;
    --fbt-feat-start:       #fff2e8;
    --fbt-feat-end:         #fffcfa;
    --fbt-feat-accent:      #ff5500;
    --fbt-btn-bg:           #ff5500;
    --fbt-btn-fg:           #ffffff;
    --fbt-btn-hover-bg:     #174044;
    --fbt-btn-hover-fg:     #ffffff;
    --fbt-cell-pad:         16px;
    --fbt-radius:           12px;
    --fbt-btn-radius:       6px;
    position: relative;
}

/* ── Scroll wrapper — outer border + rounded corners clip ──────────────────── */
.fbt-scroll-wrap {
    border-radius: var(--fbt-radius);
    overflow: hidden !important;
    border: var(--fbt-outer-border-w) solid var(--fbt-outer-border);
}

/* ── Scroll inner — horizontal scrolling ──────────────────────────────────── */
.fbt-scroll-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.15) transparent;
    font-size: 0; /* collapse whitespace / wpautop-injected empty elements */
    line-height: 0;
}
/* Reset text sizing for the actual table */
.fbt-scroll-inner .fbt-table {
    font-size: initial;
    line-height: initial;
}
/* Hide any non-table elements injected by WordPress (e.g. empty <p> from wpautop) */
.fbt-scroll-inner > :not(.fbt-table) {
    display: none !important;
}
.fbt-scroll-inner::-webkit-scrollbar        { height: 4px; }
.fbt-scroll-inner::-webkit-scrollbar-track  { background: transparent; }
.fbt-scroll-inner::-webkit-scrollbar-thumb  { background: rgba(0,0,0,.15); border-radius: 4px; }

/* ── Table base ────────────────────────────────────────────────────────────── */
.fbt-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    table-layout: auto;
}

/* ── Header row ────────────────────────────────────────────────────────────── */
.fbt-row--header {
    background-color: var(--fbt-header-bg);
}

.fbt-th,
.fbt-th--first {
    padding: var(--fbt-cell-pad) calc(var(--fbt-cell-pad) * 1.1);
    text-align: left;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fbt-header-fg) !important;
    background-color: var(--fbt-header-bg) !important;
    white-space: nowrap;
    border: none;
    border-bottom: var(--fbt-border-w) solid rgba(255,255,255,0.15);
    vertical-align: middle;
}

/* Column dividers between non-first header cells */
.fbt-th {
    border-left: var(--fbt-border-w) solid rgba(255,255,255,0.15);
}

/* Header sub-text */
.fbt-th-sub {
    display: block;
    font-size: 0.8em;
    font-weight: 400;
    opacity: 0.65;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 3px;
    white-space: normal;
}

/* ── Data cells ────────────────────────────────────────────────────────────── */
.fbt-td,
.fbt-td--first {
    padding: var(--fbt-cell-pad) calc(var(--fbt-cell-pad) * 1.1);
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: inherit;
    background-color: var(--fbt-row-bg);
    border: none;
    border-bottom: var(--fbt-border-w) solid var(--fbt-border);
    vertical-align: middle;
}

/* Column dividers between non-first body cells */
.fbt-td {
    border-left: var(--fbt-border-w) solid var(--fbt-border);
}

/* No border on last row */
.fbt-table tr:last-child .fbt-td,
.fbt-table tr:last-child .fbt-td--first {
    border-bottom: none;
}

/* First column: Noto Serif */
.fbt-td--first {
    font-family: 'Noto Serif', serif;
    font-weight: 400;
    font-size: 16px;
}

/* Sub-text in text cells */
.fbt-subtext {
    display: block;
    font-size: 0.8em;
    opacity: 0.65;
    margin-top: 3px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* ── Alternating row background ────────────────────────────────────────────── */
.fbt-outer--alt .fbt-table tbody tr:nth-child(even) .fbt-td,
.fbt-outer--alt .fbt-table tr:nth-child(even) .fbt-td {
    background-color: var(--fbt-row-alt-bg, transparent);
}

/* ── Featured row ──────────────────────────────────────────────────────────── */
.fbt-row--featured {
    background: linear-gradient(
        to right,
        var(--fbt-feat-start, #fff2e8),
        var(--fbt-feat-end,   #fffcfa)
    );
}

.fbt-row--featured .fbt-td,
.fbt-row--featured .fbt-td--first {
    background-color: transparent;
}

/* ── Pill / Badge ──────────────────────────────────────────────────────────── */
.fbt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid var(--pill-border, var(--pill-fg, #174044));
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--pill-bg, #ddf0ec);
    color: var(--pill-fg, #174044);
}

.fbt-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--pill-fg, #174044);
    flex-shrink: 0;
}

/* ── Icon / Image cell ──────────────────────────────────────────────────────── */
.fbt-icon-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.fbt-icon-img  { display: block; height: auto; max-width: 100%; }
.fbt-icon-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 11px;
    opacity: 0.75;
    text-align: center;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.fbt-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--fbt-btn-radius, 6px);
    background-color: var(--fbt-btn-bg, #ff5500);
    color: var(--fbt-btn-fg, #ffffff) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 13px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
    cursor: pointer;
}
.fbt-btn:hover,
.fbt-btn:focus {
    background-color: var(--fbt-btn-hover-bg, #174044);
    color: var(--fbt-btn-hover-fg, #ffffff) !important;
    text-decoration: none !important;
}

/* ── Column-count visibility rules ─────────────────────────────────────────── */
.fbt-outer[data-cols="2"] .fbt-table th:nth-child(n+3),
.fbt-outer[data-cols="2"] .fbt-table td:nth-child(n+3) { display: none; }

.fbt-outer[data-cols="3"] .fbt-table th:nth-child(n+4),
.fbt-outer[data-cols="3"] .fbt-table td:nth-child(n+4) { display: none; }

.fbt-outer[data-cols="4"] .fbt-table th:nth-child(n+5),
.fbt-outer[data-cols="4"] .fbt-table td:nth-child(n+5) { display: none; }

.fbt-outer[data-cols="5"] .fbt-table th:nth-child(n+6),
.fbt-outer[data-cols="5"] .fbt-table td:nth-child(n+6) { display: none; }

.fbt-outer[data-cols="6"] .fbt-table th:nth-child(n+7),
.fbt-outer[data-cols="6"] .fbt-table td:nth-child(n+7) { display: none; }

.fbt-outer[data-cols="7"] .fbt-table th:nth-child(n+8),
.fbt-outer[data-cols="7"] .fbt-table td:nth-child(n+8) { display: none; }

/* ── Sticky first column ────────────────────────────────────────────────────── */
.fbt-outer[data-lock="on"] .fbt-table .fbt-th--first,
.fbt-outer[data-lock="on"] .fbt-table .fbt-td--first {
    position: sticky;
    left: 0;
    z-index: 2;
}

.fbt-outer[data-lock="on"] .fbt-table .fbt-th--first {
    background-color: var(--fbt-header-bg, #174044);
}

.fbt-outer[data-lock="on"] .fbt-table .fbt-td--first {
    background-color: var(--fbt-row-bg, #ffffff);
}

.fbt-outer[data-lock="on"] .fbt-row--featured .fbt-td--first {
    background-color: var(--fbt-feat-start, #fff2e8);
}

/* Separator shadow on sticky column when scrolled */
.fbt-outer[data-lock="on"] .fbt-table .fbt-td--first::after,
.fbt-outer[data-lock="on"] .fbt-table .fbt-th--first::after {
    content: '';
    position: absolute;
    top: 0; right: -8px; bottom: 0;
    width: 8px;
    background: linear-gradient(to right, rgba(0,0,0,.08), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.fbt-outer[data-lock="on"].fbt-is-scrolled .fbt-table .fbt-td--first::after,
.fbt-outer[data-lock="on"].fbt-is-scrolled .fbt-table .fbt-th--first::after {
    opacity: 1;
}

/* ── Right-edge scroll shadow ───────────────────────────────────────────────── */
.fbt-scroll-shadow {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    border-radius: 0 var(--fbt-radius) var(--fbt-radius) 0;
    background: linear-gradient(to right, transparent, rgba(0,0,0,.07));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}
.fbt-outer.fbt-has-overflow  .fbt-scroll-shadow { opacity: 1; }
.fbt-outer.fbt-scrolled-end  .fbt-scroll-shadow { opacity: 0; }

/* ── Alt row sticky cell bg ─────────────────────────────────────────────────── */
.fbt-outer--alt[data-lock="on"] .fbt-table tr:nth-child(even) .fbt-td--first {
    background-color: var(--fbt-row-alt-bg, var(--fbt-row-bg, #ffffff));
}
