/* Layout styling */
.jukebox {
    width: 100%;
    max-width: 990px;
    padding: 10px;
    box-sizing: border-box;
    border-left: 1px dashed #000;
    border-right: 1px dashed #000;
    flex-grow: 0;
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


.player-controls {
  display: flex;
  flex-direction: row; 
  align-items: stretch;
}

.audio-container {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0; /* VERY IMPORTANT in flexbox to allow shrinking inside a flex item */
} 

.player-buttons {
  flex-shrink: 0;
}

.audio-container audio,
.audio-container .plyr { /* Target both the audio element and the Plyr container */
  width: 100%; /* Make audio player and its Plyr container expand to full width of its container */
}

.search-and-sort-layout {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
  align-items: stretch;
  flex-wrap: wrap;
  gap: 5vw;
  margin-top: 20px;
}
.search-component {
  flex-grow: 1; /* Allows search-component to take up available space */
  flex-shrink: 0;
  min-width: 0;
}

.list-order {
  flex-grow: 0; /* Prevents list-order from growing */
  flex-shrink: 0;
  min-width: 0;
  margin-left: auto; /* Pushes list-order to the far right */
}

.solid-block {
  background-color: #353434; /* Example background color */
  padding: 10px;
  border-radius: 5px;
  color: #fff; /* Text color for better contrast */
}

.solid-row {
  padding: 8px 12px; 
  margin: 4px 0; 
  background-color: #e0e0e0;
  border-radius:4px;
  color:black
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 540px) {

  .jukebox {
    width: 95vw;       /* Viewport width */
    max-width: 95vw;   /* Prevent 990px limit */
    padding: 0;
    border-left: none;
    border-right: none;
        box-sizing: border-box;
  }

  .search-and-sort-layout {
    flex-direction: column;
    gap: 16px;
    align-items: center; /* Center items horizontally when in column layout */
  }

  .list-order { /* Add this new rule */
    margin-left: 0; /* Override the auto margin to allow centering by parent */
  }

}