/*=====================================================
    K-VOTE
    RANKING PER CATEGORY
    PART 3A
======================================================*/


/*=====================================================
    ROOT VARIABLES
======================================================*/

:root{

    --ranking-primary:#7c3aed;

    --ranking-primary-light:#a855f7;

    --ranking-pink:#ec4899;

    --ranking-purple-dark:#4c1d95;

    --ranking-text:#252336;

    --ranking-muted:#77738a;

    --ranking-border:#eeeaf5;

    --ranking-background:#faf9fd;

    --ranking-white:#ffffff;

    --ranking-gold:#f5b301;

    --ranking-silver:#9aa1ad;

    --ranking-bronze:#b87333;

    --ranking-shadow:
        0 15px 45px rgba(76,29,149,.10);

    --ranking-shadow-hover:
        0 25px 60px rgba(76,29,149,.18);

}


/*=====================================================
    PAGE
======================================================*/

body{

    background:var(--ranking-background);

    color:var(--ranking-text);

}


/*=====================================================
    HEADER
======================================================*/

.header{

    position:relative;

    z-index:1000;

    background:rgba(255,255,255,.96);

    border-bottom:1px solid rgba(124,58,237,.08);

    box-shadow:
        0 5px 25px rgba(50,20,100,.05);

}

.header .navbar{

    min-height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


/* Logo */

.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:var(--ranking-text);

    font-size:22px;

    font-weight:800;

    letter-spacing:-.5px;

}

.navbar-brand:hover{

    color:var(--ranking-primary);

}

.navbar-brand .logo{

    width:44px;

    height:44px;

    object-fit:cover;

    border-radius:50%;

}


/* Desktop navigation */

.navbar-menu{

    display:flex;

    align-items:center;

    gap:8px;

}

.navbar-menu a{

    position:relative;

    display:flex;

    align-items:center;

    padding:10px 17px;

    border-radius:30px;

    text-decoration:none;

    color:#5f5a70;

    font-size:14px;

    font-weight:600;

    transition:

        color .25s ease,

        background .25s ease;

}

.navbar-menu a:hover{

    color:var(--ranking-primary);

    background:#f5f0ff;

}


/*
    IMPORTANT:
    Active menu is a simple rounded pill.
*/

.navbar-menu a.active{

    color:var(--ranking-primary);

    background:#f3edff;

}


/* Active indicator */

.navbar-menu a.active::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:3px;

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--ranking-primary);

    transform:translateX(-50%);

}


/*=====================================================
    MOBILE MENU BUTTON
======================================================*/

.menu-toggle{

    display:none;

    width:44px;

    height:44px;

    border:0;

    border-radius:50%;

    background:#f5f0ff;

    padding:10px;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:22px;

    height:2px;

    margin:4px auto;

    border-radius:5px;

    background:var(--ranking-primary);

    transition:.3s ease;

}


/*=====================================================
    MOBILE NAVIGATION
======================================================*/

.mobile-overlay{

    position:fixed;

    inset:0;

    z-index:1998;

    background:rgba(24,15,45,.45);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

}

.mobile-nav{

    position:fixed;

    top:0;

    right:-340px;

    width:320px;

    max-width:85%;

    height:100vh;

    z-index:2000;

    background:#ffffff;

    box-shadow:-15px 0 50px rgba(20,10,50,.18);

    transition:right .35s ease;

    display:flex;

    flex-direction:column;

    overflow-y:auto;

}

.mobile-nav.active{

    right:0;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

.mobile-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:24px 22px;

    border-bottom:1px solid var(--ranking-border);

}

.mobile-header h3{

    margin:0;

    font-size:20px;

    font-weight:700;

}

.close-menu{

    width:40px;

    height:40px;

    border:0;

    border-radius:50%;

    background:#f5f0ff;

    color:var(--ranking-primary);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.mobile-nav > a{

    margin:5px 15px;

    padding:14px 17px;

    border-radius:12px;

    color:#5d596c;

    text-decoration:none;

    font-weight:600;

    transition:.25s ease;

}

.mobile-nav > a:hover{

    background:#f6f1ff;

    color:var(--ranking-primary);

}

.mobile-nav > a.active{

    background:#f2eaff;

    color:var(--ranking-primary);

}


/*=====================================================
    RANKING HERO
======================================================*/

.ranking-hero{

    position:relative;

    overflow:hidden;

    padding:85px 0 90px;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(168,85,247,.20),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(236,72,153,.15),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #faf7ff 0%,
            #f7f2ff 50%,
            #fff8fc 100%
        );

}

.ranking-hero::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    right:-180px;

    bottom:-220px;

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,.12),
            rgba(236,72,153,.08)
        );

    filter:blur(2px);

}

.ranking-hero::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    left:-130px;

    top:-100px;

    border:45px solid rgba(124,58,237,.05);

}


/* Hero content */

