/* BlockBuilder tabs — theme-safe tokens (Diamond CSS vars when present) */

.bb-tabs-wrap {
    --bb-tabs-accent: var(--color-icon-primary, var(--color-primary, #ef4056));
    --bb-tabs-text: var(--color-neutral-black, inherit);
    --bb-tabs-muted: var(--color-neutral-500, #767790);
    --bb-tabs-border: var(--color-border, var(--color-neutral-200, rgba(127, 127, 127, 0.25)));
    --bb-tabs-surface: var(--color-neutral-100, rgba(127, 127, 127, 0.08));
    --bb-tabs-radius: 0.65rem;
    width: 100%;
    color: var(--bb-tabs-text);
}

/* Custom nav/trigger chrome — only for non-Diamond themes (pills, cards, sidebar, …) */
.bb-tabs__nav:not(.tabMenu) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.bb-tabs__trigger:not(.tabMenu__link) {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0.55rem 1rem;
    border-radius: 0.35rem;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.bb-tabs__trigger:not(.tabMenu__link).is-active {
    font-weight: 600;
}

.bb-tabs__panel {
    width: 100%;
}

.bb-tabs__panel[hidden],
.bb-tabs__acc-panel[hidden] {
    display: none !important;
}

.bb-tab-inner {
    width: 100%;
}

.bb-tabs__panel > .block,
.bb-tabs__acc-panel > .block,
.bb-tabs__edit-pane > .bb-sortable-tab > .block {
    padding: 0.75rem 0;
}

/* Diamond tabMenu — inherit theme tab styles; only normalize <button> semantics */
.bb-tabs-wrap:not(.bb-tabs-wrap--edit) .tabMenu.bb-tabs__nav {
    margin-bottom: 1rem;
}

.bb-tabs-wrap:not(.bb-tabs-wrap--edit) button.tabMenu__link.bb-tabs__trigger {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
}

/* pills */
.bb-tabs-wrap--theme-pills .bb-tabs__trigger {
    background: var(--bb-tabs-surface);
    color: var(--bb-tabs-muted);
}

.bb-tabs-wrap--theme-pills .bb-tabs__trigger.is-active {
    background: color-mix(in srgb, var(--bb-tabs-accent) 12%, transparent);
    color: var(--bb-tabs-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bb-tabs-accent) 35%, transparent);
}

/* cards */
.bb-tabs-wrap--theme-cards {
    border: 1px solid var(--bb-tabs-border);
    border-radius: var(--bb-tabs-radius);
    padding: 0.75rem;
    background: var(--color-neutral-000, transparent);
}

.bb-tabs-wrap--theme-cards .bb-tabs__nav {
    border-bottom: 1px solid var(--bb-tabs-border);
    padding-bottom: 0.5rem;
}

.bb-tabs-wrap--theme-cards .bb-tabs__trigger.is-active {
    background: var(--bb-tabs-surface);
    color: var(--bb-tabs-accent);
}

.bb-tabs-wrap--theme-cards .bb-tabs__panel {
    padding-top: 0.75rem;
}

/* sidebar-left (legacy vertical) */
@media screen and (min-width: 768px) {
    .bb-tabs-wrap--theme-sidebar-left:not(.bb-tabs-wrap--edit),
    .bb-tabs-wrap--theme-vertical:not(.bb-tabs-wrap--edit) {
        display: grid;
        grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }

    .bb-tabs-wrap--theme-sidebar-left:not(.bb-tabs-wrap--edit) .bb-tabs__nav,
    .bb-tabs-wrap--theme-vertical:not(.bb-tabs-wrap--edit) .bb-tabs__nav {
        flex-direction: column;
        margin-bottom: 0;
        border-inline-end: 1px solid var(--bb-tabs-border);
        padding-inline-end: 0.5rem;
    }

    .bb-tabs-wrap--theme-sidebar-left:not(.bb-tabs-wrap--edit) .bb-tabs__trigger,
    .bb-tabs-wrap--theme-vertical:not(.bb-tabs-wrap--edit) .bb-tabs__trigger {
        width: 100%;
        text-align: start;
        border-radius: 0.45rem;
    }

    .bb-tabs-wrap--theme-sidebar-left:not(.bb-tabs-wrap--edit) .bb-tabs__trigger.is-active,
    .bb-tabs-wrap--theme-vertical:not(.bb-tabs-wrap--edit) .bb-tabs__trigger.is-active {
        background: var(--bb-tabs-surface);
        color: var(--bb-tabs-accent);
        box-shadow: inset 3px 0 0 var(--bb-tabs-accent);
    }
}

/* sidebar-right */
@media screen and (min-width: 768px) {
    .bb-tabs-wrap--theme-sidebar-right:not(.bb-tabs-wrap--edit) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(9rem, 14rem);
        gap: 1rem;
        align-items: start;
    }

    .bb-tabs-wrap--theme-sidebar-right:not(.bb-tabs-wrap--edit) .bb-tabs__nav {
        order: 2;
        flex-direction: column;
        margin-bottom: 0;
        border-inline-start: 1px solid var(--bb-tabs-border);
        padding-inline-start: 0.5rem;
    }

    .bb-tabs-wrap--theme-sidebar-right:not(.bb-tabs-wrap--edit) .bb-tabs__body {
        order: 1;
    }

    .bb-tabs-wrap--theme-sidebar-right:not(.bb-tabs-wrap--edit) .bb-tabs__trigger {
        width: 100%;
        text-align: start;
        border-radius: 0.45rem;
    }

    .bb-tabs-wrap--theme-sidebar-right:not(.bb-tabs-wrap--edit) .bb-tabs__trigger.is-active {
        background: var(--bb-tabs-surface);
        color: var(--bb-tabs-accent);
        box-shadow: inset -3px 0 0 var(--bb-tabs-accent);
    }
}

@media screen and (max-width: 767px) {
    .bb-tabs-wrap--theme-sidebar-left .bb-tabs__nav,
    .bb-tabs-wrap--theme-sidebar-right .bb-tabs__nav,
    .bb-tabs-wrap--theme-vertical .bb-tabs__nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        border: none;
        padding: 0;
    }
}

/* accordion */
.bb-tabs-wrap--theme-accordion .bb-tabs__accordion-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bb-tabs__acc-item {
    border: 1px solid var(--bb-tabs-border);
    border-radius: var(--bb-tabs-radius);
    overflow: hidden;
    background: var(--bb-tabs-surface);
}

.bb-tabs__acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: none;
    background: var(--bb-tabs-surface);
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: start;
}

