/* src/global-ui-styles.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

body, html {
    margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; 
    font-family: 'Inter', sans-serif; color: white; 
}

#persistent-ui-navigation {
    position: fixed; bottom: 52px; left: 44px; z-index: 1000; 
    display: flex; align-items: center; gap: 24px; 
    padding: 16px 16px 16px 32px; border-radius: 44px;
    
    /* GLASS MORPHISM EFFECT */
    background: rgba(255, 255, 255, 0.05); /* Fill: 5% White */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Stroke: 20% White */
    backdrop-filter: blur(14.8px); 
}

#nav-logo {
    font-weight: 600; font-size: 28px; color: #FFFFFF; cursor: default; /* No modal */
}

#nav-button-group {
    display: flex; gap: 8px; 
}

#nav-button-group button {
    padding: 12px 20px; cursor: pointer; border: 1px solid transparent; 
    background: transparent; border-radius: 44px; outline: none; display: flex; 
    align-items: center; justify-content: center; transition: all 0.1s ease; 
}

/* ICON STYLING */
.nav-icon {
    width: 16px; height: 16px; transition: transform 0.1s ease; 
}
.prev-icon { transform: scaleX(-1); }

/* BUTTON STATES */
#nav-button-group button {
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
}
#nav-button-group button:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3);
}
#nav-button-group button:active:not([disabled]) {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
}
#nav-button-group button[disabled] {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: not-allowed; opacity: 0.5;
}

/* --- MOBILE OPTIMIZATION: Centering Navigation (FINAL FIX) --- */
@media (max-width: 600px) {

    #persistent-ui-navigation {
        /* OVERRIDE DESKTOP POSITIONING */
        left: 50% !important; 
        
        /* PULL BACK BY HALF ITS WIDTH TO CENTER IT */
        transform: translateX(-50%); 

        /* ADJUST BOTTOM MARGIN (Move it up slightly from the bottom edge) */
        bottom: 24px !important; 
        
        /* CRITICAL: RESET THESE PROPERTIES SO THE COMPACT SIZE REMAINS */
        width: auto !important;
        max-width: none !important;

        /* DO NOT set new padding or gap here! They remain the desktop values (32px/24px/8px). */
    }
}