/* ===================================
   KolleBoo Ultra UI
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#090909;
    color:#fff;
    font-family:system-ui;
}

/* HOME */
.kb-home{
    padding:18px;
    padding-bottom:130px;
}

/* ===================================
   BANNER PRINCIPAL
=================================== */

.kb-featured{

    position:relative;

    width:100%;
    height:320px;

    border-radius:35px;

    overflow:hidden;

    margin-bottom:25px;

    background:#111;
}

/* imagem */
.kb-featured img{

    width:100%;
    height:100%;

    object-fit:cover;
}

/* overlay */
.kb-featured::after{

    content:'';

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.95),
        rgba(0,0,0,.1)
    );
}

/* infos */
.kb-featured-content{

    position:absolute;

    left:25px;
    right:25px;
    bottom:25px;

    z-index:2;
}

.kb-badge{

    display:inline-block;

    background:#1DB954;

    color:#fff;

    padding:7px 14px;

    border-radius:50px;

    font-size:11px;

    font-weight:bold;

    margin-bottom:14px;
}

/* título */
.kb-featured h1{

    font-size:34px;

    line-height:1.05;

    margin-bottom:8px;
}

/* artista */
.kb-featured p{

    color:#cfcfcf;

    font-size:15px;
}

/* botão */
.kb-featured-play{

    position:absolute;

    right:25px;
    bottom:25px;

    width:70px;
    height:70px;

    border:none;

    border-radius:50%;

    background:#1DB954;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:3;

    box-shadow:
    0 10px 30px rgba(29,185,84,.45);
}

/* ===================================
   TITULO
=================================== */

.kb-title-section{

    font-size:23px;

    font-weight:700;

    margin-bottom:16px;
}

/* ===================================
   LISTA
=================================== */

.kb-list{

    display:flex;
    flex-direction:column;
    gap:14px;
}

/* ITEM */
.kb-music{

    display:flex;
    align-items:center;

    gap:14px;

    background:#121212;

    border-radius:24px;

    padding:12px;

    transition:.25s;

    cursor:pointer;
}

.kb-music:hover{

    background:#1a1a1a;

    transform:scale(1.015);
}

/* imagem */
.kb-music img{

    width:72px;
    height:72px;

    object-fit:cover;

    border-radius:20px;
}

/* info */
.kb-info{

    flex:1;

    overflow:hidden;
}

.kb-info strong{

    display:block;

    font-size:16px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.kb-info small{

    color:#999;

    font-size:13px;
}

/* botão play item */
.kb-mini-play{

    width:50px;
    height:50px;

    border:none;

    border-radius:50%;

    background:#1DB954;

    color:#fff;

    font-size:18px;

    cursor:pointer;
}

/* ===================================
   PLAYER FIXO
=================================== */

#kb-player{

    position:fixed;

    left:12px;
    right:12px;
    bottom:12px;

    max-width:520px;

    margin:auto;

    background:#111;

    border-radius:30px;

    padding:16px;

    display:none;

    flex-direction:column;

    z-index:999999;

    box-shadow:
    0 10px 50px rgba(0,0,0,.5);
}

/* top */
.kb-player-top{

    display:flex;
    align-items:center;

    gap:14px;
}

/* capa */
#kb-cover{

    width:65px;
    height:65px;

    border-radius:18px;

    object-fit:cover;
}

/* nome */
#kb-title{

    font-size:16px;

    font-weight:700;
}

/* artista */
#kb-artist{

    color:#aaa;

    font-size:13px;

    margin-top:5px;
}

/* progresso */
#kb-progress{

    width:100%;

    margin-top:15px;

    accent-color:#1DB954;
}

/* controles */
.kb-controls{

    display:flex;

    justify-content:center;
    align-items:center;

    gap:28px;

    margin-top:18px;
}

/* prev next */
#kb-prev,
#kb-next{

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:#222;

    color:#fff;

    font-size:18px;

    cursor:pointer;
}

/* play */
#kb-play{

    width:65px;
    height:65px;

    border:none;

    border-radius:50%;

    background:#1DB954;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    box-shadow:
    0 8px 25px rgba(29,185,84,.35);
}

/* ===================================
   RESPONSIVO
=================================== */

@media(max-width:480px){

    .kb-featured{
        height:260px;
    }

    .kb-featured h1{
        font-size:28px;
    }

    .kb-music img{
        width:62px;
        height:62px;
    }

}