/* styles.css */
:root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --accent-color: #ffffff;
    --card-bg: #1e1e1e;
    --nav-height: 60px;
    --glass-bg: rgba(20, 20, 20, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* Import Montserrat Black as a close alternative to Gotham Black */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    padding-bottom: 100px; /* Space for floating nav */
}

a {
    text-decoration: none;
    color: inherit;
}

/* Navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: var(--nav-height);
    max-width: 1800px; /* Matched to main content */
    margin: 0 auto;
    /* Make header sticky */
    position: sticky; 
    top: 0;
    z-index: 100;
    background-color: var(--bg-color); /* Solid background to cover content */
    transition: transform 0.3s ease-in-out; /* Smooth minimize animation */
}

/* Class to hide header on scroll down */
header.hidden {
    transform: translateY(-100%);
}

.logo {
    /* Logo container */
    display: flex;
    align-items: center;
}

.logo-img {
    max-height: 60px; /* Increased size to compensate for padding */
    width: auto;
    display: block;
}

.header-right {
    display: flex;
    align-items: center;
}

/* Contact Icon */
.contact-icon {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.contact-icon:hover {
    opacity: 1;
}

.contact-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--text-color);
}


/* Hide original top nav items since we're moving them to bottom bar */
header nav ul {
    display: none;
}

/* Layout */
main {
    max-width: 1800px; /* Increased for wider layout */
    margin: 0 auto;
    padding: 20px 10px; /* Reduced side padding */
    min-height: calc(100vh - var(--nav-height) - 60px); /* Footer space */
}

/* Hero Image/Video */
.hero-image {
    width: 100%;
    /* Remove fixed height to let aspect ratio control it, or set a min-height */
    /* height: 500px; Remove this */
    margin-bottom: 40px;
    overflow: hidden;
    border-radius: 8px; /* Subtle rounding */
    position: relative;
    background: #000; /* Fallback */
}

.hero-image img,
.hero-image iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Media Header */
.media-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 20px; /* Reduced top padding since we have image */
    margin-bottom: 20px;
    /* max-width: 1800px; Already inside main */
}

.media-header h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 0;
}

/* Filter Controls */
.filter-container {
    position: relative;
}

.filter-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.filter-btn svg {
    width: 28px;
    height: 28px;
}

.filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 160px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    z-index: 100;
    display: none;
    flex-direction: column;
    margin-top: 8px;
    backdrop-filter: blur(10px);
}

.filter-dropdown.active {
    display: flex;
}

.filter-option {
    background: none;
    border: none;
    color: var(--text-color);
    padding: 12px 20px;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s;
    width: 100%;
}

.filter-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.filter-option.active {
    color: var(--accent-color);
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Mobile Adjustments for Header */
@media (max-width: 700px) {
    .media-header h1 {
        font-size: 1.8rem;
    }
}

.page-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    /* Max 6 columns: Using auto-fill with a min-width that roughly allows 6 items on wide screens */
    /* Or explicitly maxing it out with media queries if we want STRICT 6 columns */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 40px; /* Increased gap from 20px to 40px */
    padding-bottom: 40px;
}

@media (min-width: 1400px) {
    .gallery-grid {
        /* Ensure max 6 columns on very wide screens by adjusting minmax */
        grid-template-columns: repeat(6, 1fr);
    }
}

.gallery-card {
    background: transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: none; /* Controlled by hover effect on children */
}

/* Hidden class for filtering */
.gallery-card.hidden {
    display: none;
}

/* Numbering below thumbnail */
.card-number {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #444; /* Darker color for less contrast (was var(--text-color) at 0.5 opacity) */
    text-align: center;
    font-family: monospace;
}

.thumbnail {
    aspect-ratio: 1 / 1; /* Square thumbnails */
    background-color: #333;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* Hover Effect: Scale DOWN thumbnail smoothly */
.gallery-card:hover .thumbnail {
    transform: scale(0.92);
}

/* Hide Card Info in Grid */
.card-info {
    display: none;
}

/* Badges/Overlays */
.badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255,255,255,0.8);
    z-index: 2;
}

.play-icon::after {
    content: '';
    display: block;
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid white;
    margin-left: 2px;
}

