/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 40px; /* Match the size of your icon */
    height: 40px;
    margin-right: 10px;
}

.logo-text {
    font-size: 1em;
    color: white;
    font-family: 'Arial', sans-serif;
}

/* Navigation Bar */
nav {
    background-color: #4f2525;
    color: white;
    padding: 10px 20px;
    width: 100%;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
#search-bar {
    padding: 5px;
    font-size: 12px;
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Music Library Styles */
.music-library-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.music-library {
    display: flex;
    flex-direction: column;
    margin: 20px;
    flex: 1;
}



.card img {
    width: 100%;
    border-radius: 8px;
}

.card h3 {
    font-size: 20px;
    margin-top: 10px;
}

/* For hiding playlists when not searched */
.hidden {
    display: none;
}


/* Base Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #121212; /* Spotify's dark theme */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fix the music player to the bottom of the page */
.music-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Add some padding for spacing */
  padding: 10px;
}

/* Adjust the layout of elements within the music player */
.album-info,
.progress-bar-container,
.controls,
.volume-control,
.shuffle-repeat {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Additional styling for specific elements */
#album-cover {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.song-details {
  margin-left: 10px;
}

.time-display {
  width: 50%;
  text-align: center;
}

.volume-control {
  width: 25%;
}

.shuffle-repeat button {
  margin: 0 10px;
}

.controls input[type="range"] {
  margin: 0 10px;
  width: 100px;
}

/* Mobile-Specific Adjustments */
@media (max-width: 768px) {
  .music-player {
    padding: 10px;
    font-size: 12px;
  }

  /* Album Info on top */
  .album-info {
    display: block;
    text-align: center;
    margin-bottom: 10px;
  }

  #album-cover {
    width: 60px;
    height: 60px;
    margin-bottom: 5px;
  }

  .song-details p {
    font-size: 12px;
  }

  #song-title {
    font-size: 16px;
  }

  #song-artist {
    font-size: 12px;
  }

  /* Progress Bar, Controls, Volume, and Shuffle/Repeat on bottom */
  .progress-bar-container,
  .controls,
  .volume-control,
  .shuffle-repeat {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .music-player {
    padding: 8px;
    font-size: 10px;
  }

  #album-cover {
    width: 50px;
    height: 50px;
  }

  #song-title {
    font-size: 14px;
  }

  #song-artist {
    font-size: 10px;
  }

  .controls button {
    font-size: 10px;
  }

  .controls input[type="range"] {
    width: 60px;
  }
}

.music-library-container {
    display: flex;
    gap: 20px; /* Space between the music libraries */
    justify-content: center; /* Centers the container */
}

.music-library {
    width: 33%; /* Each library takes one-third of the container width */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between playlists */
}

/* Mobile View */
@media (max-width: 768px) {
    .music-library-container {
        flex-direction: column; /* Stack libraries vertically */
        align-items: center; /* Center them horizontally */
    }

    .music-library {
        width: 90%; /* Make each library take most of the screen width */
    }
}


.card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Style the song details box */
.song-details {
    max-width: 100px; /* Set the max width */
    white-space: nowrap; /* Prevent wrapping of text */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis (...) when text overflows */
    font-size: 14px; /* Make the font small */
    line-height: 1.2; /* Adjust line height to make it compact */
    text-align: center;
}

/* Style for the file name display */
#file-name {
    max-width: 100%; /* Ensure the container is flexible */
    overflow: hidden; /* Hide any overflowing text */
    white-space: nowrap; /* Prevent text wrapping */
    text-overflow: ellipsis; /* Add ellipsis (...) when the text overflows */
    text-align: left; /* Align the text to the left */
    font-size: 14px; /* Smaller font size for better display */
    padding-left: 10px; /* Optional: Add some padding on the left */
}

/* Make the text inside the song title box smaller */
#song-title {
    font-size: 14px; /* Smaller font size */
    text-overflow: ellipsis; /* Add ellipsis for overflow */
    overflow: hidden; /* Hide overflowing text */
    white-space: nowrap; /* Prevent text from wrapping to the next line */
}

