<!------------------------- Всплывающее окно с информацией ч.1 © sadhaka ------------------------->
<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/56920.js"></script>

<!----- Всплывающее окно с информацией ч.2 © sadhaka, мод. max, the murderer! ----->
<div id="character" class="reveal-modal">
    <div class="modal-box">
        <a class="close-reveal-modal"><i class="fa-sharp fa-regular fa-xmark"></i></a>
        <a class="go-to-character"><i class="fa-regular fa-arrow-up-right-from-square"></i></a>
        <div class="modal-content"></div>
    </div>
</div>
<script type="text/javascript">
if (GroupID != 3) {
    $(".modal-link").click(function() {
        var modId = $(this).attr('id');
        var awards = 'Достижений пока нет или они не загрузились :(<br><a href="/mod/awards/">Посмотреть весь список достижений</a>';
        if ($(this).closest('.post-author').find('.mini_awards').length) {
            awards = $(this).closest('.post-author').find('.mini_awards').html();
        };
        $('.modal-content').html('');
        $('.go-to-character').prop('href', '/viewtopic.php?pid='+modId+'#'+modId);
        $.get('/viewtopic.php?pid='+modId+'#'+modId, function(data) {
            var indexVkladka = $(data).find('#p'+modId+ ' .post-content .character .buttons .vkladka').length;
            indexVkladka = indexVkladka + 1;
            $('.modal-content').html($(data).find('#p'+modId+ ' .post-content .character'));
            $('.modal-content .buttons').append('<div class="vkladka" data-number="'+indexVkladka+'">Достижения</div>');
            $('.modal-content .windows').append('<div class="window" data-content="'+indexVkladka+'"><div class="ld_awards">'+awards+'</div></div>');
            // Чтобы работали бб-вкладки
            $(".vkladka").click(function(event) {
                event.preventDefault();
                const id = $(this).attr('data-number');   
                $(this).closest(".wrapper").find(".vkladka, .window").removeClass("activevkladka");    
                $(this).closest(".wrapper").find(`.vkladka[data-number='${id}'], .window[data-content='${id}']`).addClass("activevkladka");
            });
        });
    });
};
</script>

/* BB-Tabs by kolobdur
------------------------------------------------------------------ */

.wrapper {
    display: grid;
    grid-template:
                 ". buttop ." auto
                 "butleft windows butright" auto
                 ". butbottom ." auto 
                 / auto 1fr auto;         
    overflow: hidden;
}

.buttop {grid-area: buttop; padding: var(--16) 0;}
.butleft {grid-area: butleft; padding-right: var(--16);}
.butright {grid-area: butright; padding-left: var(--16);}
.butbottom {grid-area: butbottom; padding: var(--16) 0;}

.buttons {z-index: 2; overflow: auto;}

.buttons div {
    padding: var(--4) var(--12);
    background: rgb(var(--secondary400) / .38);
    border-radius: var(--br800);
    text-align: center;
    cursor: pointer;
    font: 900 1rem/130% var(--font);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.buttop, .butbottom {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    gap: var(--8);
}

.butleft, .butright {
    display: flex;
    flex-direction: column;
    gap: var(--8);
}

.windows {
    grid-area: windows;
    display: grid;
    width: 100%;
    max-height: 60vh;
    padding: var(--8);
    border: 1px solid rgb(var(--secondary400) / .38);
    border-radius: var(--br300);
}

.window {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    overflow-y: auto;
    opacity: 0;
    z-index: 0;
    padding: var(--8) var(--16) var(--8) var(--8);
    height: 0;
}
 
.windows > .activevkladka {
    opacity: 1;
    z-index: 1;
    height: 100%;
}

.wrapper > br, .wrapper > p, .buttons > br, .buttons > p, .windows > br, .windows > p {
    display: none;
}

.buttons > .activevkladka {
    background: rgb(var(--dark900));
    color: rgb(var(--light100));
}

.buttons div:hover {
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
}

#vkladka-area div p {
    background: rgb(var(--secondary400) / .2);
    border-radius: var(--br300);
    padding: var(--6) var(--12);
}

#vkladka-area div p:hover {
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
}

#vkladka-area div:not(:last-child) {
    margin-bottom: var(--4);
}

#vkladka-area div {
    cursor: pointer;
}

#vkladka-area span {display: none;}