/* HEADER */

.top-header{

    position:fixed;

    top:0;

    left:0;

    right:0;

    height:75px;

    background:var(--ink);

    color:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 35px;

    z-index:1000;

}



.college-name{

    font-family:var(--display);

    font-size:28px;

    color:var(--paper);

}



.live-time{

    font-family:var(--mono);

    font-size:22px;

    color:var(--marigold);

}





/* MAIN LAYOUT */


.vote-layout{

    display:flex;

    margin-top:75px;

    margin-bottom:75px;

    height:calc(100vh - 150px);

}





/* LEFT POSITION MENU */


.position-sidebar{

    width:290px;

    background:#fff8ec;

    border-right:1px solid var(--line);

    padding:25px;

    overflow-y:auto;

}



.position-sidebar h3{

    color:var(--plum);

    margin-bottom:20px;

}



.position-sidebar ul{

    list-style:none;

}



.position-sidebar li{

    padding:14px;

    margin-bottom:8px;

    border-radius:10px;

    border:1px solid transparent;

    color:var(--ink);

}



.position-sidebar li.active{

    background:var(--gold);

    color:white;

}





/* CANDIDATE AREA */


.candidate-section{

    flex:1;

    padding:30px;

    overflow-y:auto;

}



#position-name{

    color:var(--plum);

    margin-bottom:25px;

}




.candidate-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;

}





/* PROFILE CARD */


.candidate-card{

    background:white;

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

    border-radius:var(--radius);

    padding:20px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

}



.candidate-card:hover{

    transform:translateY(-5px);

}



.candidate-card img{

    width:130px;

    height:130px;

    margin:auto;

    border-radius:50%;

    object-fit:cover;

    border:4px solid var(--gold);

}



.candidate-card h3{

    margin-top:15px;

}



.candidate-card p{

    color:var(--muted);

    margin:10px;

}



.vote-btn{

    background:var(--jade);

    color:white;

    border:none;

    padding:12px 35px;

    border-radius:30px;

}



.vote-btn:hover{

    background:#087a54;

}





/* FOOTER */


.vote-footer{

    position:fixed;

    bottom:0;

    left:0;

    right:0;

    height:75px;

    background:var(--ink);

    display:flex;

    justify-content:center;

    gap:50px;

    align-items:center;

}



.nav-btn{

    background:var(--marigold);

    border:none;

    padding:12px 45px;

    border-radius:30px;

    font-size:18px;

}





/* TOAST */


.toast{

    position:fixed;

    top:90px;

    right:30px;

    background:var(--jade);

    color:white;

    padding:15px 25px;

    border-radius:10px;

    display:none;

}



.toast.show{

    display:block;

}