﻿/* Tabs container */
.fieldgroup-tabs {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    /* move horizontal scrolling to an inner scroller to not break sticky */
    overflow: visible;
    padding: 6px 8px 0 8px;
    border-bottom: 1px solid var(--ia-border,#e5e5e5);
    margin-bottom: 12px;
/*    position: sticky;*/
    /* stick just below the main navbar; override via CSS variable if needed */
    top: var(--app-navbar-height,64px);
    z-index: 1000;
    background: var(--ia-surface, #fff);
    backdrop-filter: saturate(180%) blur(6px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

/* optional inner scroller if long tabs */
.fieldgroup-tabs::after { content: ""; }
.fieldgroup-tabs .fieldgroup-tabs-scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tab button */
.fieldgroup-tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ia-tab-fg, #555);
    font-size: .92rem;
    padding: 8px 12px;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

    .fieldgroup-tab:hover {
        color: var(--ia-tab-fg-hover, #222);
        background: var(--ia-tab-bg-hover, #f6f7f9);
    }

    /* Active state (hook for future logic) */
    .fieldgroup-tab.active {
        color: var(--ia-tab-active-fg, #1a73e8);
        border-color: var(--ia-tab-active, #1a73e8);
        background: var(--ia-tab-active-bg, #eef4ff);
    }

    /* Reduce focus outline but keep accessibility */
    .fieldgroup-tab:focus-visible {
        outline: 2px solid var(--ia-focus, #7aa7ff);
        outline-offset: 2px;
    }
/* Floating Scroll-to-Top button */
.creator-scroll-top {
 position: fixed;
 right:16px;
 bottom:16px;
 width:40px;
 height:40px;
 border-radius:50%;
 border: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: #1a73e8;
 color: #fff;
 box-shadow:06px16px rgba(0,0,0,.15);
 cursor: pointer;
 z-index:1200;
 opacity: .9;
 transition: opacity .15s ease, transform .15s ease, background .2s ease;
}
.creator-scroll-top:hover { opacity:1; transform: translateY(-1px); background:#1564cf; }
.creator-scroll-top:active { transform: translateY(0); }
.creator-scroll-top:focus-visible { outline:2px solid #7aa7ff; outline-offset:2px; }

.location-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.location-btn {
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .location-btn:hover {
        background: #e6f0ff;
        transform: scale(1.08);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    .location-btn:active {
        transform: scale(0.95);
    }