.hero-content{

    position:relative;

    z-index:2;

    max-width:850px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:8px 15px;

    margin-bottom:20px;

    border-radius:50px;

    background:rgba(124,58,237,.09);

    color:var(--ranking-primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

}

.hero-content h1{

    margin:0 0 18px;

    font-size:clamp(36px,5vw,62px);

    line-height:1.1;

    font-weight:800;

    letter-spacing:-2px;

    background:
        linear-gradient(
            100deg,
            var(--ranking-purple-dark),
            var(--ranking-primary),
            var(--ranking-pink)
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.hero-content p{

    max-width:720px;

    margin:0;

    color:var(--ranking-muted);

    font-size:16px;

    line-height:1.8;

}


/*=====================================================
    BREADCRUMB
======================================================*/

.breadcrumb-nav{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:9px;

    margin-top:30px;

    font-size:13px;

}

.breadcrumb-nav a{

    color:var(--ranking-primary);

    text-decoration:none;

    font-weight:600;

}

.breadcrumb-nav a:hover{

    text-decoration:underline;

}

.breadcrumb-nav i{

    color:#aaa5b7;

    font-size:11px;

}

.breadcrumb-nav span{

    color:#777384;

}


/*=====================================================
    STATISTICS SECTION
======================================================*/

.ranking-stats{

    position:relative;

    z-index:5;

    margin-top:-35px;

    padding-bottom:25px;

}

.stat-card{

    position:relative;

    height:100%;

    min-height:150px;

    padding:25px;

    border:1px solid rgba(124,58,237,.08);

    border-radius:20px;

    background:rgba(255,255,255,.95);

    box-shadow:var(--ranking-shadow);

    overflow:hidden;

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

.stat-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--ranking-shadow-hover);

}

.stat-card::after{

    content:"";

    position:absolute;

    width:100px;

    height:100px;

    right:-45px;

    bottom:-50px;

    border-radius:50%;

    background:rgba(124,58,237,.05);

}

.stat-card i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    margin-bottom:15px;

    border-radius:14px;

    background:#f2ebff;

    color:var(--ranking-primary);

    font-size:20px;

}

.stat-card h3{

    margin:0;

    font-size:26px;

    line-height:1.2;

    font-weight:800;

    color:var(--ranking-text);

}

.stat-card p{

    margin:6px 0 0;

    color:var(--ranking-muted);

    font-size:13px;

    font-weight:500;

}


/*=====================================================
    SECTION TITLE
======================================================*/

.section-title{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

    margin-bottom:35px;

}

.section-title h2{

    margin:0 0 7px;

    color:var(--ranking-text);

    font-size:30px;

    font-weight:800;

    letter-spacing:-.7px;

}

.section-title p{

    margin:0;

    color:var(--ranking-muted);

    font-size:14px;

}

.section-subtitle{

    display:block;

    margin-bottom:8px;

    color:var(--ranking-primary);

    font-size:11px;

    font-weight:800;

    letter-spacing:1.5px;

}


/*=====================================================
    PODIUM SECTION
======================================================*/

.podium-section{

    padding:75px 0 85px;

    background:#ffffff;

}

.podium-row{

    position:relative;

    display:grid;

    grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);

    align-items:end;

    gap:clamp(10px,2vw,24px);

    width:86%;

    max-width:1050px;

    margin:0 auto;

}

#rankingPodium .podium-column{

    width:auto;

    max-width:none;

    padding:0;

}

#rankingPodium .podium-card{

    height:100%;

}


/*=====================================================
    PODIUM CARD
======================================================*/

.podium-card{

    position:relative;

    height:100%;

    padding:30px 25px;

    text-align:center;

    border-radius:28px;

    background:#ffffff;

    border:1px solid var(--ranking-border);

    box-shadow:

        0 15px 45px rgba(30,20,60,.08);

    overflow:hidden;

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.podium-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 25px 60px rgba(40,20,90,.16);

}


/* Champion */

.podium-card.champion{

    padding-top:38px;

    border:2px solid rgba(245,179,1,.28);

    box-shadow:

        0 25px 65px rgba(245,179,1,.14);

    transform:translateY(-15px);

}

.podium-card.champion:hover{

    transform:translateY(-22px);

}


/* Gold background */

.podium-card.gold::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(245,179,1,.12),
            transparent 45%
        );

    pointer-events:none;

}


/* Silver background */

.podium-card.silver::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(154,161,173,.12),
            transparent 45%
        );

    pointer-events:none;

}


/* Bronze background */

.podium-card.bronze::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(184,115,51,.12),
            transparent 45%
        );

    pointer-events:none;

}


/*=====================================================
    CROWN
======================================================*/

.podium-card .winner-crown{

    position:absolute;

    top:12px;

    left:50%;

    z-index:5;

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff7d6;

    color:var(--ranking-gold);

    font-size:25px;

    transform:translateX(-50%);

    box-shadow:

        0 8px 25px rgba(245,179,1,.20);

    animation:crownFloat 2.5s ease-in-out infinite;

}

@keyframes crownFloat{

    0%,
    100%{

        transform:
            translateX(-50%)
            translateY(0);

    }

    50%{

        transform:
            translateX(-50%)
            translateY(-6px);

    }

}


/*=====================================================
    PODIUM MEDAL
======================================================*/

.podium-medal{

    position:relative;

    z-index:3;

    margin-bottom:8px;

    font-size:34px;

}

.champion .podium-medal{

    margin-top:18px;

    font-size:40px;

}


/*=====================================================
    PODIUM RANK
======================================================*/

.podium-rank{

    position:relative;

    z-index:2;

    margin-bottom:18px;

    color:var(--ranking-muted);

    font-size:12px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}


/*=====================================================
    PODIUM IMAGE
======================================================*/

.podium-image{

    position:relative;

    z-index:2;

    display:block;

    width:145px;

    height:145px;

    margin:0 auto 22px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid #ffffff;

    box-shadow:

        0 12px 35px rgba(30,20,60,.15);

}

.champion .podium-image{

    width:175px;

    height:175px;

    border-width:7px;

    box-shadow:

        0 15px 45px rgba(245,179,1,.20);

}


/* Gold image ring */

.gold .podium-image{

    outline:4px solid rgba(245,179,1,.22);

    outline-offset:4px;

}


/* Silver image ring */

.silver .podium-image{

    outline:4px solid rgba(154,161,173,.22);

    outline-offset:4px;

}


/* Bronze image ring */

.bronze .podium-image{

    outline:4px solid rgba(184,115,51,.22);

    outline-offset:4px;

}


/*=====================================================
    PODIUM BODY
======================================================*/

.podium-body{

    position:relative;

    z-index:2;

}

.agency{

    display:block;

    margin-bottom:7px;

    color:#9994a7;

    font-size:11px;

    font-weight:500;

}

.podium-body h2,
.podium-body h3{

    margin:0 0 12px;

    color:var(--ranking-text);

    font-weight:800;

    letter-spacing:-.4px;

}

.podium-body h2{

    font-size:28px;

}

.podium-body h3{

    font-size:22px;

}


/*=====================================================
    VOTE TOTAL
======================================================*/

.vote-total{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    margin-bottom:17px;

    color:#747082;

    font-size:12px;

}

.vote-total i{

    color:#ec4899;

}

.vote-total strong{

    color:var(--ranking-text);

    font-size:15px;

    font-weight:800;

}


/*=====================================================
    PODIUM PROGRESS
======================================================*/

.podium-progress{

    height:7px;

    margin:0 auto 7px;

    max-width:230px;

    overflow:hidden;

    border-radius:20px;

    background:#f0edf5;

}

.podium-progress .progress-bar{

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

}


/* Gold progress */

.gold .podium-progress .progress-bar{

    background:
        linear-gradient(
            90deg,
            #e8a800,
            #ffd76a
        );

}


/* Silver progress */

.silver .podium-progress .progress-bar{

    background:
        linear-gradient(
            90deg,
            #7d8591,
            #c9ced5
        );

}


