/* Simple Floating Navigation Styles */

/* Button styles */
#floating-nav-toggle {
    position: fixed !important;
    z-index: 99999 !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1e293b, #334155) !important;
    border: 2px solid white !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: grab !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
    
    /* Mobile-specific improvements */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#floating-nav-toggle:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

#floating-nav-toggle:active {
    cursor: grabbing !important;
    transform: scale(0.95) !important;
}

.toggle-icon {
    font-size: 1.5rem !important;
    color: white !important;
    font-weight: bold !important;
}

/* Menu styles - Allow JavaScript control */
.floating-nav-menu {
    position: fixed !important;
    z-index: 100000 !important;
    display: none; /* Remove !important to allow JS control */
    flex-direction: column !important;
    gap: 0.3rem !important;
    background: rgba(255, 255, 255, 0.95) !important; /* More visible background */
    backdrop-filter: blur(10px) !important; /* More blur for better visibility */
    border-radius: 12px !important; /* Larger radius */
    padding: 0.6rem !important; /* More padding */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important; /* More visible shadow */
    border: 2px solid rgba(255, 255, 255, 0.3) !important; /* More visible border */
    min-width: 200px !important; /* Increased for longer names */
    max-width: 250px !important; /* Increased for longer names */
    max-height: 60vh !important; /* Increased height */
    overflow-y: auto !important;
    transition: all 0.3s ease !important; /* Slower transition */
    opacity: 0; /* Remove !important to allow JS control */
    visibility: hidden; /* Remove !important to allow JS control */
}

/* Menu items */
.floating-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.5rem 0.8rem !important; /* More padding */
    border-radius: 8px !important; /* Larger radius */
    text-decoration: none !important;
    color: #1f2937 !important; /* Darker text */
    font-size: 0.8rem !important; /* Slightly smaller for longer text */
    font-weight: 500 !important; /* Medium weight */
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    min-height: 40px !important; /* Larger height */
    line-height: 1.3 !important; /* Better line height for readability */
    word-wrap: break-word !important; /* Allow text to wrap */
}

.floating-nav-item:hover {
    background: rgba(59, 130, 246, 0.15) !important; /* More visible hover */
    transform: translateX(3px) !important;
    color: #1d4ed8 !important; /* Blue text on hover */
}

.floating-nav-item:active {
    transform: translateX(1px) scale(0.98) !important;
    background: rgba(59, 130, 246, 0.2) !important;
}

.sport-icon {
    font-size: 1.1rem !important; /* Larger icon */
    filter: none !important;
    flex-shrink: 0 !important; /* Prevent icon from shrinking */
    display: flex !important; /* Use flexbox for better alignment */
    align-items: center !important; /* Center vertically */
    justify-content: center !important; /* Center horizontally */
    width: 1.2rem !important; /* Fixed width for consistent alignment */
    height: 1.2rem !important; /* Fixed height for consistent alignment */
    line-height: 1 !important; /* Reset line height for icons */
    margin-top: 0 !important; /* Remove any top margin */
    margin-bottom: 0 !important; /* Remove any bottom margin */
}

.sport-name {
    font-size: 0.75rem !important; /* Slightly smaller text */
    white-space: normal !important; /* Allow text to wrap */
    font-weight: 500 !important;
    line-height: 1.2 !important; /* Better line height */
    display: flex !important; /* Use flexbox for better alignment */
    align-items: center !important; /* Center vertically */
    flex: 1 !important; /* Take remaining space */
}

/* Scrollbar styling - More visible */
.floating-nav-menu::-webkit-scrollbar {
    width: 4px !important; /* Thicker */
}

.floating-nav-menu::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3) !important; /* More visible */
    border-radius: 2px !important;
}

.floating-nav-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5) !important; /* More visible on hover */
}

.floating-nav-menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 2px !important;
}

/* Dark mode support */
body.dark-mode .floating-nav-menu {
    background: rgba(30, 41, 59, 0.95) !important; /* More visible in dark mode */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important; /* More visible shadow */
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .floating-nav-item {
    color: #e2e8f0 !important;
}

body.dark-mode .floating-nav-item:hover {
    background: rgba(59, 130, 246, 0.2) !important; /* More visible hover */
    color: #93c5fd !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .floating-nav-menu {
        min-width: 180px !important;
        max-width: 220px !important;
        padding: 0.5rem !important;
        gap: 0.25rem !important;
    }

    .floating-nav-item {
        padding: 0.4rem 0.6rem !important;
        min-height: 36px !important;
        font-size: 0.75rem !important;
    }

    .sport-icon {
        font-size: 1rem !important;
    }

    .sport-name {
        font-size: 0.7rem !important;
    }
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    #floating-nav-toggle {
        width: 65px !important;
        height: 65px !important;
        
        /* Better mobile positioning */
        right: 20px !important;
        bottom: 20px !important;
        
        /* Enhanced mobile visibility */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
        border: 3px solid white !important;
    }
    
    .toggle-icon {
        font-size: 1.8rem !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    #floating-nav-toggle {
        /* Larger touch target */
        width: 70px !important;
        height: 70px !important;
        
        /* Better touch feedback */
        transition: all 0.15s ease !important;
    }
    
    #floating-nav-toggle:active {
        transform: scale(0.95) !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
    }
}

/* Mobile-specific menu styles */
@media (max-width: 768px) {
    .floating-nav-menu {
        /* Better mobile positioning */
        right: 20px !important;
        bottom: 100px !important;
        
        /* Mobile-optimized sizing */
        min-width: 180px !important;
        max-width: 220px !important;
        max-height: 50vh !important;
        
        /* Enhanced mobile visibility */
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
        border: 2px solid rgba(59, 130, 246, 0.2) !important;
        
        /* Better mobile padding */
        padding: 0.8rem !important;
        gap: 0.4rem !important;
    }
}

/* Touch device menu optimizations */
@media (hover: none) and (pointer: coarse) {
    .floating-nav-menu {
        /* Larger touch targets */
        gap: 0.5rem !important;
        padding: 1rem !important;
    }
}