/**
 * Feature Comparison Table — Stylesheet
 *
 * ORGANISATION
 * ────────────
 * 1.  CSS Custom Properties (variables / design tokens)
 * 2.  Wrapper & Grid Layout
 * 3.  Column Header Row
 * 4.  Accordion Sections (header + body)
 * 5.  Feature Rows & Cells
 * 6.  Icons
 * 7.  Footer (legend + PDF button)
 * 8.  Error / Empty State
 * 9.  Responsive: Mobile horizontal scroll
 * 10. Elementor Editor helpers
 *
 * THEMING APPROACH
 * ────────────────
 * All brand colors and sizing are declared as CSS custom properties
 * (variables) on :root as sensible defaults. The Elementor controls in the
 * widget panel inject per-instance overrides onto the widget's own outer
 * container using Elementor's {{WRAPPER}} mechanism, which sits ABOVE our
 * .bfct-wrapper element in the DOM. This lets normal CSS inheritance do the
 * work: no override → falls back to :root's default; override set → that
 * value cascades down into .bfct-wrapper instead. See the detailed comment
 * in section 1 below for exactly why the defaults must live on :root and
 * NOT on .bfct-wrapper itself.
 *
 *   1. The defaults here provide sensible out-of-the-box values.
 *   2. The editor can change any color/size without touching this file.
 *   3. Multiple instances on the same page can have different color schemes.
 *
 * GRID LAYOUT
 * ────────────
 * The table uses CSS Grid. The number of edition columns is dynamic and
 * passed via the --bfct-num-cols custom property set inline in the HTML.
 *
 * Grid template for rows:
 *   [label column: 2fr]  [edition columns: repeat(n, 1fr)]
 *
 * 2fr for the label gives feature names more space than the icon cells.
 */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   Default values — overridden by Elementor's Color/Typography controls.
   ============================================================================= */

/**
 * IMPORTANT — WHY THESE LIVE ON :root, NOT .bfct-wrapper
 * ─────────────────────────────────────────────────────────────────────────
 * Elementor's panel controls don't inject color overrides directly onto
 * .bfct-wrapper. They inject onto the OUTER widget container that Elementor
 * itself renders around our widget's output — something like:
 *
 *   <div class="elementor-element elementor-element-XXXX ...">  ← Elementor sets vars HERE
 *     <div class="elementor-widget-container">
 *       <div class="bfct-wrapper">                              ← our widget's root
 *         ...
 *
 * CSS custom properties inherit from ancestor to descendant — BUT only when
 * the descendant has no declaration of its own for that property. If we
 * declared these defaults on .bfct-wrapper itself, that declaration would
 * always win over whatever Elementor set on the ancestor .elementor-element
 * div, because a direct declaration on an element always takes precedence
 * over an inherited one. That's exactly the bug this fixes: every color
 * picker change in the panel would be silently overridden by our own
 * hardcoded default, so nothing ever appeared to change.
 *
 * By declaring defaults on :root instead — a selector ABOVE Elementor's
 * override point in the DOM — the cascade works correctly:
 *   - No override set?     .bfct-wrapper inherits down from :root's default.
 *   - Override set by you? .bfct-wrapper inherits down from the
 *                           .elementor-element-XXXX override instead,
 *                           since that's the closer ancestor with its own
 *                           explicit declaration.
 *
 * Multiple widget instances on the same page still work independently:
 * each instance's Elementor wrapper only overrides variables within ITS
 * OWN subtree, so two tables can have different colors on the same page.
 */

