/* Mobile orientation: the chart driver adds body.verticalCharts when it
   switches billboard to horizontal bars on narrow viewports. Horizontal
   bars need more vertical space, so we override the default height.
   Declared outside the .charts2026-v2 nesting block because body sits
   above it in the DOM. */
body.verticalCharts .charts2026-v2 #chartAveragePrices,
body.verticalCharts .charts2026-v2 #ChartPast {
    height: 600px;
}

/* ============================================================
   main25-charts-v2.css
   Layout-only styles for the v2 "Insights" section
   (rendered by crete-locations-charts2025.1.php).

   Tabs, buttons, fonts, and section chrome are inherited from
   the page's existing .filter-comp / .filters-comp / .content-section
   conventions defined in main25.1-locations-item.css. This file
   only adds what is structurally new: side-by-side split rows,
   chart-card with stats, insight/info-box card grids, and the
   active-category column highlight on the prices table.
   ============================================================ */

.charts2026-v2 {
    /* ---- Neutralise the legacy .charts2026 .chartAveragePrices
            sidebar layout (270px left padding + flex). The new layout
            uses split-row grid, not the absolute sidebar. ---- */
    .chartAveragePrices,
    & #chartAveragePrices {
        padding-left: 0;
        display: block;
    }

    /* Section intro paragraph below the H2 */
    .section-intro {
        max-width: 80ch;
        margin: 0 auto 1.5rem;
        text-align: center;
    }

    /* Primary tab bar -- keeps the pill row look, with leading SVG icons. */
    .filters-comp.primary-filters {
        margin-top: 1.5rem;
        margin-bottom: .5rem;
    }
    .filters-comp.primary-filters .filter-comp {
        gap: .5rem;
    }
    .filter-comp__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }
    .filter-comp__icon svg {
        width: 18px;
        height: 18px;
        display: block;
    }

    /* Secondary tab bar -- visually flatter than the primary pill row.
       Uses a light underlined chip strip rather than rounded pills. */
    .category-filters {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
        margin: 3rem auto 5rem;
        padding: 0 1rem;

        @media (max-width: 600px) {
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            margin: 1rem 0;
            margin-left: -2rem;
            border-radius: 0;
            min-width: calc(100% + 4rem);
            padding: 0px;
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        }
    }
    .category-filters__label {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: #888;
    }
    .category-filters__row {
        display: flex;
        gap: .25rem;
        gap: 1rem;
        flex-wrap: wrap;
        
        &::-webkit-scrollbar {
            -webkit-appearance: none;
            display: none;
        }
        
        @media (max-width: 600px) {
            
            
            
            
            display: flex;
            flex-direction: row;
            align-content: center;
            align-items: center;
            overflow-x: scroll;
            overflow-y: hidden;
            justify-content: flex-start;
            max-width: 100vw;
            flex-wrap: nowrap;
            padding: 0 1rem;
            
            
            
            
            &::-webkit-scrollbar {
                -webkit-appearance: none;
                display: none;
            }
        }
        
    }
    .category-chip {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: .5rem 2rem;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #666;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        transition: color .2s ease, border-color .2s ease;
        position: relative;
        /* top: 1px; */ /* overlap the row underline */
        border: 2px solid #ddd;
        border-radius: 50px;
    }
    .category-chip:hover {
        color: var(--accent-2);
        border-color: var(--accent-2);
    }
    .category-chip.active {
        color: var(--accent-2);
        color: #fff;
        background: var(--accent-2);
        /* border-bottom-color: var(--accent-2); */
        border-color: var(--accent-2);
    }

    /* Year filter inside the lead-time chart card head -- discreet text chips,
       distinct from both the primary pill row and the secondary chip strip. */
    .chart-card__head--years {
        padding: .5rem 1rem;
    }
    .chartPast-years {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .year-chip {
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border: 0;
        padding: .35rem .65rem;
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: #222;
        cursor: pointer;
        border-radius: 1rem;
        transition: background .2s ease, color .2s ease;
        line-height: 1.2;
    }
    .year-chip:hover {
        color: var(--accent-2);
        background: rgba(0, 0, 0, .04);
    }
    .year-chip.active {
        color: #fff;
        background: var(--accent-2-dark);
    }
    .year-chip__sub {
        font-size: 13px;
        font-weight: 700;
        opacity: 1;
        margin-left: .25rem;
    }

    /* ------------ View panels ------------ */
    .view-panel {
        display: none;
        margin-top: 1.5rem;
    }
    .view-panel.active {
        display: block;
    }

    .view-panel > h3,
    .split-row__col > h3 {
        margin-top: 2rem;
        max-width: var(--page-width-text);
        margin-left: auto;
        margin-right: auto;
    }

    /* ------------ Split rows (side-by-side on desktop, stacked on mobile) ------------ */
    .split-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    @media (min-width: 1024px) {
        .split-row {
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        /* Solo column: center the lone chart/table and cap its width so it
           doesn't read as a stretched, edge-to-edge slab. */
        .split-row--solo {
            grid-template-columns: minmax(0, 880px);
            justify-content: center;
        }
    }

    /* On mobile (1fr) the solo column already fills naturally -- no rule needed. */

    .split-row__col {
        min-width: 0;
    }

    /* ------------ Chart card (light wrapper, not heavy) ------------ */
    .chart-card {
        background: #fff;
        border: 1px solid #eee;
        border-radius: 1rem;
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .chart-card__head {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #eee;
        background: #fafafa;
    }

    .chart-card__stats {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .stat {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: 60px;
    }

    .stat__label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #888;
        margin-bottom: 2px;
    }

    .stat__value {
        font-size: 18px;
        font-weight: 700;
        color: var(--accent-2);
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }

    .chart-card__body {
        padding: 1rem 1.5rem 1.5rem;
        position: relative;
    }

    /* Static <noscript> chart-image fallback (bots / no-JS). Inert when JS runs. */
    .chart-card__body noscript img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Billboard.js targets fill their card body. Height is set in CSS so the
       chart driver doesn't have to inline style.height before init. */
    #chartAveragePrices,
    #ChartPast {
        width: 100%;
        height: 420px;
        box-shadow: none;
    }

    /* Billboard tooltip -- clean the default 2-cell table layout into a
       single rounded card so the value reads at a glance. */
    .bb-tooltip-container {
        z-index: 5;
    }
    .bb-tooltip {
        background: rgba(34, 34, 34, .92);
        color: #fff;
        border: 0;
        border-radius: .5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,.18);
        overflow: hidden;
        font-size: 13px;
        line-height: 1.3;
    }
    .bb-tooltip th {
        background: transparent;
        color: #fff;
        font-weight: 600;
        padding: .5rem .75rem .25rem;
        border-bottom: 0;
        text-align: left;
    }
    .bb-tooltip td {
        background: transparent;
        color: #fff;
        padding: .25rem .75rem .5rem;
        border: 0;
    }
    .bb-tooltip td.name {
        display: none;          /* category already shown by the active tab */
    }
    .bb-tooltip td.value {
        font-weight: 700;
        font-size: 14px;
        text-align: left;
    }
    .bb-tooltip .bb-tooltip-name--bullet {
        display: none;
    }

    .alert.ChartPastResult {
        padding: 1rem 1.5rem 1.5rem;
        color: #555;
        font-size: 13px;
        line-height: 1.5;
        background: #fafafa;
        margin: 0;
        display:flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .alert.ChartPastResult:before{
        content:'';
        background-image: var(--info-icon);
        background-size: cover;
        min-width: 18px;
        height: 18px;
        margin-right: 1rem;
        /* filter: var(--color-to-accent-2-dark); */
        opacity:.5;
    }
    .alert.ChartPastResult:empty {
        display: none;
    }

    /* Active-category column highlight on the prices table.
       Neutral grey (navigational hint, not a brand accent). */
    .fl-table th.is-highlighted,
    .fl-table td.is-highlighted {
        background: #f0f0f0;
        font-weight: 700;
        color: var(--accent-2);
    }
    .fl-table thead th.is-highlighted {
        background: #e0e0e0;
        color: var(--accent-2);
    }

    /* ------------ Insights view: per-category cards ------------ */
    .insights-panels {
        margin-bottom: 2rem;
    }

    .cat-panel {
        display: none;
    }
    .cat-panel.active {
        display: block;
    }

    /* ------------ Insights horizontal carousel ------------ */
    .insights-carousel {
        position: relative;
        margin: 0 0 9rem;
        padding: 2rem; /* room for the prev/next buttons on the sides */
        background: #eee;
        border-radius: 1.5rem;
        margin-top: 3rem;
    }

    .insights-carousel__viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 1rem;
        scroll-padding-right: 1rem;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        @media (max-width: 768px) {
            
        }
    }
    .insights-carousel__viewport::-webkit-scrollbar { display: none; }

    .insights-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 2rem;
        list-style: none;
        padding: .25rem;
        margin: 0;
        padding: 0;
        @media (max-width: 768px) {
            padding-left:1rem;
        }
    }

    .insight-card {
        flex: 0 0 320px;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        padding: 1.25rem;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 1rem;
        transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
        margin: 0;
    }

    @media (min-width: 768px) {
        .insight-card { flex-basis: 360px; }
    }

    .insight-card:hover {
        border-color: var(--accent-2);
        /* transform: translateY(-2px); */
        /* box-shadow: 0 6px 16px rgba(0,0,0,.06); */
    }

    .insight-card__body {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .insight-card__heading {
        margin: 0 0 .5rem;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
    }

    .insight-card__body p {
        margin: 0 0 .75rem;
        line-height: 1.55;
        font-size: 15px;
        text-transform: math-auto;
    }

    .insight-card__stat {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
        margin-top: auto;
        padding-top: .75rem;
        border-top: 1px dashed #ddd;
    }

    .insight-card__stat-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #888;
    }

    .insight-card__stat-value {
        font-size: 15px;
        font-weight: 700;
        color: var(--accent-2);
        font-variant-numeric: tabular-nums;
    }

    /* Prev / next arrow buttons floating beside the viewport */
    .insights-carousel__btn {
        -webkit-appearance: none;
        appearance: none;
        position: absolute;
        bottom: -90px;
        transform: translateY(-50%);
        /* shape / size / colours / icon mirror .list-handler-container .list-handler */
        width: 52px;
        height: 52px;
        border-radius: 50vw;
        line-height: 48px;
        background: #fff;
        border: 2px solid;
        color: var(--accent-2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        text-indent: -999px;
        z-index: 2;
        transition: 0s;
        padding: 0;
        margin: 0;
    }
    .insights-carousel__btn:before {
        display: inline-block;
        content: ' ';
        width: 48px;
        height: 48px;
        background-image: var(--angle-bottom);
        background-position: 50% 50%;
        background-size: 26px;
        background-repeat: no-repeat;
        filter: var(--color-to-accent-2-dark);
        transform: rotate(90deg);
    }
    .insights-carousel__btn:hover {
        /* background: var(--accent-2); */
        /* color: #fff; */
        /* border-color: var(--accent-2); */
        background-color: #ffece6;
        color: var(--accent-2-dark);
    }
    .insights-carousel__btn[disabled] {
        opacity: .4;
        cursor: default;
        pointer-events: none;
    }
    .insights-carousel__btn[disabled]:before {
        filter: none;
        opacity: .4;
    }
    .insights-carousel__btn--prev {right: 50%;}
    .insights-carousel__btn--next {
        right: calc(50% - 64px);
        transform: translateY(-50%) scaleX(-1); /* flip the shared arrow to point right */
    }

    @media (max-width: 600px) {
        .insights-carousel {
            padding: 0;
        }
        .insights-carousel__btn {
            top: auto;
            bottom: -7rem;
            transform: none;
        }
        .insights-carousel__btn--prev {right: 7rem;}
        .insights-carousel__btn--next { right: 1rem; left: auto; transform: scaleX(-1); }
        .insights-carousel {
            padding-bottom: 1rem;
            padding-top: 1rem;
        
            margin-left: -2rem;
            border-radius: 0;
            min-width: calc(100% + 4rem);
        }

        
    }

    /* Raw days-ahead prose + Factors content rendered inside the Insights view.
       No card wrappers -- just typographic flow that matches the rest of the page. */
    .insights-extra {
        margin: 2rem 0 0;
    }
    .insights-extra h3 {
        margin: 1.5rem auto .75rem auto;
        max-width: var(--page-width-text);
        /* margin-left: auto; */
        /* margin-right: auto; */
    }
    .insights-extra p {
        margin: 0 0 1rem;
        line-height: 1.6;
        max-width: var(--page-width-text);
        margin-left: auto;
        margin-right: auto;
    }
    .insights-extra ul {
        margin: 0;
        padding-left: 0;
    }
    .insights-extra ul li {
        margin: 0;
        line-height: 1.6;
    }
    .insights-extra ul li strong {
        color: var(--accent-2);
    }

    /* ------------ Factors info-box grid (not category-scoped) ------------ */
    .info-box-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.25rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .info-box {
        display: flex;
        gap: 1rem;
        padding: 1.25rem;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 1rem;
        transition: border-color .2s ease, transform .2s ease;
    }
    .info-box:hover {
        border-color: var(--accent-2);
        transform: translateY(-2px);
    }

    .info-box__icon {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--light, #eee);
        color: var(--accent-2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .info-box__icon svg {
        width: 22px;
        height: 22px;
    }

    .info-box__body {
        flex: 1 1 0;
        min-width: 0;
    }
    .info-box__title {
        margin: 0 0 .5rem;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.3;
    }
    .info-box__body p {
        margin: 0;
        line-height: 1.55;
        font-size: 15px;
    }

    /* ------------ Responsive tweaks ------------ */
    @media (max-width: 768px) {
        .chart-card__head {
            padding: .75rem 1rem;
        }
        .chart-card__body {
            padding: .75rem 1rem 1rem;
        }
        .alert.ChartPastResult {
            padding: .75rem 1rem 1rem;
        }
        .chart-card__stats {
            gap: 1rem;
        }
        .stat__value {
            font-size: 16px;
        }
        #chartAveragePrices,
        #ChartPast {
            min-height: 360px;
        }
        .insights-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
            padding-left: 1rem!important;
        }
        .insight-card,
        .info-box {
            padding: 1rem;
        }
    }
}



.fl-table{
    /* box-shadow:none; */
}