@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@font-face{
    font-family: 'Vazir-Bold';
    src: url("./fonts/Vazir-Bold.06d42e475259.woff") format('woff');
}


html{
    scroll-behavior: smooth;
}

.album-header{
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    margin-top: 150px;
}
.album-big-image{
    width: 50%;
    
}
.album-big-image img{
    position: relative;
    z-index: -999;
    width: 100%;
    display: block;
    filter: grayscale(90%);
}
.album-info{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}
.album-name h1{
    text-align: center;
    font-size: clamp(var(--largef));
    color: var(--textclr);
}
.album-artist-name h2{
    font-size: clamp(var(--bigf));
    color: var(--textclr);
}
.album-artist-name a{
    text-decoration: none;
}
.album-description-download-box{
    margin-top: 1%;
    width: 90%;
    margin-left: 5%;
    display: flex;
    
    
    
}
.album-description-box{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px ;
    padding-bottom: 50px;
}

.album-description-box p{
    width: 60%;
    color: var(--textclr);
    font-size: clamp(var(--mediumf));
}
.album-download-box{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 1%;
    margin-bottom: 5%;
}

.album-download-box-buttons-container{
    width: 100%;
    padding-inline: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.start-playing-button{
    display: flex;
    align-self: center;
    justify-content: center;
    gap: 10px;
    padding-inline: 40px;
    padding-block: 20px;
    background-color: var(--rareclr);
    color: var(--textclr);
    font-size: clamp(var(--mediumf));
    white-space: nowrap;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 5%;
    transition: all ease 0.6s;
}
.create-disco-button{
    display: flex;
    align-self: center;
    justify-content: center;
    gap: 10px;
    padding-inline: 40px;
    padding-block: 20px;
    background-color: var(--purpleclr);
    text-decoration: none;
    color: var(--textclr);
    font-size: clamp(var(--mediumf));
    white-space: nowrap;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 5%;
    transition: all ease 0.6s;
}
.start-playing-button svg{
    height: 25px;
    width: 25px;
    display: inline-block;
}
.all-download-box{
    width: 80%;
    height: 8vw;
    background-color: var(--rareclr);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block: 5%;
    transition: all ease 0.6s;
}
.all-download-box:hover{
    background-color: transparent;
    border-radius: 0;
    border: 2px solid var(--textclr);
}
.all-download-box-link{
    width: 100%;
    display: flex;
    align-items: center;    
    justify-content: space-evenly;
    text-decoration: none;
    font-size: clamp(var(--bigf));
    color: var(--textclr);
    font-weight: 200;
    
}
.all-download-box svg{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textclr);
    
}
.download-box-link{
    text-decoration: none;
    width: 70%;
    margin: 1%;
}
.download-box{
    width: 75%;
    margin-block: 10px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--mainclr);
    border-radius: 10px;
    border: 2px solid var(--textclr);
}
.download-box a svg{
    cursor: pointer;
}
.download-box-image{
    width: 22%;
}

.download-box-image img{
    width: 100%;
    display: block;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.download-box p{
    flex-grow: 1;
    width: 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: var(--textclr);
}
.download-box p a{
    width: 100%;
    font-size: clamp(var(--mediumf));
    text-decoration: none;
    text-align: center;
}
.download-box a{
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--textclr);
}



.album-tags-box{
    background-color: var(--textclr);
    direction: rtl;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px ;
    padding-block: 50px;
   
}
.album-tags-box-header{
    background-color: var(--mainclr);
    padding-inline: 30%;
    margin-bottom: 60px;
    padding-block: 10px;
}
.album-tags-box-header h3{
    color: var(--textclr);
    font-size: clamp(var(--largef));
    letter-spacing: 5px;
}
.album-tags{
    background-color: var(--mainclr);
    margin-block: 0;
    margin-inline: 10%;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.album-tags p{
    width: 50%;
    font-family: 'Vazir-Bold';
    color: var(--textclr);
    font-size: clamp(var(--mediumf));
    padding-right: 10px;
    padding-block: 10px;
}

#floating-box{
    width: 100%;
    background-color: var(--mainclr);
    opacity: 0.95;
    border: 2px solid var(--textclr);
    box-shadow: 5px 5px 5px white;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: 0;
    height: 140px;
    position: fixed;
    z-index: 999;
    bottom: 0;
    transform: translateY(100%);
    display: flex;
    align-items: center;
    padding-inline: 20px;
    transition: all ease-out 0.8s;
    flex-wrap: wrap;
}

