.music-player {
  width: 240px;
  position: fixed;
  bottom: 10px;
  /* left: calc(50vw - 110px); */
  left: 10px;
  /* margin: 30px auto; */
  padding: 10px;
  /*background-color: rgba(0, 0, 0, 0.1);*/
  background-image: url("../image/music_player_3.jpg") !important; /* Specify the image path */
  background-repeat: no-repeat !important; /* Prevents the image from repeating */
  background-size: cover !important;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10000;
}

.track-info {
  text-align: center;
  margin-bottom: 5px;
}

.Music-Controls {
  display: flex;
  justify-content: space-between;
  direction: ltr !important;
}

#progress-bar {
  direction: ltr !important;
}

input[type="range"] {
  width: 100%;
}

.playlist {
  display: block; /* Initially shown */
  width: 100%;
}

/* --- Added styles for search bar --- */
#song-search {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  margin-bottom: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  background: rgba(255, 255, 255, 0.85);
  transition: border 0.2s;
}
#song-search:focus {
  border: 1.5px solid #007bff;
  background: #fff;
}
/* --- End search bar styles --- */

#song-select {
  direction: rtl !important;
  width: 100%;
}

.fa-icon {
  font-size: 25px;
  cursor: pointer;
  transition: color 0.3s;
}

.fa-icon:hover {
  color: #007bff; /* Change color on hover */
}

.track-info span,
#song-select,
#song-select.option {
  font-family: "Kalameh-Black";
  font-size: 0.9rem;
}

#song-select {
  padding: 3px 0;
}

#track-artist {
  margin-left: 10px;
}

.hidden {
  display: none;
}

.radial-gradient-background {
  background: radial-gradient(at 50% 50%, #1a2a6c 0px, transparent 50%),
    radial-gradient(at 40% 20%, #b21f1f 0px, transparent 50%),
    radial-gradient(at 70% 100%, #fdbb2d 0px, transparent 50%);
}

.radial-gradient-background2 {
  background: radial-gradient(circle at center, #9b5de5, #f15bb5),
    radial-gradient(circle at top left, rgba(241, 91, 181, 0.8), transparent),
    radial-gradient(
      circle at bottom right,
      rgba(255, 153, 200, 0.8),
      transparent
    );
}

.search__input {
    font-family: Shabnam !important; 
    direction: rtl !important; 
    width: 100% !important; 
    margin-bottom:4px !important; 
    border-radius: 5px !important;
}