:root {

    /* ── Brivo Brand Colors ───────────────────────────────────────────────── */
    --bfct-color-brand-primary:   #1250CB;  /* Add-on/plus icon fill + general accents */
    --bfct-color-brand-secondary: #0CB7EB;  /* Check icon fill */

    /* ── Layout Colors ────────────────────────────────────────────────────── */
    --bfct-header-bg:         #F0F9FF;  /* Column header row background */
    --bfct-section-header-bg: #FFFFFF;  /* Accordion section header background */
    /* Feature rows use ONE uniform background — no alternating stripe.
       Both tokens are set to the same value so .bfct-row and .bfct-row--alt
       render identically. Kept as two variables (rather than removing the
       --alt one) so the existing "Feature Row Background" Elementor control
       and HTML structure still work if alternating is ever wanted again —
       just give --bfct-row-alt-bg a different value to bring it back. */
    --bfct-row-bg:            #FAFBFD;  /* Feature row background (all rows) */
    --bfct-row-alt-bg:        #FAFBFD;  /* Matches --bfct-row-bg — alternating disabled */
    --bfct-border-color:      #E2E8F0;  /* All borders */

    /* ── Text Colors ──────────────────────────────────────────────────────── */
    --bfct-text-primary:   #1E293B;     /* Feature labels */
    --bfct-text-secondary: #64748B;     /* Indented sub-features */
    --bfct-text-header:    #0F172A;     /* Section header titles */
    --bfct-text-col-label: #334155;     /* Edition column header labels */
    --bfct-color-text-cell: #1E293B;    /* Text values inside icon columns (e.g. "10", "Unlimited") */

    /* ── Typography ───────────────────────────────────────────────────────── */
    --bfct-font-size-header:  14px;
    --bfct-font-size-feature: 14px;
    --bfct-font-size-section: 15px;
    --bfct-font-size-legend:  13px;

    /* ── Spacing ──────────────────────────────────────────────────────────── */
    --bfct-cell-padding-v: 14px;        /* Vertical cell padding */
    --bfct-cell-padding-h: 16px;        /* Horizontal cell padding */
    --bfct-indent-size:    24px;        /* Indented sub-feature left padding */

    /* ── Sticky Positioning ───────────────────────────────────────────────── */
    /* How far from the top of the viewport the mobile edition switcher
       sticks. This ISN'T 0 because the site has its own sticky global
       header sitting above our content — without this offset, the
       switcher would stick directly under the viewport edge and end up
       hidden behind (or fighting with) that header instead of sitting
       just below it. If the site's header height ever changes, this is
       the one value to update. */
    --bfct-mobile-switcher-top: 95px;

    /* ── Transitions ──────────────────────────────────────────────────────── */
    --bfct-transition-speed: 0.28s;
    --bfct-transition-ease:  cubic-bezier(0.4, 0, 0.2, 1); /* Material-style ease */

    /* ── Borders ──────────────────────────────────────────────────────────── */
    --bfct-border-radius: 10px;         /* Outer wrapper corner radius */
    --bfct-border-width:  1px;
}


/* =============================================================================
   2. WRAPPER & GRID LAYOUT
   ============================================================================= */

.bfct-wrapper {
    /* Contain all child rows. */
    width: 100%;
    border: var(--bfct-border-width) solid var(--bfct-border-color);
    border-radius: var(--bfct-border-radius);
    font-family: inherit;          /* Inherit from the theme, not browser default */
    box-sizing: border-box;

    /*
     * NOTE: deliberately NOT using overflow:hidden here.
     *
     * It's tempting to add overflow:hidden so the rounded border-radius
     * above clips its children's square corners — but doing that makes
     * THIS element a "scroll container" for CSS purposes, which breaks
     * position:sticky on any descendant (the header row on desktop, the
     * mobile edition switcher) for as long as this element isn't itself
     * independently scrollable. The sticky child ends up "sticking"
     * relative to a box that never scrolls on its own, so it just
     * scrolls away with the rest of the page instead of staying pinned.
     *
     * Instead, the rounded corners are achieved by rounding the actual
     * first/last visible children directly — see the explicit
     * border-radius rules on .bfct-header-row, .bfct-mobile-switcher,
     * .bfct-footer, and .bfct-section:last-child below.
     */
}

/**
 * SHARED GRID — Header row and feature rows use the same grid template.
 *
 * --bfct-num-cols is set inline on .bfct-wrapper (e.g. style="--bfct-num-cols:4").
 * CSS Grid's repeat() function accepts CSS custom properties natively.
 *
 * Column breakdown:
 *   2fr           → Feature label (gets roughly twice the width of icon cells)
 *   repeat(n, 1fr) → One equal-width column per edition
 *
 * min-width on icon cells (100px) prevents columns from getting too narrow
 * when there are 5+ editions.
 */