/* Music Library Section */
.music-library {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px;
}

/* Individual sections (Albums, Singles, Playlist) */
.albums, .singles, .playlist {
    display: flex;
    flex-wrap: wrap; /* Ensures cards wrap onto the next line */
    justify-content: flex-start; /* Align cards from the start */
    gap: 20px; /* Space between cards */
}

h2 {
    color: #1db954;
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px; /* Space between title and cards */
}

/* Card styling */
.card {
    min-width: 200px; /* Width of each card */
    flex: 0 0 auto; /* Prevent cards from resizing */
    background-color: #2d2d2d;
    color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
}

/* Card image styling */
.card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

/* Title and text inside the card */
.card h3, .card p {
    text-align: center;
    margin: 10px 0;
}

.card h3 {
    font-size: 18px;
    font-weight: bold;
}

.card p {
    font-size: 14px;
    color: #bbb;
}

/* Hover effect for the card */
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}

.card:hover img {
    transform: scale(1.05);
}

/* Music Player Layout */
.music-player {
    position: fixed;  /* Fixed to the bottom of the screen */
    bottom: 0;  /* Ensure it's at the bottom */
    width: 100%;  /* Full width of the screen */
    padding: 10px 20px;  /* Padding around the content */
    background-color: rgba(0, 0, 0, 0.8);  /* Dark background for the music player */
    color: white;  /* White text color */
    display: flex;  /* Flexbox to align items horizontally */
    justify-content: space-between;  /* Distribute space between elements */
    align-items: center;  /* Vertically center elements */
    max-height: 100px;  /* Limit the height of the player */
    box-sizing: border-box;
}

.music-player2 {
    position: fixed;  /* Fixed to the bottom of the screen */
    bottom: 0;  /* Ensure it's at the bottom */
    width: 100%;
    margin-bottom:70px;  /* Full width of the screen */
    padding: 10px 20px;  /* Padding around the content */
    background-color: rgba(0, 0, 0, 0.8);  /* Dark background for the music player */
    color: white;  /* White text color */
    display: flex;  /* Flexbox to align items horizontally */
    justify-content: space-between;  /* Distribute space between elements */
    align-items: center;  /* Vertically center elements */
    max-height: 100px;  /* Limit the height of the player */
    box-sizing: border-box;
}
/* Album Info Styling */
.album-info {
    display: flex;  /* Use flexbox to place album cover and song details next to each other */
    align-items: center;  /* Center vertically */
}

.album-info img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    object-fit: cover;  /* Ensure the album cover scales properly */
    margin-right: 10px;  /* Space between the album cover and song details */
}

.song-details p {
    font-size: 14px;
    margin: 0;
    overflow: hidden;
}

/* Controls Styling */
.controls {
    display: flex;  /* Horizontally align the controls */
    justify-content: center;  /* Center the controls */
    align-items: center;
}

.controls buttony {

    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.controls buttony:hover {
}

.controls input[type="range"] {
    width: 100px;
    margin: 0 15px;
    cursor: pointer;
    appearance: none;
    background-color: #444;
    height: 5px;
    border-radius: 5px;
    outline: none;
}

.controls input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    background-color: #1db954;
    border-radius: 50%;
    cursor: pointer;
}

.controls input[type="range"]:focus {
    background-color: #1db954;
}

/* Basic Styling for the File Input */
#file-input {
    display: none; /* Hide the default file input */
}

/* Custom button to trigger file input */
#file-label {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}

#file-label:hover {
    background-color: #1ed760; /* Slightly lighter green on hover */
}

/* Playlist items */
#playlist li {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#playlist li:hover {
    background-color: #3a3a3a;
    border-radius: 10px;
}