/* Bottom Gradient Blur Overlay */
.bottom-blur-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Adjust height of the blur zone */
    background: linear-gradient(to top, rgba(18,18,18,0.95) 0%, rgba(18,18,18,0.6) 50%, rgba(18,18,18,0) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none; /* Allow clicks to pass through to nav but visual only */
    z-index: 1050; /* Below nav (1100) but above content */
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}


/* Floating Bottom Nav */
.floating-nav {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 700px;
    height: 70px;
    background: var(--glass-bg);
    /* Stronger blur */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 35px; /* Pill shape */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.5), 
        inset 0 1px 0 rgba(255,255,255,0.1);
    z-index: 1100; /* Ensure it is above lightbox (lightbox is 1000) */
    overflow: hidden;
}


/* Gradient blur element behind/around nav if needed, 
   but standard liquid glass is mostly backdrop-filter + subtle border/shadow. 
   Let's enhance the nav itself first. */

.nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
    margin-right: auto;
    padding-right: 20px;
    border-right: 1px solid rgba(255,255,255,0.1);
    height: 40%;
    align-items: center;
    flex-shrink: 0; /* Don't shrink links */
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.6;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.nav-links a:hover, .nav-links a.active {
    opacity: 1;
}

/* Interactive Player in Nav */
.nav-player {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    padding-left: 20px;
    /* Make it visible by default (empty state) */
    opacity: 0.5; 
    transform: translateY(0);
    transition: all 0.3s ease;
    min-width: 0; /* Crucial for flex child truncation */
}

.nav-player.active {
    opacity: 1;
    /* No transform needed if default is 0 */
}

.nav-player-thumb {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05); /* Empty state bg */
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-player-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none; /* Hidden by default until src is set and class added */
}

/* Empty State Icon (Simple abstract square/circle) */
.empty-state-icon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1.5px solid rgba(255,255,255,0.2);
}

.nav-player.active .nav-player-thumb img {
    display: block; /* Show image when active */
}
.nav-player.active .empty-state-icon {
    display: none; /* Hide icon when active */
}

.nav-player-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    min-width: 0; /* Crucial for truncation */
}

.nav-player-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-player-meta {
    font-size: 0.7rem;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    opacity: 0; /* Hidden but keeping space if needed, or use display:none */
    display: none; /* Completely hide as requested */
    font-size: 0.8rem;
    margin-bottom: 80px; /* Clear nav */
}

/* Contact Modal */
#contact-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#contact-modal.active {
    display: flex;
    opacity: 1;
}

.contact-content {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.contact-content h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 300;
}

.contact-content p {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.contact-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.6;
}

.contact-close:hover {
    opacity: 1;
}

/* Lightbox */
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Full height */
    background: rgba(0,0,0,0.95);
    z-index: 1000;
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center; /* Centers content vertically */
    opacity: 0;
    transition: opacity 0.3s ease;
    padding-bottom: 120px; /* Reserve space for floating nav + 60px margin */
    box-sizing: border-box; /* Include padding in height calculation */
}

#lightbox.active {
    display: flex;
    opacity: 1;
}

#lightbox-content {
    max-width: 90vw;
    max-height: calc(100vh - 160px); /* Adjust height to avoid overlapping nav */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#lightbox-content img {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    display: block;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

#lightbox-content iframe {
    max-width: 90vw;
    max-height: calc(100vh - 160px);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    background: #000;
    border-radius: 8px; /* Added border radius to match iframe content */
}

/* Specific styling for video embeds to maintain aspect ratio and responsiveness */
iframe.video-embed {
    width: min(90vw, calc((100vh - 160px) * 1.777)); /* Maintain aspect ratio within constraints */
    aspect-ratio: 16 / 9;
    height: auto;
}

#lightbox-content video {
    border-radius: 8px; /* Added border radius to match video content */
}

#lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    background: none;
    border: none;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 1001;
    line-height: 1;
}

#lightbox-close:hover {
    opacity: 1;
}