.bfct-header-row,
.bfct-row {
    display: grid;
    grid-template-columns: 2fr repeat(var(--bfct-num-cols, 4), minmax(100px, 1fr));
    align-items: center;
}


/* =============================================================================
   3. COLUMN HEADER ROW
   The sticky top row showing edition names (Standard, Professional, etc.)
   ============================================================================= */

.bfct-header-row {
    background-color: var(--bfct-header-bg);
    border-bottom: var(--bfct-border-width) solid var(--bfct-border-color);
    position: sticky;   /* Sticks to top of scroll container on long tables */
    top: 0;
    z-index: 10;        /* Ensures it stays above row content when scrolling */

    /* Rounds the wrapper's top corners directly, now that .bfct-wrapper
       itself no longer uses overflow:hidden to do this (see the note on
       .bfct-wrapper above for why). This is the visually-first element
       on desktop, so it gets the wrapper's own corner radius. */
    border-top-left-radius:  var(--bfct-border-radius);
    border-top-right-radius: var(--bfct-border-radius);
}

.bfct-header-cell {
    padding: 12px var(--bfct-cell-padding-h);
    font-size: var(--bfct-font-size-header);
    font-weight: 600;
    color: var(--bfct-text-col-label);
    text-align: center;
    white-space: nowrap;        /* Prevent edition names from wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The label-column header is left-aligned (it's the feature names column). */
.bfct-header-cell--label {
    text-align: left;
}


/* ── Mobile Edition Switcher ──────────────────────────────────────────────────
   Hidden by default — only shown inside the @media (max-width: 768px) block
   in section 9 below, where it visually replaces .bfct-header-row. Defined
   here (not in the responsive section) since it's a standalone component
   with its own base styles, not a responsive override of something else. */

.bfct-mobile-switcher {
    display: none;                          /* Shown only on mobile — see section 9 */
    gap: 6px;
    padding: 14px 12px;
    background-color: var(--bfct-section-header-bg);
    border-bottom: var(--bfct-border-width) solid var(--bfct-border-color);

    /*
     * Horizontal scroll is kept as a FALLBACK, not the primary behaviour.
     * Pills are flexible now (see .bfct-mobile-switcher__option below) and
     * will shrink to fit the available width first. Scrolling only ever
     * kicks in if there are enough editions that shrinking hits the
     * min-width floor on each pill and they genuinely can't all fit —
     * e.g. 7+ editions on a narrow phone. With the normal 4 editions,
     * this container never actually needs to scroll.
     */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    /*
     * Sticky so it's reachable no matter how far down a long feature list
     * the user has scrolled — this list can run to 50+ rows.
     *
     * top is NOT 0 — see the --bfct-mobile-switcher-top token at the top
     * of this file for why (the site has its own sticky header above us).
     */
    position: sticky;
    top: var(--bfct-mobile-switcher-top, 95px);
    z-index: 15;                            /* Above section headers' own content */

    /* This is the visually-first element on mobile (it replaces
       .bfct-header-row there — see the @media block in section 9), so it
       needs the wrapper's top corner radius now that .bfct-wrapper itself
       doesn't clip via overflow:hidden. See the note on .bfct-wrapper for
       why that clipping approach was removed. */
    border-top-left-radius:  var(--bfct-border-radius);
    border-top-right-radius: var(--bfct-border-radius);
}

/* Hide the scrollbar visually while keeping the area swipeable —
   the pill shapes themselves are the scroll affordance. */
.bfct-mobile-switcher::-webkit-scrollbar {
    display: none;
}
.bfct-mobile-switcher {
    scrollbar-width: none;       /* Firefox */
}

.bfct-mobile-switcher__option {
    /*
     * flex: 1 1 0 — grow AND shrink, ignoring content's natural width as
     * the basis. This is what makes the pills divide the available row
     * width evenly and compress instead of overflowing past the screen
     * edge. min-width caps how far they can shrink before the container
     * falls back to horizontal scroll (see the comment on
     * .bfct-mobile-switcher above) rather than squeezing text down to
     * something unreadable.
     */
    flex: 1 1 0;
    min-width: 64px;
    scroll-snap-align: start;

    /* !important here for the same theme/Elementor button-style override
       reason explained in the larger comment further down this rule. */
    padding: 9px 5px !important;
    border-radius: 999px;        /* Pill shape */
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--bfct-transition-speed) ease,
                border-color    var(--bfct-transition-speed) ease,
                color           var(--bfct-transition-speed) ease;

    /* If a label genuinely can't fit even at min-width (e.g. a very long
       custom edition name on a tiny screen), truncate gracefully with an
       ellipsis rather than wrapping to a second line or overflowing. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /*
     * !important on the visual identity properties below (and on padding
     * above) is deliberate. These are real <button> elements (for
     * accessibility/semantics), and many themes and Elementor's own
     * global "Theme Style → Buttons" setting apply site-wide default
     * button styling — border color, text color, background, AND
     * padding — that can otherwise outrank this rule depending on the
     * theme's CSS specificity or load order. This widget is meant to
     * render in Brivo's brand colors and sizing specifically, not
     * whatever the site's generic button style happens to be, so these
     * properties are pinned. If you ever see pill colors or spacing that
     * don't match what's set here, that's this exact conflict — inspect
     * the element to confirm what's overriding it.
     */
    border:           1.5px solid var(--bfct-border-color) !important;
    background-color: #FFFFFF !important;
    color:            var(--bfct-text-secondary) !important;
}