/* Bronze progress */

.bronze .podium-progress .progress-bar{

    background:
        linear-gradient(
            90deg,
            #9c5b2b,
            #d59a62
        );

}


/*=====================================================
    PERCENTAGE
======================================================*/

.percentage{

    color:#8a8497;

    font-size:11px;

    font-weight:700;

}


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

.btn-gradient{

    border:0;

    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

    box-shadow:

        0 10px 25px rgba(124,58,237,.18);

    border-radius:12px;

    padding:12px 18px;

    font-size:13px;

    font-weight:700;

    transition:

        transform .25s ease,

        box-shadow .25s ease;

}

.btn-gradient:hover{

    transform:translateY(-2px);

    box-shadow:

        0 15px 30px rgba(124,58,237,.25);

}


/*=====================================================
    LIVE STATUS BAR
======================================================*/

.live-ranking-status{

    position:relative;

}

.status-card{

    display:flex;

    align-items:center;

    gap:15px;

    height:100%;

    padding:18px 20px;

    border:1px solid var(--ranking-border);

    border-radius:16px;

    background:#ffffff;

    box-shadow:

        0 10px 30px rgba(40,20,80,.06);

}

.status-card > i{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    width:43px;

    height:43px;

    border-radius:12px;

    background:#f3edff;

    color:var(--ranking-primary);

    font-size:18px;

}

.status-card small{

    display:block;

    margin-bottom:3px;

    color:#9993a5;

    font-size:11px;

}

.status-card strong{

    display:block;

    color:var(--ranking-text);

    font-size:14px;

    font-weight:700;

}


/*=====================================================
    RANKING LIST SECTION
======================================================*/

.ranking-list{

    padding:38px 0;

    background:var(--ranking-background);

}


/*=====================================================
    RESPONSIVE
======================================================*/

@media(max-width:991px){

    .navbar-menu{

        display:none;

    }

    .menu-toggle{

        display:block;

    }

    .ranking-hero{

        padding:70px 0 85px;

    }

    .ranking-stats{

        margin-top:-25px;

    }

    .podium-card.champion{

        transform:none;

    }

    .podium-card.champion:hover{

        transform:translateY(-8px);

    }

    .podium-row{

        width:94%;

    }

}


@media(max-width:767px){

    .header .navbar{

        min-height:68px;

    }

    .navbar-brand{

        font-size:19px;

    }

    .navbar-brand .logo{

        width:40px;

        height:40px;

    }

    .ranking-hero{

        padding:55px 0 70px;

    }

    .hero-content h1{

        font-size:38px;

        letter-spacing:-1.2px;

    }

    .hero-content p{

        font-size:14px;

        line-height:1.7;

    }

    .ranking-stats{

        margin-top:-20px;

    }

    .stat-card{

        min-height:135px;

        padding:20px;

    }

    .section-title{

        align-items:flex-start;

        flex-direction:column;

        margin-bottom:25px;

    }

    .section-title h2{

        font-size:25px;

    }

    .podium-section{

        padding:42px 0;

    }

    .podium-row{

        width:100%;

        gap:8px;

    }

    .podium-card{

        max-width:none;

        margin:0;

        padding:20px 10px;

        border-radius:16px;

    }

    .podium-card.champion{

        transform:translateY(-8px);

    }

    .podium-image{

        width:clamp(56px,15vw,110px);

        height:clamp(56px,15vw,110px);

        margin-bottom:12px;

        border-width:4px;

    }

    .champion .podium-image{

        width:clamp(68px,18vw,130px);

        height:clamp(68px,18vw,130px);

    }

    .podium-medal{

        font-size:25px;

        margin-bottom:4px;

    }

    .champion .podium-medal{

        margin-top:12px;

        font-size:30px;

    }

    .podium-rank{

        margin-bottom:12px;

        font-size:10px;

    }

    .podium-body h3,
    .podium-body h2{

        font-size:clamp(12px,3vw,18px);

        line-height:1.2;

        overflow-wrap:anywhere;

    }

    .podium-body small,
    .podium-body .agency,
    .vote-total{

        font-size:clamp(9px,2vw,11px);

    }

    .podium-progress{

        margin-bottom:5px;

    }

    .podium-card .winner-crown{

        top:8px;

        width:30px;

        height:30px;

        font-size:16px;

    }

    .status-card{

        padding:16px;

    }

}


@media(max-width:480px){

    .mobile-nav{

        width:280px;

        max-width:82%;

    }

    .ranking-hero{

        padding:45px 0 60px;

    }

    .hero-content h1{

        font-size:32px;

    }

    .hero-badge{

        font-size:10px;

        padding:7px 12px;

    }

    .breadcrumb-nav{

        font-size:11px;

    }

    .stat-card{

        min-height:125px;

    }

    .stat-card h3{

        font-size:23px;

    }

    .podium-card{

        padding:14px 6px;

        border-radius:14px;

    }

    .podium-card .winner-crown{

        width:48px;

        height:48px;

        font-size:21px;

    }

    .podium-body h2{

        font-size:clamp(12px,3vw,16px);

    }

    .podium-body h3{

        font-size:clamp(12px,3vw,16px);

    }

    .ranking-list{

        padding:60px 0;

    }

}

/*=====================================================
    K-VOTE
    RANKING PER CATEGORY
    PART 3B
======================================================*/


/*=====================================================
    RANKING CONTROLS
======================================================*/

.ranking-controls{

    display:flex;

    align-items:stretch;

    flex-direction:column;

    gap:12px;

    margin-bottom:16px;

    padding:14px;

    background:#ffffff;

    border:1px solid var(--ranking-border);

    border-radius:20px;

    box-shadow:

        0 10px 35px rgba(40,20,80,.05);

}


/*=====================================================
    CATEGORY FILTER
======================================================*/

.ranking-filter{

    display:flex;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:8px;

    flex:0 1 auto;

    min-height:0;

}

.ranking-selection-field{

    display:flex;

    flex:0 1 230px;

    flex-direction:column;

    gap:4px;

    min-width:170px;

}

.ranking-selection-field[hidden]{

    display:none;

}

.ranking-selection-field > span{

    color:#777184;

    font-size:11px;

    font-weight:700;

}

.ranking-selection-submit{

    align-self:flex-end;



    margin:0;

    min-height:42px;

    padding:0 18px;

    border:0;

    border-radius:12px;

    background:linear-gradient(135deg,var(--ranking-primary),var(--ranking-pink));

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:transform .2s ease,box-shadow .2s ease;

}