/* Add a slight animation to the cards on page load */
.card {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Titles */
h2 {
    text-align: center;
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px; /* Space between title and carousel */
}

/* General layout for the carousel */
.carousel-container {
    position: relative;
    width: 80%; /* Width for carousel container */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.carousel {
    display: flex;
    overflow: visible;
    width: 100%; /* Full container width */
    gap: 20px; /* Space between cards */
    transition: transform 0.5s ease-in-out;
}

ul {
  list-style-type: none;
  padding: 0;
}

/* Song List Item */
li {
  margin: 10px 0;
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ae8a8a;
  padding: 8px;
  border-radius: 5px;
}


#volume-bar {
width: 50px;
    margin-left: 10px;

}

#volume-value {
    margin-left: 10px;

}

/* Play Button Styling */
button {
  background-color: green; /* Green */
  color: white;
  border: none;
  padding: 3px 6px;
  font-size: 1em;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
}

button:focus {
  outline: none;
}

/* Play Button (specific) */
button.play-btn {
  background-color: #007bff; /* Blue */
}

button.play-btn:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* Delete Button Styling */
button.delete-btn {
  background-color: #dc3545; /* Red */
  padding: 6px 12px;
  margin-left: 10px;
}

button.delete-btn:hover {
  background-color: #c82333; /* Darker red on hover */
}

/* Audio Player Styling */
audio {
  width: 100%;
  margin-top: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  padding: 5px;
}
/* Playlist section */
#playlist {
    display: flex; /* Align items side by side */
    flex-wrap: wrap; /* Allow wrapping if the items exceed the container width */
    gap: 20px; /* Add spacing between the cards */
    justify-content: center; /* Center the cards within the container */
    padding: 20px; /* Add padding around the playlist section */
}

/* Playlist items */
#playlist li {
    list-style: none;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center;
    justify-content: center;
    margin: 10px;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #2d2d2d; /* Dark background for playlist items */
    border-radius: 10px; /* Rounded corners */
    width: 150px; /* Fixed width for consistency */
    height: auto; /* Adjust height automatically */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    text-align: center; /* Center-align the text */
}

#playlist li:hover {
    background-color: #3a3a3a; /* Slightly lighter color on hover */
    transform: translateY(-5px); /* Subtle upward movement on hover */
}

/* Buttons inside playlist cards */
#playlist li button {
    margin-top: 10px;
    background-color: #1db954; /* Spotify green */
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

#playlist li button:hover {
    background-color: #1ed760; /* Slightly lighter green on hover */
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
    #playlist {
        flex-direction: column; /* Stack items vertically for smaller screens */
        gap: 10px; /* Reduce gap for smaller screens */
    }

    #playlist li {
        width: 100%; /* Make playlist cards take the full width */
    }
}

/* Optional Styling for Playlist Input */
#playlist-name {
  padding: 8px;
  margin-bottom: 10px;
  width: 200px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#upload-btn {
  padding: 8px 12px;
  background-color: #17a2b8; /* Teal */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#upload-btn:hover {
  background-color: #138496;
}

#upload-btn:focus {
  outline: none;
}


/* Carousel Container */
.music-library {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    gap: 20px; /* Space between cards */
    padding: 20px;
    scroll-snap-type: x mandatory; /* Enable snap scrolling */
    scrollbar-width: thin; /* Thinner scrollbar */
}

.music-library::-webkit-scrollbar {
    height: 8px; /* Height of the scrollbar */
}

.music-library::-webkit-scrollbar-thumb {
    background: #1db954; /* Spotify Green scrollbar */
    border-radius: 5px;
}

.music-library::-webkit-scrollbar-track {
    background: #2d2d2d; /* Track color */
}

/* Playlist Card */
.card {
    min-width: 250px; /* Adjust the width of each card */
    flex: 0 0 auto; /* Prevent cards from shrinking */
    background-color: #2d2d2d;
    color: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    scroll-snap-align: start; /* Snap to start of the card */
}

/* Card Hover Effect */
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}

/* Adjust image styling */
.card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.card:hover img {
    transform: scale(1.05);
}

.album-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

#album-cover {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Makes the album cover round */
    object-fit: cover;
    background-color: #f0f0f0; /* Default color background */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#album-cover::before {
    content: '🎵'; /* Default icon for no album cover */
    font-size: 50px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
}