.bfct-mobile-switcher__option:focus-visible {
    outline: 2px solid var(--bfct-color-brand-primary);
    outline-offset: 2px;
}

/* The selected edition — filled with the primary brand color.
   Same !important reasoning as the base state above. */
.bfct-mobile-switcher__option--active {
    background-color: var(--bfct-color-brand-primary) !important;
    border-color:      var(--bfct-color-brand-primary) !important;
    color:             #FFFFFF !important;
}


/* Extra-narrow phones (iPhone SE and similar ~375px-or-less widths) —
   "Professional" and "Multifamily" are long enough that even shrunken
   pills can get tight. A slightly smaller font buys a bit more room
   before ellipsis truncation has to kick in. */
@media (max-width: 380px) {
    .bfct-mobile-switcher {
        gap: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .bfct-mobile-switcher__option {
        /* !important needed here too — the base rule's padding is now
           !important (see the comment there), so without matching
           !important here this override would silently stop applying
           on narrow phones, regardless of media query order. */
        padding: 9px 3px !important;
        font-size: 11px;
    }
}


/* =============================================================================
   4. ACCORDION SECTIONS
   ============================================================================= */

/* ── Section Container ─────────────────────────────────────────────────────── */
.bfct-section {
    border-bottom: var(--bfct-border-width) solid var(--bfct-border-color);
}

/* Last section has no bottom border (the wrapper already has one). */
.bfct-section:last-child {
    border-bottom: none;
}

/* Fallback bottom-corner rounding for when no footer is rendered (legend,
   PDF button, and footnotes all disabled) — in that case this section is
   the actual last visible element, so it needs the radius instead.
   Harmless to set even when a footer IS present, since the footer would
   then visually sit below this and its own rounding is what shows. */
.bfct-section:last-child .bfct-row:last-child {
    border-bottom-left-radius:  var(--bfct-border-radius);
    border-bottom-right-radius: var(--bfct-border-radius);
}

/* ── Section Header (the clickable accordion trigger) ──────────────────────── */
.bfct-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bfct-cell-padding-v) var(--bfct-cell-padding-h);
    background-color: var(--bfct-section-header-bg);
    cursor: pointer;
    user-select: none;              /* Prevent text selection on repeated clicks */
    -webkit-user-select: none;
    transition: background-color var(--bfct-transition-speed) var(--bfct-transition-ease);
}

.bfct-section-header:hover {
    background-color: var(--bfct-row-alt-bg);
}

/* Keyboard focus outline — important for accessibility. */
.bfct-section-header:focus-visible {
    outline: 2px solid var(--bfct-color-brand-primary);
    outline-offset: -2px;
}