.ranking-selection-submit:hover{

    transform:translateY(-1px);

    box-shadow:0 7px 18px rgba(124,58,237,.2);

}

.ranking-selection-submit[hidden]{

    display:none;

}

#rankingPodium[hidden]{

    display:none;

}

.ranking-filter-btn{

    border:1px solid transparent;

    background:#f7f5fa;

    color:#6f6a7d;

    padding:9px 15px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    white-space:nowrap;

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

.ranking-filter-btn:hover{

    color:var(--ranking-primary);

    background:#f1eaff;

    transform:translateY(-1px);

}

.ranking-filter-btn.active{

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

    box-shadow:

        0 7px 18px rgba(124,58,237,.18);

}


/*=====================================================
    RANKING TOOLS
======================================================*/

.ranking-tools{

    display:grid;

    align-items:center;

    grid-template-columns:minmax(0,1fr) 200px;

    gap:8px;

    width:100%;

    min-width:0;

}


/*=====================================================
    SEARCH
======================================================*/

.ranking-search{

    position:relative;

    width:auto;

    min-width:0;

}

.ranking-search i{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    color:#aaa4b5;

    font-size:14px;

    pointer-events:none;

}

.ranking-search input{

    width:100%;

    height:42px;

    padding:0 14px 0 39px;

    border:1px solid var(--ranking-border);

    border-radius:12px;

    outline:none;

    background:#faf9fc;

    color:var(--ranking-text);

    font-size:12px;

    transition:

        border-color .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}

.ranking-search input::placeholder{

    color:#aaa5b5;

}

.ranking-search input:focus{

    background:#ffffff;

    border-color:rgba(124,58,237,.45);

    box-shadow:

        0 0 0 4px rgba(124,58,237,.07);

}


/*=====================================================
    SORT SELECT
======================================================*/

.ranking-sort{

    height:42px;

    min-width:160px;

    padding:0 35px 0 13px;

    border:1px solid var(--ranking-border);

    border-radius:12px;

    outline:none;

    background:#faf9fc;

    color:#625d70;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:

        border-color .25s ease,

        box-shadow .25s ease;

}

.ranking-selection-field .ranking-sort{

    width:100%;

    min-width:0;

}

.ranking-sort:focus{

    border-color:rgba(124,58,237,.45);

    box-shadow:

        0 0 0 4px rgba(124,58,237,.07);

}

#rankingSort{

    flex:0 0 200px;

    width:200px;

    min-width:0;

}


/*=====================================================
    LIVE UPDATE BAR
======================================================*/

.ranking-update-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:20px;

    padding:12px 18px;

    border-radius:12px;

    background:#f6f1ff;

    color:#777082;

    font-size:11px;

}

.ranking-update-bar > div{

    display:flex;

    align-items:center;

    gap:7px;

}

.ranking-update-bar i{

    color:var(--ranking-primary);

    font-size:14px;

}

.ranking-update-bar strong{

    color:var(--ranking-text);

    font-weight:700;

}


/* Live indicator */

.ranking-update-bar > div:first-child{

    color:var(--ranking-primary);

    font-weight:700;

}

.ranking-update-bar > div:first-child i{

    animation:

        livePulse 1.5s ease-in-out infinite;

}

@keyframes livePulse{

    0%,
    100%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.45;

        transform:scale(.8);

    }

}


/*=====================================================
    RANKING CONTAINER
======================================================*/

.ranking-container{

    display:flex;

    flex-direction:column;

    gap:12px;

}


/*=====================================================
    RANKING CARD
======================================================*/

.ranking-card{

    position:relative;

    display:grid;

    grid-template-columns:65px minmax(240px,1.7fr) minmax(130px,.8fr) minmax(180px,1fr) 70px 45px;

    align-items:center;

    gap:20px;

    min-height:105px;

    padding:17px 20px;

    background:#ffffff;

    border:1px solid var(--ranking-border);

    border-radius:18px;

    box-shadow:

        0 7px 25px rgba(40,20,80,.045);

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        border-color .3s ease;

    animation:

        rankingCardIn .45s ease both;

}

.ranking-card:hover{

    transform:translateY(-4px);

    border-color:rgba(124,58,237,.16);

    box-shadow:

        0 15px 40px rgba(50,20,100,.10);

}

@keyframes rankingCardIn{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=====================================================
    RANK NUMBER
======================================================*/

.ranking-number{

    display:flex;

    align-items:center;

    justify-content:center;

}

.ranking-number span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:45px;

    height:45px;

    border-radius:14px;

    background:#f5f2f8;

    color:#716b7d;

    font-size:14px;

    font-weight:800;

}


/* Highlight ranks */

.ranking-card:nth-child(1) .ranking-number span{

    background:#fff5d7;

    color:#c98c00;

}

.ranking-card:nth-child(2) .ranking-number span{

    background:#f0f1f3;

    color:#737b87;

}

.ranking-card:nth-child(3) .ranking-number span{

    background:#f8e9dd;

    color:#a45e2d;

}


/*=====================================================
    NOMINEE
======================================================*/

.ranking-nominee{

    display:flex;

    align-items:center;

    gap:15px;

    min-width:0;

}

.ranking-nominee img{

    width:65px;

    height:65px;

    flex:0 0 65px;

    object-fit:cover;

    border-radius:16px;

    border:3px solid #ffffff;

    box-shadow:

        0 6px 18px rgba(30,20,60,.12);

}

.ranking-name{

    min-width:0;

}