.mini-music-player-song-info{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}
.mini-music-player-song-info img{
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 5px;
}
.mini-music-player-song-info-text{
    width: 70%;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}
.mini-music-player-song-info-text p{
    color: var(--textclr);
    font-size: clamp(var(--smallf));
}
.mini-music-player-song-info-text a{
    color: var(--textclr);
    font-size: clamp(var(--mediumf));
    min-width: 20vw;
}

.album-progress-bar{
    width: 50%;
    height: 4px;
    background-color: var(--borderclr);
    position: relative;
    cursor: pointer;
    margin-inline: 5%;
}

.album-progress{
    height: 5px;
    background-color: var(--rareclr);
    width: 0;
    position: absolute;
}

.mini-music-player-song-bar{
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.controller-mini-music-player-song-bar{
    width: 80%;
}
.controller-mini-music-player-song-bar-buttons{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: var(--textclr);
}
.controller-mini-music-player-song-bar-buttons svg{
    cursor: pointer;
    transition: all ease 0.6s;
}
.controller-mini-music-player-song-bar-buttons svg:hover{
    transform: translate(5% , 5%);
}
.controller-mini-music-player-song-bar-buttons #prevButton{
    transform: rotate(180deg) !important;
}
.controller-mini-music-player-song-bar-buttons #nextButton{
    transform: none !important;
}
.bar-mini-music-player-song-bar{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.currentTime-text , .duration-text{
    width: 20%;
    display: flex;
    align-items: center;
    font-size: clamp(var(--mediumf));
    color: var(--textclr);
}
.currentTime-text{
    justify-content: right;
}
.duration-text{
    justify-content: left;
}
#close-button{
    cursor: pointer;
}
.close-mini-music-player-song-bar{
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mini-music-player-sound-bar{
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.mini-music-player-sound-bar input{
    margin-bottom: 30px;
    width: 80%;
    margin-left: 5%;
    height: 4px;
    color: var(--rareclr);
}

.mini-music-player-sound-bar svg{
    color: var(--textclr);
    width: 10%;
    margin-bottom: 30px;
    display: block;
}
.download-box.playing {
    border: 3px dashed var(--rareclr);
    border-radius: 0px;


}
.download-box.playing p a{
    color: var(--rareclr);
}



.under-footer{
    width: 100%;
    height: 100px;
    background-color: var(--mainclr);
}

.album-add-album{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}
.album-add-album a{
    color: var(--textclr);
    padding-block: 30px;
    padding-inline: 60px;
    background-color: var(--rareclr);
    border-radius: 10px;
    margin-block: 30px;
    border: 1px solid white;
    text-decoration: None;
    font-size: clamp(var(--mediumf));
    transition: all ease 0.6s;
    margin-right: 5vw;
}
.album-add-album a:hover{
    transform: translate(3%,2%);
    background-color: rgb(55, 0, 255)
}
.artist-add-album{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .artist-add-album a{
    color: var(--textclr);
    padding-block: 30px;
    padding-inline: 60px;
    background-color: var(--rareclr);
    border-radius: 10px;
    margin-block: 30px;
    border: 1px solid white;
    text-decoration: None;
    font-size: clamp(var(--mediumf));
    transition: all ease 0.6s;
  }
  .artist-add-album a:hover{
    transform: translate(3%,2%);
    background-color: rgb(0, 0, 0);
  }

.empty-playlist-container{
    width: 100%;
    padding-inline: 10%;
    padding-bottom: 70px;
    padding-top: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.empty-playlist-container p{
    color: var(--textclr);
    font-size: clamp(var(--bigf));
    text-align: center;
    text-shadow: 2px 2px 2px var(--rareclr);
}
.empty-playlist-container p span a{
    color: var(--textclr);
}

.playlist-list{
    background-color: var(--borderclr);
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    border-radius: 5px;
    border: 2px solid var(--rareclr);
    max-height: 350px;
    box-shadow: 2px 2px 20px var(--rareclr);
}
.playlist-list-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding-inline: 20px;
}
.playlist-list-container h4{
    width: 100%;
    text-align: center;
    color: var(--textclr);
    padding-block: 25px;
    padding-inline: 20px;
    font-size: clamp(20px , 1.2vw + 12px , 60px);
}
.playlist-list-container form{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    
}
.playlist-list-button-container{
    width: 100%;
    margin-block: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.playlist-list-button-container button{
    min-width: fit-content;
    cursor: pointer;
    border: none;
    padding-block: 12px;
    padding-inline: 25px;
    border-radius: 5px;
    color: var(--textclr);
    background-color: var(--successclr);
    text-decoration: none;
    font-size: clamp(var(--mediumf));
    transition: all ease 0.6s;
}

.playlist-list-button-container a{
    border: none;
    min-width: fit-content;
    cursor: pointer;
    border: none;
    outline: none;
    padding-block: 12px;
    padding-inline: 25px;
    border-radius: 5px;
    color: var(--textclr);
    background-color: var(--errorclr);
    text-decoration: none;
    font-size: clamp(var(--mediumf));
    transition: all ease 0.6s;
}

#yn-footer-sticky-99899{
    display: none;
}
.yn-item_title , .YN.yn-article-text{
    color: var(--textclr) !important;
}
.ad-container-album{
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: 20%;
}
/* Translation button styling */
#translateButton {
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
}

#translateButton:hover {
    opacity: 0.7;
}

/* When translation is active */
#translateButton.active {
    color: #007bff !important;
}

