/* ==========================================
   RESET
========================================== */

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

/* ==========================================
   GERAL
========================================== */

body{

    background:#001842;

    color:white;

    font-family:Segoe UI, Arial, sans-serif;

    padding-top:0;

    padding-bottom:90px;
}

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

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    background:#001842;

     text-align:center;

    padding:4px 20px 8px;

    box-shadow:
    0 2px 10px rgba(0,0,0,.35);
}

/* Evita que espaços reservados por anúncios/iframes aumentem o cabeçalho. */
header > iframe,
header > ins,
header .adsbygoogle,
header [data-ad-client]{
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

main{
    margin-top:220px;
}

/* ==========================================
   LOGO
========================================== */

.logo{

    display:block;

    width:100%;

    max-width:360px;

    height:auto;

    margin:0 auto 4px auto;
}
/* ==========================================
   BUSCA
========================================== */

.busca-container{

    width:95%;

    max-width:900px;

    margin:0 auto 6px auto;
}

.busca-box{

    display:flex;

    align-items:center;

    background:#222944;

    border:3px solid #f0a500;

    border-radius:30px;

    height:60px;

    padding:0 20px;
}

.icone-busca{

    font-size:28px;

    margin-right:12px;
}

#busca{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    color:white;

    font-size:20px;
}

#busca::placeholder{

    color:#a0a0a0;
}

/* ==========================================
   CATEGORIAS
========================================== */

.categorias{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    margin-top:8px;
}

.categoria{

    background:#1f2744;

    color:white;

    border:2px solid #f0a500;

    border-radius:25px;

    padding:8px 16px;

    cursor:pointer;

    font-size:14px;

    font-weight:bold;

    transition:.2s;
}

.categoria:hover{

    transform:translateY(-2px);
}

.categoria.ativa{

    background:#f0a500;

    color:black;
}

/* ==========================================
   CONTADORES
========================================== */

#contador{

    text-align:center;

    color:#58a8ff;

    font-size:18px;

    font-weight:bold;

    margin-top:8px;
}

#resultadosEncontrados{

    text-align:center;

    color:#c7c7c7;

    font-size:13px;

    margin-top:5px;
}

.subtitulo{

    text-align:center;

    color:white;

    font-size:14px;

    margin-top:5px;
}

/* ==========================================
   RESULTADOS
========================================== */

#resultado{

    width:95%;

    max-width:1200px;

    margin:40px auto 20px auto;
}

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

.card{

    position:relative;

    background:#2a2b47;

    border-radius:24px;

    padding:20px 30px;

    margin-bottom:18px;

    min-height:130px;

    box-shadow:
    0 4px 12px rgba(0,0,0,.25);

    transition:.2s;
}

.card:hover{

    transform:translateY(-2px);
}

/* ==========================================
   CÓDIGO
========================================== */

.codigo{

    display:inline-block;

    width:auto;

    padding:8px 18px;

    border:3px solid #f0a500;

    border-radius:18px;

    color:white;

    font-size:20px;

    font-weight:bold;

    margin-bottom:15px;
}

/* ==========================================
   MÚSICA
========================================== */

.card h3{

    margin:0 0 10px 0;

    color:white;

    font-size:22px;

    font-weight:700;

    text-transform:uppercase;

    max-width:85%;
}

/* ==========================================
   ARTISTA
========================================== */

.artista{

    color:#61a8ff;

    font-size:18px;

    font-weight:bold;

    max-width:85%;
}

/* ==========================================
   GÊNERO
========================================== */

.genero{

    color:#bfbfbf;

    font-size:13px;

    margin-top:5px;

    font-style:italic;
}

/* ==========================================
   FAVORITO
========================================== */

.favorito{

    position:absolute;

    right:40px;

    top:50%;

    transform:translateY(-50%);

    font-size:34px;

    cursor:pointer;

    user-select:none;

    line-height:1;
}

/* ==========================================
   PAGINAÇÃO
========================================== */

.paginacao{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    background:#1b2138;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    padding:12px;

    box-shadow:
    0 -3px 10px rgba(0,0,0,.4);
}

.paginacao button{

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#e65100;

    color:white;

    font-size:24px;

    cursor:pointer;
}

#paginaAtual{

    font-size:18px;

    font-weight:bold;
}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-thumb{

    background:#f0a500;

    border-radius:10px;
}

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

@media(max-width:768px){

    body{
        padding-top:0;
    }

    header{
        padding:10px 12px 12px;
    }

    .logo{
        max-width:150px;
        margin-bottom:4px;
    }

    .busca-container{
        width:100%;
        margin:0 auto 8px auto;
    }

    .busca-box{
        height:46px;
        padding:0 14px;
    }

    .icone-busca{
        font-size:21px;
        margin-right:8px;
    }

    #busca{
        font-size:15px;
    }

    .categorias{
        gap:6px;
        margin-top:10px;
    }

    .categoria{
        font-size:10px;
        padding:6px 9px;
    }

    #contador{
        font-size:14px;
        margin-top:9px;
    }

    #resultadosEncontrados{
        font-size:11px;
        margin-top:3px;
    }

    .subtitulo{
        font-size:12px;
        margin-top:3px;
    }

    main{
        margin-top:235px;
    }

    #resultado{
        width:calc(100% - 20px);
        margin:16px auto 20px auto;
    }

    .codigo{
        font-size:18px;
    }

    .card h3{
        font-size:18px;
    }

    .artista{
        font-size:15px;
    }

    .favorito{
        font-size:34px;
    }
}