/* Responsive */
@media (max-width: 700px) {
    .floating-nav {
        width: 95%;
        /* Keep height fixed on mobile to maintain single row */
        height: 60px; 
        padding: 0 15px;
        /* Removed flex-direction: column to keep row layout */
        flex-direction: row; 
        gap: 15px;
        border-radius: 30px;
        bottom: 20px;
    }
    
    .nav-links {
        border-right: 1px solid rgba(255,255,255,0.1); /* Restore separator */
        border-bottom: none;
        padding-right: 15px;
        padding-bottom: 0;
        width: auto; /* Allow it to shrink/grow as needed */
        justify-content: flex-start;
        height: 50%; /* Half height of bar for separator look */
        gap: 15px;
    }
    
    /* Hide less important links on very small screens if needed, 
       or just let them scroll/wrap? 
       Better to reduce font size slightly */
    .nav-links a {
        font-size: 0.8rem;
    }

    .nav-player {
        width: auto; /* Let flex handle width */
        padding-left: 0;
        flex: 1; /* Take remaining space */
    }
    
    .nav-player-thumb {
        width: 36px; /* Slightly smaller thumb */
        height: 36px;
    }

    .media-header h1 {
        font-size: 1.8rem;
    }
    
    /* Adjust lightbox padding for single row nav */
    #lightbox {
         padding-bottom: 100px; 
    }
}
/* --- Mobile Navigation (App-like behavior) --- */
@media (max-width: 700px) {
    .floating-nav {
        width: 60px;
        height: 60px;
        padding: 0;
        justify-content: center;
        border-radius: 30px;
        transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                    border-radius 0.4s ease,
                    background-color 0.3s ease;
        background: rgba(20, 20, 20, 0.9); /* Slightly darker default */
    }

    .floating-nav.expanded {
        width: 90%;
        max-width: 400px;
        border-radius: 25px;
        justify-content: space-between;
        padding: 0 20px;
        background: var(--glass-bg); /* Back to glass when expanded */
    }

    /* Hide the default links container initially on mobile */
    .nav-links {
        display: none; 
        width: 100%;
        justify-content: space-between;
        border-right: none;
        padding-right: 0;
        height: auto;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    /* Show links when expanded */
    .floating-nav.expanded .nav-links {
        display: flex;
        opacity: 1;
        /* slight delay to allow width to animate first */
        transition-delay: 0.1s; 
    }
    
    .nav-links li {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .nav-links a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 0.7rem;
        color: var(--text-color);
        opacity: 0.5;
        width: 100%;
        padding: 8px 0;
    }
    
    .nav-links a.active {
        opacity: 1;
        color: var(--accent-color);
    }

    .nav-icon {
        display: block; /* Show SVG icons */
        width: 24px;
        height: 24px;
        fill: currentColor;
        margin-bottom: 2px;
    }
    
    .nav-links span {
        display: block; /* Show text labels */
    }

    /* Trigger Icon (Current Page) */
    .current-page-indicator {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: opacity 0.2s ease;
    }
    
    .current-page-indicator svg {
        width: 28px;
        height: 28px;
        fill: var(--accent-color);
    }

    .floating-nav.expanded .current-page-indicator {
        opacity: 0;
        pointer-events: none;
    }

    /* Hide Player in collapsed, maybe show in expanded if needed? 
       For now, user requested "replaced with text... along with icons", implies player is gone or secondary.
       Let's keep player hidden on mobile to match the "app nav" vibe which typically doesn't have a persistent miniplayer IN the nav bar itself 
       when it's a tab bar. 
    */
    .nav-player {
        display: none !important; 
    }
}

/* Desktop overrides (Resetting mobile changes) */
@media (min-width: 701px) {
    .current-page-indicator {
        display: none;
    }
    
    .nav-icon {
        display: none;
    }
    
    .nav-links span {
        display: inline; /* Or block depending on flex settings */
    }
}

/* Styles for Persistent Mini Player + Mobile Nav Interaction */

/* Mobile Player Container - Independent of floating nav for flexibility */
/* We will keep it INSIDE .floating-nav for desktop, but handle it differently on mobile */

@media (max-width: 700px) {
    .floating-nav {
        /* Allow height to grow for 2 rows */
        transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                    height 0.4s ease,
                    border-radius 0.4s ease,
                    background-color 0.3s ease,
                    bottom 0.3s ease;
        flex-direction: column; /* Stack items */
        justify-content: flex-end; /* Align to bottom */
        overflow: visible; /* Allow things to spill if needed, or keep hidden and grow */
    }

    /* Expanded state: 2 rows */
    .floating-nav.expanded {
        /* Height needs to accommodate player + nav links */
        height: 130px; /* 60px nav + 10px gap + 60px player approx */
        border-radius: 25px;
        justify-content: flex-end;
        padding: 15px 20px; /* Padding for internal items */
    }

    /* Mini Player Styling on Mobile */
    .nav-player {
        display: flex !important; /* Force show */
        width: 100%;
        height: 50px; /* Fixed height for player row */
        margin-bottom: 15px; /* Space between player and nav links */
        opacity: 0; /* Hidden in collapsed state */
        pointer-events: none;
        transition: opacity 0.3s ease;
        border-top: none; /* Remove desktop separator if any */
        padding-left: 0;
        transform: translateY(-10px); /* Slide in effect */
    }

    /* Show player when expanded */
    .floating-nav.expanded .nav-player {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
        transition-delay: 0.1s;
    }

    /* Nav Links Row */
    .nav-links {
        /* Existing styles from previous step are mostly fine, 
           but we need to ensure it sits at the bottom */
        height: auto;
        flex-grow: 0;
        margin-top: auto; /* Push to bottom if flex direction is column */
        border-top: 1px solid rgba(255,255,255,0.1); /* Separator between player and links */
        padding-top: 10px;
    }

    /* Current Page Indicator (The FAB button) */
    /* In collapsed state, it's centered. In expanded, it should fade out as before. */
    .current-page-indicator {
        /* Ensure it stays centered in the 60x60 collapsed state */
        top: auto;
        bottom: 0;
        height: 60px; 
    }

    /* Adjust thumbnail size for mobile player */
    .nav-player-thumb {
        width: 36px;
        height: 36px;
    }
    
    .nav-player-info {
        text-align: left;
    }
}


/* --- Mobile Navigation with Persistent Player (Apple Music style) --- */

/* Default state (Collapsed):
   - Shows the mini-player (playbar)
   - Shows the current page icon as the "trigger"
   - The trigger is positioned to the right or overlaying in a way that makes sense?
   
   Actually, user request: "aiming for the same effect that native apple music app has with their bottom nav"
   Apple Music:
   - Bottom: Tab Bar (Home, Browse, Radio, Library, Search) ALWAYS visible.
   - Above Tab Bar: Mini Player floating.
   
   BUT, user previous request was: "instead of having the links... let's make it a home icon... tapping it should allow the bottom nav contents to slide out... replaced with the text... along with the icons."
   AND "I still want the play bar next to the icon in mobile. perhaps once menu is expanded, the playbar will have to shift up and go in the 2nd row."

   So:
   Collapsed State: 
   [  ICON (Trigger)  |  PLAYBAR INFO (Title/Desc) ]  <-- "play bar next to the icon"
   
   Expanded State:
   [       PLAYBAR (Full width/row)       ]
   [  Home  |  360  |  Photo  |  Video    ]

   Let's implement this.
*/

@media (max-width: 700px) {
    .floating-nav {
        width: 90%; /* Start wide enough for player info */
        max-width: 400px;
        height: 60px;
        padding: 0 15px;
        justify-content: flex-start; /* Align items start */
        border-radius: 30px;
        transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                    background-color 0.3s ease;
        flex-direction: column; /* Stack for expanded state, but control via ordering/positioning for collapsed */
        overflow: hidden;
        background: rgba(20, 20, 20, 0.9); 
    }

    .floating-nav.expanded {
        height: 140px; /* Expand height for 2 rows */
        background: var(--glass-bg);
        justify-content: flex-end; /* Push nav links to bottom */
    }

    /* --- Collapsed State Layout --- */
    
    /* 1. The Trigger Icon (Current Page) */
    /* In collapsed: It sits on the LEFT or RIGHT? User said "play bar next to the icon". 
       Let's put Icon Left, Player Info Right. */
    .current-page-indicator {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px; /* Fixed width area for icon */
        height: 40px;
        border-radius: 50%;
        background: rgba(255,255,255,0.1); /* Highlight trigger area */
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s ease;
    }
    
    .floating-nav.expanded .current-page-indicator {
        opacity: 0;
        pointer-events: none;
    }

    /* 2. The Player (Collapsed) */
    /* It sits to the right of the icon */
    .nav-player {
        display: flex !important;
        position: absolute;
        left: 60px; /* 10px padding + 40px icon + 10px gap */
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        height: 40px;
        align-items: center;
        border-top: none;
        padding-left: 0;
        transition: all 0.3s ease;
        opacity: 1;
        margin-bottom: 0;
        pointer-events: auto; /* Re-enable clicks in collapsed state */
    }
    
    .nav-player-thumb {
        width: 32px; /* Smaller thumb in collapsed */
        height: 32px;
        margin-right: 10px;
    }
    
    .nav-player-info {
        flex: 1;
        text-align: left;
    }

    /* --- Expanded State Layout --- */
    
    /* When expanded:
       - Player moves up and takes full width?
       - Icon fades out.
       - Nav links fade in at bottom.
    */
    
    .floating-nav.expanded .nav-player {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        height: 50px; /* Larger in expanded */
        margin-bottom: 10px; /* Space for links */
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 10px;
    }
    
    .floating-nav.expanded .nav-player-thumb {
        width: 40px;
        height: 40px;
    }

    /* Nav Links Container */
    .nav-links {
        display: flex; 
        width: 100%;
        justify-content: space-between;
        border-right: none;
        padding-right: 0;
        height: auto;
        opacity: 0;
        margin-top: auto;
        transition: opacity 0.3s ease;
        pointer-events: none; /* Disable clicks when hidden */
    }
    
    .floating-nav.expanded .nav-links {
        opacity: 1;
        pointer-events: all;
        transition-delay: 0.1s;
    }
    
    .nav-links li {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .nav-links a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        font-size: 0.7rem;
        color: var(--text-color);
        opacity: 0.5;
        width: 100%;
        padding: 8px 0;
    }
    
    .nav-links a.active {
        opacity: 1;
        color: var(--accent-color);
    }

    .nav-icon {
        display: block; /* Show SVG icons */
        width: 24px;
        height: 24px;
        fill: currentColor;
        margin-bottom: 2px;
    }
    
    .nav-links span {
        display: block; /* Show text labels */
    }
}

/* Mobile Fixes */
@media (max-width: 700px) {
    /* 1. Fix Layout Cutoff in Expanded Mode */
    .floating-nav.expanded {
        height: auto; /* Allow it to grow naturally */
        min-height: 160px; /* Minimum height */
        padding-bottom: 25px; /* Ensure bottom items aren't too close to edge */
        padding-top: 15px;
    }

    /* Ensure Nav Links are at the bottom and have space */
    .nav-links {
        margin-top: 20px; /* Force space between player and links */
        padding-bottom: 5px;
    }

    /* 2. Vertical Line & Padding in Collapsed Mode */
    .current-page-indicator::after {
        content: '';
        position: absolute;
        right: -12px; /* Position between icon and player */
        top: 10px;
        bottom: 10px;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.2);
        display: block;
    }
    
    .floating-nav.expanded .current-page-indicator::after {
        display: none; /* Hide in expanded mode */
    }

    /* Adjust player position to accommodate divider */
    .nav-player {
        left: 65px !important; /* Shift right: 10px padding + 40px icon + 15px gap */
        width: calc(100% - 80px) !important; /* Adjust width calculation */
    }
    
    /* Expanded player adjustment */
    .floating-nav.expanded .nav-player {
        left: 0 !important;
        width: 100% !important;
    }

    /* 3. "Select an item" cleanup 
       If there is a stray element, we hide it. 
       But assuming the user means the empty state looks weird or is positioned wrong.
       
       If the user specifically said "above the media H1 text", that is very strange.
       The only way that happens is if `floating-nav` lost its `bottom: 30px` or `position: fixed`.
       
       Let's reinforce the fixed position.
    */
    .floating-nav {
        position: fixed !important;
        bottom: 30px !important;
        z-index: 1100 !important;
    }

    /* Also, let's ensure no other .nav-player exists outside floating-nav by strict selection if possible, 
       but CSS can't delete elements.
       
       If the user sees the "Select an item" text (which is the placeholder), 
       and wants it removed from "above H1", maybe they mean the `hero` section?
       
       If I accidentally pasted a `nav-player` div into the `hero` or `header` in a previous step?
       I checked the HTML read output and didn't see it.
       
       However, maybe they mean the "Select an item" text IN THE NAV BAR is showing up 
       when the nav bar renders in a weird spot on load?
       
       Let's stick to fixing the nav bar layout.
    */
}

