/*
===============================================
 POLSKAELITA.PL - LEGENDA GRUP
 Green Dark | MyBB 1.8.41
 Plik: pe_group_legend.css
 25 rang - pelna lista
===============================================
*/

/* GLOWNY KONTENER */

.pe-group-legend {
    width: 100%;
    box-sizing: border-box;
    margin: 18px 0;
    padding: 0;
    background: #171d19;
    border: 1px solid #304337;
    border-radius: 9px;
    overflow: hidden;
    color: #e9f4eb;
}

/* NAGLOWEK */

.pe-group-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background: #202b23;
    border-bottom: 1px solid #304337;
}

.pe-group-legend-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #f1fff2;
}

.pe-group-legend-heading i {
    color: #77c68d;
    font-size: 15px;
}

.pe-group-legend-subtitle {
    font-size: 11px;
    font-weight: 500;
    color: #92a997;
}

/* LISTA RANG */

.pe-group-legend-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px;
}

/* PODSTAWOWY WYGLAD RANG */

.pe-group-legend .pe-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    min-height: 34px;
    padding: 8px 13px;
    color: var(--pe-rank-color, #b8c8bd);
    background-color: var(--pe-rank-bg, #2b3830);
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    cursor: default;
    transition:
        background-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.pe-group-legend .pe-rank i {
    font-size: 12px;
    flex-shrink: 0;
}

.pe-group-legend .pe-rank:hover {
    transform: translateY(-2px);
    background-image: linear-gradient(
        rgba(255,255,255,.08),
        rgba(255,255,255,.08)
    );
    box-shadow: 0 3px 12px rgba(0,0,0,.2);
}

/* 01 - WLASCICIEL */

.pe-group-legend .pe-owner {
    --pe-rank-color: #ffd66c;
    --pe-rank-bg: #47371c;
}

/* 02 - ZASTE PCA WLASCICIELA */

.pe-group-legend .pe-deputy {
    --pe-rank-color: #ffc08b;
    --pe-rank-bg: #443024;
}

/* 03 - ADMINISTRATOR */

.pe-group-legend .pe-admin {
    --pe-rank-color: #ff7373;
    --pe-rank-bg: #432428;
}

/* 04 - JUNIOR ADMIN */

.pe-group-legend .pe-junioradmin {
    --pe-rank-color: #ff9e70;
    --pe-rank-bg: #453024;
}

/* 05 - OPIEKUN MODERACJI */

.pe-group-legend .pe-modchief {
    --pe-rank-color: #ce9aff;
    --pe-rank-bg: #382946;
}

/* 06 - MODERATOR */

.pe-group-legend .pe-moderator {
    --pe-rank-color: #77bcff;
    --pe-rank-bg: #1e3548;
}

/* 07 - REDAKTOR */

.pe-group-legend .pe-redaktor {
    --pe-rank-color: #9dd86f;
    --pe-rank-bg: #303e22;
}

/* 08 - GRAFIK */

.pe-group-legend .pe-grafik {
    --pe-rank-color: #ed9ddc;
    --pe-rank-bg: #412d3b;
}

/* 09 - UBTEAM */

.pe-group-legend .pe-ubteam {
    --pe-rank-color: #be91ff;
    --pe-rank-bg: #342544;
}

/* 10 - WLASCICIEL SERWERA */

.pe-group-legend .pe-serverowner {
    --pe-rank-color: #ffb86b;
    --pe-rank-bg: #463223;
}

/* 11 - OPIEKUN SERWERA */

.pe-group-legend .pe-servercaretaker {
    --pe-rank-color: #64d8dd;
    --pe-rank-bg: #203b3c;
}

/* 12 - ADMIN CS 1.6 */

.pe-group-legend .pe-cs16 {
    --pe-rank-color: #9edf76;
    --pe-rank-bg: #2d4026;
}

/* 13 - ADMIN CS2 */

.pe-group-legend .pe-cs2 {
    --pe-rank-color: #f0aa65;
    --pe-rank-bg: #453123;
}

/* 14 - ADMIN DISCORD */

.pe-group-legend .pe-discord {
    --pe-rank-color: #a5aeff;
    --pe-rank-bg: #292d49;
}

/* 15 - ZASLUZONY */

.pe-group-legend .pe-honored {
    --pe-rank-color: #f5cf83;
    --pe-rank-bg: #423722;
}

/* 16 - SPONSOR */

.pe-group-legend .pe-sponsor {
    --pe-rank-color: #f5b966;
    --pe-rank-bg: #463525;
}

/* 17 - DONATOR */

.pe-group-legend .pe-donator {
    --pe-rank-color: #ff91a8;
    --pe-rank-bg: #452834;
}

/* 18 - VIP */

.pe-group-legend .pe-vip {
    --pe-rank-color: #f6dd77;
    --pe-rank-bg: #433e22;
}

/* 19 - TYPER */

.pe-group-legend .pe-typer {
    --pe-rank-color: #86d9a1;
    --pe-rank-bg: #243d30;
}

/* 20 - PARTNER */

.pe-group-legend .pe-partner {
    --pe-rank-color: #78c9ee;
    --pe-rank-bg: #243a47;
}

/* 21 - PRZYJACIEL */

.pe-group-legend .pe-friend {
    --pe-rank-color: #b9e88c;
    --pe-rank-bg: #334029;
}

/* 22 - KOBIETA */

.pe-group-legend .pe-woman {
    --pe-rank-color: #f6a3d9;
    --pe-rank-bg: #432b3c;
}

/* 23 - UZYTKOWNIK */

.pe-group-legend .pe-user {
    --pe-rank-color: #b8c8bd;
    --pe-rank-bg: #2b3830;
}

/* 24 - URLOP */

.pe-group-legend .pe-urlop {
    --pe-rank-color: #9bb2c6;
    --pe-rank-bg: #293641;
}

/* 25 - ZBANOWANY */

.pe-group-legend .pe-banned {
    --pe-rank-color: #e58d93;
    --pe-rank-bg: #41272a;
}

/* TABLETY */

@media screen and (max-width: 768px) {
    .pe-group-legend-list {
        gap: 8px;
        padding: 14px;
    }

    .pe-group-legend .pe-rank {
        padding: 7px 11px;
        font-size: 11px;
    }
}

/* TELEFONY */

@media screen and (max-width: 480px) {
    .pe-group-legend-header {
        padding: 12px 14px;
    }

    .pe-group-legend-subtitle {
        display: none;
    }

    .pe-group-legend-list {
        gap: 7px;
        padding: 12px;
    }

    .pe-group-legend .pe-rank {
        min-height: 31px;
        padding: 7px 10px;
        font-size: 11px;
        white-space: normal;
    }
}

/* OGRANICZENIE ANIMACJI */

@media (prefers-reduced-motion: reduce) {
    .pe-group-legend .pe-rank {
        transition: none;
    }

    .pe-group-legend .pe-rank:hover {
        transform: none;
    }
}