/* ── Section Title & Link ───────────────────────────────────────────────────── */
.bfct-section-title {
    font-size: var(--bfct-font-size-section);
    font-weight: 600;
    color: var(--bfct-text-header);
    flex: 1;
}

/* The section link (↗) inherits color and has minimal decoration. */
.bfct-section-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bfct-section-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── External arrow icon ─────────────────────────────────────────────────────── */
/* Used in section titles (↗) and the PDF button. */
.bfct-arrow-icon {
    font-size: 0.85em;
    opacity: 0.65;
    display: inline-block;
    transition: transform var(--bfct-transition-speed) var(--bfct-transition-ease),
                opacity   var(--bfct-transition-speed) var(--bfct-transition-ease);
}

.bfct-section-link:hover .bfct-arrow-icon {
    transform: translate(2px, -2px);
    opacity: 1;
}

/* ── Chevron Toggle Icon ────────────────────────────────────────────────────── */
.bfct-chevron {
    display: flex;
    align-items: center;
    color: var(--bfct-text-secondary);
    transition: transform var(--bfct-transition-speed) var(--bfct-transition-ease),
                color     var(--bfct-transition-speed) var(--bfct-transition-ease);
    flex-shrink: 0;
    margin-left: 12px;
}

/* Rotate 180° when the section is open — chevron points up. */
.bfct-section--open .bfct-section-header .bfct-chevron {
    transform: rotate(180deg);
    color: var(--bfct-color-brand-primary);
}

/* ── Section Body (Collapsible) ─────────────────────────────────────────────── */
/**
 * Accordion Animation Approach:
 * We use max-height + overflow:hidden for the CSS part, but the actual
 * animation is driven by script.js using element.style.height with a
 * measured pixel value. This gives a smooth, correctly-timed animation
 * unlike a fixed max-height which causes easing issues.
 *
 * Initial state for closed sections is height:0 (set by JS on init).
 * The transition property here handles the animation when JS changes height.
 */
.bfct-section-body {
    overflow: hidden;
    transition: height var(--bfct-transition-speed) var(--bfct-transition-ease);
}


/* =============================================================================
   5. FEATURE ROWS & CELLS
   ============================================================================= */

/* ── Feature Row ─────────────────────────────────────────────────────────────── */
.bfct-row {
    background-color: var(--bfct-row-bg);
    border-top: var(--bfct-border-width) solid var(--bfct-border-color);
    transition: background-color 0.15s ease;
}

.bfct-row:first-child {
    border-top: none;   /* No double border at section body top */
}

/**
 * .bfct-row--alt is still applied by templates/render.php to every other
 * row (row_index % 2), but --bfct-row-alt-bg is now set to the SAME value
 * as --bfct-row-bg (see the design tokens at the top of this file, and the
 * "Feature Row Background" Elementor color control), so visually there is
 * no alternation — every row beneath an open section shows one uniform
 * background. The class and variable are left in place rather than removed
 * so alternating rows can be restored later just by giving
 * --bfct-row-alt-bg a different value, with no PHP/template changes needed.
 */
.bfct-row--alt {
    background-color: var(--bfct-row-alt-bg);
}

.bfct-row:hover {
    background-color: #EFF6FF;  /* Subtle blue tint on hover */
}

/* ── Indented sub-feature rows ───────────────────────────────────────────────── */
.bfct-row--indented .bfct-cell--label {
    padding-left: calc( var(--bfct-cell-padding-h) + var(--bfct-indent-size) );
    font-size: calc( var(--bfct-font-size-feature) - 1px );
    color: var(--bfct-text-secondary);
    font-weight: 400;
}

/* ── Cells ────────────────────────────────────────────────────────────────────── */
.bfct-cell {
    padding: var(--bfct-cell-padding-v) var(--bfct-cell-padding-h);
}

/* Feature label cell: left-aligned, primary text weight. */
.bfct-cell--label {
    font-size: var(--bfct-font-size-feature);
    color: var(--bfct-text-primary);
    font-weight: 500;
    text-align: left;
    /* Allow label to wrap if it's very long — icon cells stay single line. */
    white-space: normal;
    word-break: break-word;
}

