.wp-block-surge-blocks-tabbies {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.surge-tabbies-editor-notice {
    padding: 1rem;
    background: #f0f0f0;
    border-left: 4px solid #0052cc;
    margin-bottom: 1rem;
    font-family: monospace;
    font-size: 12px;
}

.surge-tabbies-nav-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    border-bottom: 1px solid transparent; /* Optional border */
}

.surge-tabbies-tab-button {
    background: var(--tab-bg-default, transparent);
    color: var(--tab-color-default, #666);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--tab-border-radius, 24px);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.surge-tabbies-tab-button:hover,
.surge-tabbies-tab-button:focus-visible {
    background: var(--tab-bg-hover, #f0f0f0);
    color: var(--tab-color-hover, #333);
}

.surge-tabbies-tab-button[aria-selected="true"] {
    background: var(--tab-bg-active, #0052cc);
    color: var(--tab-color-active, #fff);
}

.surge-tabbies-panels-container {
    position: relative;
}

/* Editor specific styles to show only active panel */
.surge-tabbies-editor-wrapper:not(.is-stacked) .wp-block-surge-blocks-tabbies-item {
    display: none;
}

.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="0"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(1),
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="1"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(2),
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="2"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(3),
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="3"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(4),
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="4"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(5),
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="5"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(6),
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="6"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(7),
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="7"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(8),
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="8"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(9),
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab="9"] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(10) {
    display: block;
}

/* Fallback if more than 10 tabs, show them all so they aren't lost */
.surge-tabbies-editor-wrapper:not(.is-stacked) .surge-tabbies-panels-container[data-active-tab] > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="surge-blocks/tabbies-item"]:nth-child(n+11) {
    display: block;
    opacity: 0.5;
}

/* Stacked mode styles */
.surge-tabbies-editor-wrapper.is-stacked .wp-block-surge-blocks-tabbies-item {
    display: block;
    margin-bottom: 1rem;
}