/* (A) MATERIAL ICONS */
.aWrap .svg-inline--fa {
  color: white !important;
}

/* (B) WRAPPER */
.aWrap {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* Changed to 100% to fluidly adapt to Jon's player design layouts */
  padding: 10px 30px;
  margin: 5px 0;
  border-radius: 10px;
  background: black;
  gap: 1rem;
}

.aWrap,
.aWrap * {
  box-sizing: border-box;
}

/* (C) PLAY/PAUSE BUTTON */
.aPlay {
  padding: 0;
  margin: 0;
  background: 0;
  border: 0;
  cursor: pointer;
}

/* (D) TIME */
.aCron {
  font-size: 14px;
  color: #cbcbcb;
  margin: 0 10px;
  white-space: nowrap;
}

/* (E) RANGE SLIDERS */
/* (E1) HIDE DEFAULT */
.aWrap input[type="range"] {
  appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  width: 100%;
  min-width: 100px;
  padding: 0;
  margin: 0;
  background: 0;
}

.range {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1; /* Allows seek track to fill space safely */
}

.range-volume {
  position: relative;
  display: flex;
  align-items: center;
}

.range input,
.range-volume input {
  position: relative;
  z-index: 1;
}

.range .change-range,
.range-volume .change-range {
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  width: 0px;
  background-color: rgb(187, 187, 187);
  border-radius: 10px 0 0 10px;
}

.range-volume .change-range {
  height: 10px;
  width: 95%;
}

.under-ranger {
  position: absolute;
  left: 0;
  top: 0;
  height: 6px;
  width: 100%;
  background-color: rgb(63, 63, 63);
  border-radius: 10px;
}

.range-volume .under-ranger {
  height: 10px;
}

.aWrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
}

/* (E2) CUSTOM SLIDER TRACK */
.aWrap input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 6px;
  border-radius: 10px;
}

/* (E3) CUSTOM SLIDER BUTTON */
.aWrap input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  position: relative;
  cursor: pointer;
  margin-top: -5px;
}

.aWrap input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  position: relative;
  cursor: pointer;
  margin-top: -5px;
}

/* (F) VOLUME */
.aVolIco {
  margin: 0 10px;
  cursor: pointer;
}

input.aVolume {
  width: 80px !important;
}

.aVolume::-webkit-slider-runnable-track {
  height: 10px !important;
}

.aVolume::-webkit-slider-thumb {
  margin-top: -3px !important;
}

.aVolume::-moz-range-thumb {
  margin-top: -3px !important;
}

.volume-container {
  display: flex;
  align-items: center;
}
/* Style for Play/Pause Text Icons */
.aPlayIco {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  user-select: none;
  transition: color 0.2s ease;
}

.aPlay:hover .aPlayIco {
  color: #3498db; /* Changes color to matching highlight on hover */
}
/* --- MOBILE RESPONSIVENESS FOR VOLUME CONTROLS --- */
@media (max-width: 520px) {
  /* Hide only the horizontal volume range bar */
  .aWrap input.aVolume,
  .aWrap .range-volume .under-ranger,
  .aWrap .range-volume .change-range {
    display: none !important;
  }
  
  /* Reset the volume container layout so the icon is centered cleanly */
  .volume-container {
    margin-left: auto; /* Pushes the icon neatly to the right edge */
  }
}
/* --- MOBILE RESPONSIVENESS FOR VOLUME CONTROLS --- */
@media (max-width: 520px) {
  /* Hide only the horizontal volume range bar */
  .aWrap input.aVolume,
  .aWrap .range-volume .under-ranger,
  .aWrap .range-volume .change-range {
    display: none !important;
  }
}

/* --- ULTRA-SMALL SCREENS (Fixes the protrusion under 410px) --- */
@media (max-width: 410px) {
  .aWrap {
    padding: 10px 12px; /* Shrink internal left/right padding to give elements room */
    gap: 0.5rem;        /* Tighten gaps between items */
  }

  .aCron {
    font-size: 12px;    /* Marginally scale down the time font sizes */
    margin: 0 4px;
  }

  .range {
    min-width: 50px;    /* Forces the seek bar to compress rather than push items out */
  }
}

/* Style for the Custom Download Button */
.aDownload {
  color: #ffffff;
  font-size: 22px; /* Slightly larger so the arrow is easy to tap */
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  user-select: none;
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 0 5px;
  line-height: 1;
}

.aDownload:hover {
  color: #5adbb5; /* Matches your subtitle highlight color on hover */
  transform: translateY(1px);
}

/* Adjust layout on ultra-small mobile screens so it stays nicely aligned */
@media (max-width: 410px) {
  .aDownload {
    font-size: 18px;
    padding: 0 2px;
  }
}