/* Import Google Fonts for a more modern look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
/* Inter is a good choice for modern UIs */

:root {
    /* Main brand colors - kept from your original */
    --primary-color: #9B30FF; /* Deep Purple */
    --secondary-color: #FFD700; /* Gold */

    /* Grayscale palette for backgrounds and text */
    --background-dark: #0A0A0A; /* Deeper dark for overall background */
    --card-background: #1A1A1A; /* Slightly lighter for cards/elements */
    --text-light: #E0E0E0; /* Soft white for general text */
    --text-muted: #B0B0B0; /* Lighter grey for secondary text */
    --border-color: rgba(255, 255, 255, 0.1); /* Subtle border for separation */

    --border-radius-card: 20px; /* More rounded corners for cards */
    --border-radius-button: 12px; /* Slightly less rounded for buttons */
    --bottom-player-height: 90px; /* Increased height for better player visibility */
    --sidebar-width: 280px; /* Slightly wider sidebar for more content */

    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.4); /* Softer, spread-out shadow */
    --shadow-deep: 0 8px 30px rgba(0, 0, 0, 0.6); /* Deeper shadow for prominent elements */
}

/* Universal box-sizing for consistent layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif; /* Apply the new font */
    background-color: var(--background-dark); /* Deeper background */
    color: var(--text-light); /* Soft white text */
    min-height: 100vh;
    display: flex; /* Flexbox for sidebar layout */
    overflow: hidden; /* Prevent body scroll when sidebar is open */
    -webkit-font-smoothing: antialiased; /* Better font rendering on macOS/iOS */
    -moz-osx-font-smoothing: grayscale; /* Better font rendering on macOS/iOS */
}

/* Main Content Area */
#main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px; /* Overall padding */
    padding-bottom: calc(20px + var(--bottom-player-height)); /* Space for bottom player */
    transition: transform 0.3s ease-in-out; /* Smooth transition for sidebar open/close */
    position: relative;
    overflow-y: auto; /* Allow content to scroll if it exceeds screen height */
}

/* When sidebar is open, push main content */
body.sidebar-open #main-content {
    transform: translateX(var(--sidebar-width));
}

/* Header & Logo */
header {
    text-align: center;
    margin-bottom: 30px; /* More space below header */
    padding-top: 20px; /* Padding from top for the content scroll */
    position: relative; /* For the hamburger menu */
    width: 100%;
    max-width: 400px; /* Keep consistent width with player card */
}

header img {
    width: 130px; /* Slightly larger logo */
    height: 130px;
    border-radius: 50%;
    border: 3px solid var(--secondary-color); /* Thinner border */
    box-shadow: 0 0 20px rgba(155, 48, 255, 0.5); /* More vibrant shadow */
    object-fit: cover; /* Ensure image covers the area */
}

/* Hamburger Menu Button */
.hamburger-menu {
    position: fixed; /* Fixed position */
    top: 25px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
    background: var(--primary-color);
    color: var(--text-light);
    border: none;
    font-size: 1.8rem;
    padding: 10px 15px; /* Slightly larger padding */
    border-radius: var(--border-radius-button);
    cursor: pointer;
    z-index: 1001; /* Above everything but sidebar */
    box-shadow: var(--shadow-soft);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hamburger-menu:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black); /* Slightly darker on hover */
    transform: scale(1.05);
}

/* Player Card - Main content area */
.player-card {
    background: var(--card-background); /* Lighter dark background for card */
    border-radius: var(--border-radius-card); /* More rounded corners */
    padding: 30px; /* Generous padding */
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: var(--shadow-deep); /* Deeper shadow for prominence */
    backdrop-filter: blur(8px); /* Stronger blur for glassmorphism effect */
    border: 1px solid var(--border-color); /* Subtle border */
    margin-bottom: 30px; /* Space before social icons/footer */
}

h3 {
    color: var(--secondary-color); /* Gold for headings */
    margin-bottom: 15px; /* More space below heading */
    font-weight: 600; /* Semibold */
    font-size: 1.3rem; /* Slightly larger */
}

/* Slider Container */
.slider-container {
    width: 100%;
    max-width: 360px; /* Slightly smaller to fit within card padding */
    overflow: hidden;
    border-radius: var(--border-radius-card); /* Match card radius */
    margin-bottom: 25px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); /* Subtle gold shadow */
    border: 1px solid var(--border-color); /* Subtle border */
}

.slider {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother animation */
    width: 300%; /* For 3 slides */
}

.slider img {
    width: 100%;
    height: 180px; /* Consistent height */
    object-fit: cover;
    display: block; /* Remove extra space below image */
}

/* Now Playing Text */
.now-playing {
    font-size: 1.3rem; /* Slightly larger */
    font-weight: 700; /* Bold */
    margin-bottom: 25px; /* More space */
    color: var(--text-light); /* Main text color */
    text-shadow: 0 0 8px rgba(155, 48, 255, 0.4); /* Softer glow */
}

/* Social Icons */
.social-icons {
    margin-top: 30px; /* More space above */
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between icons */
}

.social-icons a {
    display: inline-block; /* Ensure clickable area is correct */
}

.social-icons img {
    width: 45px; /* Slightly larger icons */
    height: 45px;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); /* Gold glow */
    border: 2px solid var(--secondary-color); /* Add a thin border */
}