/* Final Spacing Adjustments for Mobile Nav */
@media (max-width: 700px) {
    
    /* 1. Indicator (Icon) Positioning - Center in its "column" */
    .current-page-indicator {
        left: 15px !important; /* Consistent left margin */
        width: 40px; /* Icon container */
        justify-content: center;
        /* Icon itself is centered by flex */
    }

    /* 2. Divider Positioning - Centered between Icon and Thumbnail */
    /* Icon ends at 15+40=55px. Divider should be at approx 65-70px */
    .current-page-indicator::after {
        right: -10px; /* 10px from right edge of 40px container = 50px from left. Total 15+50=65px from left of screen */
        top: 12px; /* Reduce height slightly for cleaner look */
        bottom: 12px;
    }

    /* 3. Player Container Positioning */
    /* Needs to start AFTER the divider with some gap.
       Divider is at 65px. 
       Gap 16px -> Start at 81px.
    */
    .nav-player {
        left: 81px !important; /* 15px (left margin) + 40px (icon) + 10px (mid) + 16px (gap) */
        width: calc(100% - 96px) !important; /* Adjust width: 81 + 15(right pad) = 96 */
        padding-left: 0; 
        /* Ensure items inside align nicely */
        gap: 12px; /* Gap between thumbnail and text */
    }

    /* 4. Thumbnail sizing and spacing */
    .nav-player-thumb {
        width: 36px;
        height: 36px;
        margin-right: 0; /* Handled by gap in .nav-player */
        flex-shrink: 0;
    }

    /* 5. Text Info Spacing */
    .nav-player-info {
        padding-right: 15px; /* Space on the right edge */
        gap: 2px; /* Vertical rhythm between title and subtitle */
    }
    
    .nav-player-title {
        font-size: 0.9rem; /* Slightly larger for readability */
        line-height: 1.2;
    }
    
    .nav-player-meta {
        font-size: 0.75rem;
        opacity: 0.6;
        line-height: 1.2;
    }
    
    /* Reset Expanded Mode overrides to ensure they aren't broken by !important above */
    .floating-nav.expanded .nav-player {
        left: 0 !important;
        width: 100% !important;
        padding-left: 0;
        gap: 12px;
    }
}