/* Icon cells: centred, no wrapping needed. */
.bfct-cell--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/**
 * Text cells — used when a CSV icon-column value isn't one of the
 * recognised keywords (check/addon/partial/minus). Instead of an icon,
 * the literal text is shown — e.g. "10", "Unlimited", "5 GB".
 *
 * See includes/csv-parser.php for the detection logic, and
 * templates/render.php for where this class gets applied.
 *
 * Styled with weight/size similar to the icons so a column reads cleanly
 * whether it holds an icon or a number.
 */
.bfct-cell--text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--bfct-font-size-feature);
    font-weight: 600;
    color: var(--bfct-color-text-cell);
}


/* =============================================================================
   6. ICONS
   ============================================================================= */

/* All icon spans share these base styles. */
.bfct-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* SVGs inside icon spans inherit their container's dimensions. */
.bfct-icon svg {
    display: block;
    flex-shrink: 0;
}

/**
 * Hover micro-interaction: subtle scale on the icon cell.
 * Gives the table a polished, interactive feel without being distracting.
 */
.bfct-cell--icon:hover .bfct-icon {
    transform: scale(1.1);
    transition: transform 0.15s ease;
}

/* Icon type variants — mostly handled in SVG fill/stroke,
   but CSS classes are available for further overrides. */
.bfct-icon--check  { }   /* See SVG fill in Widget::get_icon_svg() */
.bfct-icon--addon  { }
.bfct-icon--partial{ }
.bfct-icon--minus  { opacity: 0.7; }  /* Slightly faded to visually de-emphasise */


/* =============================================================================
   7. FOOTER (Legend + PDF Button)
   ============================================================================= */

.bfct-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 20px var(--bfct-cell-padding-h);
    border-top: var(--bfct-border-width) solid var(--bfct-border-color);
    background-color: var(--bfct-row-alt-bg);
    flex-wrap: wrap;

    /* This is normally the visually-last element in the wrapper, so it
       gets the bottom corner radius directly — see the note on
       .bfct-wrapper for why we stopped relying on overflow:hidden there. */
    border-bottom-left-radius:  var(--bfct-border-radius);
    border-bottom-right-radius: var(--bfct-border-radius);
}

.bfct-footer-left {
    flex: 1;
    min-width: 200px;
}

.bfct-footer-right {
    flex-shrink: 0;
}

/* ── Legend ───────────────────────────────────────────────────────────────────── */
.bfct-legend {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.bfct-legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bfct-legend-label {
    font-size: var(--bfct-font-size-legend);
    color: var(--bfct-text-secondary);
}

/* ── Footnotes ────────────────────────────────────────────────────────────────── */
.bfct-footnotes {
    font-size: 12px;
    color: var(--bfct-text-secondary);
    line-height: 1.6;
    margin-top: 4px;
}

.bfct-footnotes p {
    margin: 0 0 4px;
}

/* ── PDF Button ───────────────────────────────────────────────────────────────── */
.bfct-pdf-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: var(--bfct-border-width) solid var(--bfct-border-color);
    border-radius: 24px;           /* Pill shape — matches the Brivo design */
    background-color: #FFFFFF;
    color: var(--bfct-text-primary);
    font-size: var(--bfct-font-size-legend);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--bfct-transition-speed) ease,
                box-shadow   var(--bfct-transition-speed) ease,
                color        var(--bfct-transition-speed) ease;
}

.bfct-pdf-button:hover {
    border-color: var(--bfct-color-brand-primary);
    color: var(--bfct-color-brand-primary);
    box-shadow: 0 2px 8px rgba(0, 174, 239, 0.15);
}

.bfct-pdf-button .bfct-arrow-icon {
    font-size: 0.9em;
}


/* =============================================================================
   8. ERROR / EMPTY STATE
   Shown when the CSV file is missing or empty.
   ============================================================================= */

.bfct-no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    color: var(--bfct-text-secondary, #64748B);
    background-color: #FFFBEB;
    border: 1px dashed #FCD34D;
    border-radius: var(--bfct-border-radius, 10px);
}

.bfct-no-data p {
    margin: 0;
    font-size: 15px;
}

.bfct-no-data__hint {
    font-size: 13px !important;
    opacity: 0.75;
    max-width: 340px;
}


