:root {
 
    --neon: #f4bf35;
}

/* ===== Title ===== */
h2 {
    margin-top: 50px;
    color: var(--neon);
    animation: fadeInDown 1s ease-out;
    text-align: center;
}
 h2{
        font-size:34px;
        font-weight:800;
     }


h2::after {
    content: "";
    width: 100px;
    height: 5px;
    background: linear-gradient(90deg, transparent, #3e3e3e, transparent);
    display: block;
    margin: 15px auto;
    border-radius: 20px;
}

.card-body{
    margin-top: 25px;
    color: white;
     border-radius: 10px;
    height: 75px;

}

.audio-card{
    display: flex;
 }
.img-audio img{
    margin: 10px;
    
    height: 50px;
    width: 50px;
    border-radius: 5px;
}

.audio-card {
  border-bottom: none;
  position: relative;
}

.audio-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
}
.audio-card {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
   border-bottom: 1px solid rgba(0,0,0,0.1);
}
.card-body {
   flex: 1;
 }
.actions {
  display: flex;
  gap: 8px;
}

.actions .btn {
   border: none;
   cursor: pointer;
   display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 0;
}

 

.audio-player{
  position:fixed;
  bottom:-120px;
  left:0;
  width:100%;
  background:rgba(10,10,10,0.9);
  backdrop-filter:blur(20px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  color:#fff;
  z-index:9999;
  transition:0.4s;
  border-top:1px solid rgba(255,255,255,0.1);
}

.audio-player.show{
  bottom:0;
}


/* ===== پلیر پایین ===== */
#bottomAudioPlayer{
  position:fixed;
  bottom:-120px;
  left:0;
  width:100%;
  background:rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 15px;
  transition:0.4s;
  z-index:999;
  color:white;
}

#bottomAudioPlayer.show{
  bottom:0;
}

#bottomAudioPlayer audio{
  width:70%;
}

#audioTitle{
  font-weight:bold;
}



.audio-player{
  position:fixed;
  bottom:-120px;
  left:0;
  width:100%;
  background:rgba(10,10,10,0.9);
  backdrop-filter:blur(20px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  color:#fff;
  z-index:9999;
  transition:0.4s;
  border-top:1px solid rgba(255,255,255,0.1);
}

.audio-player.show{
  bottom:0;
}

 .close-btn{
  position:absolute;
  background:none;
  border:none;
  color:#aaa;
  cursor:pointer;
  top:-25px;
  right:15px;
  width:35px;
  height:35px;
  border-radius:50%;
  padding-top: 5px;
  font-size:16px;
  font-weight:bold;
  box-shadow:0 5px 15px rgba(0, 180, 150, 0.4);

}
.close-btn:hover{
  color:#fff;
}

 
 .player-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.cover{
  width:50px;
  height:50px;
  background:#222;
  border-radius:10px;
}

.info span{
  font-weight:bold;
}
.info small{
  display:block;
  font-size:12px;
  color:#aaa;
}

/* وسط */
.player-center{
  flex:1;
  max-width:500px;
}

.controls{
  text-align:center;
  margin-bottom:5px;
}

.controls button{
  background:#035749;
  border:none;
  width:40px;
  height:40px;
  border-radius:10%;
  color:black;
  font-size:16px;
  cursor:pointer;
  transition:0.3s;
  
}

 
.progress-container{
  display:flex;
  align-items:center;
  gap:10px;
}

#progressBar{
  flex:1;
}

 .player-right{
  display:flex;
  align-items:center;
  gap:10px;
}

#volume{
  width:100px;
}

 @media(max-width:768px){
  .player-right{
    display:none;
  }

  .cover{
    width:40px;
    height:40px;
  }
}

.cover{
  width:50px;
  height:50px;
  background-image: url("https://cdn.t-sho.ir/main/c3.jpg");
  background-size: cover;
  background-position: center;
  border-radius:10px;
}


.play-btn{
  align-self: flex-start;  
}
.play-btn{
  margin: 0;
  width: 36px;
  height: 36px;

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

  background-color: #7f7f7f;
  color: black;
  border: none;

  border-radius: 50%;  

  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}

.play-btn i{
  font-size: 14px;
}
.play-btn {
  padding: 20px;
  font-size: 16px;
  border-radius: 50%;
  border: none;
  color: rgb(0, 0, 0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.play-btn {
  background-color: #5f5f5f;
  width: 30px;
  height: 30px;
}



.download-btn{
  align-self: flex-start;  
}
.download-btn{
  margin: 0;
  width: 36px;
  height: 36px;

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

  background-color: #7f7f7f;
  color: black;
  border: none;

  border-radius: 50%;  

  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
}

.download-btn i{
  font-size: 14px;
}
.download-btn {
  padding: 20px;
  font-size: 16px;
  border-radius: 50%;
  border: none;
  color: rgb(0, 0, 0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.download-btn {
  background-color: #5f5f5f;
  width: 30px;
  height: 30px;
}





.progress-container{
    direction: ltr;
    unicode-bidi: bidi-override;
 }

.dropdown-menu {
  text-align: center;
  
}
 


.copy-btn{
  width: 32px;
  height: 32px;

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

  border-radius: 50%;
  border: none;

  background-color: #4caf50;
  color: #fff;

  cursor: pointer;
}

.copy-btn i{
  font-size: 14px;
  line-height: 1;
}
.copy-item{
   
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.label{
  font-size: 11px;
  color: #aaa;
}
@media(max-width:350px){
    *{
    font-size: 13px;
    }
    h2{
        margin-top: 70px;
    }
 
}