/* Precision centering for mobile divider */
@media (max-width: 700px) {
    
    /* 1. Indicator (Icon) Positioning */
    /* Container starts at 15px. Width 40px. Ends at 55px. */
    .current-page-indicator {
        left: 15px !important;
        width: 40px;
    }

    /* 2. Divider Positioning */
    /* We want divider at 68.5px (approx 68px).
       Icon End: 55px.
       Divider: 68px.
       Gap Left: 68 - 55 = 13px.
       
       Divider relative to 40px container: 68 - 15 - 40 = 13px outside right.
       So right: -13px.
    */
    .current-page-indicator::after {
        right: -13px; 
    }

    /* 3. Player Positioning */
    /* We want Thumbnail Left at: 68px (divider) + 1px (width) + 13px (gap right) = 82px.
       So left: 82px.
    */
    .nav-player {
        left: 82px !important;
        width: calc(100% - 97px) !important; /* 82 + 15 padding right = 97 */
    }
}

/* Expanded menu styling refinement */
@media (max-width: 700px) {
    /* 1. Remove any top/bottom borders from sub-sections */
    /* Standardize borders */
    .nav-links {
        border-top: none !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 15px !important;
    }
    
    .floating-nav.expanded .nav-player {
        border-bottom: none !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important; /* The single divider */
        margin-bottom: 0 !important;
        padding-top: 15px !important;
        margin-top: 0 !important;
    }

    /* 2. Order adjustment: Links on TOP, Player BELOW */
    .floating-nav.expanded {
        flex-direction: column;
        justify-content: flex-start; /* Start from top */
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* Force order using flex order property just in case */
    .nav-links {
        order: 1;
    }
    
    .nav-player {
        order: 2;
    }
    
    /* Ensure the Divider is centered */
    /* The divider is now border-top of nav-player. 
       We need to ensure margins/paddings are equal above and below it.
    */
}

/* Player Controls */
.player-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}