.ranking-category{

    display:inline-block;

    margin-bottom:4px;

    color:var(--ranking-primary);

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.ranking-country{

    display:inline-flex;

    flex:0 0 auto;

    align-items:center;

    justify-content:center;

    margin:0;

    font-size:12px;

    line-height:1;

}

.ranking-name-line{

    display:flex;

    align-items:center;

    min-width:0;

    gap:4px;

}

.ranking-nominee > .ranking-country .ranking-country-flag{

    display:block;

    width:30px;

    height:30px;

    flex:0 0 30px;

    border-radius:50%;

    object-fit:cover;

}

.ranking-name h4{

    min-width:0;

    flex:1 1 auto;

    margin:0 0 4px;

    overflow:hidden;

    color:var(--ranking-text);

    font-size:15px;

    font-weight:800;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.ranking-name small{

    display:block;

    overflow:hidden;

    color:#9993a5;

    font-size:10px;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.ranking-champion-crown{
    display:inline-block;
    margin-top:4px;
    padding:4px 8px;
    border-radius:14px;
    color:#6c4b00;
    background:#ffe7a3;
    font-size:9px;
    font-weight:800;
}

.ranking-name .ranking-prize{
    margin-top:4px;
    color:#6e617f;
    white-space:normal;
}

.ranking-reward-image{
    display:block;
    width:64px;
    height:64px;
    margin-top:6px;
    border-radius:7px;
    object-fit:contain;
}

.ranking-round{
    display:block;
    margin-top:4px;
    color:#7b5cff;
    font-size:9px;
    line-height:1.4;
}


/*=====================================================
    VOTE COUNT
======================================================*/

.ranking-votes{

    display:flex;

    flex-direction:column;

    gap:3px;

}

.ranking-votes strong{

    color:var(--ranking-text);

    font-size:15px;

    font-weight:800;

}

.ranking-votes span{

    color:#9b96a6;

    font-size:10px;

}


/*=====================================================
    RANKING PROGRESS
======================================================*/

.ranking-progress{

    display:flex;

    align-items:center;

    gap:10px;

}

.ranking-progress .progress{

    flex:1;

    height:7px;

    overflow:hidden;

    border-radius:20px;

    background:#efedf3;

}

.ranking-progress .progress-bar{

    height:100%;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

    transition:

        width 1s cubic-bezier(.2,.8,.2,1);

}

.ranking-progress > span{

    min-width:32px;

    color:#777181;

    font-size:10px;

    font-weight:700;

    text-align:right;

}


/*=====================================================
    TREND
======================================================*/

.ranking-trend{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    min-width:48px;

    height:30px;

    padding:0 7px;

    border-radius:9px;

    font-size:10px;

    font-weight:800;

}

.ranking-trend.up{

    background:#eafaf1;

    color:#22a35a;

}

.ranking-trend.down{

    background:#fff0f2;

    color:#e04d63;

}

.ranking-trend.same{

    background:#f1eff4;

    color:#8a8494;

}

.ranking-trend.new{

    background:#f2eaff;

    color:var(--ranking-primary);

    font-size:9px;

    letter-spacing:.3px;

}


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

.ranking-profile-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border:1px solid var(--ranking-border);

    border-radius:50%;

    background:#ffffff;

    color:#777181;

    text-decoration:none;

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease,

        border-color .25s ease;

}

.ranking-profile-btn:hover{

    border-color:transparent;

    background:#f1eaff;

    color:var(--ranking-primary);

    transform:translateY(-2px);

}


/*=====================================================
    HIDDEN FILTER STATE
======================================================*/

.ranking-card.hidden{

    display:none;

}


/*=====================================================
    NO RESULTS
======================================================*/

.ranking-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:300px;

    padding:40px;

    border:1px dashed #ddd7e8;

    border-radius:20px;

    background:#ffffff;

    text-align:center;

}

.ranking-empty i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:65px;

    height:65px;

    margin-bottom:18px;

    border-radius:50%;

    background:#f3edff;

    color:var(--ranking-primary);

    font-size:25px;

}

.ranking-empty h3{

    margin:0 0 8px;

    color:var(--ranking-text);

    font-size:19px;

    font-weight:800;

}

.ranking-empty p{

    max-width:420px;

    margin:0;

    color:#918b9d;

    font-size:13px;

}


/*=====================================================
    PAGINATION
======================================================*/

.ranking-pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:7px;

    margin-top:35px;

}

.ranking-empty-state{

    width:100%;

    padding:34px 20px;

    border:1px solid var(--ranking-border);

    border-radius:16px;

    background:#ffffff;

    color:#777184;

    text-align:center;

}

.ranking-empty-state h3{

    margin:0 0 8px;

    color:var(--ranking-text);

    font-size:20px;

}

.ranking-empty-state p{

    margin:0;

}

.pagination-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    padding:0;

    border:1px solid var(--ranking-border);

    border-radius:11px;

    background:#ffffff;

    color:#746e7e;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:

        background .25s ease,

        color .25s ease,

        border-color .25s ease,

        transform .25s ease;

}

.pagination-btn:hover{

    border-color:#ddd1f5;

    background:#f6f1ff;

    color:var(--ranking-primary);

    transform:translateY(-2px);

}

.pagination-btn.active{

    border-color:transparent;

    background:
        linear-gradient(
            135deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

    color:#ffffff;

    box-shadow:

        0 8px 20px rgba(124,58,237,.18);

}

.pagination-btn.disabled{

    opacity:.45;

    pointer-events:none;

}


/*=====================================================
    PREVIOUS WINNERS
======================================================*/

.previous-winners-section{

    padding:85px 0;

    background:#ffffff;

}

.winner-slider-controls{

    display:flex;

    gap:8px;

}

.winner-slider-controls button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border:1px solid var(--ranking-border);

    border-radius:50%;

    background:#ffffff;

    color:#6f697b;

    cursor:pointer;

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

.winner-slider-controls button:hover{

    background:#f2eaff;

    color:var(--ranking-primary);

    transform:translateY(-2px);

    box-shadow:

        0 7px 20px rgba(124,58,237,.10);

}


/*=====================================================
    WINNER SLIDER WRAPPER
======================================================*/

.previous-winners-wrapper{

    position:relative;

    overflow:hidden;

    width:100%;

}

.previous-winners{

    display:flex;

    gap:20px;

    overflow-x:auto;

    padding:5px 4px 20px;

    scroll-behavior:smooth;

    scrollbar-width:none;

    cursor:grab;

}

.previous-winners::-webkit-scrollbar{

    display:none;

}

.previous-winners:active{

    cursor:grabbing;

}


/*=====================================================
    WINNER CARD
======================================================*/

.winner-card{

    position:relative;

    flex:0 0 calc(25% - 15px);

    min-width:250px;

    overflow:hidden;

    border:1px solid var(--ranking-border);

    border-radius:20px;

    background:#ffffff;

    box-shadow:

        0 10px 30px rgba(40,20,80,.06);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

.winner-card:hover{

    transform:translateY(-7px);

    box-shadow:

        0 20px 45px rgba(40,20,80,.12);

}


/*=====================================================
    WINNER IMAGE
======================================================*/

.winner-image-wrapper{

    position:relative;

    height:260px;

    overflow:hidden;

    background:#f3f0f6;

}

.winner-image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

}

.winner-card:hover .winner-image{

    transform:scale(1.06);

}


/* Image overlay */

.winner-image-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(20,10,35,.45),
            transparent 55%
        );

    pointer-events:none;

}


