/* Overall container */
.player-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /*background-color: #e5e7eb;
  height: 100vh;*/
  padding: 20px 10px;
  background: #c8c8c8;
}

/* Player box styling */
.player-box {
  max-width: 32rem;
  width: 100%;
  /*background-color: #f3f4f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
  padding: 0 10px;
  border-radius: 0;
}

/* Controls container */
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  /*gap: 1rem;*/
  gap: 0.8rem;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Logo and live indicator styling */
.logo-container {
  display: flex;
  align-items: center;
  position: relative;
}

.player-box .logo-container .logo {
  /*height: 3rem;*/
  /*margin-right: 1rem;*/
  max-width: 140px;
}

.live-indicator {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: -8px;
  left: 0;
  display: none; /* Hidden by default */
}

/* Button base styling */
.player-container .button {
  background-color: #d09f75;
  color: white;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  padding: 0.5rem;
  border: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  -webkit-aspect-ratio: 1 / 1;
}

.player-container .button:hover {
  background-color: #b8845d;
}

/* Specific button styling */
.play-pause-btn {}
.mute-btn {}

/* Volume slider styling */
.volume-slider {
  width: 100%;
  height: 0.25rem !important;
  background-image: linear-gradient(to right, #d1d5db, #9ca3af); /* Fading color effect */
  border-radius: 9999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 3px 0px;
  margin: 0;
  border: 1px solid #c3c3c3;
  position: relative;
}

/* Dynamic width increase for the slider */
.volume-slider::-webkit-slider-runnable-track {
  height: 0.25rem;
  background-color: transparent;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  background-color: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-6px);
}

.volume-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-6px);
}

/* Initial speaker icon styling */
#volumeIcon.fa-volume-down::before {
  content: "\f027"; /* Font Awesome icon for low volume */
}

#volumeIcon.fa-volume-up::before {
  content: "\f028"; /* Font Awesome icon for high volume */
}
.player-img {
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    padding-top: 75%;
}


@media only screen and (max-width : 480px){
  .controls { gap: 0.4rem; padding: 7px;}
  .player-container .button i { font-size: 0.8em;}
  .player-container .button { width: 1.6rem; height: 1.6rem;}
}