/* ============================================================
 *  Realm Tabbed Button — frontend styles (v1.3)
 *
 *  Layout (kept from v1.2):
 *  - Wrapper is a pure flex column container (no background).
 *  - Link area is the "button head": rounded top corners, square
 *    bottom edge, background = var(--rtb-bg) (a fixed colour set
 *    via the Elementor Background Color control).
 *  - Tabs hang BELOW the link area: square tops, rounded bottoms,
 *    each carrying its own colour via inline --rtb-tab-bg.
 *
 *  Colour model (back to v1.0 style):
 *  - Button head background is FIXED — driven by --rtb-bg.
 *  - Inactive tabs show their own --rtb-tab-bg.
 *  - The currently active tab is forced to var(--rtb-bg), so it
 *    visually merges into the button head above it.
 *  - The tab's background-color transitions smoothly on
 *    activation. This is safe now because the button head is
 *    fixed — no desync between two moving values.
 *
 *  Folder cascade:
 *  - Tabs overlap horizontally via negative margin (Tab Overlap).
 *  - Active tab gets a higher z-index so it sits in front of its
 *    neighbours.
 * ============================================================ */

.realm-tabbed-button {
    --rtb-bg: #1a1f2e;
    --rtb-transition: 250ms;
    --rtb-hover-lift: 0px;
    --rtb-hover-scale: 1;

    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    text-decoration: none;
    box-sizing: border-box;
    transition: transform var(--rtb-transition) ease;
    will-change: transform;
}

.realm-tabbed-button:hover {
    transform: translateY(var(--rtb-hover-lift)) scale(var(--rtb-hover-scale));
}

.realm-tabbed-button *,
.realm-tabbed-button *::before,
.realm-tabbed-button *::after {
    box-sizing: border-box;
}

/* ---------------- Button head (link) ---------------- */

.realm-tabbed-button__link {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 18px;
    padding: 20px 26px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    background-color: var(--rtb-bg);
    border: 0;
    /* Rounded top, square bottom — tabs attach at the bottom edge */
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* Above tabs in z so any active-tab effects tuck behind cleanly */
    position: relative;
    z-index: 5;
}

.realm-tabbed-button__link:hover,
.realm-tabbed-button__link:focus,
.realm-tabbed-button__link:active {
    background-color: var(--rtb-bg);
    text-decoration: none;
    color: inherit;
}

.realm-tabbed-button__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.realm-tabbed-button__icon img,
.realm-tabbed-button__icon svg {
    display: block;
    width: 64px;
    height: auto;
    max-width: 100%;
}