/*=====================================================
    WINNER YEAR
======================================================*/

.winner-year{

    position:absolute;

    top:15px;

    left:15px;

    z-index:3;

    padding:6px 11px;

    border-radius:20px;

    background:rgba(255,255,255,.92);

    color:var(--ranking-primary);

    font-size:10px;

    font-weight:800;

}


/*=====================================================
    WINNER TROPHY
======================================================*/

.winner-crown{

    position:absolute;

    right:15px;

    bottom:15px;

    z-index:3;

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border-radius:50%;

    background:rgba(255,255,255,.94);

    color:var(--ranking-gold);

    box-shadow:

        0 8px 20px rgba(0,0,0,.10);

}


/*=====================================================
    WINNER BODY
======================================================*/

.winner-body{

    padding:20px;

}

.winner-category{

    display:inline-block;

    margin-bottom:6px;

    color:var(--ranking-primary);

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.winner-body h3{

    margin:0 0 12px;

    color:var(--ranking-text);

    font-size:20px;

    font-weight:800;

}

.winner-votes{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:5px;

    color:#918b9c;

    font-size:10px;

}

.winner-votes i{

    color:#ec4899;

}

.winner-votes strong{

    color:var(--ranking-text);

    font-size:13px;

}

.winner-award{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:15px;

    padding:7px 10px;

    border-radius:8px;

    background:#fff7dc;

    color:#b27a00;

    font-size:10px;

    font-weight:700;

}

.winner-award i{

    font-size:12px;

}


/*=====================================================
    SCROLL TO TOP
======================================================*/

.scroll-top{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:1500;

    display:flex;

    align-items:center;

    justify-content:center;

    width:45px;

    height:45px;

    border:0;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

    color:#ffffff;

    box-shadow:

        0 10px 25px rgba(124,58,237,.25);

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:

        opacity .3s ease,

        visibility .3s ease,

        transform .3s ease;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.scroll-top:hover{

    transform:translateY(-4px);

}


/*=====================================================
    RESPONSIVE — TABLET
======================================================*/

@media(max-width:1199px){

    .ranking-controls{

        align-items:stretch;

        flex-direction:column;

        gap:12px;

    }

    .ranking-filter{

        width:100%;

        flex-wrap:wrap;

    }

    .ranking-tools{

        display:grid;

        grid-template-columns:minmax(0,1fr) 200px;

        width:100%;

    }

    .ranking-search{

        width:auto;

    }

    #rankingSort{

        width:100%;
    }

    .ranking-card{

        grid-template-columns:

            55px
            minmax(220px,1.5fr)
            120px
            minmax(150px,1fr)
            60px
            42px;

        gap:14px;

        padding:15px;

    }

    .ranking-nominee img{

        width:58px;

        height:58px;

        flex-basis:58px;

    }

    .winner-card{

        flex-basis:calc(33.333% - 14px);

    }

}


/*=====================================================
    RESPONSIVE — TABLET / SMALL LAPTOP
======================================================*/

@media(max-width:991px){

    .ranking-card{

        grid-template-columns:

            50px
            minmax(220px,1fr)
            110px
            55px
            42px;

    }

    .ranking-progress{

        display:none;

    }

    .ranking-votes{

        text-align:right;

    }

    .ranking-trend{

        justify-self:center;

    }

    .winner-card{

        flex-basis:calc(50% - 10px);

    }

}


/*=====================================================
    RESPONSIVE — MOBILE
======================================================*/

@media(max-width:767px){

    .ranking-controls{

        padding:12px;

        gap:10px;

    }

    .ranking-filter{

        width:100%;

        overflow:visible;

        flex-wrap:wrap;

    }

    .ranking-filter-btn{

        flex:0 0 auto;

    }

    .ranking-tools{

        grid-template-columns:minmax(0,1fr) 160px;

        width:100%;

    }

    .ranking-search{

        width:auto;

    }

    #rankingSort{

        width:160px;

    }

    .ranking-update-bar{

        align-items:flex-start;

        flex-direction:column;

        gap:8px;

    }


    /*
        Mobile ranking card
    */

    .ranking-card{

        display:grid;

        grid-template-columns:45px 1fr auto;

        grid-template-areas:

            "rank nominee profile"

            "rank votes trend";

        column-gap:12px;

        row-gap:10px;

        min-height:auto;

        padding:15px;

    }

    .ranking-number{

        grid-area:rank;

        align-self:center;

    }

    .ranking-number span{

        width:38px;

        height:38px;

        border-radius:11px;

        font-size:11px;

    }

    .ranking-nominee{

        grid-area:nominee;

        min-width:0;

    }

    .ranking-nominee img{

        width:52px;

        height:52px;

        flex-basis:52px;

        border-radius:13px;

    }

    .ranking-name h4{

        font-size:13px;

    }

    .ranking-name small{

        font-size:9px;

    }

    .ranking-votes{

        grid-area:votes;

        flex-direction:row;

        align-items:center;

        gap:5px;

    }

    .ranking-votes strong{

        font-size:12px;

    }

    .ranking-votes span{

        font-size:9px;

    }

    .ranking-progress{

        display:none;

    }

    .ranking-trend{

        grid-area:trend;

        justify-self:end;

        height:26px;

        min-width:42px;

    }

    .ranking-profile-btn{

        grid-area:profile;

        width:36px;

        height:36px;

    }

    .previous-winners-section{

        padding:65px 0;

    }

    .winner-slider-controls{

        align-self:flex-end;

    }

    .winner-card{

        flex:0 0 75%;

        min-width:0;

    }

    .winner-image-wrapper{

        height:240px;

    }

}


/*=====================================================
    RESPONSIVE — SMALL MOBILE
======================================================*/

