/* Liquid Glass TabBar Plugin - by Almayo Studio (Almayo Ibrahim) */

@keyframes liquidFlow {
    0%, 100% { 
        background: linear-gradient(45deg, 
            rgba(255,255,255,0.25) 0%, 
            rgba(255,255,255,0.15) 25%, 
            rgba(102,126,234,0.1) 50%, 
            rgba(118,75,162,0.15) 75%, 
            rgba(255,255,255,0.25) 100%);
    }
    50% { 
        background: linear-gradient(225deg, 
            rgba(118,75,162,0.25) 0%, 
            rgba(102,126,234,0.15) 25%, 
            rgba(255,255,255,0.1) 50%, 
            rgba(255,255,255,0.15) 75%, 
            rgba(118,75,162,0.25) 100%);
    }
}

@keyframes glassShine {
    0% { 
        background-position: -200% center; 
    }
    100% { 
        background-position: 200% center; 
    }
}

@keyframes floatingGlow {
    0%, 100% { 
        box-shadow: 
            0 8px 32px rgba(102,126,234,0.2),
            0 4px 16px rgba(255,255,255,0.1),
            inset 0 1px 2px rgba(255,255,255,0.3),
            inset 0 -1px 2px rgba(0,0,0,0.1);
    }
    50% { 
        box-shadow: 
            0 12px 40px rgba(118,75,162,0.25),
            0 6px 20px rgba(255,255,255,0.15),
            inset 0 1px 3px rgba(255,255,255,0.4),
            inset 0 -1px 3px rgba(0,0,0,0.05);
    }
}

@keyframes liquidBubble {
    0%, 100% { 
        transform: translateY(0px) scale(1) rotate(0deg);
    }
    25% { 
        transform: translateY(-2px) scale(1.02) rotate(0.5deg);
    }
    50% { 
        transform: translateY(-1px) scale(1.01) rotate(0deg);
    }
    75% { 
        transform: translateY(-3px) scale(1.03) rotate(-0.5deg);
    }
}

#tabbar-container {
    position: fixed !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 20px !important;
    z-index: 9999 !important;
    
    /* Liquid Glass Base */
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.25) 0%, 
        rgba(255,255,255,0.1) 50%, 
        rgba(102,126,234,0.15) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* Glass morphism borders */
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 24px !important;
    
    /* Advanced shadows for depth */
    box-shadow: 
        0 8px 32px rgba(102,126,234,0.2),
        0 4px 16px rgba(255,255,255,0.1),
        inset 0 1px 2px rgba(255,255,255,0.3),
        inset 0 -1px 2px rgba(0,0,0,0.1);
    
    /* Liquid animation */
    animation: liquidFlow 8s ease-in-out infinite, 
               floatingGlow 6s ease-in-out infinite,
               liquidBubble 4s ease-in-out infinite;
    
    /* Glass reflection effect */
    position: relative;
    overflow: hidden;
}

/* Liquid Glass Shine Effect */
#tabbar-container::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255,255,255,0.3) 50%, 
        transparent 70%);
    animation: glassShine 3s linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Glass reflection overlay */
#tabbar-container::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.4) 0%, 
        rgba(255,255,255,0.1) 30%, 
        transparent 70%);
    border-radius: 24px !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

#tabbar-container .tabbar-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 3 !important;
    
    /* Liquid glass tab styling */
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.3) 0%, 
        rgba(255,255,255,0.1) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 18px !important;
    
    /* Liquid transitions */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    
    color: #333 !important;
    font-weight: 500 !important;
    
    /* Individual tab glow */
    box-shadow: 
        0 4px 20px rgba(102,126,234,0.15),
        0 2px 10px rgba(255,255,255,0.1),
        inset 0 1px 1px rgba(255,255,255,0.4),
        inset 0 -1px 1px rgba(0,0,0,0.05);
}

#tabbar-container .tabbar-item:hover {
    /* Enhanced liquid glass hover */
    background: linear-gradient(135deg, 
        rgba(102,126,234,0.4) 0%, 
        rgba(118,75,162,0.3) 50%,
        rgba(255,255,255,0.2) 100%) !important;
    
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    
    transform: translateY(-5px) scale(1.1) !important;
    
    border: 1px solid rgba(255,255,255,0.6) !important;
    
    /* Enhanced hover glow */
    box-shadow: 
        0 8px 35px rgba(102,126,234,0.4),
        0 4px 20px rgba(118,75,162,0.3),
        0 2px 10px rgba(255,255,255,0.2),
        inset 0 1px 3px rgba(255,255,255,0.6),
        inset 0 -1px 3px rgba(102,126,234,0.1) !important;
    
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

#tabbar-container .tabbar-item:active {
    transform: translateY(-2px) scale(1.05) !important;
    transition: all 0.1s ease !important;
}

#tabbar-container .tabbar-icon {
    font-size: 24px !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
    transition: all 0.3s ease !important;
}

#tabbar-container .tabbar-item:hover .tabbar-icon {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
    transform: scale(1.1) !important;
}

#tabbar-container .tabbar-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.3px !important;
}

/* Responsive liquid glass effects - NO AUTOMATIC LAYOUT CHANGES */
@media (max-width: 768px) {
    #tabbar-container {
        padding: 15px !important;
        gap: 12px !important;
        border-radius: 20px !important;
        /* Layout is controlled by dynamic CSS - don't override */
    }
    
    #tabbar-container .tabbar-item {
        width: 55px !important;
        height: 55px !important;
        border-radius: 16px !important;
    }
    
    #tabbar-container .tabbar-icon {
        font-size: 22px !important;
    }
    
    #tabbar-container .tabbar-label {
        font-size: 10px !important;
    }
}

/* Liquid Glass Accessibility */
@media (prefers-reduced-motion: reduce) {
    #tabbar-container,
    #tabbar-container::before,
    #tabbar-container .tabbar-item {
        animation: none !important;
    }
    
    #tabbar-container .tabbar-item {
        transition: all 0.2s ease !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #tabbar-container {
        background: rgba(255,255,255,0.9) !important;
        border: 2px solid #000 !important;
    }
    
    #tabbar-container .tabbar-item {
        background: rgba(255,255,255,0.8) !important;
        border: 1px solid #000 !important;
        color: #000 !important;
    }
}