.rte-tabs {
    width: 100%;
}

.rte-tabs__nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 24px;
}

.rte-tabs__button {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
    padding: 10px 14px;
    border-radius: 999px;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.rte-tabs__button:hover,
.rte-tabs__button:focus-visible {
    outline: none;
    border-color: currentColor;
}

.rte-tabs__button.is-active {
    color: #E78B16;
    border-color: #E78B16;
}

.rte-tabs__button:focus-visible {
    box-shadow: 0 0 0 2px rgba(231, 139, 22, .22);
}

.rte-tabs__panel[hidden] {
    display: none !important;
}

.rte-tabs__panel.is-active {
    animation: rte-tabs-fade-in var(--rte-tab-duration, 250ms) ease both;
}

@keyframes rte-tabs-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rte-notice {
    padding: 14px 16px;
    border: 1px solid #ddd;
    background: #fafafa;
    color: #444;
}

@media (max-width: 767px) {
    .rte-tabs__nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 6px;
    }

    .rte-tabs__button {
        flex: 0 0 auto;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rte-tabs__button,
    .rte-tabs__panel.is-active {
        transition: none;
        animation: none;
    }
}


/*
 * The widget renders Elementor saved templates dynamically. Elementor normally
 * removes .elementor-invisible during its own frontend lifecycle, but a saved
 * template inserted by another widget can miss that pass. Keep this widget
 * usable while the custom JS initializes the inner Elementor elements.
 */
.rte-tabs,
.elementor-widget-rte-repeater-tabs .rte-tabs {
    visibility: visible !important;
}

.rte-tabs .elementor-invisible {
    visibility: visible !important;
}