.social-icons img:hover {
    transform: translateY(-5px) scale(1.1); /* Lift and grow effect */
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.6); /* More prominent shadow on hover */
}

/* Footer */
footer {
    margin-top: auto; /* Pushes footer to the bottom of #main-content */
    padding-top: 20px;
    font-size: 0.85rem;
    color: var(--text-muted); /* Muted color for copyright */
    text-align: center;
}

/* Sidebar Menu */
#sidebar {
    width: var(--sidebar-width);
    background-color: var(--card-background); /* Consistent with card background */
    color: var(--text-light);
    position: fixed;
    height: 100%;
    left: 0;
    top: 0;
    transform: translateX(-100%); /* Hidden by default */
    transition: transform 0.3s ease-in-out;
    z-index: 1000; /* Below hamburger, above main content */
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.6); /* Deeper shadow */
    padding: 30px 20px; /* More padding */
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color); /* Subtle border */
}

#sidebar.open {
    transform: translateX(0);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px; /* More space */
    border-bottom: 1px solid var(--border-color); /* Separator */
    padding-bottom: 15px;
}

.sidebar-header h3 {
    color: var(--primary-color); /* Primary color for sidebar title */
    font-size: 1.6rem; /* Larger title */
    font-weight: 700;
    margin: 0;
}

#closeSidebarBtn {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 2.5rem; /* Larger close button */
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease, transform 0.2s ease;
}

#closeSidebarBtn:hover {
    color: var(--secondary-color); /* Gold on hover */
    transform: rotate(90deg); /* Little animation */
}

.sidebar-links {
    list-style: none;
    padding: 0;
    flex-grow: 1; /* Pushes footer to bottom of sidebar */
}

.sidebar-links li {
    margin-bottom: 12px; /* Less space between links */
}

.sidebar-links a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 1.1rem;
    display: block;
    padding: 12px 15px; /* More padding for larger clickable area */
    border-radius: var(--border-radius-button);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sidebar-links a:hover {
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent); /* Light primary tint */
    color: var(--secondary-color);
    transform: translateX(5px); /* Slide effect on hover */
}

/* Bottom Bar Player */
#bottom-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--bottom-player-height);
    background: linear-gradient(to right, #111111, #222222); /* Subtle gradient for depth */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.7); /* Stronger shadow upwards */
    z-index: 1000; /* Above main content */
    border-top: 1px solid var(--primary-color); /* Stronger brand border */
}

.player-info {
    display: flex;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
    margin-right: 15px; /* Space before controls */
}

.player-thumbnail {
    width: 60px; /* Larger thumbnail */
    height: 60px;
    border-radius: 12px; /* Rounded rectangle */
    margin-right: 15px;
    object-fit: cover;
    border: 2px solid var(--secondary-color); /* Gold border */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.player-title {
    font-weight: 700; /* Bold */
    color: var(--secondary-color); /* Gold for title */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2rem; /* Larger font */
    margin-right: 10px;
}

.player-artist {
    color: var(--text-muted); /* Muted for artist info */
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-controls {
    flex-shrink: 0; /* Don't shrink controls */
}

#bottomPlayBtn {
    background: var(--primary-color);
    border: none;
    border-radius: 50%; /* Circular button */
    width: 60px; /* Larger play button */
    height: 60px;
    font-size: 28px; /* Larger icon */
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(155, 48, 255, 0.6); /* Stronger primary shadow */
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#bottomPlayBtn:hover {
    transform: scale(1.1);
    background-color: color-mix(in srgb, var(--primary-color) 80%, black); /* Slightly darker on hover */
}

/* Hide the old custom player if it's still in the HTML */
.custom-player {
    display: none;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    body.sidebar-open #main-content {
        transform: translateX(var(--sidebar-width)); /* Ensure content shifts */
    }
}

@media (max-width: 600px) {
    :root {
        --bottom-player-height: 80px;
        --sidebar-width: 230px;
    }

    .hamburger-menu {
        top: 15px;
        left: 15px;
        font-size: 1.5rem;
        padding: 8px 12px;
    }

    #sidebar {
        padding: 20px 15px;
    }

    .sidebar-header {
        margin-bottom: 30px;
    }

    .sidebar-header h3 {
        font-size: 1.4rem;
    }

    #closeSidebarBtn {
        font-size: 2rem;
    }

    .player-card {
        padding: 25px;
        border-radius: 15px;
    }

    header img {
        width: 110px;
        height: 110px;
    }

    h3 {
        font-size: 1.2rem;
    }

    .now-playing {
        font-size: 1.1rem;
    }

    .slider img {
        height: 160px;
    }

    .social-icons {
        gap: 15px;
    }

    .social-icons img {
        width: 40px;
        height: 40px;
    }

    #bottom-player-bar {
        padding: 0 15px;
        height: var(--bottom-player-height);
    }

    .player-thumbnail {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }

    .player-title {
        font-size: 1rem;
    }

    .player-artist {
        font-size: 0.85rem;
        /* Potentially hide on very small screens if space is tight */
        display: block; /* Keep it, but might wrap or truncate */
    }

    #bottomPlayBtn {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

@media (max-width: 380px) {
    .player-card {
        padding: 20px;
    }
    .player-title {
        font-size: 0.9rem;
    }
    .player-artist {
        display: none; /* Hide artist name on very small screens */
    }
}