@media(max-width:480px){

    .ranking-controls{

        border-radius:16px;

    }

    .ranking-tools{

        grid-template-columns:minmax(0,1fr);

    }

    #rankingSort{

        width:100%;

    }

    .ranking-filter-btn{

        padding:8px 12px;

        font-size:10px;

    }

    .ranking-update-bar{

        font-size:10px;

        padding:11px 14px;

    }

    .ranking-card{

        grid-template-columns:40px 1fr auto;

        column-gap:9px;

        padding:13px;

        border-radius:15px;

    }

    .ranking-nominee{

        gap:9px;

    }

    .ranking-nominee img{

        width:48px;

        height:48px;

        flex-basis:48px;

    }

    .ranking-name h4{

        font-size:12px;

    }

    .ranking-name small{

        font-size:8px;

    }

    .ranking-category{

        font-size:8px;

    }

    .ranking-votes strong{

        font-size:11px;

    }

    .ranking-votes span{

        font-size:8px;

    }

    .ranking-trend{

        min-width:38px;

        padding:0 5px;

        font-size:9px;

    }

    .ranking-profile-btn{

        width:33px;

        height:33px;

        font-size:11px;

    }

    .ranking-pagination{

        gap:5px;

    }

    .pagination-btn{

        width:36px;

        height:36px;

        border-radius:9px;

        font-size:11px;

    }

    .winner-card{

        flex:0 0 82%;

    }

    .winner-image-wrapper{

        height:220px;

    }

}

/*=====================================================
    K-VOTE
    RANKING PER CATEGORY
    PART 3C
======================================================*/


/*=====================================================
    FOOTER
======================================================*/

footer{

    position:relative;

    padding:70px 0 0;

    background:#171322;

    color:#ffffff;

    overflow:hidden;

}


/* Footer background decoration */

footer::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-250px;

    right:-150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(124,58,237,.20),
            transparent 70%
        );

    pointer-events:none;

}

footer::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    bottom:-220px;

    left:-150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(236,72,153,.12),
            transparent 70%
        );

    pointer-events:none;

}


/*=====================================================
    FOOTER GRID
======================================================*/

.footer-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1.2fr;

    gap:50px;

    padding-bottom:55px;

}


/*=====================================================
    FOOTER BRAND
======================================================*/

.footer-brand{

    max-width:360px;

}

.footer-brand-logo{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

}

.footer-brand-logo img{

    width:48px;

    height:48px;

    object-fit:cover;

    border-radius:50%;

}

.footer-brand-logo h3{

    margin:0;

    color:#ffffff;

    font-size:22px;

    font-weight:800;

    letter-spacing:-.5px;

}

.footer-brand p{

    margin:0;

    color:#a8a2b5;

    font-size:13px;

    line-height:1.8;

}


/*=====================================================
    FOOTER TITLES
======================================================*/

footer h5{

    position:relative;

    display:inline-block;

    margin:0 0 20px;

    color:#ffffff;

    font-size:14px;

    font-weight:800;

}

