/* ── Tab Groups — Frontend Styles ────────────────────── */

/* ── CSS custom properties (set inline per widget) ───── */
.bptk-tg {
    --tg-tab-bg:       #f1f5f9;
    --tg-tab-text:     #374151;
    --tg-active-bg:    #0b1f3a;
    --tg-active-text:  #ffffff;
    --tg-accent:       #F38400;
    --tg-panel-bg:     transparent;
    --tg-tab-radius:   20px;
    --tg-panel-radius: 0px;
    --tg-tab-fs:       15px;

    font-family: inherit;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.bptk-tg *,
.bptk-tg *::before,
.bptk-tg *::after {
    box-sizing: inherit;
}

/* ── Tab nav (shared) ────────────────────────────────── */
.bptk-tg-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.bptk-tg-tab {
    font-family: inherit;
    font-size: var(--tg-tab-fs);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bptk-tg-tab:focus-visible {
    outline: 2px solid var(--tg-accent);
    outline-offset: 2px;
}

/* ── Style: Pills ────────────────────────────────────── */
.bptk-tg--pills .bptk-tg-tab {
    background: var(--tg-tab-bg);
    color: var(--tg-tab-text);
    border-radius: var(--tg-tab-radius);
    padding: 9px 20px;
    border: 2px solid transparent;
}

.bptk-tg--pills .bptk-tg-tab:hover {
    border-color: var(--tg-accent);
}

.bptk-tg--pills .bptk-tg-tab.is-active {
    background: var(--tg-active-bg);
    color: var(--tg-active-text);
    border-color: var(--tg-active-bg);
}

/* ── Style: Underline ────────────────────────────────── */
.bptk-tg--underline .bptk-tg-nav {
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.bptk-tg--underline .bptk-tg-nav::-webkit-scrollbar {
    display: none;
}

.bptk-tg--underline .bptk-tg-tab {
    background: transparent;
    color: var(--tg-tab-text);
    border-radius: 0;
    padding: 10px 20px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
}

.bptk-tg--underline .bptk-tg-tab:hover {
    color: var(--tg-accent);
}

.bptk-tg--underline .bptk-tg-tab.is-active {
    color: var(--tg-accent);
    border-bottom-color: var(--tg-accent);
    font-weight: 600;
}

/* ── Style: Boxed ────────────────────────────────────── */
.bptk-tg--boxed .bptk-tg-nav {
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: var(--tg-tab-radius);
    padding: 4px;
    background: var(--tg-tab-bg);
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    margin-bottom: 24px;
}

.bptk-tg--boxed .bptk-tg-nav::-webkit-scrollbar {
    display: none;
}

.bptk-tg--boxed .bptk-tg-tab {
    background: transparent;
    color: var(--tg-tab-text);
    border-radius: calc(var(--tg-tab-radius) - 4px);
    padding: 8px 18px;
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

.bptk-tg--boxed .bptk-tg-tab.is-active {
    background: var(--tg-active-bg);
    color: var(--tg-active-text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ── Panels ──────────────────────────────────────────── */
.bptk-tg-panels {
    position: relative;
}

.bptk-tg-panel {
    display: none;
    background: var(--tg-panel-bg);
    border-radius: var(--tg-panel-radius);
}

.bptk-tg-panel.is-active {
    display: block;
    animation: bptk-tg-fade 0.18s ease;
}

@keyframes bptk-tg-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Position: top (default) ─────────────────────────── */
.bptk-tg--pos-top .bptk-tg-nav    { order: 0; }
.bptk-tg--pos-top .bptk-tg-panels { order: 1; }

/* ── Position: bottom ───────────────────────────────── */
.bptk-tg--pos-bottom .bptk-tg-nav {
    order: 1;
    margin-bottom: 0;
    margin-top: 20px;
}
.bptk-tg--pos-bottom .bptk-tg-panels { order: 0; }

/* Underline bottom: flip the indicator to the top edge */
.bptk-tg--pos-bottom.bptk-tg--underline .bptk-tg-nav {
    border-bottom: none;
    border-top: 2px solid #e5e7eb;
    margin-top: 24px;
    margin-bottom: 0;
}
.bptk-tg--pos-bottom.bptk-tg--underline .bptk-tg-tab {
    border-bottom: none;
    border-top: 3px solid transparent;
    margin-bottom: 0;
    margin-top: -2px;
}
.bptk-tg--pos-bottom.bptk-tg--underline .bptk-tg-tab.is-active {
    border-top-color: var(--tg-accent);
    color: var(--tg-accent);
}

/* ── Alignment: pills + underline ────────────────────── */
/* Left */
.bptk-tg--pills.bptk-tg--align-left .bptk-tg-nav,
.bptk-tg--underline.bptk-tg--align-left .bptk-tg-nav    { justify-content: flex-start; }

/* Center */
.bptk-tg--pills.bptk-tg--align-center .bptk-tg-nav,
.bptk-tg--underline.bptk-tg--align-center .bptk-tg-nav  { justify-content: center; }

/* Right */
.bptk-tg--pills.bptk-tg--align-right .bptk-tg-nav,
.bptk-tg--underline.bptk-tg--align-right .bptk-tg-nav   { justify-content: flex-end; }

/* ── Alignment: boxed ────────────────────────────────── */
/* For center/right the nav shrinks to fit its tabs;
   tabs switch from flex:1 (fill) to auto-width.        */
.bptk-tg--boxed.bptk-tg--align-center .bptk-tg-nav {
    width: fit-content;
    align-self: center;
}
.bptk-tg--boxed.bptk-tg--align-right .bptk-tg-nav {
    width: fit-content;
    align-self: flex-end;
}
.bptk-tg--boxed.bptk-tg--align-center .bptk-tg-tab,
.bptk-tg--boxed.bptk-tg--align-right .bptk-tg-tab {
    flex: 0 0 auto;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
    .bptk-tg--pills .bptk-tg-nav {
        gap: 6px;
    }

    .bptk-tg--pills .bptk-tg-tab {
        font-size: calc(var(--tg-tab-fs) - 1px);
        padding: 8px 14px;
    }

    .bptk-tg--boxed .bptk-tg-tab {
        padding: 7px 12px;
        font-size: calc(var(--tg-tab-fs) - 1px);
    }

    .bptk-tg--underline .bptk-tg-tab {
        padding: 8px 14px;
    }
}