/* Global Styles */
body {
    background-color: #000;
    color: #eee;
    font-family: 'Courier New', Courier, monospace; /* Typewriter-like font */
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
}

#logo {
    max-width: 500px;
    height: auto;
    margin: 70px 0;
}

main {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem 20px 1rem; /* Reduced bottom padding to 20px */
}

/* Song List styles (for Milestone 2) */
.song-list {
    list-style: none;
    padding: 0;
}

.song-item {
    display: flex;
    align-items: center;
    padding: 15px 15px 5px 15px;
    border-bottom: 1px solid #222;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.song-item:first-child {
    border-top: 1px solid #222;
}

.song-item:hover {
    background-color: #0a0a0a;
}

.song-item.selected {
    background-color: #1a1a1a;
    border-color: #444;
}

.song-image {
    width: 140px;
    height: 140px;
    object-fit: cover;
    margin-right: 20px;
    background-color: #111;
}

.song-title {
    flex-grow: 1;
    font-size: 1.3rem;
    font-weight: 500;
}

.song-controls {
    border-top: 1px dashed #333;
    padding-top: 15px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

.song-description {
    color: #929ba2; /* Approx 15% lighter than standard Bootstrap text-secondary (#6c757d) */
}

/* Button Glyph Styling and Centering */
.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 0 0;
    min-width: 32px; /* Changed width to min-width */
    height: 32px;
}

.btn-sm i {
    font-size: calc(1rem + 4px); /* Increase glyphs by 4px from base 1rem */
}


.simple-play-btn.playing {
    background-color: #eee;
    color: #000;
}

.song-item.selected .song-controls {
    max-height: 200px; /* Adjust based on content */
    opacity: 1;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

/* Custom range styling for dark theme */
input[type=range].form-range::-webkit-slider-runnable-track {
    background-color: #333;
}

input[type=range].form-range::-webkit-slider-thumb {
    background-color: #eee;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #111;
    border-top: 1px solid #333;
    padding: 10px 0;
    margin-top: 0;
    z-index: 1000;
}

.footer-bottom {
    display: none; /* Hide standard footer bottom in fixed player view */
}

/* Add a separate class for when we want the full footer (e.g., if there's a scrollable bottom) */
.full-footer {
    position: static;
    display: block;
    margin-top: 0; /* Removed margin-top to achieve 20px gap from main padding */
    padding-bottom: 120px; /* Added padding-bottom to clear the fixed footer */
}

.footer-player {
    max-width: 900px;
    margin: 0 auto;
}

.volume-icon {
    font-size: calc(1.2rem + 4px); /* Increase by 4px from original 1.2rem */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#current-song-info {
    font-style: italic;
    min-width: 200px;
}

.song-time, .song-duration {
    min-width: 50px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 576px) and (orientation: portrait) {
    .song-duration {
        display: none !important;
    }
}

a {
    color: #eee;
    text-decoration: underline;
}

a:hover {
    color: #fff;
}