/* Basic styling for the webpage */
body {
    margin: 0; /* Remove default browser margin */
    padding: 0; /* Remove default browser padding */
    height: 100%; /* Ensure body occupies full viewport height */
    background-size: cover; /* Scale background image to cover entire area */
    background-position: center; /* Center the background image */
    overflow: auto; /* Enable scrolling if content overflows */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack child elements vertically */
    align-items: center; /* Center align items horizontally */
    justify-content: flex-start; /* Align items at the top */
    font-family: 'Roboto', Arial, sans-serif; /* Set font style */
    position: relative; /* Establish a containing block for absolute positioning */
    background-color: #000; /* Set black background color */
    transition: background-image 0.5s ease-in-out; /* Smooth transition for background image changes */
}

/* Styling for the "Now Playing" section */
#now-playing {
    position: relative; /* Establish containing block for positioned children */
    overflow: hidden; /* Clip overflow content */
    text-align: center; /* Center-align text */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally */
    color: white; /* Set text color to white */
    background: rgba(0, 0, 0, 0.75); /* Semi-transparent background */
    padding: 10px; /* Add padding around content */
    border-radius: 15px; /* Round container corners */
    margin: 20px; /* Add space around the container */
    max-width: 600px; /* Set maximum width */
    width: calc(100% - 20px); /* Ensure container fits within viewport width */
    box-sizing: border-box; /* Include padding and border in width/height */
    z-index: 1; /* Position above background elements */
    min-height: 400px; /* Ensure consistent height during loading */
}

#now-playing h1 {
    position: relative; /* Ensure it respects parent block */
    margin-top: 10px; /* Move up by 10px */
    font-family: 'Audiowide', cursive; /* Keep original styles */
    font-size: 2.5em;
    text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
    animation: glow 1.8s infinite alternate;
}

@keyframes progress-circle {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 600px) {
    #circular-loader {
        width: 50px;
        height: 50px;
    }
}

/* Flexbox centering for loader */
/* Fix visibility and layering of the loader */

#loader-container {
    position: absolute; /* Ensure loader is independent */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Center fully */
    display: flex; /* Flexbox for alignment */
    justify-content: center;
    align-items: center;
    z-index: 10; /* Ensure it is above other elements */
}


/* Styling for the visualizer canvas */
#audio-visualizer {
    position: absolute; /* Position relative to parent */
    top: -18px; /* Align to top of parent */
    left: 0; /* Align to left of parent */
    width: 100%; /* Full width */
    height: 135px; /* Set height of visualiser */
    z-index: 2; /* Layer below text elements */
    pointer-events: none; /* Prevent interaction with canvas */
}

/* Heading text above visualizer */
h1 {
    position: relative; /* Position relative to containing block */
    z-index: 3; /* Ensure text appears above visualizer */
}

/* Wrapper for track information and album art */
.content-wrapper {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center align children horizontally */
    width: 90%; /* Set wrapper width */
    z-index: 4; /* Ensure text appears above visualizer */
}

/* Styling for the album art */
#album-art-link {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center link horizontally */
    width: 100%; /* Full width */
    font-size: 1.5em; /* Set font size */
    font-weight: bold; /* Make text bold */
}

#album-art {
    max-width: 80%; /* Restrict image width */
    height: auto; /* Maintain aspect ratio */
    margin-top: 20px; /* Add space above image */
    border-radius: 10px; /* Round image corners */
    display: none; /* Hide image by default */
    transition: transform 0.3s ease-in-out; /* Smooth transition for scaling */
}

/* Styling for the track info text */
#track-info {
    font-size: 1.5em; /* Set font size */
    font-weight: bold; /* Make text bold */
    margin-top: -10px; /* Add space above text */
	top: -10px
}

/* Styling for the lyrics button */
#lyrics-button {
    font-size: 1.2em; /* Set font size */
    padding: 10px 20px; /* Add padding inside button */
    margin-top: 20px; /* Add space above button */
    border: none; /* Remove border */
    border-radius: 5px; /* Round button corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    display: none; /* Hide button by default */
    background-color: #0ff; /* Set background color */
    color: #000; /* Set text color */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

#lyrics-button:hover {
    background-color: #00ccff; /* Change background color on hover */
}

