/* ===============================
   L2 TABS – FULL STYLE
================================= */

.l2-tabs{
    margin-top:1.5rem;
    border:0.0625rem solid rgba(255,215,0,0.15);
    background:
            linear-gradient(180deg, rgba(22,30,38,0.98), rgba(10,15,20,1));
    box-shadow:
            0 0 2.5rem rgba(0,0,0,0.75),
            inset 0 0 1.5rem rgba(0,0,0,0.6);
    backdrop-filter:blur(0.125rem);
}

/* ================= NAV ================= */

.l2-tabs-nav{
    display:flex;
    position:relative;
    border-bottom:0.0625rem solid rgba(255,215,0,0.1);
    background:
            linear-gradient(180deg, rgba(28,36,45,0.8), rgba(14,20,26,0.85));
}

.l2-tabs-nav::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0.0625rem;
    background:linear-gradient(
            90deg,
            transparent,
            rgba(226,185,59,0.6),
            transparent
    );
    opacity:.4;
}

/* ================= BUTTON ================= */

.l2-tab-btn{
    flex:1;
    padding:1.1rem 0.75rem;
    background:transparent !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    appearance:none;
    -webkit-appearance:none;

    color:#8f9aa3;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.55rem;

    font-size:0.95rem;
    font-weight:500;
    letter-spacing:.04em;

    position:relative;
    transition:.25s ease;
}

.l2-tab-btn i{
    font-size:0.85rem;
    opacity:.55;
    transition:.25s;
}

/* Hover */
.l2-tab-btn:hover{
    color:#d7b75f;
    text-shadow:0 0 0.4rem rgba(226,185,59,0.4);
}

.l2-tab-btn:hover i{
    opacity:1;
}

/* Active */
.l2-tab-btn.active{
    color:#e2b93b;
    text-shadow:
            0 0 0.4rem rgba(226,185,59,0.6),
            0 0 0.8rem rgba(226,185,59,0.4);
}

.l2-tab-btn.active i{
    opacity:1;
}

.l2-tab-btn.active::before{
    content:'';
    position:absolute;
    inset:0;
    background:
            radial-gradient(
                    ellipse at center,
                    rgba(226,185,59,0.12),
                    transparent 70%
            );
    pointer-events:none;
}

.l2-tab-btn.active::after{
    content:'';
    position:absolute;
    bottom:0;
    left:18%;
    width:64%;
    height:0.14rem;
    background:
            linear-gradient(
                    90deg,
                    transparent,
                    #e2b93b,
                    transparent
            );
    box-shadow:
            0 0 0.7rem rgba(226,185,59,0.7),
            0 0 1.2rem rgba(226,185,59,0.5);
}

/* ================= CONTENT ================= */

.l2-tabs-content{
    position:relative;
    padding:2rem 1.75rem;
    background:
            linear-gradient(180deg, rgba(16,22,30,0.97), rgba(6,10,14,1));
    border-top:0.0625rem solid rgba(255,215,0,0.08);
    box-shadow:
            inset 0 0 2.5rem rgba(0,0,0,0.75);
    transition:height .35s ease;
}

/* subtle inner glow frame */
.l2-tabs-content::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:
            inset 0 0 0.0625rem rgba(255,215,0,0.15),
            inset 0 0 1.2rem rgba(255,215,0,0.05);
}

/* ================= PANEL ================= */

.l2-tab-panel{
    position:relative;
    width:100%;
    color:#cfd6dd;
    animation:l2Fade .25s ease;
}

/* ================= ANIMATION ================= */

@keyframes l2Fade{
    from{
        opacity:0;
        transform:translateY(0.5rem);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}