/* =========================================================
   MOBILELEGENDSPEDIA - RANKINGS
========================================================= */

.rankings-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 285px;
    gap:14px;
    align-items:start
}

.rankings-main,
.rankings-sidebar{
    min-width:0
}

.rankings-heading{
    margin-bottom:12px
}

.rankings-heading h1{
    margin:0 0 4px;
    color:#25282d;
    font-size:28px;
    font-weight:900
}

.rankings-heading p{
    margin:0;
    color:#8b8f95;
    font-size:10px
}

.rankings-toolbar{
    margin:12px 0;
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    gap:10px
}

.rankings-tabs{
    flex:1;
    display:flex;
    background:#fff;
    border:1px solid #d4d7da
}

.rankings-tab{
    min-width:145px;
    min-height:42px;
    padding:0 16px;
    border:0;
    border-right:1px solid #ddd;
    background:#fff;
    color:#50545a;
    font-size:10px;
    font-weight:900;
    cursor:pointer
}

.rankings-tab.active,
.rankings-tab:hover{
    background:#272b31;
    color:#fff
}

.rankings-region-filter{
    width:170px
}

.rankings-region-filter select{
    width:100%;
    height:44px;
    padding:0 10px;
    background:#fff;
    border:1px solid #d4d7da;
    color:#3b3e43;
    font-size:10px
}

.rankings-panel[hidden]{
    display:none!important
}

.rankings-box-title{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important
}

.rankings-box-title span:last-child{
    color:#8b8f95;
    font-size:8px
}

.ranking-row{
    min-height:78px;
    display:grid;
    grid-template-columns:70px 62px minmax(0,1fr) 350px 18px;
    gap:9px;
    align-items:center;
    padding:8px 11px;
    border-bottom:1px solid #eee;
    color:#292c31
}

.ranking-row:hover{
    background:#fafafb
}

.ranking-position{
    text-align:center
}

.ranking-position strong{
    display:block;
    color:#292c31;
    font-size:17px
}

.ranking-row:nth-child(1) .ranking-position strong{color:#d4a100}
.ranking-row:nth-child(2) .ranking-position strong{color:#89929b}
.ranking-row:nth-child(3) .ranking-position strong{color:#a56a3d}

.rank-move{
    display:block;
    margin-top:4px;
    font-size:7px;
    font-weight:900
}

.rank-move.up{color:#178448}
.rank-move.down{color:#d62531}
.rank-move.same{color:#9ba0a6}

.ranking-logo,
.ranking-player-photo{
    width:56px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#f1f3f4
}

.ranking-logo img{
    max-width:48px;
    max-height:48px;
    object-fit:contain
}

.ranking-player-photo{
    position:relative
}

.ranking-player-photo>img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom
}

.ranking-logo-placeholder{
    color:#9ca1a7;
    font-size:12px;
    font-weight:900
}

.ranking-person-placeholder{
    position:absolute;
    left:50%;
    bottom:3px;
    width:42px;
    height:50px;
    transform:translateX(-50%)
}

.ranking-person-placeholder i{
    position:absolute;
    left:50%;
    top:0;
    width:20px;
    height:20px;
    transform:translateX(-50%);
    border-radius:50%;
    background:#c9ced3
}

.ranking-person-placeholder b{
    position:absolute;
    left:50%;
    bottom:0;
    width:40px;
    height:29px;
    transform:translateX(-50%);
    border-radius:22px 22px 4px 4px;
    background:#c6cbd0
}

.ranking-info{
    min-width:0
}

.ranking-info>strong{
    display:block;
    color:#292c31;
    font-size:12px
}

.ranking-subname{
    display:block;
    margin-top:2px;
    color:#8a8e94;
    font-size:8px
}

.ranking-country{
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:5px;
    color:#777c82;
    font-size:9px
}

.ranking-country img{
    width:18px;
    height:11px;
    object-fit:cover
}

.ranking-stats{
    display:grid;
    align-items:center
}

.team-ranking-stats{
    grid-template-columns:repeat(5,1fr)
}

.player-ranking-stats{
    grid-template-columns:repeat(3,1fr)
}

.ranking-stats div{
    text-align:center
}

.ranking-stats b,
.ranking-stats span{
    display:block
}

.ranking-stats b{
    color:#292c31;
    font-size:12px
}

.ranking-stats span{
    margin-top:2px;
    color:#8b8f95;
    font-size:7px;
    text-transform:uppercase
}

.ranking-arrow{
    color:#999da3;
    font-size:18px;
    text-align:right
}

.ranking-info-box{
    padding:12px
}

.ranking-info-box p{
    margin:0;
    padding:10px 0;
    border-bottom:1px solid #eee;
    color:#777c82;
    font-size:9px;
    line-height:1.5
}

.ranking-info-box p:first-child{padding-top:0}
.ranking-info-box p:last-child{padding-bottom:0;border-bottom:0}

.rankings-empty{
    padding:30px;
    color:#888c92;
    font-size:9px;
    text-align:center
}

@media(max-width:950px){
    .ranking-row{
        grid-template-columns:60px 56px minmax(0,1fr) 280px 18px
    }
}

@media(max-width:850px){
    .rankings-layout{display:block}
    .rankings-sidebar{margin-top:12px}
}

@media(max-width:650px){
    .rankings-toolbar{
        display:block
    }

    .rankings-region-filter{
        width:100%;
        margin-top:8px
    }

    .rankings-tabs{
        width:100%
    }

    .rankings-tab{
        flex:1;
        min-width:0
    }

    .ranking-row{
        grid-template-columns:52px 50px minmax(0,1fr) 18px
    }

    .ranking-logo,
    .ranking-player-photo{
        width:46px;
        height:48px
    }

    .ranking-stats{
        grid-column:3;
        margin-top:6px;
        padding-top:6px;
        border-top:1px solid #eee
    }

    .team-ranking-stats{
        grid-template-columns:repeat(3,1fr)
    }

    .team-ranking-stats div:nth-child(4),
    .team-ranking-stats div:nth-child(5){
        display:none
    }

    .ranking-arrow{
        grid-column:4;
        grid-row:1 / span 2
    }
}