/* ============================================================
 *  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,
        border-color 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: default;
    background-color: var(--rtb-tab-bg, #b8b8b8);
    color: var(--rtb-tab-text, #1a1f2e);
    /* Allow the tooltip ::after to render outside the tab box. The
     * inner __tab-text span still clips long text with ellipsis. */
    overflow: visible;
}

/* Custom "Coming soon" tooltip — replaces the native title-attribute
 * tooltip, which the browser delays by 500-1500ms. This shows instantly
 * on hover/focus. Positioned below the tab so it doesn't overlap the
 * button head. The parent tab's opacity:0.45 partially fades the
 * tooltip too (CSS opacity can't be increased on a child); the dark
 * background + white text keeps it legible regardless. */
.realm-tabbed-button__tab.is-coming-soon::after {
    content: attr(data-coming-soon-label);
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 6px;
    padding: 4px 10px;
    transform: translateX(-50%);
    background-color: rgba(20, 24, 33, 0.95);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition: opacity 120ms ease;
}

.realm-tabbed-button__tab.is-coming-soon:hover::after,
.realm-tabbed-button__tab.is-coming-soon:focus-visible::after {
    opacity: 1;
}

/* When EVERY tab is marked coming-soon the entire widget greys out and
 * cannot be clicked. JS preventDefaults the link click; here we kill the
 * cursor and active-indicator visuals, and reset per-tab opacity so the
 * wrapper-level fade isn't stacked on top of the per-tab one. */
.realm-tabbed-button--all-coming-soon {
    opacity: 0.45;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

.realm-tabbed-button--all-coming-soon .realm-tabbed-button__link {
    cursor: not-allowed;
}

.realm-tabbed-button--all-coming-soon .realm-tabbed-button__tab,
.realm-tabbed-button--all-coming-soon .realm-tabbed-button__tab.is-coming-soon,
.realm-tabbed-button--all-coming-soon .realm-tabbed-button__tab.is-coming-soon:hover,
.realm-tabbed-button--all-coming-soon .realm-tabbed-button__tab.is-coming-soon:focus,
.realm-tabbed-button--all-coming-soon .realm-tabbed-button__tab.is-coming-soon:active {
    opacity: 1;
    filter: none;
}

.realm-tabbed-button--all-coming-soon .realm-tabbed-button__border,
.realm-tabbed-button--all-coming-soon .realm-tabbed-button__pointer {
    opacity: 0;
}

/* 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, 2px);
    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;
}

/* In bordered mode, the active tab's outline is drawn by the SVG L-shape
 * (which uses a centred stroke that draws half outside the box) and the
 * inactive tabs get a matching outline via a ::before pseudo-element
 * that extends sw/2 outside the box on the left, right, and bottom — so
 * the inactive tabs occupy the SAME visual footprint as the active tab.
 *
 * The top edge of the pseudo-element sits at the tab's top edge (no
 * outward offset there) so it doesn't clash with the L-shape's
 * bottom-of-button horizontal, which already runs along the inactive
 * tabs' tops. No top border for the same reason.
 *
 * Box-sizing on the tab itself is unchanged: tab dimensions match what
 * the wrapper computes from Elementor's sizing controls. The pseudo-
 * element only paints the outline, never affects layout. */
.realm-tabbed-button--bordered .realm-tabbed-button__tab {
    /* Allow the ::before to extend outside the tab box. The inner
     * __tab-text span still clips text overflow with ellipsis. */
    overflow: visible;
}

.realm-tabbed-button--bordered .realm-tabbed-button__tab:not(.is-active)::before {
    content: '';
    position: absolute;
    /* Half the stroke width sticks out on left/right/bottom; top stays
     * flush with the tab top edge. */
    top: 0;
    left:   calc(var(--rtb-selected-border-width, 2px) / -2);
    right:  calc(var(--rtb-selected-border-width, 2px) / -2);
    bottom: calc(var(--rtb-selected-border-width, 2px) / -2);
    border: var(--rtb-selected-border-width, 2px) solid var(--rtb-selected-border-color, currentColor);
    border-top: 0;
    /* Inherit the tab's bottom-corner radii so the curve matches. */
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    pointer-events: none;
    /* Sit behind the tab text but above its background. */
    z-index: 0;
}

/* ---------------- 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;
    }
}