/* Boxweaver Pagebuilder Tabs */
.bw-section--tabs .bw-tabs {
    --bw-tabs-accent: var(--bw-color-primary-500, var(--bw-interaction-button-bg, #6366f1));
    --bw-tabs-accent-text: var(--bw-color-primary-700, var(--bw-interaction-link-color, #4338ca));
    --bw-tabs-muted: var(--bw-color-text-500, rgba(0, 0, 0, 0.55));
    --bw-tabs-border: var(--bw-color-border-200, rgba(0, 0, 0, 0.12));
    --bw-tabs-accent-contrast: var(--bw-button-primary-fg, var(--bw-interaction-button-text, var(--bw-token-white, #fff)));

    --bw-tabs-indicator-h: 6px;
    --bw-tabs-anim: 240ms;
    --bw-tabs-ease: cubic-bezier(.2,.8,.2,1);

    /* Use section spacing token as the gap between tab bar and panel content */
    --bw-tabs-content-gap: var(--bw-space-section-y-top, var(--bw-space-section-y, 1.5rem));
}

/* Hide scrollbars (keep horizontal scroll) */
.bw-section--tabs .bw-tabs__scroll {
    scrollbar-width: none;
}
.bw-section--tabs .bw-tabs__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* OUTER: baseline across full width */
.bw-section--tabs .bw-tabs__header--outer .bw-tabs__scroll {
    border-bottom: 1px solid var(--bw-tabs-border);
}

/* OUTER: button colors (no BG hover) */
.bw-section--tabs .bw-tabs__tab--outer {
    color: var(--bw-tabs-muted);
    background: transparent;
}
.bw-section--tabs .bw-tabs__tab--outer:hover {
    color: var(--bw-tabs-accent-text);
}
.bw-section--tabs .bw-tabs__tab--outer[aria-selected="true"] {
    color: var(--bw-tabs-accent-text);
}

/*
 * OUTER: active indicator is drawn on the OUTER HEADER, not on the button.
 * Independent from hover-lift and stable.
 */
.bw-section--tabs .bw-tabs__header--outer {
    position: relative;
}
.bw-section--tabs .bw-tabs__header--outer::after {
    content: "";
    position: absolute;
    left: var(--bw-outer-indicator-x, 0px);
    bottom: -1px;
    width: var(--bw-outer-indicator-w, 0px);
    height: var(--bw-tabs-indicator-h);
    background: var(--bw-tabs-accent);
    opacity: var(--bw-outer-indicator-visible, 0);
    transition: opacity var(--bw-tabs-anim) var(--bw-tabs-ease);
    pointer-events: none;
}

/* INNER: flush to outer underline */
.bw-section--tabs .bw-tabs--inner .bw-tabs__header--inner {
    margin-top: -1px;
    background: var(--bw-tabs-accent);
    overflow: visible;
}
.bw-section--tabs .bw-tabs--inner .bw-tabs__scroll,
.bw-section--tabs .bw-tabs--inner .bw-tabs__tablist {
    background: var(--bw-tabs-accent);
    border: 0;
}

.bw-section--tabs .bw-tabs--inner .bw-tabs__tab--inner {
    color: var(--bw-tabs-accent-contrast);
}

/* INNER: separators (2px, ~80% height) */
.bw-section--tabs .bw-tabs--inner .bw-tabs__tab--inner:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 2px;
    background: rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

/*
 * INNER: caret triangle on header (not clipped by scroll).
 * Requested:
 * - width +50% (keep height)
 * - left gap to tab start == triangle base width
 */
.bw-section--tabs .bw-tabs--inner .bw-tabs__header--inner {
    --bw-inner-caret-size: 16px; /* height stays */
    --bw-inner-caret-half: calc(var(--bw-inner-caret-size) * 0.75); /* 50% wider base => half = 0.75*size */
}

.bw-section--tabs .bw-tabs--inner .bw-tabs__header--inner::after {
    content: "";
    position: absolute;
    left: var(--bw-inner-caret-x, 0px);
    bottom: calc(var(--bw-inner-caret-size) * -1);
    width: 0;
    height: 0;

    border-left: var(--bw-inner-caret-half) solid transparent;
    border-right: var(--bw-inner-caret-half) solid transparent;
    border-top: var(--bw-inner-caret-size) solid var(--bw-tabs-accent);

    opacity: var(--bw-inner-caret-visible, 0);
    transition: opacity var(--bw-tabs-anim) var(--bw-tabs-ease);
    pointer-events: none;
}

/* Content gap: inner tabs -> panel, and outer-only tabs -> panel */
.bw-section--tabs .bw-tabs__panels--inner {
    padding-top: var(--bw-tabs-content-gap);
}
.bw-section--tabs .bw-tabs__panel-content--outer {
    padding-top: var(--bw-tabs-content-gap);
}

/* Panel switch animation (synced with caret/outer indicator) */
.bw-section--tabs .bw-tabs__panel {
    transition:
        opacity var(--bw-tabs-anim) var(--bw-tabs-ease),
        transform var(--bw-tabs-anim) var(--bw-tabs-ease);
    will-change: opacity, transform;
}
.bw-section--tabs .bw-tabs__panel[data-bw-tabs-panel-state="pre"],
.bw-section--tabs .bw-tabs__panel[data-bw-tabs-panel-state="leaving"] {
    opacity: 0;
    transform: translateY(8px);
}
.bw-section--tabs .bw-tabs__panel[data-bw-tabs-panel-state="active"] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .bw-section--tabs .bw-tabs__panel {
        transition: none !important;
    }
    .bw-section--tabs .bw-tabs__header--outer::after,
    .bw-section--tabs .bw-tabs--inner .bw-tabs__header--inner::after {
        transition: none !important;
    }
}

@media (max-width: 520px) {
    .bw-section--tabs .bw-tabs__tab {
        white-space: normal;
    }
}