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

.search-page{

    max-width:1400px;

    margin:auto;

}

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

.search-hero{

    background:
        linear-gradient(
            135deg,
            #A53CF5,
            #146C43
        );

    border-radius:24px;

    padding:50px;

    margin-bottom:45px;

    color:#fff;

}

.search-heading h1{

    font-size:52px;

    font-weight:800;

    margin-bottom:12px;

}

.search-heading p{

    font-size:18px;

    color:rgba(255,255,255,.9);

}

.search-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

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

    font-size:14px;

    margin-bottom:20px;

}

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

.search-bar-wrapper{

    margin-top:35px;

    position:relative;

    max-width:700px;

}

.search-bar-wrapper i{

    position:absolute;

    left:24px;

    top:50%;

    transform:translateY(-50%);

    color:#666;

    font-size:20px;

}

.search-bar-wrapper input{

    width:100%;

    height:62px;

    border:none;

    border-radius:999px;

    background:#fff;

    padding:

        0
        65px
        0
        60px;

    font-size:17px;

    outline:none;

}

.search-bar-wrapper input:focus{

    box-shadow:

        0 0 0 4px

        rgba(255,255,255,.25);

}

#clearSearch{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#efefef;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}

#clearSearch:hover{

    background:#ddd;

}

/* ==========================================
   BROWSE
========================================== */

.browse-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fill,minmax(220px,1fr));

    gap:24px;

}

.browse-card{

    position:relative;

    overflow:hidden;

    height:170px;

    border-radius:20px;

    padding:24px;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.browse-card:hover{

    transform:

        translateY(-8px)

        scale(1.02);

}

.browse-card h3{

    font-size:26px;

    font-weight:800;

}

.browse-card i{

    position:absolute;

    right:20px;

    bottom:20px;

    font-size:48px;

    transform:rotate(-15deg);

    opacity:.95;

}

.songs{

    background:#E13300;

}

.artists{

    background:#148A08;

}

.albums{

    background:#5038A0;

}

.playlists{

    background:#006450;

}

.favorites{

    background:#B02897;

}

.recent{

    background:#1E3264;

}
/* ==========================================
   SEARCH RESULTS
========================================== */

#searchResults{

    margin-top:50px;

}

.result-section{

    margin-bottom:50px;

}

.result-title{

    color:#fff;

    font-size:28px;

    font-weight:800;

    margin-bottom:22px;

}
/* ==========================================
   SONG RESULT
========================================== */

.song-result{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:14px 18px;

    border-radius:16px;

    transition:.3s;

    cursor:pointer;

}

.song-result:hover{

    background:#202020;

}

.song-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.song-left img{

    width:68px;

    height:68px;

    border-radius:12px;

    object-fit:cover;

}

.song-info h4{

    color:#fff;

    font-size:18px;

    margin-bottom:6px;

}

.song-info p{

    color:#9a9a9a;

    font-size:15px;

}

.song-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.song-duration{

    color:#9a9a9a;

}

.song-play{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#A53CF5;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transform:translateY(10px);

    transition:.3s;

}

.song-result:hover .song-play{

    opacity:1;

    transform:translateY(0);

}
/* ==========================================
   ARTISTS
========================================== */

.artist-results{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(180px,1fr));

    gap:24px;

}

.artist-result{

    text-align:center;

    background:#181818;

    border-radius:18px;

    padding:20px;

    transition:.3s;

    cursor:pointer;

}

.artist-result:hover{

    background:#282828;

    transform:translateY(-6px);

}

.artist-result img{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

    margin:auto;

    margin-bottom:18px;

}

.artist-result h3{

    color:#fff;

    font-size:18px;

}

.artist-result p{

    color:#9a9a9a;

}
/* ==========================================
   ALBUMS
========================================== */

.album-results{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(220px,1fr));

    gap:24px;

}

.album-result{

    background:#181818;

    border-radius:18px;

    padding:18px;

    transition:.3s;

}

.album-result:hover{

    background:#282828;

    transform:translateY(-6px);

}

.album-result img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:16px;

}

.album-result h3{

    color:#fff;

    font-size:18px;

    margin-bottom:8px;

}

.album-result p{

    color:#9a9a9a;

}
/* ==========================================
   PLAYLISTS
========================================== */

.playlist-results{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(220px,1fr));

    gap:24px;

}

.playlist-result{

    background:#181818;

    border-radius:18px;

    padding:18px;

    transition:.3s;

}

.playlist-result:hover{

    background:#282828;

    transform:translateY(-6px);

}

.playlist-result img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:16px;

}

.playlist-result h3{

    color:#fff;

    font-size:18px;

    margin-bottom:8px;

}

.playlist-result p{

    color:#9a9a9a;

}
/* ==========================================
   LOADING
========================================== */

.search-loading{

    text-align:center;

    padding:80px 0;

}

.spinner{

    width:52px;

    height:52px;

    margin:auto;

    border:4px solid #2b2b2b;

    border-top:4px solid #A53CF5;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

.search-loading p{

    color:#9a9a9a;

    margin-top:18px;

}
/* ==========================================
   EMPTY
========================================== */

.empty-search{

    text-align:center;

    padding:90px 20px;

}

.empty-search i{

    font-size:72px;

    color:#2f2f2f;

    margin-bottom:20px;

}

.empty-search h3{

    color:#fff;

    font-size:28px;

    margin-bottom:10px;

}

.empty-search p{

    color:#9a9a9a;

    max-width:420px;

    margin:auto;

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

@media(max-width:768px){

.search-hero{

    padding:30px 22px;

}

.search-heading h1{

    font-size:34px;

}

.search-bar-wrapper input{

    height:56px;

}

.browse-grid{

    grid-template-columns:1fr 1fr;

    gap:16px;

}

.browse-card{

    height:130px;

}

.artist-results{

    grid-template-columns:1fr 1fr;

}

.album-results,
.playlist-results{

    grid-template-columns:1fr 1fr;

}

.song-left img{

    width:56px;

    height:56px;

}

.song-play{

    opacity:1;

    transform:none;

}

.song-duration{

    display:none;

}

}