.control-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, opacity 0.2s;
}

.control-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.control-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.control-btn:disabled,
.control-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Mobile Player Controls */
@media (max-width: 700px) {
    #prev-btn {
        display: none;
    }
    
    .player-controls {
        gap: 0;
        margin-right: 4px;
    }
    
    /* Ensure buttons are touch-friendly but compact */
    .control-btn {
        padding: 6px;
    }
}

/* Hero Poster & Loading State */
.hero-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Above video initially */
    background: #000;
    transition: opacity 1s ease-out;
    pointer-events: none;
}

.hero-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Siri-like Pulsating Border */
.pulsating-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px solid transparent; /* Base border */
    border-radius: 8px; /* Match container */
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(255, 255, 255, 0.5);
    animation: siri-pulse 2s infinite;
    pointer-events: none;
    z-index: 6;
}

/* Define the keyframes for the multicolor siri glow */
@keyframes siri-pulse {
    0% {
        box-shadow: 
            inset 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 10px rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 
            inset 0 0 30px rgba(100, 200, 255, 0.6),
            0 0 30px rgba(200, 100, 255, 0.6); /* Blue/Purple mix */
        border-color: rgba(150, 150, 255, 0.5);
    }
    100% {
        box-shadow: 
            inset 0 0 10px rgba(255, 255, 255, 0.1),
            0 0 10px rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

/* Fade out class */
.hero-poster.fade-out {
    opacity: 0;
}

/* Attempt to remove the default darkening gradient on video hover */
video::-webkit-media-controls-panel {
    background-image: none !important;
    text-shadow: none !important;
}

video::-webkit-media-controls-overlay-play-button {
    display: none !important; /* Hide big center play button if it appears */
}

/* Ensure the control bar itself is still visible but maybe without the full gradient? */
video::-webkit-media-controls-enclosure {
    background: rgba(0, 0, 0, 0.5); /* Simpler background for controls only? */
}

/* New Player Details Wrapper */
.player-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0; /* Important for truncation */
}

.player-track-info {
    display: flex;
    align-items: center;
    gap: 12px; /* Spacing between thumb and info */
    width: 100%;
    min-width: 0;
}

/* Adjust progress container positioning */
.progress-container {
    position: relative; /* Not absolute */
    bottom: auto;
    left: auto;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
    margin-top: 4px; /* Spacing from track info */
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #fff;
    /* Transition handled in JS */
}

/* Mobile Adjustments */
@media (max-width: 700px) {
    /* Ensure player-details behaves correctly in mobile layout */
    .player-details {
        justify-content: center;
    }
    
    /* In expanded mode, we might want more space or different alignment */
    .floating-nav.expanded .player-details {
        justify-content: flex-start;
    }
    
    /* Adjust gap in track info if needed */
    .player-track-info {
        gap: 10px;
    }

    /* Ensure controls and details have correct gap in nav-player */
    .nav-player {
        gap: 12px;
    }
}

/* Fix mobile player interactions */
@media (max-width: 700px) {
    /* Ensure player is interactive in collapsed state */
    .nav-player {
        pointer-events: auto !important; /* Override any previous none */
    }
    
    /* Ensure buttons are clickable and above other elements */
    .player-controls {
        pointer-events: auto;
        z-index: 50; /* Higher than container background */
    }
    
    .control-btn {
        pointer-events: auto; /* Ensure buttons catch events */
        cursor: pointer;
    }
    
    /* Ensure the player details don't block clicks if they overlay controls (shouldn't based on flex) */
    .player-details {
        pointer-events: none; /* Let clicks pass through text area if needed, or auto if text selection allowed */
        /* But wait, if we want to expand on clicking text/thumb? 
           No, user said "only... current page icon... expands".
           So clicking player info shouldn't expand. 
           But it shouldn't block controls either.
        */
        pointer-events: auto; 
    }
}

/* --- Swipe Animation Classes --- */
.slide-out-left {
    transform: translateX(-100px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.slide-out-right {
    transform: translateX(100px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* --- Mobile Player Layout Swap --- */
@media (max-width: 700px) {
    /* Swap Controls to the Right */
    .player-controls {
        order: 2; /* Moves to the right */
        margin-right: 0;
        margin-left: 10px; /* Add space between info and controls */
    }
    
    .player-details {
        order: 1; /* Moves to the left */
        flex: 1;
    }
}