.bb-tabs__acc-item.is-open .bb-tabs__acc-trigger {
    background: color-mix(in srgb, var(--bb-tabs-accent) 8%, var(--bb-tabs-surface));
    color: var(--bb-tabs-accent);
    font-weight: 600;
}

.bb-tabs__acc-icon {
    width: 0.65rem;
    height: 0.65rem;
    border-inline-end: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.bb-tabs__acc-item.is-open .bb-tabs__acc-icon {
    transform: rotate(-135deg);
    margin-top: 0.25rem;
}

.bb-tabs__acc-panel {
    padding: 0 1rem 1rem;
}

.bb-tabs__body--stacked .bb-tabs__panel--always-visible {
    display: block !important;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bb-tabs-border);
}

.bb-tabs__body--stacked .bb-tabs__panel--always-visible:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.bb-tabs__section-head {
    margin-bottom: 0.75rem;
}

.bb-tabs__section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.bb-tabs__body--category-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 991px) {
    .bb-tabs__body--category-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .bb-tabs__body--category-cards {
        grid-template-columns: 1fr;
    }
}

.bb-tabs__body--category-cards .bb-tabs__panel--always-visible {
    display: block !important;
    border: 1px solid var(--bb-tabs-border);
    border-radius: var(--bb-tabs-radius);
    padding: 0.85rem;
    background: var(--bb-tabs-surface);
}

.bb-tabs-wrap--theme-stacked .bb-tabs__panel[hidden],
.bb-tabs-wrap--theme-category-cards .bb-tabs__panel[hidden] {
    display: block !important;
}