.realm-tabbed-button__text {
    flex: 1 1 auto;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

/* ---------------- Tab strip (hanging) ---------------- */

.realm-tabbed-button__tabs {
    display: flex;
    width: 100%;
    align-items: stretch;
    flex-wrap: nowrap;
    position: relative;
}

.realm-tabbed-button__tab {
    flex: 1 1 0;
    min-width: 0;
    appearance: none;
    border: 0;
    margin: 0;
    padding: 14px 20px;
    background-color: var(--rtb-tab-bg, #b8b8b8);
    color: var(--rtb-tab-text, #1a1f2e);
    cursor: pointer;
    font: inherit;
    text-align: center;
    user-select: none;
    /* Square tops flush with button head, rounded bottoms hanging down */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    position: relative;
    z-index: 1;
    /* Smooth crossfade between own colour and button colour on activation */
    transition:
        background-color var(--rtb-transition) ease,
        color var(--rtb-transition) ease,
        transform var(--rtb-transition) ease;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.realm-tabbed-button__tab-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    z-index: 1;
    transform-origin: center center;
    transition: transform var(--rtb-transition) ease;
}

/* Active tab text scale — controlled by --rtb-active-text-scale (default 1). */
.realm-tabbed-button__tab.is-active .realm-tabbed-button__tab-text {
    transform: scale(var(--rtb-active-text-scale, 1));
}

/* Coming-soon tabs: greyed and non-interactive. JS short-circuits activation
 * for these; CSS makes them look unavailable. We keep pointer-events ON so
 * cursor: not-allowed actually shows. */
.realm-tabbed-button__tab.is-coming-soon,
.realm-tabbed-button__tab.is-coming-soon:hover,
.realm-tabbed-button__tab.is-coming-soon:focus,
.realm-tabbed-button__tab.is-coming-soon:active {
    opacity: 0.45;
    filter: grayscale(0.8);
    cursor: not-allowed;
    background-color: var(--rtb-tab-bg, #b8b8b8);
    color: var(--rtb-tab-text, #1a1f2e);
}

/* Active tab base: cascade z-index applies in both indicator modes. */
.realm-tabbed-button__tab.is-active {
    z-index: 4;
}

/* Colour-match mode (default): active tab takes the button's bg colour.
 * The :not() ensures this still applies if the data attribute is absent
 * (e.g. cached markup from an older version). */
.realm-tabbed-button:not([data-indicator-style="pointer"]) .realm-tabbed-button__tab.is-active {
    background-color: var(--rtb-bg);
}

/* Pointer mode: tabs keep their own colour in every state. */
.realm-tabbed-button[data-indicator-style="pointer"] .realm-tabbed-button__tab.is-active {
    background-color: var(--rtb-tab-bg, #b8b8b8);
}

/* ---------------- Active-tab pointer (Pointer mode) ---------------- */

.realm-tabbed-button__pointer {
    position: absolute;
    top: calc(100% + var(--rtb-pointer-offset, 0px));
    left: var(--rtb-indicator-x, 50%);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: calc(var(--rtb-pointer-w, 18px) / 2) solid transparent;
    border-right: calc(var(--rtb-pointer-w, 18px) / 2) solid transparent;
    border-top: var(--rtb-pointer-h, 10px) solid var(--rtb-pointer-color, var(--rtb-bg));
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    transition:
        left var(--rtb-transition) ease,
        opacity var(--rtb-transition) ease;
}

.realm-tabbed-button[data-indicator-style="pointer"] .realm-tabbed-button__pointer {
    opacity: 1;
}

/* Defensively pin :hover / :focus / :active so theme rules like
 * `button:hover { background: ... }` cannot leak in and tint our tabs.
 * In hover-trigger mode, the tab gains .is-active on mouseenter and the
 * .is-active rules below take over before this matters. */
.realm-tabbed-button__tab:hover,
.realm-tabbed-button__tab:focus,
.realm-tabbed-button__tab:active {
    background-color: var(--rtb-tab-bg, #b8b8b8);
    color: var(--rtb-tab-text, #1a1f2e);
}

/* Active-state hover reset — mode-aware. */
.realm-tabbed-button:not([data-indicator-style="pointer"]) .realm-tabbed-button__tab.is-active:hover,
.realm-tabbed-button:not([data-indicator-style="pointer"]) .realm-tabbed-button__tab.is-active:focus,
.realm-tabbed-button:not([data-indicator-style="pointer"]) .realm-tabbed-button__tab.is-active:active {
    background-color: var(--rtb-bg);
}

.realm-tabbed-button[data-indicator-style="pointer"] .realm-tabbed-button__tab.is-active:hover,
.realm-tabbed-button[data-indicator-style="pointer"] .realm-tabbed-button__tab.is-active:focus,
.realm-tabbed-button[data-indicator-style="pointer"] .realm-tabbed-button__tab.is-active:active {
    background-color: var(--rtb-tab-bg, #b8b8b8);
}

/* ---------------- Selected border (SVG outline) ---------------- */

.realm-tabbed-button__border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
}

.realm-tabbed-button--bordered .realm-tabbed-button__border {
    opacity: 1;
}

.realm-tabbed-button__border path {
    fill: none;
    stroke: var(--rtb-selected-border-color, currentColor);
    stroke-width: var(--rtb-selected-border-width, 2);
    stroke-linejoin: round;
    stroke-linecap: round;
    /* Modern browsers can animate `d` directly so the outline morphs
     * smoothly between tab positions. Older browsers snap. */
    transition:
        d var(--rtb-transition) ease,
        stroke var(--rtb-transition) ease,
        stroke-width var(--rtb-transition) ease;
}

/* ---------------- Accessibility ---------------- */

.realm-tabbed-button__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.realm-tabbed-button__tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
    z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
    .realm-tabbed-button,
    .realm-tabbed-button__tab {
        transition: none;
    }
    .realm-tabbed-button:hover {
        transform: none;
    }
}