/* Translated lyrics styling */
#translated-lyrics {
    line-height: 1.8;
}

#translated-lyrics span {
    display: block;
    margin-bottom: 0.5em;
}

/* Original lyrics container */
#original-lyrics pre,
#translated-lyrics pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.playlist-header{
    margin-top: 150px !important;
}


@media (max-width: 1100px){
    .mini-music-player-box{
        flex-wrap: wrap;
        height: 150px;
    }
    .mini-music-player-sound-bar{
        display: none;
        width: 0;
    }
    .mini-music-player-song-info{
        width: 30%;
    }
    .mini-music-player-song-bar{
        width: 70%;
    }
    .currentTime-text, .duration-text {
        width: 10%;
    }
    .album-progress-bar{
        width: 70%;
    }
    .ad-container-album{
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: 10%;
    }
    .playlist-header{
        margin-top: 150px !important;
    }
    
}
@media (max-width: 768px){
    .album-header{
        width: 96%;
        margin-left: 2%;
        flex-direction: column;
    }
    .album-big-image{
        width: 100%;
    }
    .album-info{
        width: 100%;
        height: 30vw;
        justify-content: space-evenly;
    }
    .album-description-download-box{
        width: 96%;
        margin-left: 2%;
    }
    .album-description-box{
        display: none;
    }
    .album-download-box{
        width: 100%;
    }
    .all-download-box{
        height: 18vw;
        border-radius: 5px;
    }
    .all-download-box svg{
        width: 7vw;
        height: 7vw;
    }
    .download-box{
        border-radius: 5px;
        border: 1px solid var(--textclr);
        margin-block: 3%;
    }
    .download-box p{
        font-size: clamp(var(--smallf));
    }
    .download-box img{
        border-radius: 3px;
    }
    .download-box svg{
        height: 5vw;
    }
    .download-box a svg{
        width: 5vw;
    }
    .album-tags-box{
        
        margin-top: 10px ;
        padding-block: 10px;
       
    }
    .album-tags-box-header{
        
        margin-bottom: 10px;
        
    }
    .album-tags p{
        width: 50%;
        font-size: clamp(var(--smallf));
        padding-right: 10px;
        padding-block: 10px;
    }
    
    .controller-mini-music-player-song-bar-buttons svg{
        width: 4vw;
        height: 4vw;
    }
    #floating-box{
        height: 100px;
        padding-inline: 0;
    }
    .close-mini-music-player-song-bar svg{
        width: 5vw;
        height: 5vw;
    }
    .currentTime-text , .duration-text{
        font-size: clamp(var(--smallmf));
        width: 7%;
    }
    .album-progress-bar{
        width: 70%;
        border-radius: 5px;
    }
    .album-progress{
        border-radius: 5px;
    }
    .mini-music-player-song-info{
        width: 25%;
        align-items: flex-start;
        justify-content: center;
        padding-top: 20px;
    }
    
    .mini-music-player-song-info-text{
        width: 90%;
        margin-left: 5px;
        overflow: hidden;
        
    }
    .bar-mini-music-player-song-bar{
        order: 2;
        margin-top: 10px;
    }
    .controller-mini-music-player-song-bar{
        order: 1;
    }
    .mini-music-player-song-bar{
        width: 75%;
        padding-bottom: 30px;
    }
    
    .mini-music-player-song-info img{
        display: none;
    }
    .mini-music-player-song-info-text p{
        color: var(--textclr);
        font-size: clamp(var(--smallmf));
    }
    .mini-music-player-song-info-text a{
        color: var(--textclr);
        font-size: clamp(var(--smallf));
        white-space: nowrap;
        min-width: unset;
        
        animation: scrollText 0s linear none;
        
    }
    @keyframes scrollText{
        0% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-100%);
        }
    }
    .mini-music-player-sound-bar{
        display: none;
        width: 0;
    }
    .empty-playlist-container{
        padding-block: 70px;
    }
    .ad-container-album{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-inline: 0%;
    }
    .playlist-header{
        margin-top: 150px !important;
    }
}
/* Compact bottom player for album pages on phones. */
@media (min-width: 769px){
    .controller-mini-music-player-song-bar-buttons svg{
        width: 2.4rem;
        height: 2.4rem;
    }
    .controller-mini-music-player-song-bar-buttons .mini-player-play-control svg{
        width: 2rem;
        height: 2rem;
    }
    .controller-mini-music-player-song-bar-buttons #prevButton,
    .controller-mini-music-player-song-bar-buttons #nextButton{
        width: 1.5rem;
        height: 1.5rem;
    }
}
@media (max-width: 768px){
    #floating-box{
        left: .75rem;
        bottom: .75rem;
        width: calc(100% - 1.5rem);
        height: 76px;
        padding: .5rem .75rem;
        gap: .75rem;
        flex-wrap: nowrap;
        align-items: center;
        background: color-mix(in srgb, var(--mainclr) 94%, var(--borderclr));
        border: 1px solid color-mix(in srgb, var(--textclr) 24%, var(--borderclr));
        border-radius: 1rem;
        box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .48), 0 0 0 1px rgba(255, 255, 255, .05) inset;
        transform: translateY(calc(100% + .75rem));
        transition: transform .35s ease, box-shadow .25s ease, translate .25s ease;
    }
    .close-mini-music-player-song-bar,
    .mini-music-player-sound-bar,
    .bar-mini-music-player-song-bar,
    #music-album-name{
        display: none;
    }
    .mini-music-player-song-info{
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 100%;
        padding-top: 0;
        gap: .65rem;
        justify-content: flex-start;
        align-items: center;
    }
    .mini-music-player-song-info img{
        display: block;
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
    }
    .mini-music-player-song-info-text{
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin-left: 0;
    }
    .mini-music-player-song-info-text a,
    .mini-music-player-song-info-text p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mini-music-player-song-info-text a{
        width: auto !important;
        margin: 0;
        font-size: 1rem;
        animation: none !important;
    }
    .mini-music-player-song-info-text p{
        font-size: .82rem;
        color: color-mix(in srgb, var(--textclr) 65%, var(--mainclr));
    }
    .mini-music-player-song-bar{
        flex: 0 0 auto;
        width: auto;
        height: 100%;
        padding-bottom: 0;
        justify-content: center;
    }
    .controller-mini-music-player-song-bar{
        order: initial;
        width: auto;
    }
    .controller-mini-music-player-song-bar-buttons{
        gap: .8rem;
        justify-content: flex-end;
    }
    .mini-player-play-control{
        --player-progress: 0%;
        position: relative;
        display: grid;
        flex: 0 0 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
        place-items: center;
    }
    .mini-player-play-control::before,
    .mini-player-play-control::after{
        position: absolute;
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }
    .mini-player-play-control::before{
        inset: 0;
        background: conic-gradient(var(--rareclr) var(--player-progress), var(--borderclr) 0);
    }
    .mini-player-play-control::after{
        inset: 3px;
        background: var(--mainclr);
    }
    .mini-player-play-control svg{
        position: relative;
        z-index: 1;
    }
    .controller-mini-music-player-song-bar-buttons svg{
        width: 1.65rem;
        height: 1.65rem;
    }
    .controller-mini-music-player-song-bar-buttons #prevButton,
    .controller-mini-music-player-song-bar-buttons #nextButton{
        width: 1.15rem;
        height: 1.15rem;
    }
    .controller-mini-music-player-song-bar-buttons .mini-player-play-control svg{
        width: 1.35rem;
        height: 1.35rem;
    }
}
@media (max-width: 768px) and (hover: hover){
    #floating-box:hover{
        translate: 0 -.2rem;
        box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .1) inset;
    }
}
@media (max-width: 400px){
    .song-box{
        height: 40px;
    }
}