/* =============================================================================
   9. RESPONSIVE — Mobile Single-Edition View
   ============================================================================= */

/**
 * MOBILE DESIGN OVERVIEW
 * ───────────────────────────────────────────────────────────────────────────
 * Rather than squeezing all editions into a horizontally-scrolling grid,
 * mobile shows ONE edition's full feature list at a time, switched via the
 * sticky pill control (.bfct-mobile-switcher) rendered in templates/render.php
 * right after the desktop header row. This matches the approved mobile
 * design: a single readable column, sections shown as plain dividers
 * (not collapsible — there's no dense grid to hide anymore), and feature
 * groups distinguished with bold text instead of indentation alone.
 *
 * HOW THE COLUMN-SWITCHING WORKS
 * ───────────────────────────────────────────────────────────────────────────
 * Every value cell (.bfct-cell--icon / .bfct-cell--text) already carries a
 * data-edition-index attribute (0, 1, 2…) matching its position among the
 * edition columns — see templates/render.php. assets/js/script.js adds the
 * .bfct-cell--mobile-hidden class to every cell whose index doesn't match
 * the pill currently selected in .bfct-mobile-switcher. This rule below is
 * what actually hides them:
 */

@media (max-width: 768px) {

    /* ── Swap header row for the pill switcher ─────────────────────────────── */
    .bfct-header-row {
        display: none;          /* Per-column headers make no sense — only one shows at a time */
    }

    .bfct-mobile-switcher {
        display: flex;          /* Hidden by default (desktop); shown here */
    }

    /* ── Collapse the grid to 2 columns: label + single active value ───────── */
    .bfct-row {
        grid-template-columns: 1fr auto;
    }

    .bfct-cell--icon,
    .bfct-cell--text {
        justify-self: end;      /* Hug the right edge, matching the design */
        min-width: 0;            /* Remove the desktop minmax(100px,...) floor */
        padding-left: 8px;
    }

    /* The actual show/hide mechanism — see script.js setActiveEdition(). */
    .bfct-cell--mobile-hidden {
        display: none;
    }

    /* ── Section headers become plain centered dividers, not accordions ────── */
    .bfct-section-header {
        justify-content: center;
        cursor: default;        /* No longer an interactive trigger */
        background-color: var(--bfct-header-bg); /* Tinted, matches the design */
    }

    .bfct-section-header:hover {
        background-color: var(--bfct-header-bg); /* Cancel the desktop hover tint */
    }

    .bfct-section-title {
        flex: none;              /* Stop stretching — let centering work */
        text-align: center;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* Chevron has nothing to do anymore — sections are always expanded. */
    .bfct-chevron {
        display: none;
    }

    /* Force every section body open. Sections aren't collapsible on mobile,
       so this overrides whatever height script.js would otherwise set. */
    .bfct-section-body {
        height: auto !important;
        overflow: visible !important;
    }

    /* ── Bold "parent" rows — features with sub-features beneath them ──────── */
    /* .bfct-row--parent is set server-side in templates/render.php by
       checking whether the next row in the same section is indented.
       Desktop is unaffected — this rule only exists inside this media query. */
    .bfct-row--parent .bfct-cell--label {
        font-weight: 700;
    }

    /* Reduce cell padding slightly on mobile to save horizontal space. */
    .bfct-cell {
        padding: 12px 16px;
    }

    /* Footer stacks vertically on small screens. */
    .bfct-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Legend items wrap to a single column. */
    .bfct-legend {
        flex-direction: column;
        gap: 8px;
    }
}


/* =============================================================================
   10. ELEMENTOR EDITOR HELPERS
   Styles that only apply inside the Elementor editing context.
   ============================================================================= */

/**
 * In the Elementor editor, the empty state warning should always be visible
 * even if there's no ABSPATH context (which there always is, but just in case).
 */
.elementor-editor-active .bfct-no-data {
    display: flex !important;
}

/**
 * In the editor preview, the sticky header can behave oddly inside the
 * iframe's scroll container. We disable sticky positioning there.
 */
.elementor-editor-active .bfct-header-row {
    position: relative;
}