footer h5::after{

    content:"";

    display:block;

    width:25px;

    height:2px;

    margin-top:8px;

    border-radius:5px;

    background:
        linear-gradient(
            90deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

}


/*=====================================================
    FOOTER LINKS
======================================================*/

.footer-links{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li{

    margin-bottom:11px;

}

.footer-links a{

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#a8a2b5;

    text-decoration:none;

    font-size:12px;

    transition:

        color .25s ease,

        transform .25s ease;

}

.footer-links a:hover{

    color:#ffffff;

    transform:translateX(4px);

}

.footer-links a i{

    font-size:9px;

    color:var(--ranking-primary);

}


/*=====================================================
    FOOTER CONTACT
======================================================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:13px;

}

.footer-contact-item{

    display:flex;

    align-items:flex-start;

    gap:11px;

}

.footer-contact-item > i{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 auto;

    width:34px;

    height:34px;

    border-radius:9px;

    background:rgba(124,58,237,.14);

    color:#b78cff;

    font-size:13px;

}

.footer-contact-item div{

    min-width:0;

}

.footer-contact-item small{

    display:block;

    margin-bottom:2px;

    color:#777185;

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.footer-contact-item a,
.footer-contact-item span{

    display:block;

    color:#d0cbd7;

    text-decoration:none;

    font-size:11px;

    line-height:1.5;

}

.footer-contact-item a:hover{

    color:#ffffff;

}


/*=====================================================
    SOCIAL MEDIA
======================================================*/

.footer-social{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

}

.footer-social a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border:1px solid rgba(255,255,255,.08);

    border-radius:50%;

    background:rgba(255,255,255,.04);

    color:#aaa5b4;

    text-decoration:none;

    transition:

        transform .25s ease,

        background .25s ease,

        color .25s ease,

        border-color .25s ease;

}

.footer-social a:hover{

    transform:translateY(-4px);

    border-color:transparent;

    background:
        linear-gradient(
            135deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

    color:#ffffff;

}


/*=====================================================
    FOOTER DIVIDER
======================================================*/

.footer-divider{

    position:relative;

    z-index:2;

    width:100%;

    height:1px;

    background:rgba(255,255,255,.07);

}


/*=====================================================
    FOOTER BOTTOM
======================================================*/

.footer-bottom{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    min-height:70px;

}

.footer-bottom p{

    margin:0;

    color:#777181;

    font-size:10px;

}

.footer-bottom-links{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

}

.footer-bottom-links a{

    color:#858091;

    text-decoration:none;

    font-size:10px;

    transition:color .25s ease;

}

.footer-bottom-links a:hover{

    color:#ffffff;

}


/*=====================================================
    GLASSMORPHISM HELPERS
======================================================*/

.glass{

    background:
        rgba(255,255,255,.65);

    border:1px solid
        rgba(255,255,255,.55);

    box-shadow:
        0 15px 45px
        rgba(40,20,80,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

.glass-dark{

    background:
        rgba(23,19,34,.70);

    border:1px solid
        rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}


/*=====================================================
    GRADIENT TEXT HELPERS
======================================================*/

.gradient-text{

    background:
        linear-gradient(
            100deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.gradient-text-gold{

    background:
        linear-gradient(
            100deg,
            #c88900,
            #f5b301,
            #ffe28a
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}


/*=====================================================
    SOFT SHADOW HELPERS
======================================================*/

.shadow-soft{

    box-shadow:
        0 10px 35px
        rgba(40,20,80,.07);

}

.shadow-medium{

    box-shadow:
        0 18px 50px
        rgba(40,20,80,.12);

}

.shadow-large{

    box-shadow:
        0 25px 70px
        rgba(40,20,80,.16);

}


/*=====================================================
    HOVER LIFT HELPER
======================================================*/

.hover-lift{

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}

.hover-lift:hover{

    transform:translateY(-6px);

    box-shadow:
        0 18px 45px
        rgba(40,20,80,.12);

}


/*=====================================================
    FADE ANIMATIONS
======================================================*/

.fade-in{

    animation:
        fadeIn .6s ease both;

}

.fade-up{

    animation:
        fadeUp .6s ease both;

}

.fade-down{

    animation:
        fadeDown .6s ease both;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.scale-in{

    animation:
        scaleIn .5s ease both;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.94);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


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

.float{

    animation:
        floating 3s ease-in-out infinite;

}

@keyframes floating{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


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

.pulse{

    animation:
        softPulse 2s ease-in-out infinite;

}

@keyframes softPulse{

    0%,
    100%{

        box-shadow:
            0 0 0 0
            rgba(124,58,237,.18);

    }

    50%{

        box-shadow:
            0 0 0 10px
            rgba(124,58,237,0);

    }

}


/*=====================================================
    PAGE LOADER
======================================================*/

.page-loader{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    opacity:1;

    visibility:visible;

    transition:

        opacity .4s ease,

        visibility .4s ease;

}

.page-loader.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

.loader-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:15px;

}

.loader-logo{

    width:60px;

    height:60px;

    object-fit:cover;

    border-radius:50%;

    animation:
        loaderPulse 1.5s ease-in-out infinite;

}

.loader-spinner{

    width:34px;

    height:34px;

    border:3px solid #eee8f7;

    border-top-color:var(--ranking-primary);

    border-right-color:var(--ranking-pink);

    border-radius:50%;

    animation:
        loaderSpin .8s linear infinite;

}

.loader-text{

    color:#817b8d;

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

}

@keyframes loaderSpin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes loaderPulse{

    0%,
    100%{

        transform:scale(1);

        box-shadow:
            0 0 0 0
            rgba(124,58,237,.18);

    }

    50%{

        transform:scale(1.05);

        box-shadow:
            0 0 0 10px
            rgba(124,58,237,0);

    }

}


/*=====================================================
    BODY LOADING STATE
======================================================*/

body.loading{

    overflow:hidden;

}


/*=====================================================
    BACK TO TOP
======================================================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:1500;

    display:flex;

    align-items:center;

    justify-content:center;

    width:45px;

    height:45px;

    border:0;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--ranking-primary),
            var(--ranking-pink)
        );

    color:#ffffff;

    box-shadow:
        0 10px 30px
        rgba(124,58,237,.25);

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:

        opacity .3s ease,

        visibility .3s ease,

        transform .3s ease;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-4px);

}


/*=====================================================
    FOCUS ACCESSIBILITY
======================================================*/

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible{

    outline:3px solid
        rgba(124,58,237,.25);

    outline-offset:3px;

}


/*=====================================================
    DISABLE TEXT SELECTION ON UI BUTTONS
======================================================*/

.ranking-filter-btn,
.pagination-btn,
.winner-slider-controls button,
.ranking-profile-btn,
.btn-gradient{

    user-select:none;

    -webkit-user-select:none;

}


/*=====================================================
    IMAGE POLISH
======================================================*/

img{

    max-width:100%;

}

img.lazy{

    opacity:0;

    transition:opacity .4s ease;

}

img.lazy.loaded{

    opacity:1;

}


/*=====================================================
    SMOOTH SECTION TRANSITION
======================================================*/

.ranking-section{

    position:relative;

}

.ranking-section::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    width:80%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(124,58,237,.08),
            transparent
        );

    transform:translateX(-50%);

}


/*=====================================================
    TABLET FOOTER
======================================================*/

@media(max-width:991px){

    .footer-grid{

        grid-template-columns:
            1fr 1fr;

        gap:40px 35px;

    }

    .footer-brand{

        max-width:100%;

    }

}


/*=====================================================
    MOBILE FOOTER
======================================================*/

@media(max-width:767px){

    footer{

        padding-top:55px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:35px;

        padding-bottom:40px;

    }

    .footer-brand{

        max-width:100%;

    }

    .footer-brand p{

        max-width:500px;

    }

    .footer-bottom{

        align-items:flex-start;

        flex-direction:column;

        justify-content:center;

        gap:12px;

        padding:18px 0;

    }

    .footer-bottom-links{

        gap:12px;

    }

    .footer-social{

        margin-top:15px;

    }

    .back-to-top,
    .scroll-top{

        right:16px;

        bottom:16px;

        width:42px;

        height:42px;

    }

}


/*=====================================================
    SMALL MOBILE
======================================================*/

@media(max-width:480px){

    footer{

        padding-top:45px;

    }

    .footer-grid{

        gap:30px;

    }

    .footer-brand-logo img{

        width:42px;

        height:42px;

    }

    .footer-brand-logo h3{

        font-size:19px;

    }

    .footer-brand p{

        font-size:11px;

        line-height:1.7;

    }

    footer h5{

        margin-bottom:15px;

        font-size:13px;

    }

    .footer-links a{

        font-size:11px;

    }

    .footer-contact-item a,
    .footer-contact-item span{

        font-size:10px;

    }

    .footer-bottom p{

        font-size:9px;

        line-height:1.6;

    }

    .footer-bottom-links{

        gap:10px;

    }

    .footer-bottom-links a{

        font-size:9px;

    }

}


/*=====================================================
    REDUCED MOTION
======================================================*/

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        scroll-behavior:auto !important;

        transition-duration:.01ms !important;

    }

}


/*=====================================================
    PRINT
======================================================*/

@media print{

    .header,
    .mobile-nav,
    .mobile-overlay,
    .ranking-controls,
    .winner-slider-controls,
    .back-to-top,
    .scroll-top,
    footer{

        display:none !important;

    }

    body{

        background:#ffffff;

    }

    .ranking-card,
    .podium-card{

        box-shadow:none;

        border:1px solid #ddd;

        break-inside:avoid;

    }

}


/*=====================================================
    FINAL WIDTH SAFETY
======================================================*/

html,
body{

    max-width:100%;

    overflow-x:hidden;

}

.container{

    width:100%;

}


/*=====================================================
    MOBILE TOUCH OPTIMIZATION
======================================================*/

@media(max-width:767px){

    button,
    a,
    select,
    input{

        -webkit-tap-highlight-color:
            transparent;

    }

    .previous-winners{

        touch-action:pan-x;

        overscroll-behavior-x:contain;

    }

}


/*=====================================================
    FINAL RANKING POLISH
======================================================*/

.ranking-card,
.podium-card,
.winner-card,
.stat-card,
.ranking-controls{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*=====================================================
    END PART 3C
======================================================*/