/* Styling for the lyrics container */
#lyrics-container {
    font-family: 'Roboto', Arial, sans-serif; /* Set font style */
    font-size: 1.0em; /* Set font size */
    line-height: 1.0em; /* Set line height */
    text-align: center; /* Center-align text */
    margin-top: 20px; /* Add space above container */
    color: #fff; /* Set text color */
    background: rgba(0, 0, 0, 0.75); /* Semi-transparent black background */
    padding: 20px; /* Add padding inside container */
    border-radius: 15px; /* Round container corners */
    max-width: 600px; /* Set maximum width */
    width: calc(100% - 20px); /* Ensure container fits within viewport width */
    display: none; /* Hide container by default */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    max-height: 300px; /* Set maximum height */
}

/* Styling for the live counter text */
#live-counter {
    margin-top: 20px; /* Add space above text */
    font-size: 1.5em; /* Set font size */
    color: #0ff; /* Set text color */
    animation: glow 1.5s infinite alternate; /* Apply glow animation */
}

/* Keyframe animations */
@keyframes pulse {
    0% {
        transform: scale(1); /* Initial scale */
    }
    50% {
        transform: scale(1.6); /* Slightly larger scale */
    }
    100% {
        transform: scale(1); /* Back to original scale */
    }
}

@keyframes glow {
    0% {
        text-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff; /* Initial glow */
    }
    100% {
        text-shadow: 0 0 20px #0ff, 0 0 30px #0ff, 0 0 40px #0ff; /* Stronger glow */
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg); /* Initial position */
    }
    100% {
        transform: rotate(360deg); /* Full rotation */
    }
}

/* Styling for the "More Info" button */
#more-info-button {
    font-size: 1.2em; /* Set font size */
    padding: 10px 20px; /* Add padding inside button */
    margin-top: 0px; /* Add space above button */
    border: none; /* Remove border */
    border-radius: 5px; /* Round button corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    background-color: #0ff; /* Set background color */
    color: #000; /* Set text color */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

#more-info-button:hover {
    background-color: #00ccff; /* Change background color on hover */
}

/* Styling for the "More Info" container */
#more-info-container {
    font-family: 'Roboto', Arial, sans-serif; /* Set font style */
    text-align: center; /* Center-align text */
    margin-top: 20px; /* Add space above container */
    color: #fff; /* Set text color */
    background: rgba(0, 0, 0, 0.75); /* Semi-transparent black background */
    padding: 20px; /* Add padding inside container */
    border-radius: 15px; /* Round container corners */
    max-width: 600px; /* Set maximum width */
    width: calc(100% - 20px); /* Ensure container fits within viewport width */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    box-sizing: border-box; /* Include padding and border in width/height */
    max-height: 0; /* Start collapsed */
    opacity: 0; /* Fully transparent initially */
    visibility: hidden; /* Ensure it's hidden from screen readers */
    transition: max-height 1s ease, opacity 1s ease, visibility 1s; /* Smooth transition */
}

/* Expanded state for the "More Info" container */
#more-info-container.open {
    max-height: 2000px; /* Adjust to the expected content height */
    opacity: 1; /* Fully visible */
    visibility: visible; /* Make it visible to screen readers */
}

/* Optional fallback if you still want to use the `hidden` class */
#more-info-container.hidden {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
}

/* Styling for mobile devices */
@media (max-width: 600px) {
    #lyrics-container {
        font-size: 1em; /* Adjust font size for smaller screens */
        padding: 15px; /* Adjust padding */
        line-height: 1.4em; /* Increase line height for readability */
    }
}

/* Styling for the lyrics button */
#lyrics-button {
    margin-top: 20px;
}

:root {
    --primary-color: #0ff;
    --secondary-color: #00ccff;
    --text-color: #fff;
    --background-color: #000;
    --font-family: 'Roboto', Arial, sans-serif;
}


/* Styling for the loading bar and text "LOADING" */
#loader-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    background: none;
}

#loading-bar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
	margin-top: 25x; 
}

#loading-text {
    color: #0ff;
    font-family: 'Audiowide', cursive;
    font-size: 1.6em;
    letter-spacing: 0.2em;
    margin-bottom: 0px;
    text-shadow: 0 0 8px #0ff, 0 0 16px #00f;
    animation: pulse 1.2s infinite alternate;
}

#loading-bar {
    display: flex;
    gap: 5px;
    height: 8px;
    margin-bottom: 0px;
}

.loading-segment {
    width: 18px;
    height: 100%;
    border-radius: 4px;
    background: rgba(0,255,255,0.18);
    box-shadow: 0 0 4px #0ff8;
    transition: background 0.2s;
}

.loading-segment.filled {
    background: linear-gradient(90deg, #0ff 60%, #00e6e6 100%);
    box-shadow: 0 0 10px #0ff;
}