body {
  padding: 0;
}
main {
  padding: 0;
}

.player-wrap{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.player-title{
  margin: 0 0 12px;
  font-size: 22px;
}

audio{
  width: 100%;
  margin: 10px 0 14px;
}

/* Main Container */

.fixed-head {
  /* 1. Stick to the top */
  position: sticky;
  display: block;
  top: 0;
  
  /* 2. Layering */
  z-index: 1000; /* Ensures playlist items scroll BEHIND the header */

}
.player-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: center;
  gap: 12px;
  background: #2f6fec;
  padding: 16px;
}
.player-banner .title {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  font-family: Helvetica;
}
.player-banner .info {
  color: #bbb;
  font-size: .8rem;
  text-align: right;
  font-weight: 300;
}
.player-head {
  display: grid;
  /* Play button takes its own width, timeline takes the rest */
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  background: #eee;
  padding: 20px;
}

/* Timeline Sub-Grid */
.timeline {
  display: grid;
  /* Time labels take their own width, the seek bar expands */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

/* Optional styling to ensure the seek bar fills space */
.seek {
  width: 95%;
  cursor: pointer;
}

/* Basic Button Styling Updated */
.play-btn {
  background: #007cba;
  color: white;
  border: none;
  cursor: pointer;

  /* MAKES IT ROUND */
  width: 48px;           /* 1. Defined fixed width */
  height: 48px;          /* 2. Defined equal fixed height */
  border-radius: 50%;    /* 3. Max border radius for a circle */
  padding: 0;            /* 4. Remove previous padding */

  /* Centers content inside the circle */
  display: flex;
  justify-content: center;
  align-items: center;
}
.now-playing__name {
  color: #007cba;
  font-size: 80%;
}
.time {
  font-family: monospace;
  font-size: 0.9rem;
  color: #555;
}

/* Playlist classes */
.toggle{
  margin-left: auto;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  user-select: none;
}
.player-list {
  background: #fff;
}
.playlist{
  margin: 0;
  border-top: 1px solid #ddd;
}

ul {
  padding-left: 0px !important;
}
.playlist li{
  padding: 10px 8px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: #555;
  font-size: 85%;

}

.playlist li:hover{
  background: #fafafa;
}

.playlist li.is-active{
  color: #007cba;
  background: #eef6ff;
}

.track-title{
  flex: 1;
  min-width: 0;
  padding-left: 12px;
}

.track-duration{
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
  white-space: nowrap;
}

.play-btn{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #2f6fec;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* PLAY icon (triangle) */
.play-icon{
  width: 0;
  height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 3px;
}

/* PAUSE icon when playing */
.play-btn.is-playing .play-icon{
  width: 16px;
  height: 18px;
  border: 0;
  margin-left: 0;
  position: relative;
}

.play-btn.is-playing .play-icon::before,
.play-btn.is-playing .play-icon::after{
  content: "";
  position: absolute;
  top: 0;
  width: 5px;
  height: 18px;
  background: #fff;
  border-radius: 1px;
}

.play-btn.is-playing .play-icon::before{ left: 0; }
.play-btn.is-playing .play-icon::after{ right: 0; }